styling and transition with login page

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;
+}