new design

src/main/java/org/cryptomator/ui/controls/FontAwesome5Icon.java

@@ -4,6 +4,8 @@ package org.cryptomator.ui.controls;
  * Inspired by de.jensd:fontawesomefx-fontawesome
  */
 public enum FontAwesome5Icon {
+	ARROW_RIGH("\uF061"),
+	LONG_ARROW_ALT_RIGHT("\uF30B"),
 	ANCHOR("\uF13D"), //
 	ARROW_UP("\uF062"), //
 	BAN("\uF05E"), //

src/main/java/org/cryptomator/ui/mainwindow/VaultDetailUnlockedController.java

@@ -11,7 +11,9 @@ import org.cryptomator.integrations.mount.Mountpoint;
 import org.cryptomator.integrations.revealpath.RevealFailedException;
 import org.cryptomator.integrations.revealpath.RevealPathService;
 import org.cryptomator.ui.common.FxController;
+import org.cryptomator.ui.common.StageFactory;
 import org.cryptomator.ui.common.VaultService;
+import org.cryptomator.ui.dialogs.SimpleDialog;
 import org.cryptomator.ui.fxapp.FxApplicationWindows;
 import org.cryptomator.ui.stats.VaultStatisticsComponent;
 import org.cryptomator.ui.wrongfilealert.WrongFileAlertComponent;
@@ -156,7 +158,7 @@ public class VaultDetailUnlockedController implements FxController {
 	public void chooseFileAndReveal() {
 		Preconditions.checkState(accessibleViaPath.getValue());
 		var fileChooser = new FileChooser();
-		fileChooser.setTitle(resourceBundle.getString("main.vaultDetail.filePickerTitle"));
+		fileChooser.setTitle(resourceBundle.getString("main.vaultDetail.decryptedFilePickerTitle"));
 		fileChooser.setInitialDirectory(Path.of(mountPoint.getValue()).toFile());
 		var cleartextFile = fileChooser.showOpenDialog(mainWindow);
 		if (cleartextFile != null) {
@@ -168,7 +170,7 @@ public class VaultDetailUnlockedController implements FxController {
 	@FXML
 	public void chooseEncryptedFileAndGetName() {
 		var fileChooser = new FileChooser();
-		fileChooser.setTitle(resourceBundle.getString("main.vaultDetail.filePickerTitle"));
+		fileChooser.setTitle(resourceBundle.getString("main.vaultDetail.encryptedFilePickerTitle"));
 
 		fileChooser.setInitialDirectory(vault.getValue().getPath().toFile());
 		var ciphertextNode = fileChooser.showOpenDialog(mainWindow);

src/main/resources/css/light_theme.css

@@ -16,6 +16,10 @@
 	src: url('opensans_bold.ttf');
 }
 
+@font-face {
+	src: url('courierprime_regular.ttf');
+}
+
 /*******************************************************************************
  *                                                                             *
  * Root Styling & Colors                                                       *
@@ -925,6 +929,13 @@
 	-fx-border-width: 1px;
 }
 
+.cryptic-text {
+	-fx-background-color: MAIN_BG;
+	-fx-text-fill: TEXT_FILL;
+	-fx-font-family: 'Courier Prime';
+	-fx-font-size: 1.1em;
+}
+
 .button.drag-n-drop:focused {
 	-fx-border-color: CONTROL_BORDER_FOCUSED;
 }

src/main/resources/fxml/vault_detail_unlocked.fxml

@@ -1,13 +1,14 @@
 <?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <?import org.cryptomator.ui.controls.ThroughputLabel?>
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.Region?>
-<?import javafx.scene.layout.VBox?>
-<?import javafx.scene.control.Tooltip?>
-<?import javafx.geometry.Insets?>
 <?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Text?>
 <VBox xmlns:fx="http://javafx.com/fxml"
 	  xmlns="http://javafx.com/javafx"
 	  fx:controller="org.cryptomator.ui.mainwindow.VaultDetailUnlockedController"
@@ -45,44 +46,51 @@
 	<Region VBox.vgrow="ALWAYS"/>
 
 	<HBox alignment="BOTTOM_CENTER">
-		<VBox>
-			<StackPane visible="${controller.accessibleViaPath}" managed="${controller.accessibleViaPath}">
-				<padding>
-					<Insets topRightBottomLeft="0"/>
-				</padding>
-				<Button fx:id="dropZone" styleClass="drag-n-drop" text="%main.vaultDetail.locateEncryptedFileBtn" minWidth="120" maxWidth="180" wrapText="true" textAlignment="CENTER" onAction="#chooseFileAndReveal" contentDisplay="LEFT" visible="${!controller.ciphertextPathsCopied}" managed="${!controller.ciphertextPathsCopied}">
-					<graphic>
-						<FontAwesome5IconView glyph="BULLSEYE" glyphSize="15"/>
-					</graphic>
-					<tooltip>
-						<Tooltip text="%main.vaultDetail.locateEncryptedFileBtn.tooltip"/>
-					</tooltip>
-				</Button>
-				<Button styleClass="drag-n-drop" text="%main.vaultDetail.encryptedPathsCopied" minWidth="120" maxWidth="180" wrapText="true" textAlignment="CENTER" onAction="#chooseFileAndReveal" contentDisplay="TOP" visible="${controller.ciphertextPathsCopied}" managed="${controller.ciphertextPathsCopied}">
-					<graphic>
-						<FontAwesome5IconView glyph="CHECK" glyphSize="15"/>
-					</graphic>
-				</Button>
-			</StackPane>
-			<StackPane visible="${controller.accessibleViaPath}" managed="${controller.accessibleViaPath}">
-				<padding>
-					<Insets topRightBottomLeft="0"/>
-				</padding>
-				<Button fx:id="dropZone2" styleClass="drag-n-drop" text="Decrypt file name" minWidth="120" maxWidth="180" wrapText="true" textAlignment="CENTER" onAction="#chooseEncryptedFileAndGetName" contentDisplay="RIGHT" visible="${!controller.ciphertextPathsCopied}" managed="${!controller.ciphertextPathsCopied}">
-					<graphic>
-						<FontAwesome5IconView glyph="DOT_CIRCLE" glyphSize="15"/>
-					</graphic>
-					<tooltip>
-						<Tooltip text="%main.vaultDetail.locateEncryptedFileBtn.tooltip"/>
-					</tooltip>
-				</Button>
-				<Button styleClass="drag-n-drop" text="%main.vaultDetail.encryptedPathsCopied" minWidth="120" maxWidth="180" wrapText="true" textAlignment="CENTER" onAction="#chooseEncryptedFileAndGetName" contentDisplay="TOP" visible="${controller.ciphertextPathsCopied}" managed="${controller.ciphertextPathsCopied}">
-					<graphic>
-						<FontAwesome5IconView glyph="CHECK" glyphSize="15"/>
-					</graphic>
-				</Button>
-			</StackPane>
-		</VBox>
+		<StackPane visible="${controller.accessibleViaPath}" managed="${controller.accessibleViaPath}">
+			<padding>
+				<Insets topRightBottomLeft="0"/>
+			</padding>
+			<Button fx:id="dropZone" styleClass="drag-n-drop" text="%main.vaultDetail.locateEncryptedFileBtn" minWidth="120" maxWidth="180" wrapText="true" textAlignment="CENTER" onAction="#chooseFileAndReveal" contentDisplay="TOP" visible="${!controller.ciphertextPathsCopied}" managed="${!controller.ciphertextPathsCopied}">
+				<graphic>
+					<HBox spacing="4">
+						<Text styleClass="cryptic-text" text="abc"/>
+						<FontAwesome5IconView glyph="ARROW_RIGH" glyphSize="10"/>
+						<Text styleClass="cryptic-text" text="101010"/>
+					</HBox>
+				</graphic>
+				<tooltip>
+					<Tooltip text="%main.vaultDetail.locateEncryptedFileBtn.tooltip"/>
+				</tooltip>
+			</Button>
+			<Button styleClass="drag-n-drop" text="%main.vaultDetail.encryptedPathsCopied" minWidth="120" maxWidth="180" wrapText="true" textAlignment="CENTER" onAction="#chooseFileAndReveal" contentDisplay="TOP" visible="${controller.ciphertextPathsCopied}" managed="${controller.ciphertextPathsCopied}">
+				<graphic>
+					<FontAwesome5IconView glyph="CHECK" glyphSize="15"/>
+				</graphic>
+			</Button>
+		</StackPane>
+		<!-- decrypt file name -->
+		<StackPane visible="${controller.accessibleViaPath}" managed="${controller.accessibleViaPath}">
+			<padding>
+				<Insets topRightBottomLeft="0"/>
+			</padding>
+			<Button fx:id="dropZone2" styleClass="drag-n-drop" text="Decrypt file name" minWidth="120" maxWidth="180" wrapText="true" textAlignment="CENTER" onAction="#chooseEncryptedFileAndGetName" contentDisplay="TOP" visible="${!controller.ciphertextPathsCopied}" managed="${!controller.ciphertextPathsCopied}">
+				<graphic>
+					<HBox spacing="4">
+						<Text styleClass="cryptic-text" text="101010"/>
+						<FontAwesome5IconView glyph="LONG_ARROW_ALT_RIGHT" glyphSize="10"/>
+						<Text styleClass="cryptic-text" text="abc"/>
+					</HBox>
+				</graphic>
+				<tooltip>
+					<Tooltip text="%main.vaultDetail.locateEncryptedFileBtn.tooltip"/>
+				</tooltip>
+			</Button>
+			<Button styleClass="drag-n-drop" text="%main.vaultDetail.encryptedPathsCopied" minWidth="120" maxWidth="180" wrapText="true" textAlignment="CENTER" onAction="#chooseEncryptedFileAndGetName" contentDisplay="TOP" visible="${controller.ciphertextPathsCopied}" managed="${controller.ciphertextPathsCopied}">
+				<graphic>
+					<FontAwesome5IconView glyph="CHECK" glyphSize="15"/>
+				</graphic>
+			</Button>
+		</StackPane>
 
 		<Region HBox.hgrow="ALWAYS"/>
 

src/main/resources/i18n/strings.properties

@@ -423,7 +423,7 @@ main.vaultDetail.stats=Vault Statistics
 main.vaultDetail.locateEncryptedFileBtn=Locate Encrypted File
 main.vaultDetail.locateEncryptedFileBtn.tooltip=Choose a file from your vault to locate its encrypted counterpart
 main.vaultDetail.encryptedPathsCopied=Paths Copied to Clipboard!
-main.vaultDetail.filePickerTitle=Select File Inside Vault
+main.vaultDetail.decryptedFilePickerTitle=Select File Inside Vault
 ### Missing
 main.vaultDetail.missing.info=Cryptomator could not find a vault at this path.
 main.vaultDetail.missing.recheck=Recheck