Replaced dummy screenshot in "wrong file" dialog

main/ui/src/main/java/org/cryptomator/ui/wrongfilealert/WrongFileAlertController.java

@@ -1,19 +1,23 @@
 package org.cryptomator.ui.wrongfilealert;
 
 import javafx.application.Application;
-import javafx.beans.property.StringProperty;
 import javafx.fxml.FXML;
+import javafx.scene.image.Image;
 import javafx.stage.Stage;
+import org.apache.commons.lang3.SystemUtils;
 import org.cryptomator.ui.common.FxController;
 
 import javax.inject.Inject;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.UncheckedIOException;
 
 @WrongFileAlertScoped
 public class WrongFileAlertController implements FxController {
 
 	private static final String DOCUMENTATION_URI = "https://docs.cryptomator.org";
 
-	private Application app;
+	private final Application app;
 	private final Stage window;
 
 	@Inject
@@ -30,4 +34,15 @@ public class WrongFileAlertController implements FxController {
 	public void openDocumentation() {
 		app.getHostServices().showDocument(DOCUMENTATION_URI);
 	}
+
+	/* Getter */
+
+	public Image getScreenshot() {
+		final String resource = SystemUtils.IS_OS_MAC ? "/vault-volume-mac.png" : "/vault-volume-win.png";
+		try (InputStream in = getClass().getResourceAsStream(resource)) {
+			return new Image(in);
+		} catch (IOException e) {
+			throw new UncheckedIOException(e);
+		}
+	}
 }

main/ui/src/main/resources/fxml/wrongfilealert.fxml

@@ -5,7 +5,6 @@
 <?import javafx.scene.control.ButtonBar?>
 <?import javafx.scene.control.Hyperlink?>
 <?import javafx.scene.control.Label?>
-<?import javafx.scene.image.Image?>
 <?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.StackPane?>
@@ -17,10 +16,11 @@
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.wrongfilealert.WrongFileAlertController"
-	  minWidth="450"
-	  maxWidth="450"
+	  prefWidth="600"
+	  maxWidth="-Infinity"
+	  minWidth="-Infinity"
 	  minHeight="-Infinity"
-	  spacing="24"
+	  spacing="36"
 	  alignment="CENTER">
 	<padding>
 		<Insets topRightBottomLeft="24"/>
@@ -32,36 +32,33 @@
 				<FontAwesome5IconView styleClass="glyph-icon-white" glyph="INFO" glyphSize="24"/>
 			</StackPane>
 			<VBox spacing="6" alignment="CENTER_LEFT" VBox.vgrow="ALWAYS">
-				<Label text="%wrongFileAlert.header.title" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+				<Label styleClass="label-large" text="%wrongFileAlert.header.title" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
 				<Label text="%wrongFileAlert.header.lead" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
 			</VBox>
 		</HBox>
 
-		<ImageView VBox.vgrow="ALWAYS" fitHeight="200" preserveRatio="true" smooth="true" cache="true">
-			<Image url="/choose_existing_vault.png"/> <!-- TODO replace mockup -->
-		</ImageView>
+		<ImageView VBox.vgrow="ALWAYS" fitWidth="500" preserveRatio="true" smooth="true" cache="true" image="${controller.screenshot}"/>
 
-		<VBox alignment="CENTER_LEFT" VBox.vgrow="ALWAYS">
-			<Label text="%wrongFileAlert.instruction.0" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+		<VBox spacing="6" alignment="CENTER_LEFT" VBox.vgrow="ALWAYS">
+			<Label text="%wrongFileAlert.instruction.0" wrapText="true" />
 			<VBox alignment="CENTER_LEFT" VBox.vgrow="ALWAYS" spacing="6">
 				<padding>
-					<Insets left="12" top="6"/>
+					<Insets left="12"/>
 				</padding>
-				<Label text="%wrongFileAlert.instruction.1" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
-				<Label text="%wrongFileAlert.instruction.2" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
-				<Label text="%wrongFileAlert.instruction.3" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+				<Label text="%wrongFileAlert.instruction.1" wrapText="true" />
+				<Label text="%wrongFileAlert.instruction.2" wrapText="true" />
+				<Label text="%wrongFileAlert.instruction.3" wrapText="true" />
 			</VBox>
+			<TextFlow>
+				<Text text="%wrongFileAlert.link"/>
+				<Text text=" "/>
+				<Hyperlink styleClass="hyperlink-underline" text="docs.cryptomator.org" onAction="#openDocumentation"/>
+				<Text text="."/>
+			</TextFlow>
 		</VBox>
 
-		<TextFlow>
-			<Text text="%wrongFileAlert.link"/>
-			<Text text=" "/>
-			<Hyperlink styleClass="hyperlink-underline" text="docs.cryptomator.org" onAction="#openDocumentation"/>
-			<Text text="."/>
-		</TextFlow>
-
 		<VBox alignment="BOTTOM_CENTER" VBox.vgrow="ALWAYS">
-			<ButtonBar buttonMinWidth="120" buttonOrder="+CI">
+			<ButtonBar buttonMinWidth="120" buttonOrder="+C">
 				<buttons>
 					<Button text="%generic.button.close" ButtonBar.buttonData="CANCEL_CLOSE" defaultButton="true" cancelButton="true" onAction="#close"/>
 				</buttons>

main/ui/src/main/resources/i18n/strings.properties

@@ -184,7 +184,7 @@ main.vaultDetail.migrateButton=Upgrade Vault
 main.vaultDetail.migratePrompt=Your vault needs to be upgraded to a new format, before you can access it
 
 # Wrong File Alert
-wrongFileAlert.title=Encrypt Files
+wrongFileAlert.title=How to Encrypt Files
 wrongFileAlert.header.title=Did you attempt to encrypt these files?
 wrongFileAlert.header.lead=For this purpose, Cryptomator provides a volume in your system file manager.
 wrongFileAlert.instruction.0=To encrypt files, follow these steps: