improved wording and layout

src/main/resources/fxml/share_vault.fxml

@@ -15,10 +15,13 @@
 <?import javafx.scene.control.Hyperlink?>
 <?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.Group?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.RowConstraints?>
 <HBox xmlns:fx="http://javafx.com/fxml"
 	  xmlns="http://javafx.com/javafx"
 	  fx:controller="org.cryptomator.ui.sharevault.ShareVaultController"
-	  prefWidth="600"
+	  prefWidth="580"
 	  spacing="12">
 	<padding>
 		<Insets topRightBottomLeft="12"/>
@@ -33,16 +36,48 @@
 		</StackPane>
 	</Group>
 	<VBox>
-		<VBox spacing="6" HBox.hgrow="ALWAYS" visible="${controller.hubVault}" managed="${controller.hubVault}">
+		<VBox HBox.hgrow="ALWAYS" visible="${controller.hubVault}" managed="${controller.hubVault}">
 			<Label text="%shareVault.hub.message" styleClass="label-extra-large" wrapText="true"/>
-			<Label text="%shareVault.hub.instruction.0" wrapText="true"/>
-			<Label text="%shareVault.hub.instruction.1" wrapText="true"/>
-			<Label text="%shareVault.hub.instruction.2" wrapText="true"/>
+			<Region minHeight="15"/>
+			<Label text="%shareVault.hub.description" wrapText="true"/>
+			<GridPane alignment="CENTER_LEFT">
+				<padding>
+					<Insets left="6"/>
+				</padding>
+				<columnConstraints>
+					<ColumnConstraints minWidth="20" halignment="LEFT"/>
+				</columnConstraints>
+				<rowConstraints>
+					<RowConstraints valignment="TOP"/>
+					<RowConstraints valignment="TOP"/>
+				</rowConstraints>
+				<Label text="1." GridPane.rowIndex="0" GridPane.columnIndex="0"/>
+				<Label text="%shareVault.hub.instruction.0" wrapText="true" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
+				<Label text="2." GridPane.rowIndex="1" GridPane.columnIndex="0"/>
+				<Label text="%shareVault.hub.instruction.1" wrapText="true" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
+			</GridPane>
 		</VBox>
-		<VBox spacing="12" HBox.hgrow="ALWAYS" visible="${!controller.hubVault}" managed="${!controller.hubVault}">
+		<VBox HBox.hgrow="ALWAYS" visible="${!controller.hubVault}" managed="${!controller.hubVault}">
 			<Label text="%shareVault.message" styleClass="label-extra-large" wrapText="true"/>
+			<Region minHeight="12"/>
 			<Label text="%shareVault.description" wrapText="true"/>
-			<Label text="%shareVault.instruction" wrapText="true"/>
+			<GridPane alignment="CENTER_LEFT">
+				<padding>
+					<Insets left="6"/>
+				</padding>
+				<columnConstraints>
+					<ColumnConstraints minWidth="20" halignment="LEFT"/>
+				</columnConstraints>
+				<rowConstraints>
+					<RowConstraints valignment="TOP"/>
+					<RowConstraints valignment="TOP"/>
+				</rowConstraints>
+				<Label text="1." GridPane.rowIndex="0" GridPane.columnIndex="0"/>
+				<Label text="%shareVault.instruction.0" wrapText="true" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
+				<Label text="2." GridPane.rowIndex="1" GridPane.columnIndex="0"/>
+				<Label text="%shareVault.instruction.1" wrapText="true" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
+			</GridPane>
+			<Region minHeight="12"/>
 			<HBox HBox.hgrow="ALWAYS" spacing="6">
 				<Label text="%shareVault.more" wrapText="true" VBox.vgrow="ALWAYS"/>
 				<Hyperlink contentDisplay="GRAPHIC_ONLY" onAction="#visitBestPractices">
@@ -54,16 +89,24 @@
 					</tooltip>
 				</Hyperlink>
 			</HBox>
-			<HBox spacing="6" style="-fx-padding: 10px; -fx-background-color: white; -fx-border-color: #dddddd; -fx-border-width: 2px; -fx-border-radius: 5px;">
+			<Region minHeight="12"/>
+			<HBox alignment="CENTER_LEFT" spacing="6" style="-fx-padding: 10px; -fx-background-color: white; -fx-border-color: #dddddd; -fx-border-width: 2px; -fx-border-radius: 5px;">
 				<VBox spacing="6" alignment="CENTER_LEFT">
+					<ImageView HBox.hgrow="ALWAYS" fitWidth="180" preserveRatio="true" cache="true">
+						<Image url="@../img/hub_logo.png"/>
+					</ImageView>
 					<Label text="%shareVault.info.1" style="-fx-font-weight: bold;" wrapText="true"/>
-					<Label text="%shareVault.info.2" wrapText="true"/>
-					<Label text="%shareVault.info.3" wrapText="true"/>
-					<Label text="%shareVault.info.4" wrapText="true"/>
-					<Label text="%shareVault.info.5" wrapText="true"/>
+					<VBox spacing="6" alignment="CENTER_LEFT">
+						<padding>
+							<Insets left="6"/>
+						</padding>
+						<Label text="%shareVault.info.2" wrapText="true"/>
+						<Label text="%shareVault.info.3" wrapText="true"/>
+						<Label text="%shareVault.info.4" wrapText="true"/>
+					</VBox>
 				</VBox>
 				<Region HBox.hgrow="ALWAYS"/>
-				<ImageView HBox.hgrow="ALWAYS" fitWidth="200" preserveRatio="true" cache="true">
+				<ImageView HBox.hgrow="ALWAYS" fitWidth="180" preserveRatio="true" cache="true">
 					<Image url="@../img/group-magic.png"/>
 				</ImageView>
 			</HBox>

src/main/resources/i18n/strings.properties

@@ -534,18 +534,18 @@ updateReminder.yesAutomatically=Yes, Automatically
 shareVault.title=Share Vault
 shareVault.message=Would you like to share your vault with others?
 shareVault.description=Always be careful when sharing your vault with other people. In short, follow these steps:
-shareVault.instruction=1. Share access of the encrypted vault folder via cloud storage.\n2. Share vault password in a secure way.
-shareVault.more=For more information, check out our best practices.
+shareVault.instruction.0=Share access of the encrypted vault folder via cloud storage.
+shareVault.instruction.1=Share vault password in a secure way.
+shareVault.more=For more information, check out the best practices suggestions in our docs.
 shareVault.docsTooltip=Open the documentation to learn more about sharing of vaults.
 shareVault.info.1=The secure way to work in teams
-shareVault.info.2=Use Cryptomator Hub!
-shareVault.info.3=• Zero-knowledge key management
-shareVault.info.4=• Strong authentication
-shareVault.info.5=• End-to-End Encryption
+shareVault.info.2=• Zero-knowledge key management
+shareVault.info.3=• Strong authentication
+shareVault.info.4=• End-to-End Encryption
 shareVault.visitHub=Visit Cryptomator Hub
 
 shareVault.hub.message=How to share a Hub vault
-shareVault.hub.instruction.0=In order to share the vault content with another team member, you have to perform two steps:
-shareVault.hub.instruction.1=1. Share access of the encrypted vault folder via cloud storage.
-shareVault.hub.instruction.2=2. Grant access to team member in Cryptomator Hub.
+shareVault.hub.description=In order to share the vault content with another team member, you have to perform two steps:
+shareVault.hub.instruction.0=Share access of the encrypted vault folder via cloud storage.
+shareVault.hub.instruction.1=Grant access to team member in Cryptomator Hub.
 shareVault.hub.openHub=Open Cryptomator Hub