Skip to content

Refactor/signin register layout #39

Merged
merged 2 commits into from
Apr 15, 2026
+98 −195
Merged

Refactor/signin register layout #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b67a5f2
Refactor: Moved common styling to Global.css
Apr 14, 2026
f3aa1ef
refactor: improve Sign In and Register page layout and styling
Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions src/main/resources/css/Global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

129 changes: 0 additions & 129 deletions src/main/resources/css/Register.css
View file
Open in desktop

This file was deleted.

20 changes: 0 additions & 20 deletions src/main/resources/css/SignIn.css
View file
Open in desktop

This file was deleted.

62 changes: 42 additions & 20 deletions src/main/resources/view/Register.fxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,63 @@
<?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?>
<?import javafx.scene.control.PasswordField?>
<?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">
Expand All @@ -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>
44 changes: 18 additions & 26 deletions src/main/resources/view/SignIn.fxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@
<?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?>
<?import javafx.scene.control.PasswordField?>
<?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">
Expand All @@ -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>