Merge pull request #7 from Holo-Host/UX-cleanup

UX Clean Up

holo-key-manager-extension/src/routes/+page.svelte

@@ -46,7 +46,7 @@
 		mainAction={redirectToListOfHapps}
 		mainActionLabel="List of hApps"
 		secondaryAction={redirectToChangePassword}
-		secondaryActionLabel="Change Password"
+		secondaryActionLabel="Change password"
 		title="Holo Key Manager"
 		subTitle=""
 	/>
@@ -57,6 +57,6 @@
 		mainAction={redirectToSetup}
 		mainActionLabel="Setup"
 		title="Setup Required"
-		subTitle="You are yet to setup Holo Key Manager. Click “start setup” to begin."
+		subTitle="Please set up Holo Key Manager to continue."
 	/>
 {/if}

holo-key-manager-extension/src/routes/change-password/+page.svelte

@@ -25,25 +25,25 @@
 		<img src="/img/arrow-left.svg" alt="Arrow" />
 		<span class="ml-2 text-base">Back</span></button
 	>
-	<Title>Manage Password</Title>
+	<Title>Change Password</Title>
 	{#if $changePasswordWithDeviceKeyMutation.error}
 		<span class="text-xs text-alert">{$changePasswordWithDeviceKeyMutation.error.message}</span>
 	{/if}
 	<div class="w-full p-6">
-		<Input type="password" bind:value={oldPassword} label="Old Password" extraProps="mb-6" />
+		<Input type="password" bind:value={oldPassword} label="Old password" extraProps="mb-6" />
 		<Input
 			type="password"
 			bind:value={$passwordStore}
-			label="New Password (8 Characters min)"
+			label="New password (8 characters min)"
 			extraProps="mb-6"
-			error={charCount < 8 ? 'Please enter a minimum of 8 Characters' : ''}
+			error={charCount < 8 ? 'Please enter a minimum of 8 characters' : ''}
 		/>
 		<Input
 			type="password"
 			bind:value={confirmPassword}
-			label="Confirm New Password"
+			label="Confirm new password"
 			extraProps="mb-4"
-			error={confirmPassword !== $passwordStore ? "Password doesn't Match" : ''}
+			error={confirmPassword !== $passwordStore ? "Password doesn't match" : ''}
 		/>
 	</div>
 

holo-key-manager-extension/src/routes/extension-password/+page.svelte

@@ -27,22 +27,22 @@
 	<Title>Set Key Manager Password</Title>
 	<AppParagraph
 		extraProps="mx-auto max-w-sm text-center"
-		text="This password secures your Key Manager extension, it would be requested each time you launch it."
+		text="This password secures your Key Manager extension and is requested each time you launch it."
 	/>
 	<div class="w-full p-6">
 		<Input
 			type="password"
 			bind:value={$passwordStore}
-			label="New Password (8 Characters min)"
+			label="Enter password (8 characters min)"
 			extraProps="mb-6"
-			error={charCount < 8 ? 'Please enter a minimum of 8 Characters' : ''}
+			error={charCount < 8 ? 'Please enter a minimum of 8 characters' : ''}
 		/>
 		<Input
 			type="password"
 			bind:value={confirmPassword}
-			label="Confirm New Password"
+			label="Confirm password"
 			extraProps="mb-4"
-			error={confirmPassword !== $passwordStore ? "Password doesn't Match" : ''}
+			error={confirmPassword !== $passwordStore ? "Password doesn't match" : ''}
 		/>
 	</div>
 

holo-key-manager-extension/src/routes/list-of/happs/+page.svelte

@@ -26,7 +26,7 @@
 </script>
 
 <div class="mt-4 flex justify-between">
-	<h2 class="text-xl font-semibold">Managed hApps</h2>
+	<h2 class="text-xl font-semibold">hApps</h2>
 	<div class="relative">
 		<img
 			src={'/img/magnifying-glass.svg'}

holo-key-manager-extension/src/routes/list-of/keys/+page.svelte

@@ -48,8 +48,8 @@
 			<tr class="w-full" class:bg-gray-100={index % 2 === 0}>
 				<td class="border-b px-4 py-2 last:border-b-0">{applicationKey.keyName}</td>
 				<td class="flex justify-end border-b px-4 py-2 last:border-b-0">
-					<button class="mr-2 rounded-md px-4 py-2 text-sm text-grey" disabled> Delete Key </button>
-					<button class="rounded-md px-4 py-2 text-sm text-grey" disabled> Change Key </button>
+					<button class="mr-2 rounded-md px-4 py-2 text-sm text-grey" disabled> Revoke key </button>
+					<button class="rounded-md px-4 py-2 text-sm text-grey" disabled> Change key </button>
 				</td>
 			</tr>
 		{/each}

holo-key-manager-extension/src/routes/setup-keys/download/+page.svelte

@@ -51,11 +51,15 @@
 
 <img src="/img/check.svg" alt="check" class="my-4 w-12" />
 
-<Title>Save Seed Files and Keys</Title>
+<Title>Save seed and key files</Title>
 <AppParagraph
 	extraProps="mx-auto max-w-md text-center"
-	text="All done, please save your files. Remember to back them up an external drive you store in a secure location."
+	text="All done, please save your files. Remember to back them up an external drive you store in a secure location"
+/>
+<AppParagraph
+	extraProps="mx-auto max-w-md text-center"
+	text="Learn more about seed and key files by visiting our FAQ page</a>."
 />
 
 <img src="/img/padlock.svg" alt="Padlock" class="my-6" />
-<Button label="Save" onClick={download} />
+<Button label="Export" onClick={download} />

holo-key-manager-extension/src/routes/setup-keys/generate-keys/+page.svelte

@@ -36,15 +36,15 @@
 	<span>Loading</span>
 {:else}
 	<img src="/img/download.svg" alt="Download" class="my-4 w-12" />
-	<Title>Generate Seed & Key files</Title>
+	<Title>Generate seed and key files</Title>
 	<AppParagraph
 		extraProps="mx-auto max-w-md text-center"
 		text="Click the button below to generate and save your seed and key files. Please save this on your external hard drive or USB drive."
 	/>
 	<p class="mt-4 text-center text-base font-bold text-secondary">Context:</p>
 	<AppParagraph
 		extraProps="mx-auto text-center"
-		text="Remember, you will need BOTH the seed and your passphrase to restore any keys that are created from this seed. Remember to store your drives in save places like a safe, you can also save copies of this on digital drives"
+		text="Remember, you will need BOTH the seed and your passphrase to restore any keys that are created from this seed."
 	/>
 	<img src="/img/padlock.svg" alt="Padlock" class="my-6" />
 	<Button label="Generate" onClick={generate} />

holo-key-manager-extension/src/routes/setup-pass/enter-passphrase/+page.svelte

@@ -5,11 +5,9 @@
 	import { passphraseStore } from '$stores';
 
 	import EnterSecretComponent from './EnterSecretComponent.svelte';
-	import PopupDialog from './PopupDialog.svelte';
 
 	let passphraseState: SetSecret = 'set';
 	let confirmPassphrase = '';
-	let showDialog = false;
 
 	$: charCount = $passphraseStore.length;
 
@@ -27,24 +25,21 @@
 		isDisabled={charCount < 20}
 		bind:inputValue={$passphraseStore}
 		title="Enter Passphrase"
-		description="Enter your desired passphrase and remind to keep it safe."
-		nextLabel="Set Passphrase"
+		description="Make your passphrase as strong as possible. It should be long, include a mix of many different type of characters, and be hard to guess. Save it somewhere safe"
+		nextLabel="Set passphrase"
 		inputState={charCount < 20
-			? 'Please enter a minimum of 20 Characters'
+			? 'Please enter a minimum of 20 characters'
 			: `${charCount} characters`}
-		next={() => (showDialog = true)}
+		next={() => (passphraseState = 'confirm')}
 	/>
-	{#if showDialog}
-		<PopupDialog next={() => (passphraseState = 'confirm')} dismiss={() => (showDialog = false)} />
-	{/if}
 {/if}
 
 {#if passphraseState === 'confirm'}
 	<EnterSecretComponent
 		bind:inputValue={confirmPassphrase}
 		isDisabled={confirmPassphrase !== $passphraseStore}
 		title="Confirm Passphrase"
-		description="Tying loose ends, please enter your passphrase again."
+		description="Please enter your passphrase again."
 		nextLabel="Next"
 		inputState={confirmPassphrase !== $passphraseStore ? 'Passphrases do not match' : ``}
 		next={() => goto('/setup-keys/generate-keys')}

holo-key-manager-extension/src/routes/setup-pass/enter-passphrase/Tooltip.svelte

@@ -1,6 +1,6 @@
 <div class="group relative cursor-pointer">
 	<div class="flex items-center text-base text-primary">
-		<p>What is passphrase</p>
+		<p>What is a passphrase</p>
 		<img src="/img/question.svg" alt="Question icon" class="ml-2" />
 	</div>
 	<div
@@ -9,14 +9,7 @@
 		<strong class="text-sm text-black">Passphrase</strong>
 		<p>
 			This is can be a word or sentence of your choice. E.g Manager (word) or The quick brown fox
-			jumps over the lazy dog (sentence). Make your passphrase as strong as possible. It should be
-			long, include a mix of many different types of characters, and be hard to guess.
+			jumps over the lazy dog (sentence).
 		</p>
-		<p class="pt-2">
-			You can optionally turn off your internet while doing this for added security.
-		</p>
-		<div class="pt-2">
-			<strong>Tip:</strong> Write down or store your passphrase in a password manager.
-		</div>
 	</div>
 </div>

holo-key-manager-extension/src/routes/setup-pass/import-key/+page.svelte

@@ -39,7 +39,7 @@
 <Title>Import Your Device Seed</Title>
 <AppParagraph
 	extraProps="my-4 max-w-xs text-center"
-	text="Kindly import your device seed file below to recover your Key Manager"
+	text="Please import your device seed file below to recover your Key Manager"
 />
 <div class="w-full p-6 px-16">
 	<Dropzone
@@ -95,7 +95,7 @@
 		<input
 			bind:value={passphrase}
 			type="passphrase"
-			placeholder="Enter Passphrase"
+			placeholder="Enter passphrase"
 			class={clsx('rounded border p-2 outline-none focus:outline-none', {
 				'border-black': !$recoverDeviceKeyMutation.error,
 				'border-alert': $recoverDeviceKeyMutation.error
@@ -107,7 +107,10 @@
 			}}
 		/>
 		{#if $recoverDeviceKeyMutation.error}
-			<span class="mt-2 self-end text-base text-alert">Wrong file or passphrase, try again</span>
+			<span class="mt-2 self-end text-base text-alert"
+				>Oops! We couldn't import your device seed.</span
+			>
+			<span>Please try again.</span>
 		{/if}
 	</div>
 </div>

holo-key-manager-extension/src/routes/setup-pass/start/+page.svelte

@@ -5,20 +5,9 @@
 
 <img src="/img/holo_logo.svg" alt="Holo Key Manager Logo" class="my-4 w-12" />
 <Title>Holo Key Manager</Title>
-<div class="mb-4 w-full border-b-[0.5px] border-light-gray">
-	<AppParagraph extraProps="mx-auto max-w-xs text-center" text="Welcome to Holo Key Manager." />
-	<AppParagraph
-		extraProps="mx-auto mb-4 max-w-xs text-center"
-		text="Let’s setup up your hApps key manager."
-	/>
-</div>
 <AppParagraph
 	extraProps="my-4 max-w-xs"
-	text="Holo Key Manager is a secure key manager for creating and managing Holochain keys. Get easy access to all your keys. You can set up and manager one or more keys for each application"
+	text="Holo Key Manager is a safe place to set up and manage keys for Holochain apps. Get started below."
 />
-<AppParagraph
-	extraProps="my-4 max-w-xs"
-	text="First time user? Select “first time setup” below. If you have already setup the key manager in the past you can select “Import existing keys"
-/>
-<Button arrow label="First time setup" onClick={() => goto('/extension-password')} />
+<Button arrow label="First time set up" onClick={() => goto('/extension-password')} />
 <Button label="Import existing keys" onClick={() => goto('import-key')} color="secondary" />

holo-key-manager-extension/src/routes/webapp-extension/+layout.svelte

@@ -29,7 +29,7 @@
 			}}
 			mainActionLabel="Setup"
 			title="Setup Required"
-			subTitle="You are yet to setup Holo Key Manager. Click “start setup” to begin."
+			subTitle="Please set up Holo Key Manager to continue."
 		/>
 	{/if}
 </div>

holo-key-manager-extension/src/routes/webapp-extension/create-key/+page.svelte

@@ -32,7 +32,7 @@
 	<h1 class="mt-4 text-2xl font-bold">Sign up</h1>
 	<AppParagraph
 		extraProps="my-4 max-w-48 text-center"
-		text="Please provide the following details below"
+		text="Please provide the following details"
 	/>
 </div>
 
@@ -41,13 +41,13 @@
 {/if}
 {#if $extractDetailsFromUrl.requireRegistrationCode}
 	<Input
-		label="Registration Code:"
+		label="Registration code:"
 		bind:value={registrationCode}
 		extraProps="mb-4"
 		error={errors.registrationCode}
 	/>
 {/if}
-<Input label="Name This Key:" bind:value={keyName} extraProps="mb-4" error={errors.keyName} />
+<Input label="Name this key:" bind:value={keyName} extraProps="mb-4" error={errors.keyName} />
 
 {#if $applicationKeyMutation.error}
 	<div class="mutation-error">

holo-key-manager-extension/static/manifest.json

@@ -1,7 +1,7 @@
 {
 	"name": "Holo key manager",
 	"description": "A browser extension to manage holo keys",
-	"version": "0.0.61",
+	"version": "0.0.62",
 	"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAiAtKvbHNTN3O2BLRZH7RkLczaMLenSeZu+YP+KomPQPZ18nt4DY9boIN/+GWts7gCzEeQq59l8edGdF2P7xAbsRxYR88+zFEbxMtIyfyqJZIlzXwnvPJkwGu/S6arNtX48K7q1+xnJEE7VyeYSj6/i2LR+LmPigCzY9JCP7+SmWVeYbdm3kZmReK0ecfh15RXSNjZpXJUgrbea/RVxweggYKnmhhOUBmuJSCLoWTXIuJPBMwGQK1O2GKBqHOq94bPVSF7j+4WzSpPan70ZZJX/reFsOFE/idfFN6wbizjR1Ne50Po03kudEmfQgoqUhVpd0wP8A3YbqE7ODdZcCPPwIDAQAB",
 	"manifest_version": 3,
 	"action": {