styling and transition with login page

ChatApp/app/src/main/java/client/ClientGui.java

@@ -3,9 +3,7 @@ package client;
 import javafx.application.Application;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Scene;
-import javafx.scene.control.Label;
 import javafx.scene.image.Image;
-import javafx.scene.layout.StackPane;
 import javafx.stage.Screen;
 import javafx.stage.Stage;
 

ChatApp/app/src/main/java/client/ClientLogin.java

@@ -16,6 +16,9 @@ public class ClientLogin {
 
     @FXML
     private void login() throws IOException {
+        if(usernameField.getText().isEmpty()) {
+            return;
+        }
         var loader = new FXMLLoader(getClass().getResource("/client/clientLoading.fxml"));
         loader.load();
         Stage stage = (Stage) usernameField.getScene().getWindow();

ChatApp/app/src/main/resources/client/clientLogin.fxml

@@ -7,27 +7,17 @@
 <?import javafx.scene.layout.*?>
 
 <?import javafx.geometry.Insets?>
-<GridPane xmlns="http://javafx.com/javafx"
-          xmlns:fx="http://javafx.com/fxml"
-          fx:controller="client.ClientLogin"
-          prefHeight="400.0" prefWidth="600.0">
 
-    <VBox spacing="10.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
-        <Label text="Enter your username"/>
-        <TextField fx:id="usernameField"/>
-        <Button text="Login" onAction="#login"/>
-    </VBox>
-
-    <columnConstraints>
-        <ColumnConstraints hgrow="ALWAYS"/>
-        <ColumnConstraints halignment="CENTER"/>
-        <ColumnConstraints hgrow="ALWAYS"/>
-    </columnConstraints>
-
-    <rowConstraints>
-        <RowConstraints vgrow="ALWAYS"/>
-        <RowConstraints valignment="CENTER"/>
-        <RowConstraints vgrow="ALWAYS"/>
-    </rowConstraints>
-
-</GridPane>
+<VBox alignment="CENTER" spacing="10.0"
+      xmlns="http://javafx.com/javafx"
+      xmlns:fx="http://javafx.com/fxml"
+      fx:controller="client.ClientLogin"
+      prefHeight="400.0" prefWidth="600.0"
+    styleClass="login-box">
+    <padding>
+        <Insets bottom="10.0" left="100.0" right="100.0" top="10.0"/>
+    </padding>
+    <Label text="Enter your username"/>
+    <TextField fx:id="usernameField" onAction="#login" styleClass="login"/>
+    <Button text="Login" onAction="#login"/>
+</VBox>

ChatApp/app/src/main/resources/client/clientStyle.css

@@ -0,0 +1,11 @@
+.login-box {
+    -fx-background-color: lightgray;
+}
+
+.login {
+    -fx-border-color: transparent;
+}
+
+.login:focused {
+    -fx-border-color: lightgrey;
+}