Updated UI (again)

src/main/java/envoy/client/ui/controller/ContactSearchScene.java

@@ -5,11 +5,14 @@ import java.util.logging.Logger;
 
 import javafx.application.Platform;
 import javafx.fxml.FXML;
-import javafx.scene.control.*;
+import javafx.scene.control.Alert;
 import javafx.scene.control.Alert.AlertType;
+import javafx.scene.control.ButtonType;
+import javafx.scene.control.ListView;
 
 import envoy.client.data.LocalDB;
 import envoy.client.event.SendEvent;
+import envoy.client.ui.ClearableTextField;
 import envoy.client.ui.ContactListCell;
 import envoy.client.ui.SceneContext;
 import envoy.data.Contact;
@@ -31,19 +34,7 @@ import envoy.util.EnvoyLog;
 public class ContactSearchScene {
 
 	@FXML
-	private Button backButton;
+	private ClearableTextField searchBar;
-
-	@FXML
-	private Button clearButton;
-
-	@FXML
-	private Button searchButton;
-
-	@FXML
-	private Button newGroupButton;
-
-	@FXML
-	private TextField searchBar;
 
 	@FXML
 	private ListView<Contact> contactList;
@@ -78,20 +69,12 @@ public class ContactSearchScene {
 	 * @since Envoy Client v0.1-beta
 	 */
 	@FXML
-	private void checkClearButton() {
+	private void sendRequest() {
-		final var containsContent = searchBar.getText().strip().isEmpty();
+		final var text = searchBar.getTextField().getText().strip();
-		clearButton.setDisable(containsContent);
+		if (!text.isBlank()) eventBus.dispatch(new SendEvent(new ContactSearchRequest(text)));
-		searchButton.setDisable(containsContent);
+		else contactList.getItems().clear();
 	}
 
-	/**
-	 * Sends a {@link ContactSearchRequest} to the server.
-	 *
-	 * @since Envoy Client v0.1-beta
-	 */
-	@FXML
-	private void suggestContacts() { eventBus.dispatch(new SendEvent(new ContactSearchRequest(searchBar.getText()))); }
-
 	/**
 	 * Clears the text in the search bar and the items shown in the list.
 	 * Additionally disables both clear and search button.
@@ -100,10 +83,8 @@ public class ContactSearchScene {
 	 */
 	@FXML
 	private void clear() {
-		searchBar.setText(null);
+		searchBar.getTextField().setText(null);
 		contactList.getItems().clear();
-		clearButton.setDisable(true);
-		searchButton.setDisable(true);
 	}
 
 	/**

src/main/java/envoy/client/ui/controller/GroupCreationScene.java

@@ -9,6 +9,7 @@ import javafx.scene.control.Alert.AlertType;
 
 import envoy.client.data.LocalDB;
 import envoy.client.event.SendEvent;
+import envoy.client.ui.ClearableTextField;
 import envoy.client.ui.ContactListCell;
 import envoy.client.ui.SceneContext;
 import envoy.data.Contact;
@@ -30,7 +31,7 @@ public class GroupCreationScene {
 	private Button createButton;
 
 	@FXML
-	private TextField groupNameField;
+	private ClearableTextField groupNameField;
 
 	@FXML
 	private ListView<Contact> contactList;
@@ -63,7 +64,18 @@ public class GroupCreationScene {
 	 * @since Envoy Client v0.1-beta
 	 */
 	@FXML
-	private void contactListClicked() { createButton.setDisable(contactList.getSelectionModel().isEmpty()); }
+	private void contactListClicked() {
+		createButton.setDisable(contactList.getSelectionModel().isEmpty() || groupNameField.getTextField().getText().isBlank());
+	}
+
+	/**
+	 * Checks, whether the {@code createButton} can be enabled because text is
+	 * present in the textfield.
+	 *
+	 * @since Envoy Client v0.1-beta
+	 */
+	@FXML
+	private void textUpdated() { createButton.setDisable(groupNameField.getTextField().getText().isBlank()); }
 
 	/**
 	 * Sends a {@link GroupCreation} to the server and closes this scene.
@@ -74,10 +86,10 @@ public class GroupCreationScene {
 	 */
 	@FXML
 	private void createButtonClicked() {
-		final var name = groupNameField.getText();
+		final var name = groupNameField.getTextField().getText();
 		if (!Bounds.isValidContactName(name)) {
 			new Alert(AlertType.ERROR, "The entered group name is not valid (" + Bounds.CONTACT_NAME_PATTERN + ")").showAndWait();
-			groupNameField.clear();
+			groupNameField.getTextField().clear();
 		} else {
 			eventBus.dispatch(new SendEvent(new GroupCreation(name,
 					contactList.getSelectionModel().getSelectedItems().stream().map(Contact::getID).collect(Collectors.toSet()))));

src/main/java/envoy/client/ui/controller/LoginScene.java

@@ -13,6 +13,7 @@ import javafx.scene.control.Alert.AlertType;
 
 import envoy.client.data.*;
 import envoy.client.net.Client;
+import envoy.client.ui.ClearableTextField;
 import envoy.client.ui.SceneContext;
 import envoy.client.ui.Startup;
 import envoy.data.LoginCredentials;
@@ -38,7 +39,7 @@ import envoy.util.EnvoyLog;
 public final class LoginScene {
 
 	@FXML
-	private TextField userTextField;
+	private ClearableTextField userTextField;
 
 	@FXML
 	private PasswordField passwordField;
@@ -116,17 +117,17 @@ public final class LoginScene {
 		if (registerCheckBox.isSelected() && !passwordField.getText().equals(repeatPasswordField.getText())) {
 			new Alert(AlertType.ERROR, "The entered password is unequal to the repeated one").showAndWait();
 			repeatPasswordField.clear();
-		} else if (!Bounds.isValidContactName(userTextField.getText())) {
+		} else if (!Bounds.isValidContactName(userTextField.getTextField().getText())) {
 			new Alert(AlertType.ERROR, "The entered user name is not valid (" + Bounds.CONTACT_NAME_PATTERN + ")").showAndWait();
-			userTextField.clear();
+			userTextField.getTextField().clear();
-		} else
+		} else performHandshake(new LoginCredentials(userTextField.getTextField().getText(), passwordField.getText().toCharArray(),
-			performHandshake(
+				registerCheckBox.isSelected(), Startup.VERSION));
-				new LoginCredentials(userTextField.getText(), passwordField.getText().toCharArray(), registerCheckBox.isSelected(), Startup.VERSION));
 	}
 
 	@FXML
 	private void offlineModeButtonPressed() {
-		attemptOfflineMode(new LoginCredentials(userTextField.getText(), passwordField.getText().toCharArray(), false, Startup.VERSION));
+		attemptOfflineMode(
+				new LoginCredentials(userTextField.getTextField().getText(), passwordField.getText().toCharArray(), false, Startup.VERSION));
 	}
 
 	@FXML

src/main/resources/fxml/ChatScene.fxml

@@ -12,9 +12,9 @@
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.RowConstraints?>
 
-<GridPane maxHeight="-Infinity" maxWidth="-Infinity"
+<GridPane hgap="5.0" maxHeight="-Infinity" maxWidth="-Infinity"
 	minHeight="400.0" minWidth="350.0" prefHeight="400.0" prefWidth="600.0"
-	xmlns="http://javafx.com/javafx/11.0.1"
+	vgap="2.0" xmlns="http://javafx.com/javafx/11.0.1"
 	xmlns:fx="http://javafx.com/fxml/1"
 	fx:controller="envoy.client.ui.controller.ChatScene">
 	<columnConstraints>
@@ -47,7 +47,7 @@
 			prefHeight="211.0" prefWidth="300.0" GridPane.rowIndex="1"
 			GridPane.rowSpan="2147483647">
 			<GridPane.margin>
-				<Insets bottom="10.0" left="10.0" right="5.0" top="5.0" />
+				<Insets bottom="10.0" left="10.0" />
 			</GridPane.margin>
 			<padding>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@@ -64,7 +64,7 @@
 		<Label fx:id="contactLabel" prefHeight="16.0" prefWidth="250.0"
 			text="Select a contact to chat with" GridPane.columnSpan="2">
 			<GridPane.margin>
-				<Insets left="15.0" right="5.0" top="5.0" />
+				<Insets left="10.0" />
 			</GridPane.margin>
 			<padding>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@@ -75,17 +75,18 @@
 			GridPane.columnIndex="1" GridPane.columnSpan="2"
 			GridPane.halignment="RIGHT" GridPane.valignment="CENTER">
 			<GridPane.margin>
-				<Insets bottom="10.0" left="5.0" right="10.0" top="10.0" />
+				<Insets bottom="10.0" right="10.0" top="10.0" />
 			</GridPane.margin>
 			<padding>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 			</padding>
 		</Button>
 		<ListView fx:id="messageList" prefHeight="257.0"
-			prefWidth="465.0" GridPane.columnIndex="1" GridPane.columnSpan="2"
+			prefWidth="465.0" GridPane.columnIndex="1"
-			GridPane.rowIndex="1" GridPane.rowSpan="2">
+			GridPane.columnSpan="2147483647" GridPane.rowIndex="1"
+			GridPane.rowSpan="2">
 			<GridPane.margin>
-				<Insets bottom="5.0" left="5.0" right="10.0" top="5.0" />
+				<Insets left="5.0" right="10.0" />
 			</GridPane.margin>
 			<padding>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@@ -111,11 +112,8 @@
 			GridPane.halignment="CENTER" GridPane.rowIndex="4"
 			GridPane.valignment="BOTTOM">
 			<GridPane.margin>
-				<Insets bottom="10.0" left="5.0" right="10.0" />
+				<Insets bottom="10.0" right="10.0" />
 			</GridPane.margin>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
 			<tooltip>
 				<Tooltip anchorLocation="WINDOW_TOP_LEFT" autoHide="true"
 					maxWidth="350.0"
@@ -130,6 +128,9 @@
 					</items>
 				</ContextMenu>
 			</contextMenu>
+			<padding>
+				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+			</padding>
 		</Button>
 		<TextArea fx:id="messageTextArea" disable="true"
 			onInputMethodTextChanged="#messageTextUpdated"
@@ -137,7 +138,7 @@
 			prefHeight="200.0" prefWidth="200.0" wrapText="true"
 			GridPane.columnIndex="1" GridPane.rowIndex="4">
 			<GridPane.margin>
-				<Insets bottom="10.0" left="5.0" right="5.0" top="5.0" />
+				<Insets bottom="10.0" left="5.0" top="3.0" />
 			</GridPane.margin>
 			<opaqueInsets>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@@ -163,7 +164,7 @@
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 			</GridPane.margin>
 			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+				<Insets bottom="5.0" top="5.0" />
 			</padding>
 			<opaqueInsets>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />

src/main/resources/fxml/ContactSearchScene.fxml

@@ -1,53 +1,44 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import envoy.client.ui.ClearableTextField?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ListView?>
-<?import javafx.scene.control.TextField?>
 <?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
 
-<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.ContactSearchScene">
+<VBox maxHeight="-Infinity" maxWidth="-Infinity"
+	minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
+	prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1"
+	xmlns:fx="http://javafx.com/fxml/1"
+	fx:controller="envoy.client.ui.controller.ContactSearchScene">
 	<children>
 		<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
 			<children>
-            <TextField fx:id="searchBar" onInputMethodTextChanged="#checkClearButton" onKeyTyped="#checkClearButton" prefColumnCount="22" promptText="Enter username to search for">
+				<ClearableTextField fx:id="searchBar"
+					prefWidth="310.0">
+					<textField onInputMethodTextChanged="#sendRequest"
+						onKeyTyped="#sendRequest" prefColumnCount="22"
+						promptText="Enter username to search for">
+					</textField>
 					<HBox.margin>
-                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+						<Insets bottom="5.0" left="5.0" right="5.0" top="15.0" />
 					</HBox.margin>
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
 					<tooltip>
-                  <Tooltip text="Enter a name. If an account by that name exists, it will be displayed below." wrapText="true" />
+						<Tooltip
-               </tooltip>
+							text="Enter a name. If an account by that name exists, it will be displayed below."
-            </TextField>
+							wrapText="true" />
-            <Button fx:id="clearButton" disable="true" mnemonicParsing="true" onAction="#clear" prefHeight="26.0" prefWidth="110.0" text="Clea_r">
-               <tooltip>
-                  <Tooltip autoHide="true" text="Clears the text to the left and the elements below" wrapText="true" />
 					</tooltip>
+				</ClearableTextField>
+				<Button mnemonicParsing="false"
+					onAction="#newGroupButtonClicked" prefHeight="26.0"
+					prefWidth="139.0" text="New Group">
 					<HBox.margin>
-                  <Insets bottom="5.0" left="5.0" right="10.0" top="5.0" />
+						<Insets bottom="5.0" left="30.0" right="5.0" top="5.0" />
-               </HBox.margin>
-               <padding>
-                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-               </padding>
-            </Button>
-            <Button fx:id="searchButton" defaultButton="true" disable="true" mnemonicParsing="true" onAction="#suggestContacts" prefHeight="26.0" prefWidth="124.0" text="_Search" textOverrun="LEADING_WORD_ELLIPSIS">
-               <padding>
-                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-               </padding>
-               <HBox.margin>
-                  <Insets bottom="5.0" right="20.0" top="5.0" />
-               </HBox.margin>
-               <tooltip>
-                  <Tooltip autoHide="true" text="Search for accounts with the name entered to the left" wrapText="true" />
-               </tooltip>
-            </Button>
-            <Button mnemonicParsing="false" onAction="#newGroupButtonClicked" prefHeight="26.0" prefWidth="139.0" text="New Group">
-               <HBox.margin>
-                  <Insets bottom="5.0" left="20.0" right="5.0" top="5.0" />
 					</HBox.margin>
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@@ -55,22 +46,28 @@
 				</Button>
 			</children>
 		</HBox>
-      <ListView fx:id="contactList" onMouseClicked="#contactListClicked" prefHeight="314.0" prefWidth="600.0">
+		<ListView fx:id="contactList"
+			onMouseClicked="#contactListClicked" prefHeight="314.0"
+			prefWidth="600.0">
 			<padding>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 			</padding>
 			<VBox.margin>
 				<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
-         </VBox.margin></ListView>
+			</VBox.margin>
-      <Button fx:id="backButton" cancelButton="true" mnemonicParsing="true" onAction="#backButtonClicked" text="_Back">
+		</ListView>
+		<Button cancelButton="true" mnemonicParsing="true"
+			onAction="#backButtonClicked" text="_Back">
 			<VBox.margin>
-            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+				<Insets bottom="10.0" left="10.0" />
 			</VBox.margin>
 			<padding>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 			</padding>
 			<tooltip>
-            <Tooltip autoHide="true" text="Takes you back to the screen where you can chat with others" wrapText="true" />
+				<Tooltip autoHide="true"
+					text="Takes you back to the screen where you can chat with others"
+					wrapText="true" />
 			</tooltip>
 		</Button>
 	</children>

src/main/resources/fxml/GroupCreationScene.fxml

@@ -1,20 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import envoy.client.ui.ClearableTextField?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ListView?>
-<?import javafx.scene.control.TextField?>
 <?import javafx.scene.control.Tooltip?>
+<?import javafx.scene.layout.BorderPane?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.GroupCreationScene">
+<VBox maxHeight="-Infinity" maxWidth="-Infinity"
+	minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
+	prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1"
+	xmlns:fx="http://javafx.com/fxml/1"
+	fx:controller="envoy.client.ui.controller.GroupCreationScene">
 	<children>
 		<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
 			<children>
-            <TextField fx:id="groupNameField" prefColumnCount="22" promptText="Enter Group Name">
+				<ClearableTextField fx:id="groupNameField">
+					<textField prefColumnCount="22"
+						promptText="Enter Group Name"
+						onInputMethodTextChanged="#textUpdated" onKeyTyped="#textUpdated" />
 					<HBox.margin>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</HBox.margin>
@@ -22,46 +30,62 @@
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
 					<tooltip>
-                  <Tooltip text="Enter a name. If an account by that name exists, it will be displayed below." wrapText="true" />
+						<Tooltip
+							text="Enter something. A group with this name will be created."
+							wrapText="true" />
 					</tooltip>
-            </TextField>
+				</ClearableTextField>
 			</children>
 		</HBox>
 		<Label text="Choose Members:">
 			<font>
 				<Font size="16.0" />
 			</font>
-         <VBox.margin>
-            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-         </VBox.margin>
 			<padding>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 			</padding>
 		</Label>
-      <ListView fx:id="contactList" onMouseClicked="#contactListClicked" prefHeight="314.0" prefWidth="600.0">
+		<ListView fx:id="contactList"
+			onMouseClicked="#contactListClicked" prefHeight="314.0"
+			prefWidth="600.0">
 			<VBox.margin>
 				<Insets bottom="5.0" left="10.0" right="10.0" top="5.0" />
 			</VBox.margin>
 			<padding>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-         </padding></ListView>
+			</padding>
-      <Button fx:id="createButton" defaultButton="true" disable="true" mnemonicParsing="false" onAction="#createButtonClicked" text="Create">
+		</ListView>
-         <VBox.margin>
+		<BorderPane prefHeight="50.0">
-            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+			<left>
-         </VBox.margin>
+				<Button cancelButton="true" mnemonicParsing="true"
-         <padding>
+					onAction="#backButtonClicked" text="_Back"
-            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+					BorderPane.alignment="CENTER">
-         </padding></Button>
-      <Button cancelButton="true" mnemonicParsing="true" onAction="#backButtonClicked" text="_Back">
-         <VBox.margin>
-            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-         </VBox.margin>
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
 					<tooltip>
-            <Tooltip autoHide="true" text="Takes you back to the screen where you can chat with others" wrapText="true" />
+						<Tooltip autoHide="true"
+							text="Takes you back to the screen where you can chat with others"
+							wrapText="true" />
 					</tooltip>
+					<BorderPane.margin>
+						<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+					</BorderPane.margin>
 				</Button>
+			</left>
+			<right>
+				<Button fx:id="createButton" alignment="CENTER_RIGHT"
+					defaultButton="true" disable="true" mnemonicParsing="false"
+					onAction="#createButtonClicked" text="Create"
+					BorderPane.alignment="CENTER">
+					<padding>
+						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+					</padding>
+					<BorderPane.margin>
+						<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+					</BorderPane.margin>
+				</Button>
+			</right>
+		</BorderPane>
 	</children>
 </VBox>

src/main/resources/fxml/LoginScene.fxml

@@ -1,19 +1,22 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import envoy.client.ui.ClearableTextField?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
-<?import javafx.scene.control.ButtonBar?>
 <?import javafx.scene.control.CheckBox?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.PasswordField?>
-<?import javafx.scene.control.TextField?>
+<?import javafx.scene.layout.BorderPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.RowConstraints?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-<VBox prefHeight="206.0" prefWidth="440.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.LoginScene">
+<VBox prefHeight="206.0" prefWidth="440.0"
+	xmlns="http://javafx.com/javafx/11.0.1"
+	xmlns:fx="http://javafx.com/fxml/1"
+	fx:controller="envoy.client.ui.controller.LoginScene">
 	<children>
 		<Label text="User Login">
 			<font>
@@ -26,15 +29,20 @@
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 			</padding>
 		</Label>
-				<GridPane>
+		<GridPane hgap="5.0" vgap="10.0">
 			<columnConstraints>
-						<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="40.0" prefWidth="100.0" />
+				<ColumnConstraints hgrow="SOMETIMES"
-						<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+					minWidth="10.0" percentWidth="40.0" prefWidth="100.0" />
+				<ColumnConstraints hgrow="SOMETIMES"
+					minWidth="10.0" prefWidth="100.0" />
 			</columnConstraints>
 			<rowConstraints>
-						<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+				<RowConstraints minHeight="10.0" prefHeight="30.0"
-						<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+					vgrow="SOMETIMES" />
-						<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+				<RowConstraints minHeight="10.0" prefHeight="30.0"
+					vgrow="SOMETIMES" />
+				<RowConstraints minHeight="10.0" prefHeight="30.0"
+					vgrow="SOMETIMES" />
 			</rowConstraints>
 			<children>
 				<Label text="User Name:">
@@ -43,62 +51,99 @@
 					</GridPane.margin>
 					<padding>
 						<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
-               </padding></Label>
+					</padding>
-						<Label text="Password" GridPane.rowIndex="1">
+				</Label>
+				<Label text="Password:" GridPane.rowIndex="1">
 					<padding>
 						<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
 					</padding>
 					<GridPane.margin>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-               </GridPane.margin></Label>
+					</GridPane.margin>
-						<Label fx:id="repeatPasswordLabel" text="Repeat Password:" visible="false" GridPane.rowIndex="2">
+				</Label>
+				<Label fx:id="repeatPasswordLabel" text="Repeat Password:"
+					visible="false" GridPane.rowIndex="2">
 					<GridPane.margin>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</GridPane.margin>
 					<padding>
 						<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
-               </padding></Label>
+					</padding>
-						<TextField fx:id="userTextField" GridPane.columnIndex="1">
+				</Label>
+				<ClearableTextField fx:id="userTextField"
+					GridPane.columnIndex="1">
 					<GridPane.margin>
 						<Insets bottom="10.0" left="5.0" right="5.0" top="5.0" />
 					</GridPane.margin>
-               <padding>
+				</ClearableTextField>
-                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+				<PasswordField fx:id="passwordField"
-               </padding></TextField>
+					GridPane.columnIndex="1" GridPane.rowIndex="1">
-						<PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="1">
 					<GridPane.margin>
 						<Insets bottom="10.0" left="5.0" right="5.0" top="10.0" />
 					</GridPane.margin>
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-               </padding></PasswordField>
+					</padding>
-						<PasswordField fx:id="repeatPasswordField" visible="false" GridPane.columnIndex="1" GridPane.rowIndex="2">
+				</PasswordField>
+				<PasswordField fx:id="repeatPasswordField"
+					visible="false" GridPane.columnIndex="1" GridPane.rowIndex="2">
 					<GridPane.margin>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="10.0" />
 					</GridPane.margin>
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-               </padding></PasswordField>
-					</children>
-				</GridPane>
-				<CheckBox fx:id="registerCheckBox" mnemonicParsing="true" onAction="#registerCheckboxChanged" prefHeight="17.0" prefWidth="181.0" text="_Register">
-         <padding>
-            <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
 					</padding>
+				</PasswordField>
+			</children>
 			<VBox.margin>
-            <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
+				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-         </VBox.margin></CheckBox>
+			</VBox.margin>
-      <Label fx:id="connectionLabel" />
+		</GridPane>
-      <ButtonBar prefHeight="40.0" prefWidth="200.0">
+		<CheckBox fx:id="registerCheckBox" mnemonicParsing="true"
-        <buttons>
+			onAction="#registerCheckboxChanged" prefHeight="17.0"
-            <Button mnemonicParsing="false" onAction="#abortLogin" text="Close">
+			prefWidth="181.0" text="_Register">
+			<VBox.margin>
+				<Insets left="5.0" right="3.0" />
+			</VBox.margin>
+		</CheckBox>
+		<Label fx:id="connectionLabel">
+			<VBox.margin>
+				<Insets left="5.0" />
+			</VBox.margin>
+		</Label>
+		<BorderPane prefWidth="200.0">
+			<left>
+				<Button cancelButton="true" mnemonicParsing="false"
+					onAction="#abortLogin" text="Close" BorderPane.alignment="CENTER">
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
+					<BorderPane.margin>
+						<Insets />
+					</BorderPane.margin>
 				</Button>
-            <Button mnemonicParsing="false" onAction="#offlineModeButtonPressed" text="Offline mode" />
+			</left>
-          <Button defaultButton="true" mnemonicParsing="false" onAction="#loginButtonPressed" text="Login" />
+			<center>
-        </buttons>
+				<Button mnemonicParsing="false"
-      </ButtonBar>
+					onAction="#offlineModeButtonPressed" text="Offline mode"
+					BorderPane.alignment="CENTER">
+					<BorderPane.margin>
+						<Insets />
+					</BorderPane.margin>
+				</Button>
+			</center>
+			<right>
+				<Button defaultButton="true" mnemonicParsing="false"
+					onAction="#loginButtonPressed" text="Login"
+					BorderPane.alignment="CENTER">
+					<BorderPane.margin>
+						<Insets />
+					</BorderPane.margin>
+				</Button>
+			</right>
+			<VBox.margin>
+				<Insets bottom="5.0" left="5.0" right="5.0" />
+			</VBox.margin>
+		</BorderPane>
 	</children>
 </VBox>

src/main/resources/fxml/SettingsScene.fxml

@@ -7,11 +7,18 @@
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
 
-<VBox alignment="TOP_RIGHT" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.SettingsScene">
+<VBox alignment="TOP_RIGHT" maxHeight="-Infinity"
+	maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
+	prefHeight="400.0" prefWidth="600.0"
+	xmlns="http://javafx.com/javafx/11.0.1"
+	xmlns:fx="http://javafx.com/fxml/1"
+	fx:controller="envoy.client.ui.controller.SettingsScene">
 	<children>
 		<HBox prefHeight="389.0" prefWidth="600.0">
 			<children>
-            <ListView fx:id="settingsList" onMouseClicked="#settingsListClicked" prefHeight="200.0" prefWidth="200.0">
+				<ListView fx:id="settingsList"
+					onMouseClicked="#settingsListClicked" prefHeight="200.0"
+					prefWidth="200.0">
 					<opaqueInsets>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</opaqueInsets>
@@ -20,17 +27,21 @@
 					</HBox.margin>
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-               </padding></ListView>
+					</padding>
-            <TitledPane fx:id="titledPane" collapsible="false" prefHeight="325.0" prefWidth="300.0">
+				</ListView>
+				<TitledPane fx:id="titledPane" collapsible="false"
+					prefHeight="325.0" prefWidth="300.0">
 					<HBox.margin>
 						<Insets bottom="10.0" left="5.0" right="10.0" top="10.0" />
 					</HBox.margin>
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-               </padding></TitledPane>
+					</padding>
+				</TitledPane>
 			</children>
 		</HBox>
-      <Button defaultButton="true" mnemonicParsing="true" onMouseClicked="#backButtonClicked" text="_Back">
+		<Button defaultButton="true" mnemonicParsing="true"
+			onMouseClicked="#backButtonClicked" text="_Back">
 			<opaqueInsets>
 				<Insets />
 			</opaqueInsets>