beautified hub_register_device

src/main/resources/fxml/hub_register_device.fxml

@@ -1,15 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ButtonBar?>
+<?import javafx.scene.control.Label?>
 <?import javafx.scene.image.Image?>
 <?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
-<?import javafx.scene.control.Hyperlink?>
-<?import javafx.scene.text.TextFlow?>
 <?import javafx.scene.text.Text?>
+<?import javafx.scene.text.TextFlow?>
 <VBox xmlns:fx="http://javafx.com/fxml"
 	  xmlns="http://javafx.com/javafx"
 	  fx:controller="org.cryptomator.ui.keyloading.hub.RegisterDeviceController"
@@ -22,24 +23,30 @@
 	</padding>
 	<children>
 		<HBox spacing="12" VBox.vgrow="ALWAYS">
-			<ImageView VBox.vgrow="ALWAYS" fitWidth="64" preserveRatio="true" cache="true">
-				<Image url="@../img/bot/bot.png"/>
-			</ImageView>
+			<HBox alignment="CENTER">
+				<ImageView VBox.vgrow="ALWAYS" fitWidth="64" preserveRatio="true" cache="true">
+					<Image url="@../img/bot/bot.png"/>
+				</ImageView>
+			</HBox>
 
-			<VBox spacing="12">
+			<VBox spacing="6">
+				<Label text="This device is not yet known to Cryptomator Hub. Please register this device first." wrapText="true"/>
 				<TextFlow styleClass="text-flow">
-					<Text text="TODO: Please click on "/>
-					<Hyperlink styleClass="hyperlink-underline" text="TODO: Register Device" onAction="#browse"/>
-					<Text text=" and enter this device verification code: "/>
-					<Text text="${controller.verificationCode}"/>
+					<Text text="Verification Code: "/>
+					<Text styleClass="label-large" text="${controller.verificationCode}"/>
 				</TextFlow>
 			</VBox>
 		</HBox>
 
 		<VBox alignment="BOTTOM_CENTER" VBox.vgrow="ALWAYS">
-			<ButtonBar buttonMinWidth="120" buttonOrder="+I">
+			<ButtonBar buttonMinWidth="120" buttonOrder="+CU">
 				<buttons>
-					<Button text="%generic.button.close" ButtonBar.buttonData="FINISH" defaultButton="true" onAction="#close"/>
+					<Button text="%generic.button.close" ButtonBar.buttonData="CANCEL_CLOSE" cancelButton="true" onAction="#close"/>
+					<Button text="Register Device" ButtonBar.buttonData="OTHER" defaultButton="true" onAction="#browse" contentDisplay="LEFT">
+						<graphic>
+							<FontAwesome5IconView glyph="LINK" glyphSize="12"/>
+						</graphic>
+					</Button>
 				</buttons>
 			</ButtonBar>
 		</VBox>