From cd2d166a3b45c596a940889b4a62b5581aecfbeb Mon Sep 17 00:00:00 2001
From: Dawid Urbas <dawid@getbold.agency>
Date: Wed, 25 Oct 2023 15:30:26 +0200
Subject: [PATCH] Add passphrase page

---
 package.json                                  | 11 ++--
 pnpm-lock.yaml                                | 10 ++++
 src/lib/components/AppParagraph.svelte        |  3 +-
 src/lib/components/Button.svelte              | 20 +++++--
 src/lib/components/Tooltip.svelte             |  8 +++
 src/lib/helpers/index.ts                      |  1 +
 src/lib/helpers/navigation.ts                 |  3 +
 src/lib/stores/const.ts                       |  1 +
 src/lib/stores/index.ts                       |  2 +
 src/lib/stores/passphraseStore.ts             |  5 ++
 src/lib/types/index.ts                        |  1 +
 src/lib/types/password.ts                     |  1 +
 src/routes/+page.svelte                       | 11 ++--
 src/routes/setup/+layout.svelte               | 23 ++++++++
 src/routes/setup/+page.svelte                 | 28 ----------
 .../setup/enter-passphrase/+page.svelte       | 45 +++++++++++++++
 .../EnterPassphraseComponent.svelte           | 55 +++++++++++++++++++
 .../setup/enter-passphrase/PopupDialog.svelte | 22 ++++++++
 src/routes/setup/start/+page.svelte           | 25 +++++++++
 static/img/arrow-left.svg                     |  3 +
 static/img/{arrow.svg => arrow-right.svg}     |  0
 static/img/noun.svg                           |  5 ++
 static/img/question.svg                       | 12 ++++
 svelte.config.js                              |  5 +-
 tailwind.config.js                            |  8 ++-
 25 files changed, 260 insertions(+), 48 deletions(-)
 create mode 100644 src/lib/components/Tooltip.svelte
 create mode 100644 src/lib/helpers/index.ts
 create mode 100644 src/lib/helpers/navigation.ts
 create mode 100644 src/lib/stores/const.ts
 create mode 100644 src/lib/stores/index.ts
 create mode 100644 src/lib/stores/passphraseStore.ts
 create mode 100644 src/lib/types/index.ts
 create mode 100644 src/lib/types/password.ts
 create mode 100644 src/routes/setup/+layout.svelte
 delete mode 100644 src/routes/setup/+page.svelte
 create mode 100644 src/routes/setup/enter-passphrase/+page.svelte
 create mode 100644 src/routes/setup/enter-passphrase/EnterPassphraseComponent.svelte
 create mode 100644 src/routes/setup/enter-passphrase/PopupDialog.svelte
 create mode 100644 src/routes/setup/start/+page.svelte
 create mode 100644 static/img/arrow-left.svg
 rename static/img/{arrow.svg => arrow-right.svg} (100%)
 create mode 100644 static/img/noun.svg
 create mode 100644 static/img/question.svg

diff --git a/package.json b/package.json
index b06f567..26c4ec2 100644
--- a/package.json
+++ b/package.json
@@ -26,13 +26,16 @@
 		"postcss": "^8.4.31",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
-		"tailwindcss": "^3.3.3",
-		"tiny-glob": "^0.2.9",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"clsx": "^2.0.0",
+		"svelte": "^4.0.5",
+		"tailwindcss": "^3.3.3",
+		"tiny-glob": "^0.2.9"
+	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 35cbabd..bf56541 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+dependencies:
+  clsx:
+    specifier: ^2.0.0
+    version: 2.0.0
+
 devDependencies:
   '@sveltejs/adapter-static':
     specifier: ^2.0.3
@@ -824,6 +829,11 @@ packages:
       string-width: 5.1.2
     dev: true
 
+  /clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /code-red@1.0.4:
     resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
     dependencies:
diff --git a/src/lib/components/AppParagraph.svelte b/src/lib/components/AppParagraph.svelte
index 9ecd435..38a63da 100644
--- a/src/lib/components/AppParagraph.svelte
+++ b/src/lib/components/AppParagraph.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	export let text: string;
+	export let textColor = 'text-secondary';
 	export let extraProps = '';
 </script>
 
-<p class="text-base text-gray font-normal max-w-xs {extraProps}">
+<p class="{textColor} text-base font-normal {extraProps}">
 	{text}
 </p>
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index dd93406..4122a39 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -3,17 +3,27 @@
 	export let onClick: () => void;
 	export let color: 'primary' | 'secondary' = 'primary';
 	export let arrow = false;
+	export let extraBottomMargin = false;
+	export let disabled = false;
+
+	import clsx from 'clsx';
 </script>
 
 <button
-	class="max-w-xs p-2 my-2 rounded-2xl w-full text-base font-bold relative flex justify-center
-    items-center {color === 'primary'
-		? 'bg-primary text-white'
-		: 'bg-white text-gray border border-gray'}"
+	class={clsx(
+		'max-w-xs p-2 my-2 rounded-2xl text-base font-bold relative flex justify-center w-full',
+		{
+			'bg-primary-disabled text-white': color === 'primary' && disabled,
+			'bg-primary text-white': color === 'primary' && !disabled,
+			'bg-white text-secondary border border-secondary': color !== 'primary',
+			'mb-4': extraBottomMargin
+		}
+	)}
 	on:click={onClick}
+	{disabled}
 >
 	<span>{label}</span>
 	{#if arrow}
-		<img src="/img/arrow.svg" alt="Arrow" class="absolute right-4" />
+		<img src="/img/arrow-right.svg" alt="Arrow" class="absolute right-4" />
 	{/if}
 </button>
diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
new file mode 100644
index 0000000..173364c
--- /dev/null
+++ b/src/lib/components/Tooltip.svelte
@@ -0,0 +1,8 @@
+<div class="relative cursor-pointer group">
+	<slot name="content" />
+	<div
+		class="absolute invisible group-hover:visible z-10 bottom-full left-1/2 transform -translate-x-1/2 bg-white px-4 py-2 text-secondary text-sm rounded-md transition-opacity opacity-0 group-hover:opacity-100 shadow-lg w-96"
+	>
+		<slot name="body" />
+	</div>
+</div>
diff --git a/src/lib/helpers/index.ts b/src/lib/helpers/index.ts
new file mode 100644
index 0000000..701e505
--- /dev/null
+++ b/src/lib/helpers/index.ts
@@ -0,0 +1 @@
+export * from './navigation';
diff --git a/src/lib/helpers/navigation.ts b/src/lib/helpers/navigation.ts
new file mode 100644
index 0000000..8814b0b
--- /dev/null
+++ b/src/lib/helpers/navigation.ts
@@ -0,0 +1,3 @@
+export function dismissExtensionWindow() {
+	return window.close();
+}
diff --git a/src/lib/stores/const.ts b/src/lib/stores/const.ts
new file mode 100644
index 0000000..e1f607b
--- /dev/null
+++ b/src/lib/stores/const.ts
@@ -0,0 +1 @@
+export const passphrase = 'passphrase';
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
new file mode 100644
index 0000000..1697a92
--- /dev/null
+++ b/src/lib/stores/index.ts
@@ -0,0 +1,2 @@
+export * from './passphraseStore';
+export * from './const';
diff --git a/src/lib/stores/passphraseStore.ts b/src/lib/stores/passphraseStore.ts
new file mode 100644
index 0000000..379e764
--- /dev/null
+++ b/src/lib/stores/passphraseStore.ts
@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+const passphraseStore = writable('');
+
+export { passphraseStore };
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
new file mode 100644
index 0000000..47b7e7a
--- /dev/null
+++ b/src/lib/types/index.ts
@@ -0,0 +1 @@
+export * from './password';
diff --git a/src/lib/types/password.ts b/src/lib/types/password.ts
new file mode 100644
index 0000000..fd468f9
--- /dev/null
+++ b/src/lib/types/password.ts
@@ -0,0 +1 @@
+export type SetPassphrase = 'set' | 'confirm';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 717963b..227f9b3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,9 @@
 <script>
 	import Button from '$components/Button.svelte';
 	import AppParagraph from '$components/AppParagraph.svelte';
+	import { dismissExtensionWindow } from '$lib/helpers';
 	function redirectToSetup() {
-		window.open('setup.html', '_blank');
-	}
-
-	function dismissExtensionWindow() {
-		return window.close();
+		window.open('setup/start.html', '_blank');
 	}
 </script>
 
@@ -22,11 +19,11 @@
 		<img src="/img/setup.svg" alt="Close" class="max-w-[48px]" />
 		<p class="font-bold text-2xl mt-4">Setup Required</p>
 		<AppParagraph
-			extraProps="my-4 text-center"
+			extraProps="my-4 text-center max-w-xs"
 			text="You are yet to setup Holo Key Manager. Click “start setup” to begin."
 		/>
 	</div>
 
-	<Button label="Start setup" onClick={redirectToSetup} />
+	<Button label="Start setup" onClick={redirectToSetup} extraBottomMargin />
 	<Button label="Cancel" onClick={dismissExtensionWindow} color="secondary" />
 </div>
diff --git a/src/routes/setup/+layout.svelte b/src/routes/setup/+layout.svelte
new file mode 100644
index 0000000..5a9a4f3
--- /dev/null
+++ b/src/routes/setup/+layout.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { page } from '$app/stores';
+	import { setContext } from 'svelte';
+	import { passphrase, passphraseStore } from '$stores';
+
+	function dismissExtensionWindow() {
+		window.history.back();
+	}
+
+	setContext(passphrase, passphraseStore);
+</script>
+
+<div
+	class="flex flex-col items-center mt-20 w-[576px] border border-light-gray rounded-xl mx-auto py-8"
+>
+	{#if !$page.url.pathname.includes('start')}
+		<button class="self-start ml-6 mb-4 flex items-center" on:click={dismissExtensionWindow}>
+			<img src="/img/arrow-left.svg" alt="Arrow" />
+			<span class="ml-2 text-base">Back</span></button
+		>
+	{/if}
+	<slot />
+</div>
diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte
deleted file mode 100644
index 45edbcd..0000000
--- a/src/routes/setup/+page.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import Button from '$components/Button.svelte';
-	import AppParagraph from '$components/AppParagraph.svelte';
-</script>
-
-<div
-	class="flex flex-col items-center mt-20 w-[576px] border border-light-gray rounded-xl mx-auto py-8"
->
-	<img src="/img/holo_logo.svg" alt="Holo Key Manager Logo" class="w-12 my-4" />
-	<h1 class="text-4xl font-bold text-center">Holo Key Manager</h1>
-	<div class="border-b-[0.5px] my-4 border-light-gray w-full">
-		<AppParagraph extraProps="mx-auto text-center" text="Welcome to Holo Key Manager." />
-		<AppParagraph
-			extraProps="mx-auto text-center  mb-4"
-			text="Let’s setup up your hApps key manager."
-		/>
-	</div>
-	<AppParagraph
-		extraProps="my-4"
-		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"
-	/>
-	<AppParagraph
-		extraProps="my-4"
-		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={() => null} />
-	<Button label="Import existing keys" onClick={() => null} color="secondary" />
-</div>
diff --git a/src/routes/setup/enter-passphrase/+page.svelte b/src/routes/setup/enter-passphrase/+page.svelte
new file mode 100644
index 0000000..ad326be
--- /dev/null
+++ b/src/routes/setup/enter-passphrase/+page.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import PopupDialog from './PopupDialog.svelte';
+	import { getContext } from 'svelte';
+	import { passphrase } from '$stores';
+	import EnterPassphraseComponent from './EnterPassphraseComponent.svelte';
+	import type { SetPassphrase } from '$lib/types';
+	import type { Writable } from 'svelte/store';
+
+	const passphraseStore = getContext<Writable<string>>(passphrase);
+
+	let passphraseState: SetPassphrase = 'set';
+	let confirmPassphrase = '';
+	let showDialog = false;
+
+	$: charCount = $passphraseStore.length;
+</script>
+
+{#if passphraseState === 'set'}
+	<EnterPassphraseComponent
+		bind:inputValue={$passphraseStore}
+		isRed={charCount < 20}
+		title="Enter Passphrase"
+		description="Enter your desired passphrase and remind to keep it safe."
+		nextLabel="Set Passphrase"
+		inputState={charCount < 20
+			? 'Please enter a minimum of 20 Characters'
+			: `${charCount} characters`}
+		next={() => (showDialog = true)}
+	/>
+	{#if showDialog}
+		<PopupDialog next={() => (passphraseState = 'confirm')} dismiss={() => (showDialog = false)} />
+	{/if}
+{/if}
+
+{#if passphraseState === 'confirm'}
+	<EnterPassphraseComponent
+		bind:inputValue={confirmPassphrase}
+		isRed={confirmPassphrase !== $passphraseStore}
+		title="Confirm Passphrase"
+		description="Tying loose ends, please enter your passphrase again."
+		nextLabel="Next"
+		inputState={confirmPassphrase !== $passphraseStore ? 'Passphrases do not match' : ``}
+		next={() => null}
+	/>
+{/if}
diff --git a/src/routes/setup/enter-passphrase/EnterPassphraseComponent.svelte b/src/routes/setup/enter-passphrase/EnterPassphraseComponent.svelte
new file mode 100644
index 0000000..84f0047
--- /dev/null
+++ b/src/routes/setup/enter-passphrase/EnterPassphraseComponent.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import AppParagraph from '$components/AppParagraph.svelte';
+	import Button from '$components/Button.svelte';
+	import Tooltip from '$components/Tooltip.svelte';
+	import { dismissExtensionWindow } from '$lib/helpers';
+	import clsx from 'clsx';
+
+	export let inputValue: string;
+	export let isRed: boolean;
+	export let title: string;
+	export let description: string;
+	export let nextLabel: string;
+	export let inputState: string;
+	export let next: () => void;
+</script>
+
+<h1 class="text-4xl font-bold text-center mb-2">{title}</h1>
+<AppParagraph extraProps="mx-auto text-center" text={description} />
+<div class="p-6 w-full">
+	<textarea
+		bind:value={inputValue}
+		class="w-full h-44 rounded border border-secondary resize-none py-1 px-2 text-sm"
+		placeholder={title}
+	/>
+	<div class="flex justify-between items-center">
+		<AppParagraph textColor={clsx(isRed && 'text-alert')} text={inputState} />
+		<Tooltip>
+			<div slot="content">
+				<div class="flex items-center text-primary text-base">
+					<p>What is passphrase</p>
+					<img src="/img/question.svg" alt="Question icon" class="ml-2" />
+				</div>
+			</div>
+			<div slot="body">
+				<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.
+				</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>
+		</Tooltip>
+	</div>
+</div>
+
+<div class="grid grid-cols-2 gap-5 w-full p-6">
+	<Button label="Cancel" onClick={dismissExtensionWindow} color="secondary" />
+	<Button disabled={inputValue.length < 20} label={nextLabel} onClick={next} />
+</div>
diff --git a/src/routes/setup/enter-passphrase/PopupDialog.svelte b/src/routes/setup/enter-passphrase/PopupDialog.svelte
new file mode 100644
index 0000000..f1e713c
--- /dev/null
+++ b/src/routes/setup/enter-passphrase/PopupDialog.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let dismiss: () => void;
+	export let next: () => void;
+</script>
+
+<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-500 bg-opacity-70">
+	<div class="bg-white p-10 rounded-md shadow-lg flex flex-col items-center">
+		<img src="/img/noun.svg" alt="Noun" />
+		<div class="my-4">
+			<h2 class="text-xl font-semibold">Important</h2>
+		</div>
+		<p>Did you remember to write down your passphrase?</p>
+		<div class="mt-4 flex flex-col justify-center w-36 mx-auto">
+			<button class="bg-tertiary text-white font-bold py-2 px-4 rounded-full m-2" on:click={next}>
+				Yes
+			</button>
+			<button class="underline text-quaternary font-bold py-2 px-4 m-2 bg-white" on:click={dismiss}>
+				Go back
+			</button>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/setup/start/+page.svelte b/src/routes/setup/start/+page.svelte
new file mode 100644
index 0000000..4ae04d1
--- /dev/null
+++ b/src/routes/setup/start/+page.svelte
@@ -0,0 +1,25 @@
+<script>
+	import Button from '$components/Button.svelte';
+	import AppParagraph from '$components/AppParagraph.svelte';
+	import { goto } from '$app/navigation';
+</script>
+
+<img src="/img/holo_logo.svg" alt="Holo Key Manager Logo" class="w-12 my-4" />
+<h1 class="text-4xl font-bold text-center">Holo Key Manager</h1>
+<div class="border-b-[0.5px] my-4 border-light-gray w-full">
+	<AppParagraph extraProps="mx-auto text-center max-w-xs" text="Welcome to Holo Key Manager." />
+	<AppParagraph
+		extraProps="mx-auto text-center max-w-xs mb-4"
+		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"
+/>
+<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('/setup/enter-passphrase')} />
+<Button label="Import existing keys" onClick={() => null} color="secondary" />
diff --git a/static/img/arrow-left.svg b/static/img/arrow-left.svg
new file mode 100644
index 0000000..6435388
--- /dev/null
+++ b/static/img/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12L0 6L6 0L7.4 1.45L3.85 5H16V7H3.85L7.4 10.55L6 12Z" fill="#262A33"/>
+</svg>
diff --git a/static/img/arrow.svg b/static/img/arrow-right.svg
similarity index 100%
rename from static/img/arrow.svg
rename to static/img/arrow-right.svg
diff --git a/static/img/noun.svg b/static/img/noun.svg
new file mode 100644
index 0000000..b0f80fd
--- /dev/null
+++ b/static/img/noun.svg
@@ -0,0 +1,5 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.7717 63.2115C49.4642 63.2115 63.0437 49.632 63.0437 32.9395C63.0437 16.247 49.4642 2.66479 32.7717 2.66479C16.0792 2.66479 2.49695 16.2443 2.49695 32.9395C2.4997 49.632 16.0792 63.2115 32.7717 63.2115ZM32.7717 8.6818C46.1504 8.6818 57.0267 19.5635 57.0267 32.9395C57.0267 46.3128 46.1504 57.1945 32.7717 57.1945C19.3957 57.1945 8.51395 46.3128 8.51395 32.9395C8.5167 19.5635 19.3984 8.6818 32.7717 8.6818Z" fill="#D9001A"/>
+<path d="M32.7717 39.3965C34.4327 39.3965 35.7802 38.0518 35.7802 36.3853V20.3418C35.7802 18.6808 34.4299 17.3333 32.7717 17.3333C31.1134 17.3333 29.7632 18.6808 29.7632 20.3418V36.3853C29.7632 38.0518 31.1134 39.3965 32.7717 39.3965Z" fill="#D9001A"/>
+<path d="M32.7717 48.5429C34.4327 48.5429 35.7802 47.1981 35.7802 45.5344V45.0339C35.7802 43.3729 34.4299 42.0254 32.7717 42.0254C31.1134 42.0254 29.7632 43.3701 29.7632 45.0339V45.5344C29.7632 47.1981 31.1134 48.5429 32.7717 48.5429Z" fill="#D9001A"/>
+</svg>
diff --git a/static/img/question.svg b/static/img/question.svg
new file mode 100644
index 0000000..367115c
--- /dev/null
+++ b/static/img/question.svg
@@ -0,0 +1,12 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_72_39255)">
+<path d="M8.534 3.85938C7.174 3.85938 6.052 4.96437 6.052 6.34137C6.052 6.69837 6.341 6.97037 6.681 6.97037C7.021 6.97037 7.31 6.68137 7.31 6.34137C7.31 5.67837 7.854 5.13437 8.517 5.13437C9.214 5.13437 9.724 5.62737 9.724 6.29037C9.724 6.29037 9.724 6.30737 9.724 6.34137C9.724 6.71537 9.622 7.59937 8.415 7.78637C8.109 7.83737 7.871 8.09237 7.871 8.41537V10.1324C7.871 10.4894 8.16 10.7614 8.5 10.7614C8.84 10.7614 9.129 10.4724 9.129 10.1324V8.92537C10.727 8.43237 10.982 7.05537 10.982 6.29037C11.016 4.93037 9.894 3.85938 8.534 3.85938Z" fill="#4820E3"/>
+<path d="M8.53402 11.5264C8.07502 11.5264 7.71802 11.9004 7.71802 12.3424C7.71802 12.7844 8.09202 13.1584 8.53402 13.1584C8.97602 13.1584 9.35002 12.7844 9.35002 12.3424C9.35002 11.9004 8.97602 11.5264 8.53402 11.5264Z" fill="#4820E3"/>
+<path d="M8.53404 0.135742C3.96104 0.135742 0.238037 3.85874 0.238037 8.43174C0.238037 13.0047 3.96104 16.7277 8.53404 16.7277C13.107 16.7277 16.83 13.0047 16.83 8.43174C16.83 3.85874 13.107 0.135742 8.53404 0.135742ZM8.53404 15.4697C4.65804 15.4697 1.49604 12.3077 1.49604 8.43174C1.49604 4.55574 4.65804 1.39374 8.53404 1.39374C12.41 1.39374 15.572 4.55574 15.572 8.43174C15.555 12.3077 12.41 15.4697 8.53404 15.4697Z" fill="#4820E3"/>
+</g>
+<defs>
+<clipPath id="clip0_72_39255">
+<rect width="17" height="17" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/svelte.config.js b/svelte.config.js
index b55bef5..a95367c 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,7 +11,10 @@ const config = {
 		adapter: adapter(),
 		appDir: 'app',
 		alias: {
-			$components: path.resolve('./src/lib/components')
+			$components: path.resolve('./src/lib/components'),
+			$helpers: path.resolve('./src/lib/helpers'),
+			$stores: path.resolve('./src/lib/stores'),
+			$types: path.resolve('./src/lib/types')
 		}
 	}
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 31e7460..c5ec5d2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,8 +8,12 @@ export default {
 			},
 			colors: {
 				primary: '#4820E3',
-				gray: '#606C8B',
-				'light-gray': '#262A3333'
+				'primary-disabled': '#C8C1E3',
+				secondary: '#606C8B',
+				tertiary: '#5C4DA6',
+				quaternary: '#313C59',
+				'light-gray': '#262A3333',
+				alert: '#D92D20'
 			}
 		}
 	},