Import page wording improvements

Levminer · May 9, 2023 · 9b11110 · 9b11110
1 parent b42633d
commit 9b11110
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/interface/components/details.svelte b/interface/components/details.svelte
@@ -1,13 +1,13 @@
 <div class="transparent-800 mx-auto w-full rounded-xl">
-	<Disclosure let:open>
+	<Disclosure let:open defaultOpen={openByDefault}>
 		<DisclosureButton class="transparentHover flex w-full items-center justify-between rounded-xl px-6 py-3 text-left text-2xl font-medium text-white outline-none duration-200 ease-linear focus:outline-none focus-visible:ring-4 focus-visible:ring-purple-500">
 			<span>More options</span>
 			<svg xmlns="http://www.w3.org/2000/svg" class={`${open ? "rotate-180 transform" : ""} h-5 w-5 text-white`} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
 			</svg>
 		</DisclosureButton>
 		<Transition enter="transition duration-200 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-200 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0">
-			<DisclosurePanel class="px-4 pt-4 pb-2 text-left text-lg text-gray-200">
+			<DisclosurePanel class="px-4 pb-2 pt-4 text-left text-lg text-gray-200">
 				<slot />
 			</DisclosurePanel>
 		</Transition>
@@ -16,4 +16,5 @@
 
 <script lang="ts">
 	import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from "@rgossiaux/svelte-headlessui"
+	export let openByDefault = false
 </script>
diff --git a/interface/windows/import/import.svelte b/interface/windows/import/import.svelte
@@ -58,31 +58,32 @@
 			</div>
 		</div>
 
-		<Details>
+		<Details openByDefault={true}>
 			<div class="flex justify-between">
 				<div>
-					<h4 class="text-white">Webcam</h4>
-					<h5>Use your webcam to scan a 2FA QR code.</h5>
+					<h4 class="text-white">Screen capture</h4>
+					<h5>Capture a 2FA QR code from your screen.</h5>
 				</div>
 				<div>
-					<button class="smallButton" on:click={useWebcam}>
-						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg>
-						Use webcam
+					<button class="smallButton" on:click={captureScreen}>
+						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3" /><path d="M8 21h8" /><path d="M12 17v4" /><path d="m17 8 5-5" /><path d="M17 3h5v5" /></svg>
+						Capture screen
 					</button>
 				</div>
 			</div>
 			<div class="mt-5 flex justify-between">
 				<div>
-					<h4 class="text-white">Screen capture</h4>
-					<h5>Capture a 2FA QR code from your screen.</h5>
+					<h4 class="text-white">Webcam</h4>
+					<h5>Use your webcam to scan a 2FA QR code.</h5>
 				</div>
 				<div>
-					<button class="smallButton" on:click={captureScreen}>
-						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3" /><path d="M8 21h8" /><path d="M12 17v4" /><path d="m17 8 5-5" /><path d="M17 3h5v5" /></svg>
-						Capture screen
+					<button class="smallButton" on:click={useWebcam}>
+						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg>
+						Use webcam
 					</button>
 				</div>
 			</div>
+
 			<div class="mt-5 flex justify-between">
 				<div>
 					<h4 class="text-white">Authme file</h4>
@@ -155,16 +156,14 @@
 
 <dialog class="dialog dialog2">
 	<h2>Google Authenticator QR code</h2>
-	<h3>Short tutorial on how to import your codes to Authme from Google Authenticator.</h3>
+	<h3>Short tutorial on how to import your codes into Authme from Google Authenticator.</h3>
 
 	<div class="mt-10 flex flex-row space-x-5">
 		<ol class="instructions">
-			<li>Export the QR codes from the Google Authenticator app: Tap on the three dots on the top right of the screen > Transfer Accounts > Export Accounts</li>
-			<li>Save the two or more QR code with a screenshot or take a picture of them from another phone. Then transfer the pictures to your computer</li>
-			<li>Back to Authme, go to the Import page: Sidebar > Import</li>
-			<li>Click the Choose images button</li>
-			<li>A popup windows will open, just select the picture(s)</li>
-			<li>That's it you are done!</li>
+			<li>Export the QR codes from the Google Authenticator app: Tap on the hamburger menu in the top left corner of the screen: Transfer Accounts > Export Accounts</li>
+			<li>Save the two or more QR code with a screenshot or take a picture with another phone if you are on Android. Transfer these pictures to your computer</li>
+			<li>In Authme, go to the Import page: Sidebar > Import</li>
+			<li>Click the Choose images button and select the picture(s) you transferred from your phone</li>
 		</ol>
 	</div>
 
@@ -180,16 +179,14 @@
 
 <dialog class="dialog dialog3">
 	<h2>TOTP 2FA QR code</h2>
-	<h3>Short tutorial on how to import your codes to Authme from any TOTP 2FA QR code.</h3>
+	<h3>Short tutorial on how to import your codes into Authme from any TOTP 2FA QR code.</h3>
 
 	<div class="mt-10 flex flex-row space-x-5">
 		<ol class="instructions">
-			<li>Go to the website(s) you want to get the QR codes from</li>
-			<li>Take screenshots (Windows key + Shift + S key combination on Windows) of the QR codes, and save the pictures</li>
-			<li>Back to Authme, go to the Import page: Sidebar > Import</li>
-			<li>Click the Choose images button</li>
-			<li>A popup windows will open, just select the picture(s)</li>
-			<li>That's it you are done!</li>
+			<li>Go to the website where you want to setup 2FA</li>
+			<li>Take a screenshot (Windows key + Shift + S key combination on Windows, Cmd + Shift + 3 on macOS) of the QR code, and save the pictures</li>
+			<li>In Authme, go to the Import page: Sidebar > Import</li>
+			<li>Click the Choose images button and select the pictures(s)</li>
 		</ol>
 	</div>