improved layout and added styleClass for add-box

src/main/resources/css/dark_theme.css

@@ -936,3 +936,16 @@
 	-fx-padding: 0.5px;
 	-fx-background-color: CONTROL_BORDER_NORMAL;
 }
+
+/*******************************************************************************
+ *                                                                             *
+ * Add box                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.add-box {
+	-fx-padding: 12px;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+}

src/main/resources/css/light_theme.css

@@ -935,3 +935,16 @@
 	-fx-padding: 0.5px;
 	-fx-background-color: CONTROL_BORDER_NORMAL;
 }
+
+/*******************************************************************************
+ *                                                                             *
+ * Add box                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.add-box {
+	-fx-padding: 12px;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+}

src/main/resources/fxml/share_vault.fxml

@@ -15,13 +15,10 @@
 <?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="580"
+	  prefWidth="540"
 	  spacing="12">
 	<padding>
 		<Insets topRightBottomLeft="12"/>
@@ -37,49 +34,36 @@
 	</Group>
 	<VBox>
 		<VBox HBox.hgrow="ALWAYS" visible="${controller.hubVault}" managed="${controller.hubVault}">
-			<Label text="%shareVault.hub.message" styleClass="label-extra-large" wrapText="true"/>
-			<Region minHeight="12"/>
+			<Label text="%shareVault.hub.message" styleClass="label-large" wrapText="true">
+				<padding>
+					<Insets bottom="6" top="6"/>
+				</padding>
+			</Label>
 			<Label text="%shareVault.hub.description" wrapText="true"/>
-			<GridPane alignment="CENTER_LEFT">
+			<VBox>
 				<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.1" wrapText="true" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
-				<Label text="2." GridPane.rowIndex="1" GridPane.columnIndex="0"/>
-				<Label text="%shareVault.hub.instruction.2" wrapText="true" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
-			</GridPane>
+				<Label text="%shareVault.hub.instruction.1" wrapText="true"/>
+				<Label text="%shareVault.hub.instruction.2" wrapText="true"/>
+			</VBox>
 		</VBox>
 		<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.message" styleClass="label-large" wrapText="true">
+				<padding>
+					<Insets bottom="6" top="6"/>
+				</padding>
+			</Label>
 			<Label text="%shareVault.description" wrapText="true"/>
-			<GridPane alignment="CENTER_LEFT">
+			<VBox>
 				<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.1" wrapText="true" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
-				<Label text="2." GridPane.rowIndex="1" GridPane.columnIndex="0"/>
-				<Label text="%shareVault.instruction.2" wrapText="true" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
-			</GridPane>
-			<Region minHeight="12"/>
-			<HBox HBox.hgrow="ALWAYS" spacing="6">
-				<Label text="%shareVault.remarkBestPractices" wrapText="true" VBox.vgrow="ALWAYS"/>
+				<Label text="%shareVault.instruction.1" wrapText="true"/>
+				<Label text="%shareVault.instruction.2" wrapText="true"/>
+			</VBox>
+			<Region minHeight="6"/>
+			<HBox spacing="6">
 				<Hyperlink contentDisplay="GRAPHIC_ONLY" onAction="#visitBestPractices">
 					<graphic>
 						<FontAwesome5IconView glyph="QUESTION_CIRCLE" styleClass="glyph-icon-muted"/>
@@ -88,9 +72,10 @@
 						<Tooltip text="%shareVault.docsTooltip" showDelay="100ms"/>
 					</tooltip>
 				</Hyperlink>
+				<Label text="%shareVault.remarkBestPractices" wrapText="true"/>
 			</HBox>
 			<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;">
+			<HBox alignment="CENTER_LEFT" spacing="6" styleClass="add-box">
 				<VBox spacing="6" alignment="CENTER_LEFT">
 					<ImageView HBox.hgrow="ALWAYS" fitWidth="180" preserveRatio="true" cache="true">
 						<Image url="@../img/hub_logo.png"/>

src/main/resources/i18n/strings.properties

@@ -534,8 +534,8 @@ 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.
-shareVault.instruction.2=Share the vault password in a secure way.
+shareVault.instruction.1=1. Share access of the encrypted vault folder via cloud storage.
+shareVault.instruction.2=2. Share the vault password in a secure way.
 shareVault.remarkBestPractices=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.hubAd.description=The secure way to work in teams
@@ -546,6 +546,6 @@ shareVault.visitHub=Visit Cryptomator Hub
 
 shareVault.hub.message=How to share a Hub vault
 shareVault.hub.description=In order to share the vault content with another team member, you have to perform two steps:
-shareVault.hub.instruction.1=Share access of the encrypted vault folder via cloud storage.
-shareVault.hub.instruction.2=Grant access to team member in Cryptomator Hub.
+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.openHub=Open Cryptomator Hub