From b67a5f2a73d27d486c1e82c2884f9c83fd29fea3 Mon Sep 17 00:00:00 2001
From: Marius Klepp <Mariusklepp@icloud.com>
Date: Tue, 14 Apr 2026 20:41:19 +0200
Subject: [PATCH 1/2] Refactor: Moved common styling to Global.css

---
 src/main/resources/css/Global.css   |  38 ++++++++
 src/main/resources/css/Register.css | 129 ----------------------------
 src/main/resources/css/SignIn.css   |  20 -----
 3 files changed, 38 insertions(+), 149 deletions(-)
 delete mode 100644 src/main/resources/css/Register.css
 delete mode 100644 src/main/resources/css/SignIn.css

diff --git a/src/main/resources/css/Global.css b/src/main/resources/css/Global.css
index 5de6600..c7af883 100644
--- a/src/main/resources/css/Global.css
+++ b/src/main/resources/css/Global.css
@@ -127,3 +127,41 @@
     -fx-font-weight: bold;
 }
 
+.confirm-button {
+    -fx-background-color: #1e3a8a;
+    -fx-text-fill: white;
+    -fx-font-weight: bold;
+    -fx-background-radius: 6;
+    -fx-padding: 10 24 10 24;
+    -fx-cursor: hand;
+    -fx-font-size: 14px;
+}
+
+.confirm-button:hover {
+    -fx-background-color: #2649a8;
+    -fx-scale-x: 1.03;
+    -fx-scale-y: 1.03;
+}
+
+.confirm-button:pressed {
+    -fx-background-color: #162d6e;
+    -fx-scale-x: 0.97;
+    -fx-scale-y: 0.97;
+}
+
+.field-label {
+    -fx-font-size: 15px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #1a1a2e;
+}
+
+.input-field {
+    -fx-background-radius: 6;
+    -fx-border-radius: 6;
+    -fx-border-color: #c0c8dc;
+    -fx-border-width: 1.5;
+    -fx-padding: 8 12 8 12;
+    -fx-font-size: 13px;
+    -fx-pref-height: 40px;
+}
+
diff --git a/src/main/resources/css/Register.css b/src/main/resources/css/Register.css
deleted file mode 100644
index a51cd40..0000000
--- a/src/main/resources/css/Register.css
+++ /dev/null
@@ -1,129 +0,0 @@
-/* =====================
-   GiveHope – register.css
-   Matches the sign-in page aesthetic
-   ===================== */
-
-/* Root / background */
-.root-pane {
-    -fx-background-color: #e8e8e8;
-}
-
-/* ── Top bar ── */
-.top-bar {
-    -fx-padding: 14 18 14 18;
-    -fx-alignment: CENTER_LEFT;
-    -fx-background-color: #e8e8e8;
-    -fx-spacing: 12;
-}
-
-.logo-label {
-    -fx-font-size: 15px;
-    -fx-font-family: "Segoe UI", sans-serif;
-    -fx-text-fill: #2c2c2c;
-    -fx-font-weight: normal;
-}
-
-.home-button {
-    -fx-background-color: #d4d4d4;
-    -fx-text-fill: #2c2c2c;
-    -fx-font-size: 14px;
-    -fx-font-family: "Segoe UI", sans-serif;
-    -fx-background-radius: 12px;
-    -fx-padding: 8 18 8 18;
-    -fx-cursor: hand;
-    -fx-border-color: transparent;
-}
-
-.home-button:hover {
-    -fx-background-color: #c4c4c4;
-}
-
-/* ── Form container ── */
-.form-container {
-    -fx-padding: 0 0 80 0;
-}
-
-/* ── Input fields ── */
-.input-field {
-    -fx-background-color: #ffffff;
-    -fx-background-radius: 24px;
-    -fx-border-radius: 24px;
-    -fx-border-color: transparent;
-    -fx-padding: 14 22 14 22;
-    -fx-font-size: 15px;
-    -fx-font-family: "Segoe UI", sans-serif;
-    -fx-prompt-text-fill: #b0b0b0;
-    -fx-text-fill: #2c2c2c;
-    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.06), 6, 0, 0, 1);
-    -fx-pref-height: 50px;
-}
-
-.input-field:focused {
-    -fx-background-color: #ffffff;
-    -fx-border-color: #a8c4d4;
-    -fx-border-radius: 24px;
-    -fx-border-width: 1.5px;
-}
-
-/* ── Primary button ── */
-.primary-button {
-    -fx-background-color: #a8c4d4;
-    -fx-text-fill: #2c2c2c;
-    -fx-font-size: 16px;
-    -fx-font-family: "Segoe UI", sans-serif;
-    -fx-background-radius: 24px;
-    -fx-padding: 14 0 14 0;
-    -fx-cursor: hand;
-    -fx-pref-height: 54px;
-    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.08), 6, 0, 0, 2);
-}
-
-.primary-button:hover {
-    -fx-background-color: #96b5c8;
-}
-
-.primary-button:pressed {
-    -fx-background-color: #84a6bb;
-}
-
-/* ── Footer ── */
-.footer-label {
-    -fx-font-size: 13px;
-    -fx-font-family: "Segoe UI", sans-serif;
-    -fx-text-fill: #888888;
-}
-
-.footer-link {
-    -fx-font-size: 13px;
-    -fx-font-family: "Segoe UI", sans-serif;
-    -fx-text-fill: #5a8fa8;
-    -fx-border-color: transparent;
-    -fx-padding: 0;
-    -fx-underline: false;
-}
-
-.footer-link:hover {
-    -fx-text-fill: #3d7290;
-    -fx-underline: true;
-}
-
-.register-button{
-    -fx-font-size: 24px;
-    -fx-background-color: #3a86ff;
-    -fx-text-fill: white;
-    -fx-font-family: "Segoe UI", sans-serif;
-    -fx-cursor: hand;
-    -fx-border-color: transparent;
-    -fx-background-radius: 14px;
-}
-
-.register-button:hover {
-    -fx-background-color: #266ddf;
-    -fx-scale-x: 1.05;
-    -fx-scale-y: 1.05;
-}
-.register-button:pressed {
-    -fx-background-color: #1a5bbf;
-    -fx-scale-x: 0.97;
-    -fx-scale-y: 0.97;
-}
\ No newline at end of file
diff --git a/src/main/resources/css/SignIn.css b/src/main/resources/css/SignIn.css
deleted file mode 100644
index 36cdbb8..0000000
--- a/src/main/resources/css/SignIn.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.signIn-button{
-    -fx-font-size: 24px;
-    -fx-background-color: #3a86ff;
-    -fx-text-fill: white;
-    -fx-font-family: "Segoe UI", sans-serif;
-    -fx-cursor: hand;
-    -fx-border-color: transparent;
-    -fx-background-radius: 14px;
-}
-
-.signIn-button:hover {
-    -fx-background-color: #266ddf;
-    -fx-scale-x: 1.05;
-    -fx-scale-y: 1.05;
-}
-.signIn-button:pressed {
-    -fx-background-color: #1a5bbf;
-    -fx-scale-x: 0.97;
-    -fx-scale-y: 0.97;
-}
\ No newline at end of file

From f3aa1ef0209b3ef313d46f70d21e1e9651c3f054 Mon Sep 17 00:00:00 2001
From: Marius Klepp <Mariusklepp@icloud.com>
Date: Tue, 14 Apr 2026 20:41:55 +0200
Subject: [PATCH 2/2] refactor: improve Sign In and Register page layout and
 styling

---
 src/main/resources/view/Register.fxml | 62 ++++++++++++++++++---------
 src/main/resources/view/SignIn.fxml   | 44 ++++++++-----------
 2 files changed, 60 insertions(+), 46 deletions(-)

diff --git a/src/main/resources/view/Register.fxml b/src/main/resources/view/Register.fxml
index 4753596..de4a9d3 100644
--- a/src/main/resources/view/Register.fxml
+++ b/src/main/resources/view/Register.fxml
@@ -1,7 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import java.net.URL?>
-<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Hyperlink?>
 <?import javafx.scene.control.Label?>
@@ -9,29 +7,57 @@
 <?import javafx.scene.control.TextField?>
 <?import javafx.scene.layout.BorderPane?>
 <?import javafx.scene.layout.HBox?>
-<?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-<BorderPane fx:controller="ui.controller.RegisterController" prefHeight="725.0" prefWidth="1275" style="-fx-background-color: #f4f4f4;" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/25">
+<BorderPane prefHeight="725.0" prefWidth="1275" style="-fx-background-color: #f4f4f4;" stylesheets="@../css/Global.css" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ui.controller.RegisterController">
 
     <!-- REGISTER AREA -->
     <center>
 
         <VBox alignment="CENTER_LEFT" maxHeight="1.7976931348623157E308" maxWidth="500" spacing="25.0">
          <Label styleClass="page-title" text="Register" />
+         <VBox spacing="5.0">
+            <children>
+               <Label styleClass="field-label" text="Username" />
+      
+                              <TextField fx:id="usernameField" promptText="Enter Username" styleClass="input-field" />
+            </children>
+         </VBox>
+         <VBox spacing="5.0">
+            <children>
+               <Label styleClass="field-label" text="Email" />
+      
+                              <TextField fx:id="emailField" promptText="Enter Email" styleClass="input-field" />
+            </children>
+         </VBox>
+         <VBox spacing="5.0">
+            <children>
+               <Label styleClass="field-label" text="Phone Number" />
+      
+                        <TextField fx:id="phoneNumberField" promptText="Enter Phone Number" styleClass="input-field" />
+            </children>
+         </VBox>
+         <HBox alignment="CENTER" spacing="15.0">
+            <children>
+               <VBox spacing="5.0" HBox.hgrow="ALWAYS">
+                  <children>
+                     <Label styleClass="field-label" text="Password" />
+            
+                                    <PasswordField fx:id="passwordField" promptText="Enter Password" styleClass="input-field" />
+                  </children>
+               </VBox>
+               <VBox spacing="5.0" HBox.hgrow="ALWAYS">
+                  <children>
+                     <Label styleClass="field-label" text="Confirm Password" />
+            
+                                    <PasswordField fx:id="confirmPasswordField" promptText="Re-enter Password" styleClass="input-field" />
+                  </children>
+               </VBox>
+            </children>
+         </HBox>
 
-                  <TextField fx:id="usernameField" prefHeight="40.0" prefWidth="480" promptText="Enter Username" style="-fx-font-size: 24px; -fx-background-radius: 14;" />
-
-                  <TextField fx:id="emailField" prefHeight="40.0" prefWidth="480" promptText="Enter Email" style="-fx-font-size: 24px; -fx-background-radius: 14;" />
-
-                  <TextField fx:id="phoneNumberField" prefHeight="40.0" prefWidth="480" promptText="Enter Phone Number" style="-fx-font-size: 24px; -fx-background-radius: 14;" />
-
-                  <PasswordField fx:id="passwordField" prefHeight="40.0" prefWidth="480" promptText="Enter Password" style="-fx-font-size: 24px; -fx-background-radius: 14;" />
-
-                  <PasswordField fx:id="confirmPasswordField" prefHeight="40.0" prefWidth="480" promptText="Confirm Password" style="-fx-font-size: 24px; -fx-background-radius: 14;" />
-
-                  <Button maxWidth="1.7976931348623157E308" onAction="#handleRegister" styleClass="register-button" text="Register" />
+                        <Button maxWidth="1.7976931348623157E308" onAction="#handleRegister" styleClass="confirm-button" text="Register" />
 
                               <!-- SIGN IN LINK -->
             <HBox alignment="CENTER_LEFT" spacing="0">
@@ -51,14 +77,10 @@
 
                               </HBox>
 
-                  <Label fx:id="errorLabel" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-text-fill: red; -fx-font-size: 16px;" text="" />
+                              <Label fx:id="errorLabel" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-text-fill: red; -fx-font-size: 16px;" />
 
         </VBox>
 
     </center>
-   <stylesheets>
-      <URL value="@../css/Register.css" />
-      <URL value="@../css/Global.css" />
-   </stylesheets>
 
 </BorderPane>
diff --git a/src/main/resources/view/SignIn.fxml b/src/main/resources/view/SignIn.fxml
index fda7a96..38e5f2a 100644
--- a/src/main/resources/view/SignIn.fxml
+++ b/src/main/resources/view/SignIn.fxml
@@ -1,7 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import java.net.URL?>
-<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Hyperlink?>
 <?import javafx.scene.control.Label?>
@@ -9,13 +7,10 @@
 <?import javafx.scene.control.TextField?>
 <?import javafx.scene.layout.BorderPane?>
 <?import javafx.scene.layout.HBox?>
-<?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-
-<BorderPane fx:controller="ui.controller.SignInController" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-background-color: #f4f4f4;" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1">
-          <!-- LOGIN AREA -->
+<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-background-color: #f4f4f4;" stylesheets="@../css/Global.css" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ui.controller.SignInController">
     <center>
 
                     <VBox alignment="CENTER" maxWidth="500.0" spacing="20.0">
@@ -40,34 +35,31 @@
                                           </HBox>
             </children>
          </VBox>
-         <VBox prefHeight="200.0" prefWidth="100.0" spacing="25.0">
+         <VBox spacing="15.0">
             <children>
+               <VBox spacing="5.0">
+                  <children>
+                     <Label styleClass="field-label" text="Username or Email" />
+            
+                                    <TextField fx:id="loginField" prefHeight="40.0" prefWidth="300.0" promptText="e.g. john@email.com" styleClass="input-field" />
+                  </children>
+               </VBox>
+               <VBox spacing="5.0">
+                  <children>
+                     <Label styleClass="field-label" text="Password" />
+            
+                                    <PasswordField fx:id="passwordField" prefHeight="40.0" prefWidth="300.0" promptText="••••••••" styleClass="input-field" />
+                  </children>
+               </VBox>
       
-                              <TextField fx:id="loginField" prefHeight="65" prefWidth="480" promptText="Username or Email" style="-fx-font-size: 24px; -fx-background-radius: 14;" />
-      
-                              <PasswordField fx:id="passwordField" prefHeight="65" prefWidth="480" promptText="Password" style="-fx-font-size: 24px; -fx-background-radius: 14;" />
-      
-                              <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" onAction="#handleSignIn" styleClass="signIn-button" text="Sign in" />
+                              <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" onAction="#handleSignIn" styleClass="confirm-button" text="Sign in" />
             </children>
          </VBox>
-         <HBox alignment="CENTER_LEFT">
-            <children>
-               <Hyperlink onAction="#handleRegister" text="Forgot your password?">
-                  <font>
-                     <Font size="16.0" />
-                  </font>
-               </Hyperlink>
-            </children>
-         </HBox>
 
-                                          <Label fx:id="errorLabel" maxWidth="1.7976931348623157E308" style="-fx-text-fill: red; -fx-font-size: 16px;" text="" />
+                                          <Label fx:id="errorLabel" alignment="TOP_LEFT" maxWidth="1.7976931348623157E308" style="-fx-text-fill: red; -fx-font-size: 16px;" text="" />
 
                     </VBox>
 
           </center>
-   <stylesheets>
-      <URL value="@../css/Global.css" />
-      <URL value="@../css/SignIn.css" />
-   </stylesheets>
 
       </BorderPane>