From 57879bf30d601461610f48e702d25ae1a487baca Mon Sep 17 00:00:00 2001
From: cathrkri <cathrkri@stud.ntnu.com>
Date: Wed, 11 Mar 2026 17:55:01 +0100
Subject: [PATCH] update summary in charityPage

---
 .../src/main/resources/fxml/charityPage.fxml  | 91 ++++++++++++++-----
 1 file changed, 68 insertions(+), 23 deletions(-)

diff --git a/helpmehelpapplication/src/main/resources/fxml/charityPage.fxml b/helpmehelpapplication/src/main/resources/fxml/charityPage.fxml
index 9226a95..4339a62 100644
--- a/helpmehelpapplication/src/main/resources/fxml/charityPage.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/charityPage.fxml
@@ -21,7 +21,9 @@
 <?import javafx.scene.shape.Circle?>
 <?import javafx.scene.shape.Rectangle?>
 <?import javafx.scene.text.Font?>
+<?import javafx.scene.paint.Color?>
 
+<?import javafx.scene.effect.DropShadow?>
 <GridPane hgap="0.0"
           prefHeight="900.0"
           prefWidth="1200.0"
@@ -254,17 +256,19 @@
 
                         <Label text="[Charity Name]"
                                style="-fx-text-fill:#2D3C8F;"
-                               GridPane.rowIndex="0">
+                               GridPane.rowIndex="0"
+                               translateX="-280">
                            <font>
-                              <Font name="System Bold" size="42.0" />
+                              <Font name="System Bold" size="62.0" />
                            </font>
                         </Label>
 
                         <Label text="✓ Verified"
                                style="-fx-background-color:#C8E6C0; -fx-background-radius:18; -fx-text-fill:#4E7C3F; -fx-padding:8 16 8 16;"
-                               GridPane.rowIndex="1">
+                               GridPane.rowIndex="1"
+                               translateX="-280">
                            <font>
-                              <Font name="System Bold" size="16.0" />
+                              <Font name="System Bold" size="15.0" />
                            </font>
                         </Label>
 
@@ -295,7 +299,8 @@
                              prefWidth="420.0"
                              style="-fx-background-color:#F5F5F5;"
                              GridPane.columnIndex="1"
-                             GridPane.rowIndex="0">
+                             GridPane.rowIndex="0"
+                             translateX="-70">
 
                      <children>
                         <Rectangle arcHeight="25.0"
@@ -319,29 +324,69 @@
                   <!-- SUMMARY -->
                   <StackPane GridPane.columnIndex="0"
                              GridPane.columnSpan="2"
-                             GridPane.rowIndex="1">
+                             GridPane.rowIndex="1"
+                             translateY="80"
+                             translateX="10">
 
                      <children>
-                        <Rectangle arcHeight="25.0"
-                                   arcWidth="25.0"
+                        <!-- Selve kortet -->
+                        <Rectangle arcHeight="30.0"
+                                   arcWidth="30.0"
+                                   fill="#F5F5F5"
+                                   height="400.0"
+                                   width="780.0"
+                                   stroke="#8B8B8B"
+                                   strokeType="INSIDE">
+                           <effect>
+                              <DropShadow radius="8.0" offsetY="3.0">
+                                 <color>
+                                    <Color red="0.0" green="0.0" blue="0.0" opacity="0.2"/>
+                                 </color>
+                              </DropShadow>
+                           </effect>
+                        </Rectangle>
+
+                        <!-- Tekst -->
+                        <Label text="[Summary about the charity]"
+                               wrapText="true"
+                               maxWidth="720.0"
+                               translateY="-115.0"
+                               translateX="-85.0"
+                               StackPane.alignment="TOP_LEFT">
+                           <font>
+                              <Font size="16.0" />
+                           </font>
+                        </Label>
+
+                        <!-- Scroll track -->
+                        <Rectangle arcHeight="12.0"
+                                   arcWidth="12.0"
                                    fill="#F5F5F5"
                                    height="360.0"
+                                   width="12.0"
                                    stroke="#8B8B8B"
                                    strokeType="INSIDE"
-                                   width="780.0" />
-
-                        <ScrollPane fitToWidth="true"
-                                    prefHeight="340.0"
-                                    prefWidth="760.0"
-                                    style="-fx-background:#F5F5F5; -fx-background-color:#F5F5F5;">
-                           <content>
-                              <TextArea text="[Summary about the charity]"
-                                        wrapText="true"
-                                        prefHeight="340.0"
-                                        prefWidth="760.0"
-                                        style="-fx-background-radius:25; -fx-border-radius:25; -fx-control-inner-background:#F5F5F5; -fx-font-size:16px;" />
-                           </content>
-                        </ScrollPane>
+                                   translateX="460.0"
+                                   translateY="0.0" />
+
+                        <!-- Scroll thumb -->
+                        <Rectangle arcHeight="12.0"
+                                   arcWidth="12.0"
+                                   fill="#E6E6E6"
+                                   height="90.0"
+                                   width="12.0"
+                                   stroke="#4F4F4F"
+                                   strokeType="INSIDE"
+                                   translateX="460.0"
+                                   translateY="-95.0">
+                           <effect>
+                              <DropShadow radius="3.0" offsetY="1.0">
+                                 <color>
+                                    <Color red="0.0" green="0.0" blue="0.0" opacity="0.15"/>
+                                 </color>
+                              </DropShadow>
+                           </effect>
+                        </Rectangle>
                      </children>
                   </StackPane>
 
@@ -350,7 +395,7 @@
                             GridPane.columnSpan="2"
                             GridPane.rowIndex="2"
                             hgap="30.0"
-                            style="-fx-padding: 10 0 0 0;">
+                            style="-fx-padding: 80 0 0 0;">
 
                      <columnConstraints>
                         <ColumnConstraints percentWidth="33.33" />