update[UserPage]: Update Userpage with more visual appealing Javafx d…

…isplay of user account

src/main/java/edu/group5/app/view/userpage/UserPageView.java

@@ -12,12 +12,16 @@
 import javafx.geometry.Pos;
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
+import javafx.scene.control.ScrollPane;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.FlowPane;
 import javafx.scene.layout.HBox;
+import javafx.scene.layout.Priority;
 import javafx.scene.layout.VBox;
 import javafx.scene.text.Text;
+import java.text.SimpleDateFormat;
 
 import java.util.*;
 
@@ -78,41 +82,46 @@ private VBox createCausesSection() {
     Text title = new Text("YOUR SUPPORTED CAUSES");
     title.getStyleClass().add("section-title");
 
-    VBox causesBox = new VBox(10);
-    causesBox.getStyleClass().add("section-box");
-    causesBox.setPadding(new Insets(10));
-
-    User currentUser = appState.getCurrentUser();
+    ScrollPane scrollPane = new ScrollPane();
+    scrollPane.setFitToWidth(true);
+    scrollPane.setStyle("-fx-focus-color: transparent; -fx-faint-focus-color: transparent;");
+
+    FlowPane causesFlow = new FlowPane(10, 10);
+    causesFlow.setStyle("-fx-padding: 10;");
+    causesFlow.getStyleClass().add("section-box");
 
     Set<Integer> uniqueOrgs = donationController.getUniqueOrgs();
 
     if (uniqueOrgs.isEmpty()) {
       Label noCauses = new Label("No causes supported yet");
       noCauses.setStyle("-fx-text-fill: #999;");
-      causesBox.getChildren().add(noCauses);
+      causesFlow.getChildren().add(noCauses);
     } else {
       for (int orgId : uniqueOrgs) {
         Organization org = organizationController.getOrgById(orgId);
         if (org != null) {
-          Label causeLabel = new Label("• " + org.name());
-          causesBox.getChildren().add(causeLabel);
+          causesFlow.getChildren().add(createCauseChip(org));  // SRP: delegate to helper
         }
       }
     }
 
-    return new VBox(10, title, causesBox);
+    scrollPane.setContent(causesFlow);
+    return new VBox(10, title, scrollPane);
   }
 
   private VBox createDonationsSection() {
     Text title = new Text("PREVIOUS DONATIONS");
     title.getStyleClass().add("section-title");
 
-    VBox donationsBox = new VBox(10);
-    donationsBox.getStyleClass().add("section-box");
+    ScrollPane scrollPane = new ScrollPane();
+    scrollPane.setFitToWidth(true);
+    scrollPane.setStyle("-fx-focus-color: transparent; -fx-faint-focus-color: transparent;");
+
+    VBox donationsBox = new VBox(12);
+    donationsBox.getStyleClass().add("donation-list");
     donationsBox.setPadding(new Insets(10));
 
     User currentUser = appState.getCurrentUser();
-
     Map<Integer, Donation> userDonations = donationController.getUserDonations(currentUser.getUserId());
 
     if (userDonations.isEmpty()) {
@@ -121,17 +130,46 @@ private VBox createDonationsSection() {
       donationsBox.getChildren().add(noDonations);
     } else {
       for (Donation donation : userDonations.values()) {
-        Organization org = organizationController.getOrgById(donation.organizationId());
-        String orgName = (org != null) ? org.name() : "Unknown Organization";
-
-        Label donationLabel = new Label(
-            orgName + " • " + donation.amount() + " kr" + " • " + donation.date()
-        );
-        donationsBox.getChildren().add(donationLabel);
+        donationsBox.getChildren().add(createDonationCard(donation));  // SRP: delegate to helper
       }
     }
 
-    return new VBox(10, title, donationsBox);
+    scrollPane.setContent(donationsBox);
+    return new VBox(10, title, scrollPane);
   }
 
+
+  private Label createCauseChip(Organization org) {
+    Label chip = new Label(org.name());
+    chip.getStyleClass().add("cause-chip");
+    return chip;
+  }
+
+  private HBox createDonationCard(Donation donation) {
+    Organization org = organizationController.getOrgById(donation.organizationId());
+    String orgName = (org != null) ? org.name() : "Unknown Organization";
+
+    HBox card = new HBox(20);
+    card.getStyleClass().add("donation-card");
+    card.setPadding(new Insets(12, 15, 12, 15));
+    card.setAlignment(Pos.CENTER_LEFT);
+
+    Text orgText = new Text(orgName);
+    orgText.getStyleClass().add("donation-org-name");
+
+    VBox details = new VBox(4);
+    details.setAlignment(Pos.CENTER_RIGHT);
+    Label amountLabel = 
+    new Label(String.format("%.2f", donation.amount()) + " kr");
+    amountLabel.getStyleClass().add("donation-amount");
+    Label dateLabel = new Label(
+      new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(donation.date()));
+    dateLabel.getStyleClass().add("donation-date");
+    details.getChildren().addAll(amountLabel, dateLabel);
+
+    card.getChildren().addAll(orgText, details);
+    HBox.setHgrow(orgText, Priority.ALWAYS);  // Org name takes available space
+
+    return card;
+  }
 }

src/main/resources/userpage/userpage.css

@@ -1,31 +1,87 @@
 #profile-name {
-    -fx-font-size: 28px;
-    -fx-font-weight: bold;
+  -fx-font-size: 28px;
+  -fx-font-weight: bold;
 }
+
 .profile-info {
-    -fx-font-size: 16px;
-    -fx-text-fill: #444;
+  -fx-font-size: 16px;
+  -fx-text-fill: #444;
 }
+
 .section-title {
-    -fx-font-size: 14px;
-    -fx-font-weight: bold;
-    -fx-fill: #888;
+  -fx-font-size: 14px;
+  -fx-font-weight: bold;
+  -fx-fill: #888;
 }
+
 .section-box {
-    -fx-background-color: #ddd;
-    -fx-pref-height: 120px;
-    -fx-pref-width: 700px;
-    -fx-background-radius: 6;
+  -fx-background-color: #ddd;
+  -fx-pref-height: 200px;
+  -fx-pref-width: 700px;
+  -fx-background-radius: 6;
 }
+
 .logout-button {
-    -fx-background-color: #e03030;
-    -fx-text-fill: white;
-    -fx-font-size: 14px;
-    -fx-font-weight: bold;
-    -fx-padding: 8 20;
-    -fx-background-radius: 4;
-    -fx-cursor: hand;
+  -fx-background-color: #e03030;
+  -fx-text-fill: white;
+  -fx-font-size: 14px;
+  -fx-font-weight: bold;
+  -fx-padding: 8 20;
+  -fx-background-radius: 4;
+  -fx-cursor: hand;
 }
+
 .logout-button:hover {
-    -fx-background-color: #c02020;
+  -fx-background-color: #c02020;
+}
+
+.cause-chip {
+  -fx-background-color: #4CAF50;
+  -fx-text-fill: white;
+  -fx-padding: 6 12;
+  -fx-background-radius: 20;
+  -fx-font-size: 13px;
+}
+
+.cause-chip:hover {
+  -fx-background-color: #45a049;
+  -fx-cursor: hand;
+}
+
+.donation-card {
+  -fx-background-color: #f5f5f5;
+  -fx-border-color: #ddd;
+  -fx-border-radius: 6;
+  -fx-background-radius: 6;
+}
+
+.donation-card:hover {
+  -fx-background-color: #efefef;
+  -fx-border-color: #bbb;
+}
+
+.donation-org-name {
+  -fx-font-size: 15px;
+  -fx-font-weight: bold;
+  -fx-fill: #333;
+}
+
+.donation-amount {
+  -fx-font-size: 14px;
+  -fx-font-weight: bold;
+  -fx-text-fill: #2196F3;
+}
+
+.donation-date {
+  -fx-font-size: 12px;
+  -fx-text-fill: #999;
+}
+
+.donation-list {
+  -fx-pref-height: 400px;
+}
+
+/* ScrollPane styling */
+.scroll-pane {
+  -fx-control-inner-background: #fafafa;
 }