From 6cd4479de10e9b8c8af72f1a961b1b42c0059854 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Fri, 12 Mar 2021 12:52:15 +0100
Subject: [PATCH 01/11] feat(shared): darkmode wip

---
 packages/shared/components/Button.svelte      | 184 ++++++++++++++----
 packages/shared/components/HR.svelte          |   6 +
 packages/shared/components/QR.svelte          |   3 +-
 packages/shared/components/index.js           |   1 +
 .../shared/components/inputs/Dropdown.svelte  |  31 ++-
 .../shared/components/inputs/Input.svelte     |   2 -
 packages/shared/components/inputs/Pin.svelte  |   5 +-
 .../components/modals/AccountActions.svelte   |   4 +-
 .../components/modals/NetworkIndicator.svelte |   4 +-
 .../components/modals/ProfileActions.svelte   |   4 +-
 .../shared/components/popups/Index.svelte     |   6 +-
 packages/shared/routes/Splash.svelte          |   2 +-
 .../routes/dashboard/settings/Settings.svelte |   2 +-
 .../dashboard/settings/views/Advanced.svelte  |  16 +-
 .../dashboard/settings/views/General.svelte   |  10 +-
 .../dashboard/settings/views/Security.svelte  |  10 +-
 .../settings/views/SettingsHome.svelte        |   6 +-
 .../shared/routes/login/views/EnterPin.svelte |   2 +-
 .../routes/login/views/SelectProfile.svelte   |   2 +-
 packages/shared/style/style.scss              |   2 +-
 20 files changed, 202 insertions(+), 100 deletions(-)
 create mode 100644 packages/shared/components/HR.svelte

diff --git a/packages/shared/components/Button.svelte b/packages/shared/components/Button.svelte
index d2678125142..0c530e0eb34 100644
--- a/packages/shared/components/Button.svelte
+++ b/packages/shared/components/Button.svelte
@@ -2,7 +2,7 @@
     import { Icon } from 'shared/components'
     import { bindEvents } from 'shared/lib/utils'
     import { onMount } from 'svelte'
-
+    import { darkMode } from 'shared/lib/app'
     export let events = {}
     export let onClick = () => ''
     export let secondary = false
@@ -34,14 +34,88 @@
         span {
             @apply text-white;
         }
-        &:not(.with-icon):hover,
-        &:not(.with-icon):focus {
-            @apply bg-blue-600;
-        }
-        &:not(.with-icon):active {
-            @apply bg-blue-700;
+        &:not(.with-icon) {
+            &:hover,
+            &:focus {
+                @apply bg-blue-600;
+            }
+            &:active {
+                @apply bg-blue-700;
+            }
+            &.warning {
+                @apply bg-red-500;
+                min-width: 100px;
+                span {
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-red-600;
+                }
+                &:active,
+                &:focus {
+                    @apply bg-red-700;
+                }
+                &:disabled {
+                    @apply pointer-events-none;
+                    @apply bg-gray-200;
+                    span {
+                        @apply text-gray-500;
+                    }
+                }
+            }
+            &.darkmode {
+                @apply bg-gray-700;
+                @apply border-gray-700;
+                @apply bg-opacity-30;
+                @apply border-opacity-30;
+                span {
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-opacity-50;
+                    @apply border-opacity-50;
+                }
+                &:focus,
+                &:active {
+                    @apply bg-opacity-80;
+                    @apply border-opacity-50;
+                }
+                &:disabled {
+                    @apply bg-gray-700;
+                    @apply border-gray-700;
+                    @apply bg-opacity-10;
+                    @apply border-opacity-10;
+                    span {
+                        @apply text-gray-700;
+                    }
+                }
+                &.warning {
+                    @apply bg-red-500;
+                    @apply border-red-500;
+                    min-width: 100px;
+                    span {
+                        @apply text-white;
+                    }
+                    &:hover {
+                        @apply bg-red-600;
+                        @apply border-red-600;
+                    }
+                    &:active,
+                    &:focus {
+                        @apply bg-red-700;
+                        @apply border-red-700;
+                    }
+                    &:disabled {
+                        @apply pointer-events-none;
+                        @apply bg-gray-200;
+                        @apply border-gray-200;
+                        span {
+                            @apply text-gray-500;
+                        }
+                    }
+                }
+            }
         }
-
         &:disabled {
             @apply pointer-events-none;
             @apply bg-gray-200;
@@ -57,12 +131,12 @@
             span {
                 @apply text-blue-500;
             }
-            &:hover,
-            &:focus {
+            &:hover {
                 @apply bg-blue-50;
                 @apply border-blue-200;
             }
-            &:active {
+            &:active,
+            &:focus {
                 @apply bg-blue-100;
                 @apply border-blue-400;
                 @apply text-blue-600;
@@ -75,29 +149,31 @@
                     @apply text-gray-500;
                 }
             }
-        }
-        &.warning {
-            @apply bg-red-500;
-            min-width: 100px;
-            span {
-                @apply text-white;
-            }
-            &:hover {
-                @apply bg-red-600;
-            }
-            &:active {
-                @apply bg-red-700;
-            }
-
-            &:disabled {
-                @apply pointer-events-none;
-                @apply bg-gray-200;
+            &.darkmode {
+                @apply bg-transparent;
+                @apply border-gray-700;
                 span {
-                    @apply text-gray-500;
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-gray-700;
+                    @apply bg-opacity-20;
+                }
+                &:active,
+                &:focus {
+                    @apply bg-gray-900;
+                    @apply border-gray-700;
+                }
+                &:disabled {
+                    @apply text-gray-700;
+                    span {
+                        @apply text-gray-700;
+                    }
                 }
             }
         }
         &.with-icon {
+            min-width: 200px;
             @apply border;
             @apply border-solid;
             @apply border-gray-300;
@@ -116,6 +192,15 @@
             :global(svg.right) {
                 @apply text-gray-500;
             }
+            &:hover,
+            &:focus {
+                @apply border-gray-500;
+            }
+            &:disabled {
+                :global(svg) {
+                    @apply text-gray-500;
+                }
+            }
             &.active {
                 @apply bg-blue-500;
                 span,
@@ -123,16 +208,33 @@
                     @apply text-white;
                 }
             }
-
-            &:hover,
-            &:focus {
-                @apply border-gray-500;
-            }
-
-            &:disabled {
-                :global(svg) {
+            &.darkmode {
+                @apply border-gray-700;
+                @apply bg-transparent;
+                span {
+                    @apply text-white;
+                }
+                :global(svg, svg.right) {
                     @apply text-gray-500;
                 }
+                &:hover,
+                &:focus {
+                    @apply bg-gray-700;
+                    @apply bg-opacity-20;
+                }
+                &:disabled {
+                    :global(svg) {
+                        @apply text-gray-500;
+                    }
+                }
+                &.active {
+                    @apply bg-gray-700;
+                    @apply border-gray-700;
+                    span,
+                    :global(svg) {
+                        @apply text-white;
+                    }
+                }
             }
         }
         &.small {
@@ -188,6 +290,7 @@
         class:secondary
         class:active
         class:with-icon={icon}
+        class:darkmode={$darkMode}
         {disabled}
         bind:this={buttonElement}>
         <Icon classes="mb-1" {icon} />
@@ -208,6 +311,7 @@
         class:with-icon={icon}
         class:iconReverse
         class:active
+        class:darkmode={$darkMode}
         {disabled}
         bind:this={buttonElement}>
         {#if icon}
@@ -216,7 +320,7 @@
                     <div class="relative flex flex-row justify-between">
                         <div class="relative flex items-center flex-1">
                             <div class="absolute left-0 flex items-center">
-                                <Icon width={16} height={16} classes="mr-4" {icon} />
+                                <Icon classes="mr-4" {icon} />
                             </div>
                             <span class="font-bold text-12 leading-140"><slot /></span>
                         </div>
@@ -226,7 +330,7 @@
                         <div class="relative flex items-center flex-1">
                             <span class="font-bold text-12 leading-140"><slot /></span>
                             <div class="absolute right-0 flex items-center">
-                                <Icon width={16} height={16} classes="ml-4" {icon} />
+                                <Icon classes="ml-4" {icon} />
                             </div>
                         </div>
                     </div>
@@ -235,7 +339,7 @@
                 <div class="relative flex flex-row justify-between">
                     <div class="relative flex items-center flex-1">
                         <div class="absolute left-0 flex items-center">
-                            <Icon width={16} height={16} classes="mr-4" {icon} />
+                            <Icon classes="mr-4" {icon} />
                         </div>
                         <span class="font-bold text-12 leading-140"><slot /></span>
                     </div>
diff --git a/packages/shared/components/HR.svelte b/packages/shared/components/HR.svelte
new file mode 100644
index 00000000000..d2ef99d3b24
--- /dev/null
+++ b/packages/shared/components/HR.svelte
@@ -0,0 +1,6 @@
+<script lang="typescript">
+    export let classes: string = ''
+    export let overrideColor: boolean = false
+</script>
+
+<hr class="border-t border-solid {!overrideColor && 'border-gray-200 dark:border-gray-700'} {classes}" />
diff --git a/packages/shared/components/QR.svelte b/packages/shared/components/QR.svelte
index 49f86304128..86a679439bb 100644
--- a/packages/shared/components/QR.svelte
+++ b/packages/shared/components/QR.svelte
@@ -1,5 +1,6 @@
 <script lang="typescript">
     import QRCode from 'qr.js/lib/QRCode'
+    import { darkMode } from 'shared/lib/app'
 
     export let data
     export let size = 150
@@ -37,7 +38,7 @@
                     <rect
                         height={1}
                         key={cellIndex}
-                        style="fill: {cell ? '#000000' : 'none'};"
+                        style="fill: {cell ? ($darkMode ? '#ffffff' : '#000000') : 'none'};"
                         width={1}
                         x={cellIndex}
                         y={rowIndex} />
diff --git a/packages/shared/components/index.js b/packages/shared/components/index.js
index 8867b949757..03dc356aeb0 100644
--- a/packages/shared/components/index.js
+++ b/packages/shared/components/index.js
@@ -37,6 +37,7 @@ export { default as Idle } from './Idle.svelte'
 export { default as ToastContainer } from './ToastContainer.svelte'
 export { default as ProgressBar } from './ProgressBar.svelte'
 export { default as Spinner } from './Spinner.svelte'
+export { default as HR } from './HR.svelte'
 
 export * from './modals'
 // Charts
diff --git a/packages/shared/components/inputs/Dropdown.svelte b/packages/shared/components/inputs/Dropdown.svelte
index 5b9190f75a0..cb4f471564c 100644
--- a/packages/shared/components/inputs/Dropdown.svelte
+++ b/packages/shared/components/inputs/Dropdown.svelte
@@ -22,7 +22,6 @@
 
 <style type="text/scss">
     dropdown-input {
-        transition: border-color 0.25s;
         min-height: 48px;
         @apply py-4;
         @apply pl-4;
@@ -33,28 +32,18 @@
         }
         &.disabled {
             @apply pointer-events-none;
-            @apply bg-gray-100;
         }
         nav {
             .inner {
                 max-height: 235px;
             }
-            transition: opacity 0.25s;
-            top: 50px; // TODO: unable to use tailwind inset
-            left: 0px; // TODO: unable to use tailwind inset
+            top: 50px;
+            @apply left-0;
             @apply rounded-xl;
             &.active {
                 @apply opacity-100;
                 @apply pointer-events-auto;
             }
-            button {
-                &.active {
-                    @apply bg-gray-100;
-                }
-                &:hover {
-                    @apply bg-gray-200;
-                }
-            }
         }
         &.small {
             min-height: 32px;
@@ -63,11 +52,11 @@
             @apply pr-8;
             @apply rounded-lg;
             nav {
+                top: 38px;
                 @apply rounded-lg;
-                top: 38px; // TODO: unable to use tailwind inset
             }
             :global(svg) {
-                right: 8px; // TODO: unable to use tailwind inset
+                @apply right-2;
             }
         }
     }
@@ -77,8 +66,8 @@
     <Text type="p" classes="mb-2" smaller>{label}</Text>
 {/if}
 <dropdown-input
-    class="relative flex items-center w-full whitespace-nowrap
-                bg-white border border-solid border-gray-300 hover:border-gray-500 cursor-pointer"
+    class="relative flex items-center w-full whitespace-nowrap cursor-pointer
+        {disabled ? 'bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700' : 'bg-white dark:bg-gray-900 border border-solid border-gray-300 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-700'}"
     on:click={(e) => {
         e.stopPropagation()
         dropdown = !dropdown
@@ -91,11 +80,15 @@
     <Icon icon="chevron-down" classes="absolute text-gray-500 fill-current" />
     <nav
         class:active={dropdown}
-        class="absolute w-full bg-white overflow-hidden border border-solid border-gray-500 pointer-events-none opacity-0 z-10 text-left">
+        class="absolute w-full overflow-hidden pointer-events-none opacity-0 z-10 text-left 
+            bg-white dark:bg-gray-900 
+            border border-solid border-gray-300 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-700">
         <div class="inner overflow-y-auto">
             {#each items as item}
                 <button
-                    class="relative flex items-center bg-white p-4 w-full whitespace-nowrap"
+                    class="relative flex items-center p-4 w-full whitespace-nowrap
+                        {item[valueKey] === value && 'bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20'} 
+                        hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:bg-opacity-20"
                     on:click={() => onSelect(item)}
                     class:active={item[valueKey] === value}><Text type="p" smaller>{item[valueKey]}</Text></button>
             {/each}
diff --git a/packages/shared/components/inputs/Input.svelte b/packages/shared/components/inputs/Input.svelte
index bf4a3e90739..704dfd0b397 100644
--- a/packages/shared/components/inputs/Input.svelte
+++ b/packages/shared/components/inputs/Input.svelte
@@ -47,8 +47,6 @@
         color: var(--text-secondary-color);
         background: var(--element-bg-color);
         border-radius: 10px;
-        box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.2), 0px 4px 8px rgba(65, 114, 248, 0.08);
-        transition: border-color 0.25s;
 
         &:disabled {
             @apply pointer-events-none;
diff --git a/packages/shared/components/inputs/Pin.svelte b/packages/shared/components/inputs/Pin.svelte
index 32c4418467f..4a3a1f28ba5 100644
--- a/packages/shared/components/inputs/Pin.svelte
+++ b/packages/shared/components/inputs/Pin.svelte
@@ -109,10 +109,9 @@
 
 <style type="text/scss">
     pin-input {
-        height: 80px;
         @apply cursor-pointer;
-        user-select: none;
-        transition: border-color 0.25s;
+        @apply select-none;
+        @apply h-20;
 
         &:not(.disabled):focus-within,
         &:not(.disabled):hover {
diff --git a/packages/shared/components/modals/AccountActions.svelte b/packages/shared/components/modals/AccountActions.svelte
index 345631ea373..0ad70d53aef 100644
--- a/packages/shared/components/modals/AccountActions.svelte
+++ b/packages/shared/components/modals/AccountActions.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Icon, Modal, Text } from 'shared/components'
+    import { Icon, Modal, Text, HR } from 'shared/components'
     import { openPopup } from 'shared/lib/popup'
     import { accountRoute } from 'shared/lib/router'
     import { AccountRoutes } from 'shared/lib/typings/routes'
@@ -55,7 +55,7 @@
             <Icon icon="history" classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text smaller classes="group-hover:text-blue-500">{locale(`actions.view_address_history`)}</Text>
         </button>
-        <hr class="border-t border-solid border-gray-200 dark:border-gray-700" />
+        <HR />
         <!-- Delete -->
         <button
             on:click={() => handleDeleteAccountClick()}
diff --git a/packages/shared/components/modals/NetworkIndicator.svelte b/packages/shared/components/modals/NetworkIndicator.svelte
index 28f628c1eaf..49eae36d054 100644
--- a/packages/shared/components/modals/NetworkIndicator.svelte
+++ b/packages/shared/components/modals/NetworkIndicator.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import { onDestroy } from 'svelte'
-    import { Text, Modal } from 'shared/components'
+    import { Text, Modal, HR } from 'shared/components'
     import { networkStatus } from 'shared/lib/networkStatus'
     export let isActive
     export let locale
@@ -33,7 +33,7 @@
         <div class="px-7 pb-5 text-13 text-{NETWORK_HEALTH_COLORS[healthStatus]}-500">
             {locale(`views.dashboard.network.${healthStatusText}`)}
         </div>
-        <hr class="border-t border-solid border-gray-200 dark:border-gray-700" />
+        <HR />
         <div class="flex flex-row justify-between px-7 pt-5 pb-2">
             <span class="text-12 text-gray-800 dark:text-white">{locale('views.dashboard.network.messages_per_second')}</span>
             <span class="text-12 text-gray-500">{`${Math.round(messagesPerSecond)}`}</span>
diff --git a/packages/shared/components/modals/ProfileActions.svelte b/packages/shared/components/modals/ProfileActions.svelte
index edf0176b152..34f95050ab3 100644
--- a/packages/shared/components/modals/ProfileActions.svelte
+++ b/packages/shared/components/modals/ProfileActions.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Icon, Modal, Text } from 'shared/components'
+    import { Icon, Modal, Text, HR } from 'shared/components'
     import { logout } from 'shared/lib/app'
     import { getInitials } from 'shared/lib/helpers'
     import { showAppNotification } from 'shared/lib/notifications'
@@ -43,7 +43,7 @@
             </div>
             <Text>{profileName}</Text>
         </div>
-        <hr class="border-t border-solid border-gray-200 dark:border-gray-700" />
+        <HR />
         <button
             on:click={() => handleSettingsClick()}
             class="group flex flex-row justify-start items-center hover:bg-blue-50 py-3 px-3 w-full">
diff --git a/packages/shared/components/popups/Index.svelte b/packages/shared/components/popups/Index.svelte
index 853120a85aa..9ff844f6f27 100644
--- a/packages/shared/components/popups/Index.svelte
+++ b/packages/shared/components/popups/Index.svelte
@@ -32,7 +32,7 @@
         removeNode: RemoveNode,
         busy: Busy,
         errorLog: ErrorLog,
-        deleteProfile: DeleteProfile
+        deleteProfile: DeleteProfile,
     }
 
     const onkey = (e) => {
@@ -63,8 +63,8 @@
 <popup
     in:fade={{ duration: transition ? 100 : 0 }}
     class={`flex items-center justify-center fixed top-0 left-0 w-screen p-6
-                h-screen overflow-hidden z-10 ${fullScreen ? "bg-white" : "bg-gray-800 bg-opacity-40"}`}>
-    <popup-content class={`bg-white dark:bg-gray-900 rounded-xl pt-6 px-8 pb-8 relative ${fullScreen ? "full-screen" : ""}`}>
+                h-screen overflow-hidden z-10 ${fullScreen ? 'bg-white dark:bg-blue-900' : 'bg-gray-800 bg-opacity-40'}`}>
+    <popup-content class={`bg-white dark:bg-gray-900 rounded-xl pt-6 px-8 pb-8 relative ${fullScreen ? 'full-screen' : ''}`}>
         {#if !hideClose}
             <button on:click={closePopup} class="absolute top-6 right-8">
                 <Icon icon="close" classes="text-gray-800 dark:text-white" />
diff --git a/packages/shared/routes/Splash.svelte b/packages/shared/routes/Splash.svelte
index 2f7c913b5a0..cd78a431fc5 100644
--- a/packages/shared/routes/Splash.svelte
+++ b/packages/shared/routes/Splash.svelte
@@ -2,7 +2,7 @@
     import { Logo } from 'shared/components'
 </script>
 
-<div class="w-full h-full flex justify-center items-center">
+<div class="w-full h-full flex justify-center items-center bg-white dark:bg-blue-900">
     <div width="100px">
         <Logo width="100%" logo="logo-firefly-full" />
     </div>
diff --git a/packages/shared/routes/dashboard/settings/Settings.svelte b/packages/shared/routes/dashboard/settings/Settings.svelte
index bfd2330d8f2..9bd0a68aea8 100644
--- a/packages/shared/routes/dashboard/settings/Settings.svelte
+++ b/packages/shared/routes/dashboard/settings/Settings.svelte
@@ -24,7 +24,7 @@
     }
 </script>
 
-<div class="w-full h-full px-16 py-12 flex flex-1 bg-white">
+<div class="w-full h-full px-16 py-12 flex flex-1 bg-white dark:bg-gray-900">
     {#if $settingsRoute === SettingsRoutes.Init}
         <SettingsHome {mobile} {locale} />
     {:else}
diff --git a/packages/shared/routes/dashboard/settings/views/Advanced.svelte b/packages/shared/routes/dashboard/settings/views/Advanced.svelte
index 1e6a51e8662..7f3ee87ffa6 100644
--- a/packages/shared/routes/dashboard/settings/views/Advanced.svelte
+++ b/packages/shared/routes/dashboard/settings/views/Advanced.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import type { ClientOptions } from 'lib/typings/client'
-    import { Button, Checkbox, Dropdown, Radio, Text } from 'shared/components'
+    import { Button, Checkbox, Dropdown, HR, Radio, Text } from 'shared/components'
     import { developerMode } from 'shared/lib/app'
     import { DEFAULT_NODE, DEFAULT_NODES } from 'shared/lib/network'
     import { showAppNotification } from 'shared/lib/notifications'
@@ -164,7 +164,7 @@
         <Radio value={true} bind:group={automaticNodeSelection} label={locale('general.automaticNodeSelection')} />
         <Radio value={false} bind:group={automaticNodeSelection} label={locale('general.manualNodeSelection')} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
 
     {#if !automaticNodeSelection}
         <section id="configureNodeList" class="w-3/4">
@@ -191,7 +191,7 @@
                 {locale('actions.remove_node')}
             </Button>
         </section>
-        <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+        <HR classes="pb-5 mt-5 justify-center" />
     {/if}
 
     <section id="proofOfWork" class="w-3/4 opacity-50">
@@ -199,32 +199,32 @@
         <Text type="p" secondary classes="mb-5">{locale('views.settings.proofOfWork.description')}</Text>
         <Checkbox label={locale('actions.outsourceProofOfWork')} disabled bind:checked={outsourcePowChecked} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <!-- TODO: Implement and enable -->
     <section id="developerMode" class="w-3/4 opacity-50">
         <Text type="h4" classes="mb-3">{locale('views.settings.developerMode.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.developerMode.description')}</Text>
         <Checkbox label={locale('actions.enableDeveloperMode')} disabled bind:checked={$developerMode} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="deepLinks" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.deepLinks.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.deepLinks.description')}</Text>
         <Checkbox label={locale('actions.enableDeepLinks')} bind:checked={deepLinkingChecked} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="resyncAccounts" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.resyncAccounts.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.resyncAccounts.description')}</Text>
         <Button classes="w-1/4" onClick={syncAccounts} disabled={$isSyncing}>{locale('actions.syncAll')}</Button>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="errorLog" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.errorLog.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.errorLog.description')}</Text>
         <Button classes="w-1/4" onClick={() => handleErrorLogClick()}>{locale('views.settings.errorLog.title')}</Button>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <!-- TODO: Implemnet state export -->
     <section id="stateExport" class="w-3/4 opacity-50">
         <Text type="h4" classes="mb-3">{locale('views.settings.stateExport.title')}</Text>
diff --git a/packages/shared/routes/dashboard/settings/views/General.svelte b/packages/shared/routes/dashboard/settings/views/General.svelte
index 1fc0ab728c7..901e517fbe3 100644
--- a/packages/shared/routes/dashboard/settings/views/General.svelte
+++ b/packages/shared/routes/dashboard/settings/views/General.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Checkbox, Dropdown, Radio, Text } from 'shared/components'
+    import { Checkbox, Dropdown, HR, Radio, Text } from 'shared/components'
     import { darkMode } from 'shared/lib/app'
     import { exchangeRates } from 'shared/lib/currency'
     import { locales, setupI18n } from 'shared/lib/i18n'
@@ -35,7 +35,7 @@
         <Text type="h4" classes="mb-3">{locale('views.settings.profile.title')}</Text>
         <Text type="p" secondary>{locale('views.settings.profile.description')}</Text>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <!-- TODO: Implement and enable -->
     <section id="theme" class="w-3/4 opacity-50 pointer-events-none">
         <Text type="h4" classes="mb-3">{locale('views.settings.theme.title')}</Text>
@@ -43,7 +43,7 @@
         <Radio value={false} bind:group={darkModeEnabled} label={locale('general.light_theme')} />
         <Radio value={true} bind:group={darkModeEnabled} label={locale('general.dark_theme')} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="language" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.language.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.language.description')}</Text>
@@ -53,7 +53,7 @@
             value={locales[$activeProfile?.settings.language]}
             items={Object.values(locales).map((locale) => ({ value: locale, label: locale }))} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="currency" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.currency.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.currency.description')}</Text>
@@ -65,7 +65,7 @@
                 .map((currency) => ({ value: currency, label: currency }))
                 .sort()} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="notifications" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.notifications.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.notifications.description')}</Text>
diff --git a/packages/shared/routes/dashboard/settings/views/Security.svelte b/packages/shared/routes/dashboard/settings/views/Security.svelte
index 7f4d9c0d587..cbe1e1e55a3 100644
--- a/packages/shared/routes/dashboard/settings/views/Security.svelte
+++ b/packages/shared/routes/dashboard/settings/views/Security.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Button, Checkbox, Dropdown, Password, Spinner, Text } from 'shared/components'
+    import { Button, Checkbox, Dropdown, HR, Password, Spinner, Text } from 'shared/components'
     import { Electron } from 'shared/lib/electron'
     import { showAppNotification } from 'shared/lib/notifications'
     import passwordInfo from 'shared/lib/password'
@@ -275,7 +275,7 @@
             <Spinner busy={exportBusy} message={exportMessage} classes="ml-2" />
         </div>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="appLock" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.appLock.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.appLock.description')}</Text>
@@ -286,7 +286,7 @@
             value={assignTimeoutOptionLabel($activeProfile?.settings.lockScreenTimeout)}
             items={lockScreenTimeoutOptions} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="changePassword" class="w-3/4">
         <form id="form-change-password" on:submit={changePassword}>
             <Text type="h4" classes="mb-3">{locale('views.settings.changePassword.title')}</Text>
@@ -334,7 +334,7 @@
             </div>
         </form>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="changePincode" class="w-3/4">
         <form on:submit={changePincode} id="pincode-change-form">
             <Text type="h4" classes="mb-3">{locale('views.settings.changePincode.title')}</Text>
@@ -380,7 +380,7 @@
             </div>
         </form>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="deleteProfile" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.deleteProfile.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.deleteProfile.description')}</Text>
diff --git a/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte b/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte
index 57b2f0a12ff..e115a7c3f58 100644
--- a/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte
+++ b/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte
@@ -1,8 +1,8 @@
 <script lang="typescript">
-    import { SettingsRoutes, GeneralSettings, SecuritySettings, AdvancedSettings, HelpAndInfo } from 'shared/lib/typings/routes'
+    import { SettingsMenu, Text } from 'shared/components'
+    import { settingsRoute } from 'shared/lib/router'
     import { SettingsIcons } from 'shared/lib/typings/icons'
-    import { Text, SettingsMenu } from 'shared/components'
-    import { settingsRoute } from 'shared/lib/router';
+    import { AdvancedSettings, GeneralSettings, HelpAndInfo, SecuritySettings, SettingsRoutes } from 'shared/lib/typings/routes'
 
     export let locale
     export let mobile
diff --git a/packages/shared/routes/login/views/EnterPin.svelte b/packages/shared/routes/login/views/EnterPin.svelte
index 5f7f629140b..3906e526142 100644
--- a/packages/shared/routes/login/views/EnterPin.svelte
+++ b/packages/shared/routes/login/views/EnterPin.svelte
@@ -109,7 +109,7 @@
 {#if mobile}
     <div>foo</div>
 {:else}
-    <div class="relative w-full h-full bg-white dark:bg-gray-900">
+    <div class="relative w-full h-full bg-white dark:bg-blue-900">
         <button
             data-label="back-button"
             class="absolute top-12 left-5 disabled:opacity-50 cursor-pointer disabled:cursor-auto"
diff --git a/packages/shared/routes/login/views/SelectProfile.svelte b/packages/shared/routes/login/views/SelectProfile.svelte
index 4447f6dd9c7..d4dfcca6517 100644
--- a/packages/shared/routes/login/views/SelectProfile.svelte
+++ b/packages/shared/routes/login/views/SelectProfile.svelte
@@ -21,7 +21,7 @@
 {#if mobile}
     <div>Not yet implemented</div>
 {:else}
-    <section class="flex flex-col h-screen bg-white dark:bg-gray-900 items-center">
+    <section class="flex flex-col h-screen bg-white dark:bg-blue-900 items-center">
         <Logo width="64px" logo="logo-firefly" classes="absolute top-20 transform left-1/2 -translate-x-1/2" />
         <div class="h-full space-x-20 flex flex-wrap justify-center items-start content-center mt-10 mx-20">
             {#each $profiles as profile}
diff --git a/packages/shared/style/style.scss b/packages/shared/style/style.scss
index 8732037e99e..af29376fadf 100644
--- a/packages/shared/style/style.scss
+++ b/packages/shared/style/style.scss
@@ -66,7 +66,7 @@
     font-weight: 500;
     font-family: 'DM Sans';
     font-style: normal;
-    transition: background 0.25s, color 0.25s;
+    transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
 }
 html,
 body {

From 94df101045aafe51d312ada0d03c645fa7b630c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Tue, 16 Mar 2021 13:44:38 +0100
Subject: [PATCH 02/11] feat: continue darkmode

---
 packages/shared/components/AccountTile.svelte |  2 +-
 packages/shared/components/Button.svelte      | 96 +++++++------------
 packages/shared/components/icon/icons.js      |  4 +
 .../shared/components/inputs/Address.svelte   | 25 ++---
 .../shared/components/inputs/Amount.svelte    | 31 +++---
 .../shared/components/inputs/Checkbox.svelte  | 27 +++---
 .../shared/components/inputs/Dropdown.svelte  | 13 +--
 .../shared/components/inputs/Dropzone.svelte  |  4 +-
 .../shared/components/inputs/Input.svelte     | 18 ++--
 packages/shared/components/inputs/Pin.svelte  | 18 ++--
 10 files changed, 103 insertions(+), 135 deletions(-)

diff --git a/packages/shared/components/AccountTile.svelte b/packages/shared/components/AccountTile.svelte
index 6da509c0205..534badcd723 100644
--- a/packages/shared/components/AccountTile.svelte
+++ b/packages/shared/components/AccountTile.svelte
@@ -23,7 +23,7 @@
 
 <button
     on:click={onClick}
-    class="size-{size} group rounded-2xl bg-gray-200 dark:bg-gray-900 hover:bg-{color}-500 flex flex-col justify-between text-left p-{size === 's' ? '3' : '6'}">
+    class="size-{size} group rounded-2xl bg-gray-200 dark:bg-gray-900 hover:bg-{color}-500 font-400 flex flex-col justify-between text-left p-{size === 's' ? '3' : '6'}">
     <Text smaller={size === 's'} overrideColor classes="mb-2 text-gray-800 dark:text-white group-hover:text-white">{name}</Text>
     <div class="flex flex-row justify-between w-full flex-{size === 'l' ? 'nowrap' : 'wrap'}">
         <Text
diff --git a/packages/shared/components/Button.svelte b/packages/shared/components/Button.svelte
index 0c530e0eb34..930c5550992 100644
--- a/packages/shared/components/Button.svelte
+++ b/packages/shared/components/Button.svelte
@@ -63,58 +63,6 @@
                     }
                 }
             }
-            &.darkmode {
-                @apply bg-gray-700;
-                @apply border-gray-700;
-                @apply bg-opacity-30;
-                @apply border-opacity-30;
-                span {
-                    @apply text-white;
-                }
-                &:hover {
-                    @apply bg-opacity-50;
-                    @apply border-opacity-50;
-                }
-                &:focus,
-                &:active {
-                    @apply bg-opacity-80;
-                    @apply border-opacity-50;
-                }
-                &:disabled {
-                    @apply bg-gray-700;
-                    @apply border-gray-700;
-                    @apply bg-opacity-10;
-                    @apply border-opacity-10;
-                    span {
-                        @apply text-gray-700;
-                    }
-                }
-                &.warning {
-                    @apply bg-red-500;
-                    @apply border-red-500;
-                    min-width: 100px;
-                    span {
-                        @apply text-white;
-                    }
-                    &:hover {
-                        @apply bg-red-600;
-                        @apply border-red-600;
-                    }
-                    &:active,
-                    &:focus {
-                        @apply bg-red-700;
-                        @apply border-red-700;
-                    }
-                    &:disabled {
-                        @apply pointer-events-none;
-                        @apply bg-gray-200;
-                        @apply border-gray-200;
-                        span {
-                            @apply text-gray-500;
-                        }
-                    }
-                }
-            }
         }
         &:disabled {
             @apply pointer-events-none;
@@ -150,22 +98,27 @@
                 }
             }
             &.darkmode {
-                @apply bg-transparent;
+                @apply bg-gray-700;
                 @apply border-gray-700;
+                @apply bg-opacity-30;
+                @apply border-opacity-30;
                 span {
                     @apply text-white;
                 }
                 &:hover {
-                    @apply bg-gray-700;
-                    @apply bg-opacity-20;
+                    @apply bg-opacity-50;
+                    @apply border-opacity-50;
                 }
-                &:active,
-                &:focus {
-                    @apply bg-gray-900;
-                    @apply border-gray-700;
+                &:focus,
+                &:active {
+                    @apply bg-opacity-80;
+                    @apply border-opacity-50;
                 }
                 &:disabled {
-                    @apply text-gray-700;
+                    @apply bg-gray-700;
+                    @apply border-gray-700;
+                    @apply bg-opacity-10;
+                    @apply border-opacity-10;
                     span {
                         @apply text-gray-700;
                     }
@@ -268,6 +221,22 @@
             &:active {
                 @apply text-gray-800;
             }
+            &.darkmode {
+                &,
+                &:hover,
+                &:active {
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-blue-900;
+                }
+                &:active {
+                    @apply bg-gray-900;
+                }
+                :global(svg) {
+                    @apply text-blue-500;
+                }
+            }
         }
 
         &:disabled {
@@ -276,6 +245,9 @@
             span {
                 @apply text-gray-500;
             }
+            &.darkmode {
+                @apply bg-gray-800;
+            }
         }
     }
 </style>
@@ -320,7 +292,7 @@
                     <div class="relative flex flex-row justify-between">
                         <div class="relative flex items-center flex-1">
                             <div class="absolute left-0 flex items-center">
-                                <Icon classes="mr-4" {icon} />
+                                <Icon width="16" height="16" classes="mr-4" {icon} />
                             </div>
                             <span class="font-bold text-12 leading-140"><slot /></span>
                         </div>
@@ -330,7 +302,7 @@
                         <div class="relative flex items-center flex-1">
                             <span class="font-bold text-12 leading-140"><slot /></span>
                             <div class="absolute right-0 flex items-center">
-                                <Icon classes="ml-4" {icon} />
+                                <Icon width="16" height="16" classes="ml-4" {icon} />
                             </div>
                         </div>
                     </div>
diff --git a/packages/shared/components/icon/icons.js b/packages/shared/components/icon/icons.js
index bea7c67d505..2a78b7b10fb 100644
--- a/packages/shared/components/icon/icons.js
+++ b/packages/shared/components/icon/icons.js
@@ -149,6 +149,7 @@ export const icons = {
                 d: 'M7 12L10.5 15.5L17 9',
                 strokeWidth: '2',
                 strokeLinecap: 'round',
+                strokeColor: 'white',
             },
         ],
     },
@@ -159,6 +160,9 @@ export const icons = {
             {
                 d:
                     'm0.55394,5.52478c0,-2.71689 2.28311,-5 5,-5l13.10204,0c2.71689,0 5,2.28311 5,5l0,13.0204c0,2.71689 -2.28311,5 -5,5l-13.10204,0c-2.71689,0 -5,-2.28311 -5,-5l0,-13.0204z',
+                fill: 'none',
+                strokeWidth: '1',
+                strokeLinecap: 'round',
             },
         ],
     },
diff --git a/packages/shared/components/inputs/Address.svelte b/packages/shared/components/inputs/Address.svelte
index 6af30e6ed04..79073bdc66f 100644
--- a/packages/shared/components/inputs/Address.svelte
+++ b/packages/shared/components/inputs/Address.svelte
@@ -11,20 +11,10 @@
 </script>
 
 <style type="text/scss">
-    address-input {
-        display: flex;
-        position: relative;
-        textarea {
-            color: var(--text-secondary-color);
-            background: var(--element-bg-color);
-            border-radius: 10px;
-            box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.2), 0px 4px 8px rgba(65, 114, 248, 0.08);
-            resize: none;
-
-            &.disabled {
-                @apply pointer-events-none;
-                @apply bg-gray-100;
-            }
+    textarea {
+        &.disabled {
+            @apply pointer-events-none;
+            @apply opacity-50;
         }
     }
 </style>
@@ -34,11 +24,14 @@
         <Text type="p" classes="mb-2" smaller>{label}</Text>
     {/if}
 
-    <address-input class={classes}>
+    <address-input class=" flex relative {classes}">
         <textarea
             bind:value={address}
             placeholder={prefix}
-            class={`w-full relative text-12 leading-140 py-4 pr-8 pl-4 bg-white border border-solid ${classes} ${error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 hover:border-gray-500 focus:border-gray-500'} rounded-xl text-gray`}
+            class={`w-full relative text-12 leading-140 py-4 pr-8 pl-4 rounded-xl resize-none
+                border border-solid text-gray-500 dark:text-white bg-white dark:bg-gray-800
+                ${error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-700 focus:border-gray-500 dark:focus:border-gray-600'} 
+                ${classes}`}
             class:disabled
             {disabled}
             spellcheck={false} />
diff --git a/packages/shared/components/inputs/Amount.svelte b/packages/shared/components/inputs/Amount.svelte
index bb7610cb153..282b61184f1 100644
--- a/packages/shared/components/inputs/Amount.svelte
+++ b/packages/shared/components/inputs/Amount.svelte
@@ -31,24 +31,23 @@
 <style type="text/scss">
     amount-input {
         nav {
-            border-radius: 10px;
             &.active {
                 @apply opacity-100;
                 @apply pointer-events-auto;
             }
-            button {
-                &:hover,
-                &.active {
-                    @apply bg-gray-100;
-                }
-            }
+        }
+    }
+    amount-input {
+        &.disabled {
+            @apply pointer-events-none;
+            @apply opacity-50;
         }
     }
 </style>
 
 <svelte:window on:click={clickOutside} />
-<Text type="p" classes="mb-2" smaller>{label || locale('general.amount')}</Text>
-<amount-input class="relative block {classes}">
+<Text type="p" classes="mb-2 {disabled && 'opacity-50'}" smaller>{label || locale('general.amount')}</Text>
+<amount-input class:disabled class="relative block {classes}">
     <Input
         {error}
         type="number"
@@ -57,21 +56,27 @@
         bind:value={amount}
         {disabled} />
     <actions class="absolute right-0 top-2.5 h-8 flex flex-row items-center text-12 text-gray-500 dark:text-white">
-        <button on:click={maxClick} class={`pr-3 ${disabled ? "cursor-auto" : "hover:text-blue-500 cursor-pointer"}`} {disabled}>{locale('actions.max').toUpperCase()}</button>
+        <button on:click={maxClick} class="pr-3 hover:text-blue-500" {disabled}>{locale('actions.max').toUpperCase()}</button>
         <button
             on:click={(e) => {
                 e.preventDefault()
                 e.stopPropagation()
                 dropdown = !dropdown
             }}
-            class={`w-10 h-full text-center px-2 border-l border-solid border-gray-500 ${disabled ? "cursor-auto" : "cursor-pointer"}`}
+            class={`w-10 h-full text-center px-2 border-l border-solid border-gray-500`}
             {disabled}>
             {unit}
             <nav
                 class:active={dropdown && !disabled}
-                class="absolute w-10 overflow-y-auto bg-white border border-solid border-gray-500 pointer-events-none opacity-0 z-10 text-left top-10 right-0">
+                class="absolute w-10 overflow-hidden pointer-events-none opacity-0 z-10 text-left top-10 right-0 rounded-lg
+                    bg-gray-50 dark:bg-gray-800
+                    border border-solid border-gray-300 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-700">
                 {#each Object.values(Unit) as _unit}
-                    <button class="text-center w-full py-2" on:click={() => onSelect(_unit)} class:active={unit === _unit}>
+                    <button
+                        class="text-center w-full py-2 {unit === _unit && 'bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20'} 
+                            hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:bg-opacity-20"
+                        on:click={() => onSelect(_unit)}
+                        class:active={unit === _unit}>
                         <Text type="p" smaller>{_unit}</Text>
                     </button>
                 {/each}
diff --git a/packages/shared/components/inputs/Checkbox.svelte b/packages/shared/components/inputs/Checkbox.svelte
index fd479a8ba57..b622050b4ae 100644
--- a/packages/shared/components/inputs/Checkbox.svelte
+++ b/packages/shared/components/inputs/Checkbox.svelte
@@ -10,37 +10,32 @@
 <style type="text/scss">
     button {
         @apply border-gray-500;
-        :global(svg path) {
-            stroke: var(--text-disabled-color);
+        :global(svg:not(.active) path) {
             fill: none;
+            @apply text-gray-500;
+            @apply stroke-current;
         }
         :global(svg.active path) {
-            stroke: white;
-            fill: var(--ui-blue-color);
+            @apply text-blue-500;
+            @apply fill-current;
         }
-
-        &:not(:disabled):hover,
-        &:not(:disabled):focus {
+        &:hover,
+        &:focus {
             :global(svg path) {
-                stroke: #9aadce;
-            }
-            :global(svg.active path) {
-                stroke: white;
+                @apply text-blue-500;
             }
         }
 
         &:disabled {
-            pointer-events: none;
-            :global(svg path) {
-                fill: var(--button-disabled-bg-color);
-            }
+            @apply pointer-events-none;
+            @apply opacity-50;
         }
     }
 </style>
 
 <button
     data-label="checkbox-input"
-    class={`flex items-center cursor-pointer ${classes}`}
+    class={`flex items-center text-left cursor-pointer ${classes}`}
     type="button"
     {disabled}
     on:click={() => {
diff --git a/packages/shared/components/inputs/Dropdown.svelte b/packages/shared/components/inputs/Dropdown.svelte
index cb4f471564c..156bdbb9b9f 100644
--- a/packages/shared/components/inputs/Dropdown.svelte
+++ b/packages/shared/components/inputs/Dropdown.svelte
@@ -28,10 +28,11 @@
         @apply pr-10;
         @apply rounded-xl;
         :global(svg) {
-            right: 12px; // TODO: unable to use tailwind inset
+            @apply right-3;
         }
         &.disabled {
             @apply pointer-events-none;
+            @apply opacity-50;
         }
         nav {
             .inner {
@@ -63,11 +64,11 @@
 </style>
 
 {#if label}
-    <Text type="p" classes="mb-2" smaller>{label}</Text>
+    <Text type="p" classes="mb-2 {disabled && 'opacity-50'}" smaller>{label}</Text>
 {/if}
 <dropdown-input
-    class="relative flex items-center w-full whitespace-nowrap cursor-pointer
-        {disabled ? 'bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700' : 'bg-white dark:bg-gray-900 border border-solid border-gray-300 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-700'}"
+    class="relative flex items-center w-full whitespace-nowrap cursor-pointer border border-solid
+    bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700"
     on:click={(e) => {
         e.stopPropagation()
         dropdown = !dropdown
@@ -76,12 +77,12 @@
     on:clickOutside={handleClickOutside}
     class:small
     class:disabled>
-    <Text type="p" smaller {disabled}>{value}</Text>
+    <Text type="p" smaller>{value}</Text>
     <Icon icon="chevron-down" classes="absolute text-gray-500 fill-current" />
     <nav
         class:active={dropdown}
         class="absolute w-full overflow-hidden pointer-events-none opacity-0 z-10 text-left 
-            bg-white dark:bg-gray-900 
+        bg-gray-50 dark:bg-gray-800
             border border-solid border-gray-300 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-700">
         <div class="inner overflow-y-auto">
             {#each items as item}
diff --git a/packages/shared/components/inputs/Dropzone.svelte b/packages/shared/components/inputs/Dropzone.svelte
index e08ecd9c345..47164d8277d 100644
--- a/packages/shared/components/inputs/Dropzone.svelte
+++ b/packages/shared/components/inputs/Dropzone.svelte
@@ -62,12 +62,12 @@
 </style>
 
 <dropzone
-    class="flex items-center justify-center p-7 w-full bg-gray-50 rounded-lg border border-solid border-gray-200"
+    class="flex items-center justify-center p-7 w-full rounded-lg border border-solid bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700"
     on:drop={onFile}
     on:dragenter={onEnter}
     on:dragleave={onLeave}
     on:dragover|preventDefault>
-    <content class:dropping class="flex flex-col items-center relative">
+    <content class:dropping class="flex flex-col items-center relative text-center">
         {#if dropping}
             <Text type="p" secondary smaller>{locale('actions.drop_here')}</Text>
         {:else if fileName}
diff --git a/packages/shared/components/inputs/Input.svelte b/packages/shared/components/inputs/Input.svelte
index 704dfd0b397..cd653102458 100644
--- a/packages/shared/components/inputs/Input.svelte
+++ b/packages/shared/components/inputs/Input.svelte
@@ -40,28 +40,26 @@
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
         -webkit-appearance: none;
-        margin: 0;
+        @apply m-0;
     }
     input {
-        padding: 15px 40px 16px 13px;
-        color: var(--text-secondary-color);
-        background: var(--element-bg-color);
-        border-radius: 10px;
-
-        &:disabled {
+        &.disabled {
             @apply pointer-events-none;
-            @apply bg-gray-100;
+            @apply opacity-50;
         }
     }
 </style>
 
-<div class={'w-full'}>
+<div class="w-full">
     <input
         {type}
         {value}
         bind:this={inputElement}
         {maxlength}
-        class={`w-full relative text-12 leading-140 py-4 pr-8 pl-4 bg-white border border-solid ${classes} ${error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 hover:border-gray-500 focus:border-gray-500'} rounded-xl text-gray`}
+        class={`w-full relative text-12 leading-140 py-4 pr-8 pl-4 border border-solid rounded-xl 
+            text-gray-500 dark:text-white bg-white dark:bg-gray-800 
+            ${error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-700 focus:border-gray-500 dark:focus:border-gray-600'} 
+            ${classes}`}
         on:input={handleInput}
         on:keypress={onKeyPress}
         {disabled}
diff --git a/packages/shared/components/inputs/Pin.svelte b/packages/shared/components/inputs/Pin.svelte
index 4a3a1f28ba5..f37355585e8 100644
--- a/packages/shared/components/inputs/Pin.svelte
+++ b/packages/shared/components/inputs/Pin.svelte
@@ -123,18 +123,16 @@
         }
         .input-wrapper {
             max-width: 204px;
-
             input {
                 -webkit-text-security: none;
-                width: 14px;
-                height: 14px;
-                opacity: 0;
+                @apply w-3.5;
+                @apply h-3.5;
+                @apply opacity-0;
                 @apply bg-transparent;
                 @apply text-transparent;
                 @apply cursor-pointer;
-
                 &:focus {
-                    outline: none;
+                    @apply outline-none;
                 }
                 &:disabled {
                     @apply cursor-default;
@@ -145,8 +143,8 @@
             z-index: -1;
             max-width: 204px;
             input-decorator {
-                width: 14px;
-                height: 14px;
+                @apply w-3.5;
+                @apply h-3.5;
                 @apply bg-gray-400;
                 &.active {
                     @apply bg-blue-500;
@@ -161,7 +159,9 @@
 
 <pin-input
     style="--pin-input-size: {PIN_LENGTH}"
-    class={`flex items-center justify-center w-full relative z-0 bg-gray-50 border border-solid border-gray-300 rounded-xl ${classes}`}
+    class={`flex items-center justify-center w-full relative z-0 rounded-xl border border-solid
+            bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700
+            ${classes}`}
     class:disabled
     bind:this={root}
     on:click={selectFirstEmptyRoot}

From e1062985e01301e340bfeef4e700f930f8d295eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Tue, 16 Mar 2021 16:00:11 +0100
Subject: [PATCH 03/11] feat: finish dark mode

---
 .../logos/firefly_logo_full_darkmode.svg      | 11 +++++++
 packages/shared/components/Button.svelte      | 13 ++++-----
 .../shared/components/DashboardPane.svelte    |  2 +-
 packages/shared/components/Logo.svelte        | 15 +++++++---
 packages/shared/components/Profile.svelte     |  4 +--
 .../shared/components/RecoveryPhrase.svelte   |  6 ++--
 .../shared/components/SettingsMenu.svelte     |  2 +-
 .../components/SettingsNavigator.svelte       |  2 +-
 .../components/inputs/ImportTextfield.svelte  |  4 ++-
 .../shared/components/inputs/Password.svelte  | 22 +++++++-------
 packages/shared/components/inputs/Pin.svelte  | 10 ++-----
 .../shared/components/inputs/Radio.svelte     | 29 +++++++------------
 .../components/modals/AccountActions.svelte   |  6 ++--
 .../components/modals/ProfileActions.svelte   |  4 +--
 .../shared/components/popups/Index.svelte     |  3 +-
 packages/shared/routes/Splash.svelte          |  2 +-
 .../wallet/views/AccountNavigation.svelte     |  4 +--
 17 files changed, 73 insertions(+), 66 deletions(-)
 create mode 100644 packages/shared/assets/logos/firefly_logo_full_darkmode.svg

diff --git a/packages/shared/assets/logos/firefly_logo_full_darkmode.svg b/packages/shared/assets/logos/firefly_logo_full_darkmode.svg
new file mode 100644
index 00000000000..5d70936cd77
--- /dev/null
+++ b/packages/shared/assets/logos/firefly_logo_full_darkmode.svg
@@ -0,0 +1,11 @@
+<svg width="240" height="80" viewBox="0 0 240 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M64.1625 30.0815C67.5273 33.4463 72.9828 33.4463 76.3476 30.0815C79.7124 26.7167 79.7124 21.2612 76.3476 17.8964C72.9828 14.5316 67.5273 14.5316 64.1625 17.8964C60.7977 21.2612 60.7977 26.7167 64.1625 30.0815Z" fill="#108CFF"/>
+<path d="M45.2854 33.4429C39.3448 31.7133 32.9349 33.4134 28.6322 37.8597L24.4017 42.2316C17.2539 49.6181 20.8878 61.9777 30.896 64.3201C35.4151 65.3777 40.158 63.9908 43.3952 60.6649L62.9374 40.5874C63.6268 39.8792 63.3137 38.6918 62.3647 38.4155L45.2854 33.4429Z" fill="#FFCA62"/>
+<path d="M45.5264 45.8726C39.615 47.6994 33.178 46.1047 28.803 41.7296L24.5013 37.4277C17.2333 30.1595 20.6639 17.7419 30.6324 15.2356C35.1335 14.104 39.8985 15.413 43.1898 18.6852L63.0588 38.4394C63.7597 39.1362 63.4661 40.3286 62.5218 40.6204L45.5264 45.8726Z" fill="#108CFF"/>
+<path d="M124.373 28.7328V22.8472H106V54.059H112.066V42.0202H124.022V36.1345H112.066V28.7328H124.373Z" fill="white"/>
+<path d="M131.342 29.0895C133.276 29.0895 134.859 27.4844 134.859 25.5671C134.859 23.6498 133.276 22 131.342 22C129.452 22 127.87 23.6498 127.87 25.5671C127.87 27.4844 129.452 29.0895 131.342 29.0895ZM128.529 54.059H134.2V31.7648H128.529V54.059Z" fill="white"/>
+<path d="M145.06 35.5994V31.7648H139.389V54.059H145.06V43.4024C145.06 38.7206 148.796 37.383 151.741 37.7397V31.319C148.972 31.319 146.202 32.5674 145.06 35.5994Z" fill="white"/>
+<path d="M159.032 45.2751H175.603C175.735 44.5171 175.823 43.7591 175.823 42.9119C175.823 36.3574 171.208 31.1406 164.703 31.1406C157.802 31.1406 153.098 36.2683 153.098 42.9119C153.098 49.5556 157.758 54.6832 165.142 54.6832C169.362 54.6832 172.658 52.9443 174.724 49.9123L170.153 47.237C169.186 48.53 167.428 49.4664 165.23 49.4664C162.241 49.4664 159.824 48.2179 159.032 45.2751ZM158.945 40.8163C159.604 37.9626 161.67 36.3128 164.703 36.3128C167.076 36.3128 169.45 37.6059 170.153 40.8163H158.945Z" fill="white"/>
+<path d="M190.962 22.2229C183.973 22.2229 180.632 25.3887 180.632 31.5419V31.7648H177.467V37.2938H180.632V54.059H186.302V37.2938H189.951V31.7648H186.302V31.5419C186.302 28.5099 188.017 27.2614 190.962 27.2614C191.533 27.2614 192.148 27.2614 192.764 27.306V54.059H198.434V23.1593C196.016 22.6688 193.731 22.2229 190.962 22.2229Z" fill="white"/>
+<path d="M217.934 31.7648L213.055 46.7465L207.341 31.7648H201.143L210.154 53.3456C209.099 56.333 207.517 57.6706 204.396 57.6261V62.9767C209.978 63.2888 213.715 60.4797 216 54.059L224 31.7648H217.934Z" fill="white"/>
+</svg>
diff --git a/packages/shared/components/Button.svelte b/packages/shared/components/Button.svelte
index 930c5550992..370607dc3ef 100644
--- a/packages/shared/components/Button.svelte
+++ b/packages/shared/components/Button.svelte
@@ -64,13 +64,6 @@
                 }
             }
         }
-        &:disabled {
-            @apply pointer-events-none;
-            @apply bg-gray-200;
-            span {
-                @apply text-gray-500;
-            }
-        }
         &.secondary {
             @apply border;
             @apply border-solid;
@@ -246,7 +239,11 @@
                 @apply text-gray-500;
             }
             &.darkmode {
-                @apply bg-gray-800;
+                @apply bg-gray-700;
+                @apply bg-opacity-10;
+                span {
+                    @apply text-gray-700;
+                }
             }
         }
     }
diff --git a/packages/shared/components/DashboardPane.svelte b/packages/shared/components/DashboardPane.svelte
index a60121f6f98..a16290fef21 100644
--- a/packages/shared/components/DashboardPane.svelte
+++ b/packages/shared/components/DashboardPane.svelte
@@ -4,7 +4,7 @@
 
 <style>
     div {
-        box-shadow: 0px 1px 2px 2px rgba(154, 173, 206, 0.1);
+        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
     }
 </style>
 
diff --git a/packages/shared/components/Logo.svelte b/packages/shared/components/Logo.svelte
index 04751c5987b..da0ed79723e 100644
--- a/packages/shared/components/Logo.svelte
+++ b/packages/shared/components/Logo.svelte
@@ -1,15 +1,22 @@
 <script lang="typescript">
+    import { darkMode } from 'shared/lib/app'
+
     export let logo = undefined
     export let width = undefined
     export let height = undefined
     export let classes = ''
 
-    $: selected = logos[logo]
+    $: selected = logos[logo]?.[$darkMode ? 'darkmode' : 'default']
 
     const logos = {
-        'logo-firefly-full': 'firefly_logo_full.svg',
-        'logo-firefly': 'firefly_logo.svg',
-        'profile-picture': 'profile_picture.svg', // TODO: remove
+        'logo-firefly-full': {
+            default: 'firefly_logo_full.svg',
+            darkmode: 'firefly_logo_full_darkmode.svg',
+        },
+        'logo-firefly': {
+            default: 'firefly_logo.svg',
+            darkmode: 'firefly_logo.svg',
+        },
     }
 </script>
 
diff --git a/packages/shared/components/Profile.svelte b/packages/shared/components/Profile.svelte
index e8a873ff7c9..8ec02900e91 100644
--- a/packages/shared/components/Profile.svelte
+++ b/packages/shared/components/Profile.svelte
@@ -37,8 +37,8 @@
         </div>
         <Text type="h4" classes="mt-5">{name}</Text>
         {#if isDeveloper}
-            <div class={'bg-gray-500 rounded-full px-2 mt-4'}>
-                <Text type="p" classes="text-white">{locale('general.dev').toUpperCase()}</Text>
+            <div class="bg-gray-500 dark:bg-gray-700 dark:bg-opacity-20 rounded-full px-2 py-1 mt-4">
+                <Text type="p" smaller classes="text-white">{locale('general.dev').toUpperCase()}</Text>
             </div>
         {/if}
     </div>
diff --git a/packages/shared/components/RecoveryPhrase.svelte b/packages/shared/components/RecoveryPhrase.svelte
index a854acd2ea8..def25288ef5 100644
--- a/packages/shared/components/RecoveryPhrase.svelte
+++ b/packages/shared/components/RecoveryPhrase.svelte
@@ -81,7 +81,7 @@
         {#each visibleRecoveryPhrase as word, i}
             <button
                 on:click|preventDefault={() => handleClick(word, i)}
-                class="px-6 py-4 flex flex-row items-center rounded-2xl bg-gray-50"
+                class="px-6 py-4 flex flex-row items-center rounded-2xl bg-gray-50 dark:bg-gray-800"
                 class:selected={isVerification && recoveryPhraseIndexes.indexOf(i) !== -1}
                 class:disabled={!isVerification || disabled}
                 class:errored={errorIndex === i}>
@@ -89,7 +89,9 @@
                 {#if isVerification && recoveryPhraseIndexes.indexOf(i) !== -1}
                     <span class="text-gray-300">{word}</span>
                     <span class="font-bold text-16 leading-3 text-white">{recoveryPhraseIndexes.indexOf(i) + 1}</span>
-                {:else}<span class={hide ? 'text-gray-500' : 'text-gray-800'}>{hide ? '********' : word}</span>{/if}
+                {:else}
+                    <span class={hide ? 'text-gray-500' : 'text-gray-800 dark:text-white'}>{hide ? '********' : word}</span>
+                {/if}
             </button>
         {/each}
     </div>
diff --git a/packages/shared/components/SettingsMenu.svelte b/packages/shared/components/SettingsMenu.svelte
index 7629c7202cf..52e8d09c06b 100644
--- a/packages/shared/components/SettingsMenu.svelte
+++ b/packages/shared/components/SettingsMenu.svelte
@@ -18,7 +18,7 @@
     {#each Object.values(settings) as setting}
         <button
             on:click={() => onClick()}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 py-2 rounded-lg w-3/4 text-left">
+            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-2 rounded-lg w-3/4 text-left">
             <Icon icon={icons[setting]} classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text type="p" secondary classes="group-hover:text-blue-500">{locale(`views.settings.${setting}.title`)}</Text>
         </button>
diff --git a/packages/shared/components/SettingsNavigator.svelte b/packages/shared/components/SettingsNavigator.svelte
index 5537c8b82d3..112290540f9 100644
--- a/packages/shared/components/SettingsNavigator.svelte
+++ b/packages/shared/components/SettingsNavigator.svelte
@@ -31,7 +31,7 @@
                 {#each Object.values(settings[route]) as setting, i}
                     <button
                         on:click={() => onSettingClick(setting)}
-                        class="group flex flex-row justify-start items-center hover:bg-blue-50 py-2 rounded-lg w-full ml-6 text-left {Object.values(settings[route]).length - 1 === i && 'mb-4'}">
+                        class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-2 rounded-lg w-full ml-6 text-left {Object.values(settings[route]).length - 1 === i && 'mb-4'}">
                         <Icon icon={icons[setting]} classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
                         <Text type="p" classes="group-hover:text-blue-500">{locale(`views.settings.${setting}.title`)}</Text>
                     </button>
diff --git a/packages/shared/components/inputs/ImportTextfield.svelte b/packages/shared/components/inputs/ImportTextfield.svelte
index 3e9856fc856..af982101470 100644
--- a/packages/shared/components/inputs/ImportTextfield.svelte
+++ b/packages/shared/components/inputs/ImportTextfield.svelte
@@ -84,7 +84,9 @@
 
 <div>
     <textarea
-        class="text-12 leading-140 resize-none w-full p-4 pb-3 rounded-xl border border-solid {error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 hover:border-gray-500 focus:border-gray-500'} bg-white text-gray-800"
+        class="text-12 leading-140 resize-none w-full p-4 pb-3 rounded-xl border border-solid 
+            {error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-700'} 
+            text-gray-500 dark:text-white bg-white dark:bg-gray-800 "
         bind:value={content}
         on:keydown={debounce(handleKeyDown)}
         placeholder=""
diff --git a/packages/shared/components/inputs/Password.svelte b/packages/shared/components/inputs/Password.svelte
index 474d70118a9..1b16d5d4ca0 100644
--- a/packages/shared/components/inputs/Password.svelte
+++ b/packages/shared/components/inputs/Password.svelte
@@ -1,4 +1,3 @@
-
 <script lang="typescript">
     import Input from './Input'
     import { Icon } from 'shared/components'
@@ -29,8 +28,9 @@
 
 <style type="text/scss">
     div {
-        button {
-            right: 12px; // TODO: unable to use tailwind inset
+        &:disabled {
+            @apply pointer-events-none;
+            @apply opacity-50;
         }
         strength-meter {
             span {
@@ -47,15 +47,18 @@
     }
 </style>
 
-<div class={classes}>
+<div class={classes} class:disabled>
     {#if showStrengthLevel}
         <strength-meter class="flex flex-row justify-end mb-2">
             {#each Array(strengthLevels) as _, i}
-                <span class="ml-1 w-1.5 h-0.5 rounded-lg bg-gray-300"class:strong={strength === 4} class:weak={i - strength < 0}/>
+                <span
+                    class="ml-1 w-1.5 h-0.5 rounded-lg bg-gray-300"
+                    class:strong={strength === 4}
+                    class:weak={i - strength < 0} />
             {/each}
         </strength-meter>
     {/if}
-    <div class='flex w-full relative'>
+    <div class="flex w-full relative">
         <Input
             {error}
             {type}
@@ -64,12 +67,11 @@
             {numeric}
             {autofocus}
             {disabled}
-            placeholder={placeholder || locale('general.password')} 
+            placeholder={placeholder || locale('general.password')}
             {submitHandler}
-            spellcheck="false"
-        />
+            spellcheck="false" />
         {#if showRevealToggle === true && !disabled}
-            <button type="button" on:click={() => revealToggle()} tabindex="-1" class="absolute top-3">
+            <button type="button" on:click={() => revealToggle()} tabindex="-1" class="absolute top-3 right-3">
                 <Icon icon={revealed ? 'view' : 'hide'} classes="text-blue-500" />
             </button>
         {/if}
diff --git a/packages/shared/components/inputs/Pin.svelte b/packages/shared/components/inputs/Pin.svelte
index f37355585e8..660a27ed8db 100644
--- a/packages/shared/components/inputs/Pin.svelte
+++ b/packages/shared/components/inputs/Pin.svelte
@@ -117,9 +117,9 @@
         &:not(.disabled):hover {
             @apply border-gray-500;
         }
-
         &.disabled {
-            @apply cursor-default;
+            @apply pointer-events-none;
+            @apply opacity-50;
         }
         .input-wrapper {
             max-width: 204px;
@@ -134,9 +134,6 @@
                 &:focus {
                     @apply outline-none;
                 }
-                &:disabled {
-                    @apply cursor-default;
-                }
             }
         }
         .input-decorator-wrapper {
@@ -149,9 +146,6 @@
                 &.active {
                     @apply bg-blue-500;
                 }
-                &.disabled {
-                    @apply bg-gray-400;
-                }
             }
         }
     }
diff --git a/packages/shared/components/inputs/Radio.svelte b/packages/shared/components/inputs/Radio.svelte
index cc3b501c55b..f2bcc03e409 100644
--- a/packages/shared/components/inputs/Radio.svelte
+++ b/packages/shared/components/inputs/Radio.svelte
@@ -11,38 +11,29 @@
     label {
         position: relative;
         :global(svg path) {
-            stroke: white;
+            @apply text-white;
+            @apply stroke-current;
             fill: none;
         }
-        input {
-            position: absolute;
-            left: 0;
-            opacity: 0;
-        }
-
-        .svg-container {
-            width: 24px;
-            height: 24px;
-
+        div {
             &.active {
-                border-width: 0;
-                background-color: var(--ui-blue-color);
+                @apply border-0;
+                @apply bg-blue-500;
             }
         }
 
         &:hover,
         &:focus-within {
-            .svg-container {
-                border-color: var(--ui-blue-color);
+            div {
+                @apply border-blue-500;
             }
         }
     }
 </style>
 
-<label
-    class={`w-full flex items-center mb-4 text-12 leading-160 cursor-pointer text-gray-800 dark:text-white ${classes}`}>
-    <input class="h-4 w-4 cursor-pointer" type="radio" bind:group {value} />
-    <div class={`mr-3 svg-container rounded-full border border-solid border-gray-300 ${value === group ? "active" : ""}`}>
+<label class="w-full flex items-center mb-4 text-12 leading-160 cursor-pointer text-gray-800 dark:text-white {classes}">
+    <input class="absolute left-0 opacity-0 h-4 w-4 cursor-pointer" type="radio" bind:group {value} />
+    <div class="w-6 h-6 mr-3 rounded-full border border-solid border-gray-300" class:active={value === group}>
         <Icon icon={value === group ? 'radio' : 'radio-unchecked'} />
     </div>
     {label}
diff --git a/packages/shared/components/modals/AccountActions.svelte b/packages/shared/components/modals/AccountActions.svelte
index 0ad70d53aef..d6303ad6afa 100644
--- a/packages/shared/components/modals/AccountActions.svelte
+++ b/packages/shared/components/modals/AccountActions.svelte
@@ -42,7 +42,7 @@
         <!-- Customize -->
         <button
             on:click={() => handleCustomiseAccountClick()}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 py-3 px-3 w-full">
+            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-3 px-3 w-full">
             <Icon icon="customize" classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text smaller classes="group-hover:text-blue-500">{locale(`actions.customize_account`)}</Text>
         </button>
@@ -51,7 +51,7 @@
         <button
             disabled
             on:click={() => handlViewAddressHistoryClick()}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 py-3 px-3 w-full opacity-50 pointer-events-none">
+            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-3 px-3 w-full opacity-50 pointer-events-none">
             <Icon icon="history" classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text smaller classes="group-hover:text-blue-500">{locale(`actions.view_address_history`)}</Text>
         </button>
@@ -59,7 +59,7 @@
         <!-- Delete -->
         <button
             on:click={() => handleDeleteAccountClick()}
-            class="group flex flex-row justify-start items-center hover:bg-red-50 py-4 px-3 w-full">
+            class="group flex flex-row justify-start items-center hover:bg-red-50 dark:hover:bg-red-200 dark:hover:bg-opacity-20 py-4 px-3 w-full">
             <Icon icon="delete" classes="text-red-500 ml-1 mr-3" />
             <Text smaller classes="text-red-500" overrideColor>{locale(`actions.delete_account`)}</Text>
         </button>
diff --git a/packages/shared/components/modals/ProfileActions.svelte b/packages/shared/components/modals/ProfileActions.svelte
index 1b9cd2b5739..cd5ba3e9624 100644
--- a/packages/shared/components/modals/ProfileActions.svelte
+++ b/packages/shared/components/modals/ProfileActions.svelte
@@ -34,13 +34,13 @@
         <HR />
         <button
             on:click={() => handleSettingsClick()}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 py-3 px-3 w-full">
+            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-3 px-3 w-full">
             <Icon icon="settings" classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text smaller classes="group-hover:text-blue-500">{locale(`views.dashboard.profile_modal.all_settings`)}</Text>
         </button>
         <button
             on:click={() => handleLogoutClick()}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 py-3 px-3 w-full">
+            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-3 px-3 w-full">
             <Icon icon="logout" classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text smaller classes="group-hover:text-blue-500">{locale(`views.dashboard.profile_modal.logout`)}</Text>
         </button>
diff --git a/packages/shared/components/popups/Index.svelte b/packages/shared/components/popups/Index.svelte
index 0c707546618..222d49bdede 100644
--- a/packages/shared/components/popups/Index.svelte
+++ b/packages/shared/components/popups/Index.svelte
@@ -66,7 +66,8 @@
     in:fade={{ duration: transition ? 100 : 0 }}
     class={`flex items-center justify-center fixed top-0 left-0 w-screen p-6
                 h-screen overflow-hidden z-10 ${fullScreen ? 'bg-white dark:bg-blue-900' : 'bg-gray-800 bg-opacity-40'}`}>
-    <popup-content class={`bg-white dark:bg-gray-900 rounded-xl pt-6 px-8 pb-8 relative ${fullScreen ? 'full-screen' : ''}`}>
+    <popup-content
+        class={`bg-white rounded-xl pt-6 px-8 pb-8 relative ${fullScreen ? 'full-screen dark:bg-blue-900' : 'dark:bg-gray-900'}`}>
         {#if !hideClose}
             <button on:click={closePopup} class="absolute top-6 right-8">
                 <Icon icon="close" classes="text-gray-800 dark:text-white" />
diff --git a/packages/shared/routes/Splash.svelte b/packages/shared/routes/Splash.svelte
index cd78a431fc5..daa3c5a3072 100644
--- a/packages/shared/routes/Splash.svelte
+++ b/packages/shared/routes/Splash.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div class="w-full h-full flex justify-center items-center bg-white dark:bg-blue-900">
-    <div width="100px">
+    <div class="w-48">
         <Logo width="100%" logo="logo-firefly-full" />
     </div>
 </div>
diff --git a/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte b/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte
index 2ace17d076a..0c9aeb4ec9c 100644
--- a/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte
@@ -37,8 +37,8 @@
             <button
                 on:click={() => handleAccountClick(acc.id)}
                 class="w-10 h-10 rounded-xl p-2 text-14 leading-100 font-bold text-center
-                {activeAccount.id === acc.id ? `bg-${acc.color}-500 text-white` : 'bg-gray-200 text-gray-500'} 
-                hover:bg-{acc.color}-500 hover:text-white">{getInitials(acc.alias, 2)}
+                {activeAccount.id === acc.id ? `bg-${acc.color}-500 text-white` : 'bg-gray-200 dark:bg-gray-700 dark:bg-opacity-20 text-gray-500'} 
+                hover:bg-{acc.color}-500 dark:hover:bg-opacity-100 hover:text-white">{getInitials(acc.alias, 2)}
             </button>
         {/each}
     </div>

From c7119735bef661c4dc8f96a25180c8e820296a9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Tue, 16 Mar 2021 16:06:05 +0100
Subject: [PATCH 04/11] remove theme.scss

---
 packages/shared/components/Link.svelte |  8 +--
 packages/shared/style/style.scss       |  2 -
 packages/shared/style/themes.scss      | 93 --------------------------
 3 files changed, 1 insertion(+), 102 deletions(-)
 delete mode 100644 packages/shared/style/themes.scss

diff --git a/packages/shared/components/Link.svelte b/packages/shared/components/Link.svelte
index 5558d9a64c9..193558fdfbe 100644
--- a/packages/shared/components/Link.svelte
+++ b/packages/shared/components/Link.svelte
@@ -9,14 +9,8 @@
     export let ghost = false
 </script>
 
-<style type="text/scss">
-    a {
-        color: var(--text-highlighted-color); // TODO: tailwindify
-    }
-</style>
-
 <a
-    class="text-12 leading-140 cursor-pointer"
+    class="text-12 leading-140 cursor-pointer text-blue-500"
     data-label="link"
     use:bindEvents={events}
     {href}
diff --git a/packages/shared/style/style.scss b/packages/shared/style/style.scss
index af29376fadf..ac3ddf788c4 100644
--- a/packages/shared/style/style.scss
+++ b/packages/shared/style/style.scss
@@ -53,8 +53,6 @@
         U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-@import 'themes.scss';
-
 *,
 *:after,
 *:before {
diff --git a/packages/shared/style/themes.scss b/packages/shared/style/themes.scss
deleted file mode 100644
index 3766a41d061..00000000000
--- a/packages/shared/style/themes.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Branding Colors
- */
-:root {
-    --blue-ff-color: #309cff;
-    --yellow-ff-color: #ffca62;
-    --turquoise-ff-color: #17e1d5;
-    --blue-light-ff-color: #8fe6fa;
-    --blue-medium-ff-color: #4daaff;
-    --orange-ff-color: #ff8b5c;
-    --red-ff-color: #ff6755;
-    --purple-ff-color: #666af7;
-    --pink-ff-color: #ef75d4;
-    --green-ff-color: #61e884;
-}
-/*
- * Theme definition: Light
- * Default
- */
-:root {
-    // UI
-    --line-separator-color: #eef4ff;
-    --bg-grey-color: #f6f9ff;
-    --element-disabled-color: #e1eaf9;
-    --ui-blue-color: #108cff;
-    --element-bg-color: #ffffff;
-    // App
-    --app-bg-color: #f6f9ff;
-    // Typography
-    --text-primary-color: #25395f;
-    --text-secondary-color: #9aadce;
-    --text-disabled-color: #c9d6ec;
-    --text-highlighted-color: var(--blue-ff-color);
-    --text-error-color: var(--red-ff-color);
-    // Button
-    --button-text-color: #ffffff;
-    --button-border-color: var(--ui-blue-color);
-    --button-bg-color: var(--ui-blue-color);
-    --button-border-color: var(--ui-blue-color);
-    --button-disabled-bg-color: #e1eaf9;
-    --button-disabled-border-color: #c9d6ec;
-    --button-icon-color: #ffffff;
-    --button-active-icon-color: #ffffff;
-    --button-secondary-text-color: #1f212c;
-    --button-secondary-bg-color: #ffffff;
-    --button-secondary-icon-color: var(--ui-blue-color);
-    --button-secondary-active-text-color: #ffffff;
-    --button-secondary-active-bg-color: var(--ui-blue-color);
-    --button-secondary-active-icon-color: #ffffff;
-    --button-disabled-bg-color: #e1eaf9;
-    --button-disabled-text-color: #8391aa;
-    // Link
-    --link-text-color: var(--ui-blue-color);
-}
-
-/*
- * Theme definition: Dark
- */
-:global(body.scheme-dark) {
-    // UI
-    --line-separator-color: #333e5c;
-    --bg-grey-color: #22293e;
-    --element-disabled-color: #54698d;
-    --ui-blue-color: #108cff;
-    --element-bg-color: #2c3659;
-    // App
-    --app-bg-color: #22293e;
-    // Typography
-    --text-primary-color: #ffffff;
-    --text-secondary-color: #9aadce;
-    --text-disabled-color: #54698d;
-    --text-highlighted-color: var(--blue-ff-color);
-    --text-error-color: var(--red-ff-color);
-    // Button
-    --button-text-color: #ffffff;
-    --button-border-color: var(--ui-blue-color);
-    --button-bg-color: var(--ui-blue-color);
-    --button-border-color: var(--ui-blue-color);
-    --button-disabled-bg-color: #e1eaf9;
-    --button-disabled-border-color: #54698d;
-    --button-icon-color: #ffffff;
-    --button-active-icon-color: #ffffff;
-    --button-secondary-text-color: #1f212c;
-    --button-secondary-bg-color: #ffffff;
-    --button-secondary-icon-color: var(--ui-blue-color);
-    --button-secondary-active-text-color: #ffffff;
-    --button-secondary-active-bg-color: var(--ui-blue-color);
-    --button-secondary-active-icon-color: #ffffff;
-    --button-disabled-bg-color: #e1eaf9;
-    --button-disabled-text-color: #8391aa;
-    // Link
-    --link-text-color: var(--ui-blue-color);
-}

From b0fb02a025e41395b13d7fecd78fd98fe8e1fd8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Tue, 16 Mar 2021 16:06:16 +0100
Subject: [PATCH 05/11] remove unused Option chart component

---
 .../shared/components/charts/Option.svelte    | 26 -------------------
 packages/shared/components/index.js           |  1 -
 2 files changed, 27 deletions(-)
 delete mode 100644 packages/shared/components/charts/Option.svelte

diff --git a/packages/shared/components/charts/Option.svelte b/packages/shared/components/charts/Option.svelte
deleted file mode 100644
index 5ab5149ddf0..00000000000
--- a/packages/shared/components/charts/Option.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="typescript">
-    import { Box, Text } from 'shared/components'
-
-    export let selected = false
-    export let option
-</script>
-
-<style type="text/scss">
-    p {
-        color: var(--text-secondary-color);
-        font-size: 10px;
-        line-height: 12px;
-        cursor: pointer;
-
-        &.selected {
-            color: var(--bg-grey-color);
-            background: var(--ui-blue-color);
-        }
-    }
-</style>
-
-{#if selected}
-    <p class:selected type="p" class="px-4 flex items-center justify-center rounded-full h-8 w-8">{option}</p>
-{:else}
-    <p class="px-4 py-2">{option}</p>
-{/if}
diff --git a/packages/shared/components/index.js b/packages/shared/components/index.js
index 03dc356aeb0..d3bb70d1bef 100644
--- a/packages/shared/components/index.js
+++ b/packages/shared/components/index.js
@@ -42,7 +42,6 @@ export { default as HR } from './HR.svelte'
 export * from './modals'
 // Charts
 export { default as Chart } from './charts/Index.svelte'
-export { default as ChartOption } from './charts/Option.svelte'
 export { default as BarChart } from './charts/Bar.svelte'
 export { default as LineChart } from './charts/Line.svelte'
 export * as ChartDefaults from './charts/defaults'

From dd0223cc1079430ca0312e59c3ff879eb808c470 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Tue, 16 Mar 2021 16:10:44 +0100
Subject: [PATCH 06/11] small css fix

---
 .../routes/dashboard/wallet/views/AccountNavigation.svelte    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte b/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte
index 0c9aeb4ec9c..198c77bf51a 100644
--- a/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte
@@ -37,8 +37,8 @@
             <button
                 on:click={() => handleAccountClick(acc.id)}
                 class="w-10 h-10 rounded-xl p-2 text-14 leading-100 font-bold text-center
-                {activeAccount.id === acc.id ? `bg-${acc.color}-500 text-white` : 'bg-gray-200 dark:bg-gray-700 dark:bg-opacity-20 text-gray-500'} 
-                hover:bg-{acc.color}-500 dark:hover:bg-opacity-100 hover:text-white">{getInitials(acc.alias, 2)}
+                {activeAccount.id === acc.id ? `bg-${acc.color}-500 text-white` : 'bg-gray-200 dark:bg-gray-700 text-gray-500'} 
+                hover:bg-{acc.color}-500 hover:text-white">{getInitials(acc.alias, 2)}
             </button>
         {/each}
     </div>

From 097638c57be6bf5e542d2544ba641c7580e7d9e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Tue, 16 Mar 2021 16:12:53 +0100
Subject: [PATCH 07/11] enable darkmode settings & setup

---
 packages/shared/routes/dashboard/settings/views/General.svelte | 2 +-
 packages/shared/routes/setup/Language.svelte                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/shared/routes/dashboard/settings/views/General.svelte b/packages/shared/routes/dashboard/settings/views/General.svelte
index 6691e18aa38..811a3d03334 100644
--- a/packages/shared/routes/dashboard/settings/views/General.svelte
+++ b/packages/shared/routes/dashboard/settings/views/General.svelte
@@ -37,7 +37,7 @@
     </section>
     <HR classes="pb-5 mt-5 justify-center" />
     <!-- TODO: Implement and enable -->
-    <section id="theme" class="w-3/4 opacity-50 pointer-events-none">
+    <section id="theme" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.theme.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.theme.description')}</Text>
         <Radio value={false} bind:group={darkModeEnabled} label={locale('general.lightTheme')} />
diff --git a/packages/shared/routes/setup/Language.svelte b/packages/shared/routes/setup/Language.svelte
index de9a8fd15b2..f0f960a2a35 100644
--- a/packages/shared/routes/setup/Language.svelte
+++ b/packages/shared/routes/setup/Language.svelte
@@ -34,7 +34,7 @@
                 items={[{ value: 1, label: 'English' }, { value: 2, label: 'Belula' }]}
                 disabled
                 classes="mb-4 opacity-50" />
-            <div class="pointer-events-none opacity-50">
+            <div>
                 <Text type="p" classes="mb-2 mt-4" smaller>{locale('general.appearance')}</Text>
                 <Radio value={false} bind:group={darkModeEnabled} label={locale('general.lightTheme')} />
                 <Radio value={true} bind:group={darkModeEnabled} label={locale('general.darkTheme')} />

From 67a0be6e84700b375c35de7b80848e074dc5095a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Wed, 17 Mar 2021 10:09:35 +0100
Subject: [PATCH 08/11] fix wrong darkmode bg colors

---
 packages/desktop/App.svelte                             | 5 ++---
 packages/shared/components/OnboardingLayout.svelte      | 2 +-
 packages/shared/components/popups/Index.svelte          | 4 ++--
 packages/shared/routes/Splash.svelte                    | 2 +-
 packages/shared/routes/login/views/EnterPin.svelte      | 2 +-
 packages/shared/routes/login/views/SelectProfile.svelte | 2 +-
 6 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/desktop/App.svelte b/packages/desktop/App.svelte
index 910c3b0cdf0..c683bffc090 100644
--- a/packages/desktop/App.svelte
+++ b/packages/desktop/App.svelte
@@ -96,11 +96,10 @@
     html,
     body {
         @apply bg-white;
+        @apply select-none;
         &.scheme-dark {
-            @apply bg-blue-900;
+            @apply bg-gray-900;
         }
-
-        @apply select-none;
     }
 </style>
 
diff --git a/packages/shared/components/OnboardingLayout.svelte b/packages/shared/components/OnboardingLayout.svelte
index 0b7e390f62b..62a85a5f1eb 100644
--- a/packages/shared/components/OnboardingLayout.svelte
+++ b/packages/shared/components/OnboardingLayout.svelte
@@ -9,7 +9,7 @@
     <slot />
 {/if}
 <!--  -->
-<div data-label="onboarding-layout" class="relative w-full h-full flex flex-row bg-white dark:bg-blue-900">
+<div data-label="onboarding-layout" class="relative w-full h-full flex flex-row bg-white dark:bg-gray-900">
     {#if allowBack}
         <div data-label="back-button" class="absolute top-12 left-5" on:click={onBackClick}>
             <Icon icon="arrow-left" classes="cursor-pointer text-blue-500" />
diff --git a/packages/shared/components/popups/Index.svelte b/packages/shared/components/popups/Index.svelte
index 222d49bdede..a329a0db4c8 100644
--- a/packages/shared/components/popups/Index.svelte
+++ b/packages/shared/components/popups/Index.svelte
@@ -65,9 +65,9 @@
 <popup
     in:fade={{ duration: transition ? 100 : 0 }}
     class={`flex items-center justify-center fixed top-0 left-0 w-screen p-6
-                h-screen overflow-hidden z-10 ${fullScreen ? 'bg-white dark:bg-blue-900' : 'bg-gray-800 bg-opacity-40'}`}>
+                h-screen overflow-hidden z-10 ${fullScreen ? 'bg-white dark:bg-gray-900' : 'bg-gray-800 bg-opacity-40'}`}>
     <popup-content
-        class={`bg-white rounded-xl pt-6 px-8 pb-8 relative ${fullScreen ? 'full-screen dark:bg-blue-900' : 'dark:bg-gray-900'}`}>
+        class={`bg-white rounded-xl pt-6 px-8 pb-8 relative ${fullScreen ? 'full-screen dark:bg-gray-900' : 'dark:bg-gray-900'}`}>
         {#if !hideClose}
             <button on:click={closePopup} class="absolute top-6 right-8">
                 <Icon icon="close" classes="text-gray-800 dark:text-white" />
diff --git a/packages/shared/routes/Splash.svelte b/packages/shared/routes/Splash.svelte
index daa3c5a3072..30f5171bfc6 100644
--- a/packages/shared/routes/Splash.svelte
+++ b/packages/shared/routes/Splash.svelte
@@ -2,7 +2,7 @@
     import { Logo } from 'shared/components'
 </script>
 
-<div class="w-full h-full flex justify-center items-center bg-white dark:bg-blue-900">
+<div class="w-full h-full flex justify-center items-center bg-white dark:bg-gray-900">
     <div class="w-48">
         <Logo width="100%" logo="logo-firefly-full" />
     </div>
diff --git a/packages/shared/routes/login/views/EnterPin.svelte b/packages/shared/routes/login/views/EnterPin.svelte
index 1ceec1973e8..e71f2daf45f 100644
--- a/packages/shared/routes/login/views/EnterPin.svelte
+++ b/packages/shared/routes/login/views/EnterPin.svelte
@@ -109,7 +109,7 @@
 {#if mobile}
     <div>foo</div>
 {:else}
-    <div class="relative w-full h-full bg-white dark:bg-blue-900">
+    <div class="relative w-full h-full bg-white dark:bg-gray-900">
         <button
             data-label="back-button"
             class="absolute top-12 left-5 disabled:opacity-50 cursor-pointer disabled:cursor-auto"
diff --git a/packages/shared/routes/login/views/SelectProfile.svelte b/packages/shared/routes/login/views/SelectProfile.svelte
index 1e59023e54c..282bc349681 100644
--- a/packages/shared/routes/login/views/SelectProfile.svelte
+++ b/packages/shared/routes/login/views/SelectProfile.svelte
@@ -21,7 +21,7 @@
 {#if mobile}
     <div>Not yet implemented</div>
 {:else}
-    <section class="flex flex-col h-screen bg-white dark:bg-blue-900 items-center">
+    <section class="flex flex-col h-screen bg-white dark:bg-gray-900 items-center">
         <Logo width="64px" logo="logo-firefly" classes="absolute top-20 transform left-1/2 -translate-x-1/2" />
         <div class="h-full space-x-20 flex flex-wrap justify-center items-start content-center mt-10 mx-20">
             {#each $profiles as profile}

From 7cff8f6b0e99e5996cf741f285f641749ff235a5 Mon Sep 17 00:00:00 2001
From: Charlie Varley <charlie.varley@iota.org>
Date: Wed, 17 Mar 2021 23:30:27 +0000
Subject: [PATCH 09/11] chore: resolve conflicts

---
 packages/desktop/App.svelte                   |  33 +++--
 packages/desktop/electron/lib/menu.js         |  59 ++++-----
 packages/mobile/App.svelte                    |  35 ++---
 packages/shared/components/Button.svelte      |   7 +-
 packages/shared/components/Logo.svelte        |   6 +-
 packages/shared/components/QR.svelte          |   5 +-
 packages/shared/components/Route.svelte       |   2 +-
 .../shared/components/SettingsMenu.svelte     |   4 +-
 .../components/SettingsNavigator.svelte       |   2 +-
 packages/shared/components/Sidebar.svelte     |   1 -
 .../shared/components/ToastContainer.svelte   |   4 +-
 .../shared/components/inputs/Dropdown.svelte  |   5 +
 .../shared/components/inputs/Input.svelte     |   2 +-
 .../components/popups/DeleteProfile.svelte    |   9 +-
 packages/shared/lib/app.ts                    |  33 +++--
 packages/shared/lib/appSettings.ts            |  20 +++
 packages/shared/lib/i18n.ts                   |  37 ++++--
 packages/shared/lib/notifications.ts          |   4 +-
 packages/shared/lib/profile.ts                |  81 ++++++------
 packages/shared/lib/router.ts                 |  15 +--
 packages/shared/lib/typings/routes.ts         |  21 ++-
 packages/shared/lib/wallet.ts                 |  14 +-
 .../shared/routes/dashboard/Dashboard.svelte  |   4 +-
 .../routes/dashboard/settings/Settings.svelte |  31 +++--
 .../dashboard/settings/views/Advanced.svelte  | 120 +++++++++---------
 .../dashboard/settings/views/General.svelte   |  53 ++++----
 .../dashboard/settings/views/Security.svelte  |   8 +-
 .../settings/views/SettingsHome.svelte        |  15 ++-
 .../settings/views/SettingsViewer.svelte      |  40 ++++--
 .../routes/dashboard/wallet/Wallet.svelte     |  19 ++-
 .../dashboard/wallet/views/LineChart.svelte   |   2 +-
 .../dashboard/wallet/views/Security.svelte    |  13 +-
 .../wallet/views/WalletActions.svelte         |   3 +-
 packages/shared/routes/setup/Language.svelte  |  21 +--
 packages/shared/routes/setup/Setup.svelte     |   8 +-
 35 files changed, 412 insertions(+), 324 deletions(-)
 create mode 100644 packages/shared/lib/appSettings.ts

diff --git a/packages/desktop/App.svelte b/packages/desktop/App.svelte
index c683bffc090..fa2d5cb61d0 100644
--- a/packages/desktop/App.svelte
+++ b/packages/desktop/App.svelte
@@ -1,15 +1,15 @@
 <script lang="typescript">
     import { Popup, Route, ToastContainer } from 'shared/components'
-    import { darkMode, loggedIn, mobile } from 'shared/lib/app'
+    import { loggedIn, mobile } from 'shared/lib/app'
+    import { appSettings } from 'shared/lib/appSettings'
     import { refreshVersionDetails, versionDetails } from 'shared/lib/appUpdater'
     import { Electron } from 'shared/lib/electron'
     import { goto } from 'shared/lib/helpers'
-    import { activeLocale, dir, isLocaleLoaded, setupI18n, _ } from 'shared/lib/i18n'
+    import { dir, isLocaleLoaded, setupI18n, _ } from 'shared/lib/i18n'
     import { fetchMarketData } from 'shared/lib/marketData'
     import { pollNetworkStatus } from 'shared/lib/networkStatus'
     import { openPopup, popupState } from 'shared/lib/popup'
-    import { activeProfile } from 'shared/lib/profile'
-    import { dashboardRoute, initRouter, route as appRoute, routerNext, routerPrevious, walletRoute } from 'shared/lib/router'
+    import { dashboardRoute, initRouter, routerNext, routerPrevious, walletRoute } from 'shared/lib/router'
     import { AppRoute, Tabs } from 'shared/lib/typings/routes'
     import { requestMnemonic } from 'shared/lib/wallet'
     import {
@@ -24,6 +24,7 @@
         Migrate,
         Password,
         Protect,
+        Settings,
         Setup,
         Splash,
         Welcome,
@@ -32,12 +33,8 @@
     import { get } from 'svelte/store'
     import { getLocalisedMenuItems } from './lib/helpers'
 
-    const locale = activeLocale
-
-    $: $darkMode ? document.body.classList.add('scheme-dark') : document.body.classList.remove('scheme-dark')
-    $: if (activeLocale !== locale) {
-        Electron.updateMenu('strings', getLocalisedMenuItems($_))
-    }
+    $: $appSettings.darkMode ? document.body.classList.add('scheme-dark') : document.body.classList.remove('scheme-dark')
+    $: Electron.updateMenu('strings', getLocalisedMenuItems($_))
     $: Electron.updateMenu('loggedIn', $loggedIn)
 
     $: if (document.dir !== $dir) {
@@ -45,7 +42,9 @@
     }
 
     let splash = true
-    setupI18n({ withLocale: get(activeProfile)?.settings.language ?? 'en' })
+    let settings = false
+
+    setupI18n({ withLocale: $appSettings.language })
     onMount(async () => {
         setTimeout(() => {
             splash = false
@@ -66,8 +65,12 @@
             walletRoute.set(route)
         })
         Electron.onEvent('menu-navigate-settings', () => {
-            if (get(dashboardRoute) !== Tabs.Settings) {
-                dashboardRoute.set(Tabs.Settings)
+            if ($loggedIn) {
+                if (get(dashboardRoute) !== Tabs.Settings) {
+                    dashboardRoute.set(Tabs.Settings)
+                }
+            } else {
+                settings = true
             }
         })
         Electron.onEvent('menu-check-for-update', async () => {
@@ -161,5 +164,9 @@
     <Route route={AppRoute.Login}>
         <Login on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} {goto} />
     </Route>
+    {#if settings}
+        <Settings locale={$_} handleClose={() => (settings = false)} />
+    {/if}
+
     <ToastContainer />
 {/if}
diff --git a/packages/desktop/electron/lib/menu.js b/packages/desktop/electron/lib/menu.js
index 3667976703e..36b7e6aaf57 100644
--- a/packages/desktop/electron/lib/menu.js
+++ b/packages/desktop/electron/lib/menu.js
@@ -54,42 +54,33 @@ const buildTemplate = () => {
                 {
                     type: 'separator',
                 },
-            ],
-        },
+                {
+                    label: state.strings.settings,
+                    click: () => getOrInitWindow('main').webContents.send('menu-navigate-settings'),
+                },
+                {
+                    type: 'separator',
+                },
+                {
+                    label: state.strings.diagnostics,
+                    click: () => getOrInitWindow('main').webContents.send('menu-diagnostics'),
+                },
+                {
+                    // TODO: Remove before stable release
+                    label: "Developer Tools",
+                    role: 'toggleDevTools'
+                },
+                {
+                    label: state.strings.errorLog,
+                    click: () => getOrInitWindow('main').webContents.send('menu-error-log')
+                },
+                {
+                    type: 'separator',
+                },
+            ]
+        }
     ]
 
-    if (state.loggedIn) {
-        template[0].submenu = template[0].submenu.concat([
-            {
-                label: state.strings.settings,
-                click: () => getOrInitWindow('main').webContents.send('menu-navigate-settings'),
-            },
-            {
-                type: 'separator',
-            },
-        ])
-    }
-
-    template[0].submenu = template[0].submenu.concat([
-        {
-            // TODO: Remove before stable release
-            label: "Developer Tools",
-            role: 'toggleDevTools'
-        },
-        {
-            label: state.strings.errorLog,
-            click: () => getOrInitWindow('main').webContents.send('menu-error-log')
-        },
-        {
-            label: state.strings.diagnostics,
-            click: () => getOrInitWindow('main').webContents.send('menu-diagnostics')
-        },
-        {
-            type: 'separator',
-        },
-    ])
-
-
     if (process.platform === 'darwin') {
         template[0].submenu = template[0].submenu.concat([
             {
diff --git a/packages/mobile/App.svelte b/packages/mobile/App.svelte
index 49079dcd231..d135fd4f2d3 100644
--- a/packages/mobile/App.svelte
+++ b/packages/mobile/App.svelte
@@ -1,31 +1,32 @@
 <script lang="typescript">
-    import { onMount } from 'svelte'
+    import { Route, Toggle } from 'shared/components'
+    import { loggedIn, mobile } from 'shared/lib/app'
+    import { appSettings } from 'shared/lib/appSettings'
+    import { goto } from 'shared/lib/helpers'
+    import { dir, isLocaleLoaded, setupI18n, _ } from 'shared/lib/i18n'
     import { fetchMarketData } from 'shared/lib/marketData'
     import { pollNetworkStatus } from 'shared/lib/networkStatus'
-    import { setupI18n, isLocaleLoaded, dir, _ } from 'shared/lib/i18n'
-    import { darkMode, mobile, loggedIn } from 'shared/lib/app'
-    import { goto } from 'shared/lib/helpers'
-    import { requestMnemonic } from 'shared/lib/wallet'
     import { initRouter, routerNext, routerPrevious } from 'shared/lib/router'
     import { AppRoute } from 'shared/lib/typings/routes'
-    import { Route, Toggle } from 'shared/components'
+    import { requestMnemonic } from 'shared/lib/wallet'
     import {
-        Splash,
-        Welcome,
-        Legal,
-        Settings,
-        Setup,
-        Password,
-        Protect,
         Backup,
-        Import,
         Balance,
-        Migrate,
         Congratulations,
         Dashboard,
+        Import,
+        Legal,
+        Migrate,
+        Password,
+        Protect,
+        Settings,
+        Setup,
+        Splash,
+        Welcome,
     } from 'shared/routes'
+    import { onMount } from 'svelte'
 
-    $: $darkMode ? document.body.classList.add('scheme-dark') : document.body.classList.remove('scheme-dark')
+    $: $appSettings.darkMode ? document.body.classList.add('scheme-dark') : document.body.classList.remove('scheme-dark')
 
     $: if (document.dir !== $dir) {
         document.dir = $dir
@@ -86,7 +87,7 @@
     <!-- dummy toggles -->
     <div class="dummy-toggles flex flex-row">
         <div class="mr-4">
-            <Toggle on={darkMode} />
+            <Toggle on={$appSettings.darkMode} />
         </div>
         <button on:click={() => loggedIn.update(() => false)}>reset</button>
     </div>
diff --git a/packages/shared/components/Button.svelte b/packages/shared/components/Button.svelte
index 370607dc3ef..aa677b887bb 100644
--- a/packages/shared/components/Button.svelte
+++ b/packages/shared/components/Button.svelte
@@ -2,7 +2,7 @@
     import { Icon } from 'shared/components'
     import { bindEvents } from 'shared/lib/utils'
     import { onMount } from 'svelte'
-    import { darkMode } from 'shared/lib/app'
+    import { appSettings } from 'shared/lib/appSettings'
     export let events = {}
     export let onClick = () => ''
     export let secondary = false
@@ -19,6 +19,7 @@
     export let autofocus = false
 
     let buttonElement
+    let darkModeEnabled = $appSettings.darkMode
 
     onMount(() => {
         if (autofocus) {
@@ -259,7 +260,7 @@
         class:secondary
         class:active
         class:with-icon={icon}
-        class:darkmode={$darkMode}
+        class:darkmode={darkModeEnabled}
         {disabled}
         bind:this={buttonElement}>
         <Icon classes="mb-1" {icon} />
@@ -280,7 +281,7 @@
         class:with-icon={icon}
         class:iconReverse
         class:active
-        class:darkmode={$darkMode}
+        class:darkmode={darkModeEnabled}
         {disabled}
         bind:this={buttonElement}>
         {#if icon}
diff --git a/packages/shared/components/Logo.svelte b/packages/shared/components/Logo.svelte
index da0ed79723e..24294a6af31 100644
--- a/packages/shared/components/Logo.svelte
+++ b/packages/shared/components/Logo.svelte
@@ -1,12 +1,14 @@
 <script lang="typescript">
-    import { darkMode } from 'shared/lib/app'
+    import { appSettings } from 'shared/lib/appSettings'
 
     export let logo = undefined
     export let width = undefined
     export let height = undefined
     export let classes = ''
 
-    $: selected = logos[logo]?.[$darkMode ? 'darkmode' : 'default']
+    let darkModeEnabled = $appSettings.darkMode
+
+    $: selected = logos[logo]?.[darkModeEnabled ? 'darkmode' : 'default']
 
     const logos = {
         'logo-firefly-full': {
diff --git a/packages/shared/components/QR.svelte b/packages/shared/components/QR.svelte
index 86a679439bb..b2afe5e7618 100644
--- a/packages/shared/components/QR.svelte
+++ b/packages/shared/components/QR.svelte
@@ -1,12 +1,13 @@
 <script lang="typescript">
     import QRCode from 'qr.js/lib/QRCode'
-    import { darkMode } from 'shared/lib/app'
+    import { appSettings } from 'shared/lib/appSettings'
 
     export let data
     export let size = 150
 
     let qr
     let cells
+    let darkModeEnabled = $appSettings.darkMode
 
     $: data, create()
 
@@ -38,7 +39,7 @@
                     <rect
                         height={1}
                         key={cellIndex}
-                        style="fill: {cell ? ($darkMode ? '#ffffff' : '#000000') : 'none'};"
+                        style="fill: {cell ? (darkModeEnabled ? '#ffffff' : '#000000') : 'none'};"
                         width={1}
                         x={cellIndex}
                         y={rowIndex} />
diff --git a/packages/shared/components/Route.svelte b/packages/shared/components/Route.svelte
index 0e1583aedd7..83a9cab978b 100644
--- a/packages/shared/components/Route.svelte
+++ b/packages/shared/components/Route.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import { Transition } from 'shared/components'
-    import { route as appRoute } from 'shared/lib/router'
+    import { appRoute } from 'shared/lib/router'
 
     export let transition = true
     export let route = undefined
diff --git a/packages/shared/components/SettingsMenu.svelte b/packages/shared/components/SettingsMenu.svelte
index 92c7bb16dba..3189ec69234 100644
--- a/packages/shared/components/SettingsMenu.svelte
+++ b/packages/shared/components/SettingsMenu.svelte
@@ -2,6 +2,7 @@
     import { Icon, Text } from 'shared/components'
 
     export let settings
+    export let activeSettings = []
     export let locale
     export let icons
     export let icon
@@ -18,7 +19,8 @@
     {#each Object.values(settings) as setting}
         <button
             on:click={() => onClick(setting)}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-2 rounded-lg w-3/4 text-left">
+            class={`group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-2 rounded-lg w-3/4 text-left ${Object.values(activeSettings).includes(setting) ? '' : 'opacity-20 pointer-events-none'}`}
+            disabled={!Object.values(activeSettings).includes(setting)}>
             <Icon icon={icons[setting]} classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text type="p" secondary classes="group-hover:text-blue-500">{locale(`views.settings.${setting}.title`)}</Text>
         </button>
diff --git a/packages/shared/components/SettingsNavigator.svelte b/packages/shared/components/SettingsNavigator.svelte
index 112290540f9..2d470ddee8e 100644
--- a/packages/shared/components/SettingsNavigator.svelte
+++ b/packages/shared/components/SettingsNavigator.svelte
@@ -6,7 +6,7 @@
     export let routes
     export let route
     export let icons
-    export let onSettingClick = () => {}
+    export let onSettingClick = (_) => {}
 
     function changeRoute(setting) {
         document.getElementById('scroller').scrollTop = 0
diff --git a/packages/shared/components/Sidebar.svelte b/packages/shared/components/Sidebar.svelte
index b67d72b7ef4..294c6443032 100644
--- a/packages/shared/components/Sidebar.svelte
+++ b/packages/shared/components/Sidebar.svelte
@@ -10,7 +10,6 @@
     import { get } from 'svelte/store'
 
     export let locale
-    export let activeTab
 
     let showNetwork = false
     let healthStatus = 2
diff --git a/packages/shared/components/ToastContainer.svelte b/packages/shared/components/ToastContainer.svelte
index 3e3f866fa04..48205c0346a 100644
--- a/packages/shared/components/ToastContainer.svelte
+++ b/packages/shared/components/ToastContainer.svelte
@@ -56,13 +56,13 @@
     }
 </style>
 
-<toast-container class="flex flex-col">
+<toast-container class="flex flex-col relative z-20">
     <ul>
         {#each $displayNotifications as notification}
             <li
                 in:fade={{ duration: 100 }}
                 out:fade={{ duration: 100 }}
-                class="flex flex-row items-center bg-{TOAST_STYLE[notification.type].backgroundColor} rounded-lg overflow-hidden z-10 px-6 py-3">
+                class="flex flex-row items-center bg-{TOAST_STYLE[notification.type].backgroundColor} rounded-lg overflow-hidden z-20 px-6 py-3">
                 <div
                     style={"width:40px;height:40px"}
                     class="flex flex-shrink-0 justify-center items-center bg-{TOAST_STYLE[notification.type].iconBackgroundColor} rounded-lg text-{TOAST_STYLE[notification.type].iconColor}">
diff --git a/packages/shared/components/inputs/Dropdown.svelte b/packages/shared/components/inputs/Dropdown.svelte
index 156bdbb9b9f..3078c49724d 100644
--- a/packages/shared/components/inputs/Dropdown.svelte
+++ b/packages/shared/components/inputs/Dropdown.svelte
@@ -72,6 +72,10 @@
     on:click={(e) => {
         e.stopPropagation()
         dropdown = !dropdown
+        const elem = document.getElementById(value)
+        if (elem) {
+            elem.scrollIntoView()
+        }
     }}
     use:clickOutside
     on:clickOutside={handleClickOutside}
@@ -90,6 +94,7 @@
                     class="relative flex items-center p-4 w-full whitespace-nowrap
                         {item[valueKey] === value && 'bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20'} 
                         hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:bg-opacity-20"
+                    id={item[valueKey]}
                     on:click={() => onSelect(item)}
                     class:active={item[valueKey] === value}><Text type="p" smaller>{item[valueKey]}</Text></button>
             {/each}
diff --git a/packages/shared/components/inputs/Input.svelte b/packages/shared/components/inputs/Input.svelte
index cd653102458..e30d64959bf 100644
--- a/packages/shared/components/inputs/Input.svelte
+++ b/packages/shared/components/inputs/Input.svelte
@@ -56,7 +56,7 @@
         {value}
         bind:this={inputElement}
         {maxlength}
-        class={`w-full relative text-12 leading-140 py-4 pr-8 pl-4 border border-solid rounded-xl 
+        class={`w-full text-12 leading-140 py-4 pr-8 pl-4 border border-solid rounded-xl 
             text-gray-500 dark:text-white bg-white dark:bg-gray-800 
             ${error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-700 focus:border-gray-500 dark:focus:border-gray-600'} 
             ${classes}`}
diff --git a/packages/shared/components/popups/DeleteProfile.svelte b/packages/shared/components/popups/DeleteProfile.svelte
index 76ebaed8a18..76c40759d6c 100644
--- a/packages/shared/components/popups/DeleteProfile.svelte
+++ b/packages/shared/components/popups/DeleteProfile.svelte
@@ -30,14 +30,7 @@
                 onSuccess(res) {
                     logout()
 
-                    // Remove profile from (local) storage
-                    // Note: This should be the last step in the reset process.
-                    // It should be done after the router is set back to default.
-                    // Otherwise, parts of the application referencing $activeProfile will create an exception.
-                    const ap = get(activeProfile)
-                    if (ap) {
-                        removeProfile(ap.id)
-                    }
+                    removeProfile(ap.id)
 
                     isBusy = false
                     closePopup()
diff --git a/packages/shared/lib/app.ts b/packages/shared/lib/app.ts
index dbaaa252f46..9aa121053e3 100644
--- a/packages/shared/lib/app.ts
+++ b/packages/shared/lib/app.ts
@@ -3,24 +3,15 @@ import { persistent } from './helpers'
 import { localize } from './i18n'
 import { showAppNotification } from './notifications'
 import { closePopup } from './popup'
-import { activeProfile, clearActiveProfile } from './profile'
+import { activeProfile, clearActiveProfile, isStrongholdLocked } from './profile'
 import { resetRouter } from './router'
 import { api, destroyActor, resetWallet } from './wallet'
-/**
- * Notification content
- */
-export const notification = writable<string>(null)
 
 /**
  * Mobile mode
  */
 export const mobile = writable<boolean>(false)
 
-/**
- * Dark mode enabled state
- */
-export const darkMode = persistent<boolean>('darkMode', false)
-
 /**
  * Wallet access pin
  */
@@ -59,6 +50,23 @@ export const loggedIn = writable<boolean>(false)
 export const developerMode = persistent<boolean>('developerMode', false)
 
 /**
+ * Cleanup the signup vars
+ */
+ export const cleanupSignup = () => {
+    mnemonic.set(null)
+    strongholdPassword.set(null)
+    walletPin.set(null)
+}
+
+/**
+ * Log in to the current profile
+ */
+export const login = () => {
+    loggedIn.set(true)
+}
+
+/**
+
  * Logout from current profile
  */
 export const logout = () => {
@@ -68,15 +76,16 @@ export const logout = () => {
         if (ap) {
             destroyActor(ap.id)
         }
+        isStrongholdLocked.set(true)
         clearSendParams()
         closePopup()
         resetWallet()
         resetRouter()
         clearActiveProfile()
-        mnemonic.set(null)
+        loggedIn.set(false)
     }
 
-    if (!ap?.isStrongholdLocked) {
+    if (!get(isStrongholdLocked)) {
         api.lockStronghold({
             onSuccess() {
                 _cleanup()
diff --git a/packages/shared/lib/appSettings.ts b/packages/shared/lib/appSettings.ts
new file mode 100644
index 00000000000..b7f37eec230
--- /dev/null
+++ b/packages/shared/lib/appSettings.ts
@@ -0,0 +1,20 @@
+import { persistent } from './helpers'
+/**
+ * App Settings
+ */
+export interface AppSettings {
+    deepLinking: boolean
+    language: string,
+    developerMode: boolean,
+    darkMode: boolean,
+    notifications: boolean
+}
+
+export const appSettings = persistent<AppSettings>('settings', {
+    deepLinking: false,
+    language: 'en',
+    developerMode: false,
+    darkMode: false,
+    notifications: true
+})
+
diff --git a/packages/shared/lib/i18n.ts b/packages/shared/lib/i18n.ts
index e4adbc2eb36..33697f39ff3 100644
--- a/packages/shared/lib/i18n.ts
+++ b/packages/shared/lib/i18n.ts
@@ -1,4 +1,4 @@
-import { activeProfile, updateProfile } from 'shared/lib/profile'
+import { appSettings } from 'shared/lib/appSettings'
 import { addMessages, dictionary, getLocaleFromNavigator, init, _ } from 'svelte-i18n'
 import { derived, get, writable } from 'svelte/store'
 
@@ -60,8 +60,6 @@ const INIT_OPTIONS = {
     warnOnMissingMessages: true,
 }
 
-let activeLocale
-
 // Internal store for tracking network
 // loading state
 const isDownloading = writable(false)
@@ -79,18 +77,20 @@ const setupI18n = (options = { withLocale: null }) => {
         const messagesFileUrl = MESSAGE_FILE_URL_TEMPLATE.replace('{locale}', _locale)
         // Download translation file for given locale/language
         return loadJson(messagesFileUrl).then((messages) => {
-            activeLocale = _locale
             addMessages(_locale, messages)
-            updateProfile('settings.language', _locale)
+            appSettings.set({
+                ...get(appSettings),
+                language: _locale
+            })
             isDownloading.set(false)
         })
     }
 }
 
 const isLocaleLoaded = derived(
-    [isDownloading, dictionary],
-    ([$isDownloading, $dictionary]) =>
-        !$isDownloading && $dictionary[activeLocale] && Object.keys($dictionary[activeLocale]).length > 0
+    [isDownloading, dictionary, appSettings],
+    ([$isDownloading, $dictionary, $appSettings]) =>
+        !$isDownloading && $dictionary[$appSettings.language] && Object.keys($dictionary[$appSettings.language]).length > 0
 )
 
 const hasLoadedLocale = (locale: string) => {
@@ -120,16 +120,25 @@ function loadJson(url) {
     return fetch(url).then((response) => response.json())
 }
 
-const dir = derived(activeProfile, (_activeProfile) => {
-    if (_activeProfile) {
-        // TODO: Implement RTL support
-        // return _activeProfile.settings.language === 'ar' ? 'rtl' : 'ltr'
-    }
+const dir = derived(appSettings, (_appSettings) => {
+    // TODO: Implement RTL support
+    // return appSettings.language === 'ar' ? 'rtl' : 'ltr'
     return 'ltr'
 })
 
+
+const setLanguage = (item) => {
+    const locale = Object.keys(locales).find((key) => locales[key] === item.value)
+    appSettings.set({
+        ...get(appSettings),
+        language: locale,
+    })
+
+    setupI18n({ withLocale: locale })
+}
+
 const localize = get(_) as (string, values?) => string
 
 // We expose the svelte-i18n _ store so that our app has
 // a single API for i18n
-export { activeLocale, _, setupI18n, dir, isLocaleLoaded, localize }
+export { _, setupI18n, dir, isLocaleLoaded, localize, setLanguage }
diff --git a/packages/shared/lib/notifications.ts b/packages/shared/lib/notifications.ts
index bf0cf66ec4d..3da7138abae 100644
--- a/packages/shared/lib/notifications.ts
+++ b/packages/shared/lib/notifications.ts
@@ -1,4 +1,4 @@
-import { activeProfile } from 'shared/lib/profile';
+import { appSettings } from 'shared/lib/appSettings';
 import { generateRandomId } from 'shared/lib/utils';
 import { get, writable } from 'svelte/store';
 import { Electron } from './electron';
@@ -41,7 +41,7 @@ export function showNotification(notificationData: NotificationData, showSystemN
     }
 
     if (showSystemNotification &&
-        get(activeProfile)?.settings.notifications &&
+        get(appSettings).notifications &&
         Electron.NotificationManager) {
         Electron.NotificationManager.notify(notificationData.message)
     } else {
diff --git a/packages/shared/lib/profile.ts b/packages/shared/lib/profile.ts
index 28291d89b73..212b4b93e26 100644
--- a/packages/shared/lib/profile.ts
+++ b/packages/shared/lib/profile.ts
@@ -2,27 +2,17 @@ import { AvailableExchangeRates } from 'shared/lib/currency'
 import { persistent } from 'shared/lib/helpers'
 import { DEFAULT_NODE } from 'shared/lib/network'
 import { generateRandomId } from 'shared/lib/utils'
+import { api } from 'shared/lib/wallet'
 import { derived, get, Readable, writable } from 'svelte/store'
 import { Electron } from './electron'
 import type { Node } from './typings/client'
 
 /**
- * Base profile interface —
+ * Profile
  */
-interface BaseProfile {
-    name: string
+interface Profile {
     id: string
-    active: boolean
-}
-
-/**
- * Extended profile interface (Extra properties associated with a profile)
- */
-interface ExtendedProfile {
-    /**
-     * Determines if stronghold is locked
-     */
-    isStrongholdLocked: boolean
+    name: string
     /**
      * Time for most recent stronghold back up
      */
@@ -31,49 +21,45 @@ interface ExtendedProfile {
      * User settings
      */
     settings: UserSettings
+    isDeveloperProfile: boolean
+
 }
 
 /**
  * User Settings
  */
 export interface UserSettings {
-    deepLinking: boolean
     outsourcePow: boolean
-    language: string
     currency: AvailableExchangeRates
-    notifications: boolean
+    automaticNodeSelection: boolean
     node: Node
     customNodes: Node[]
     /** Lock screen timeout in minutes */
     lockScreenTimeout: number
-    automaticNodeSelection: boolean
 }
 
-/**
- * Profile interface
- */
-interface Profile extends BaseProfile, ExtendedProfile {
-    isDeveloperProfile: boolean
-}
+export const activeProfileId = writable<string | null>(null)
 
 export const profiles = persistent<Profile[]>('profiles', [])
 
 export const newProfile = writable<Profile | null>(null)
 
+export const isStrongholdLocked = writable<boolean>(true)
+
 /**
  * Currently active profile
  */
 export const activeProfile: Readable<Profile | undefined> = derived(
-    [profiles, newProfile],
-    ([$profiles, $newProfile]) =>
+    [profiles, newProfile, activeProfileId],
+    ([$profiles, $newProfile, $activeProfileId]) =>
         $newProfile ||
         $profiles.find((_profile) => {
-            return _profile.active === true
+            return _profile.id === $activeProfileId
         })
 )
 
-activeProfile.subscribe((profile) => {
-    Electron.updateActiveProfile(profile ? profile.id : null)
+activeProfileId.subscribe((profileId) => {
+    Electron.updateActiveProfile(profileId)
 })
 
 /**
@@ -101,29 +87,24 @@ export const saveProfile = (profile: Profile): Profile => {
  * @returns {Profile}
  */
 export const createProfile = (profileName, isDeveloperProfile): Profile => {
-    const profile = {
+    const profile: Profile = {
         id: generateRandomId(),
         name: profileName,
-        active: true,
-        isStrongholdLocked: true,
         lastStrongholdBackupTime: null,
         isDeveloperProfile,
-        // Settings
         settings: {
-            deepLinking: false,
-            language: 'en',
             outsourcePow: false,
             currency: AvailableExchangeRates.USD,
-            notifications: true,
+            automaticNodeSelection: true,
             node: DEFAULT_NODE,
             customNodes: [],
             // Minutes
             lockScreenTimeout: 5,
-            automaticNodeSelection: true,
         },
     }
 
     newProfile.set(profile)
+    activeProfileId.set(profile.id)
 
     return profile
 }
@@ -136,7 +117,25 @@ export const createProfile = (profileName, isDeveloperProfile): Profile => {
  * @returns {void}
  */
 export const disposeNewProfile = (): void => {
+    const np = get(newProfile)
+    if (np) {
+        api.removeStorage({
+            onSuccess() {
+                api.removeAccount(np.id, {
+                    onSuccess() {
+                    },
+                    onError(err) {
+                        console.error(err)
+                    },
+                })
+            },
+            onError(err) {
+                console.error(err)
+            },
+        })
+    }
     newProfile.set(null)
+    activeProfileId.set(null)
 }
 
 /**
@@ -149,11 +148,9 @@ export const disposeNewProfile = (): void => {
  * @returns {void}
  */
 export const setActiveProfile = (id: string): void => {
-    profiles.update((_profiles) => _profiles.map((profile) => Object.assign({}, profile, { active: id === profile.id })))
+    activeProfileId.set(id)
 }
 
-
-
 /**
  * Clears the active profile
  *
@@ -162,7 +159,7 @@ export const setActiveProfile = (id: string): void => {
  * @returns {void}
  */
 export const clearActiveProfile = (): void => {
-    profiles.update((_profiles) => _profiles.map((profile) => Object.assign({}, profile, { active: false })))
+    activeProfileId.set(null)
 }
 
 /**
@@ -194,7 +191,7 @@ export const updateProfile = (
     const _update = (_profile) => {
         const pathList = path.split('.')
 
-        pathList.reduce((a, b: keyof ExtendedProfile | keyof UserSettings, level: number) => {
+        pathList.reduce((a, b: keyof Profile | keyof UserSettings, level: number) => {
             if (level === pathList.length - 1) {
                 a[b] = value
                 return value
diff --git a/packages/shared/lib/router.ts b/packages/shared/lib/router.ts
index 390ddfb800a..86bfec0aa8b 100644
--- a/packages/shared/lib/router.ts
+++ b/packages/shared/lib/router.ts
@@ -1,4 +1,4 @@
-import { loggedIn, notification, strongholdPassword, walletPin } from 'shared/lib/app'
+import { cleanupSignup, login, strongholdPassword, walletPin } from 'shared/lib/app'
 import { profiles } from 'shared/lib/profile'
 import { AccountRoutes, AppRoute, SettingsRoutes, SetupType, Tabs, WalletRoutes } from 'shared/lib/typings/routes'
 import { get, readable, writable } from 'svelte/store'
@@ -14,7 +14,7 @@ import { deepLinkRequestActive } from './deepLinking'
  * @returns {void}
  */
 export const setRoute = (path: string): void => {
-    route.set(path)
+    appRoute.set(path)
 }
 
 /**
@@ -24,7 +24,6 @@ export const path = readable<string>(null, (set) => {
     const updatePath = (): void => {
         const pathName = window.location.hash.substr(1)
         set(pathName)
-        notification.set(null)
     }
 
     window.addEventListener('hashchange', updatePath)
@@ -43,7 +42,7 @@ export const walletSetupType = writable<SetupType>(null)
 /*
  * Current view
  */
-export const route = writable<string>(null)
+export const appRoute = writable<string>(null)
 
 /**
  * Application route history
@@ -91,7 +90,7 @@ export const initRouter = () => {
 // TODO: only handle route changes, not app variables
 export const routerNext = (event) => {
     let params = event.detail || {}
-    const currentRoute: string = get(route)
+    const currentRoute: string = get(appRoute)
     let nextRoute: AppRoute
 
     switch (currentRoute) {
@@ -101,7 +100,7 @@ export const routerNext = (event) => {
             if (shouldAddProfile) {
                 nextRoute = AppRoute.Setup
             } else {
-                loggedIn.set(true)
+                login()
                 nextRoute = AppRoute.Dashboard
             }
             break
@@ -176,7 +175,8 @@ export const routerNext = (event) => {
             nextRoute = AppRoute.Congratulations
             break
         case AppRoute.Congratulations:
-            loggedIn.set(true)
+            cleanupSignup()
+            login()
             nextRoute = AppRoute.Dashboard
             break
     }
@@ -221,5 +221,4 @@ export const resetRouter = () => {
     settingsRoute.set(SettingsRoutes.Init)
     dashboardRoute.set(Tabs.Wallet)
     deepLinkRequestActive.set(false)
-    loggedIn.set(false)
 }
diff --git a/packages/shared/lib/typings/routes.ts b/packages/shared/lib/typings/routes.ts
index 8427f1bc5d3..e7ef2644992 100644
--- a/packages/shared/lib/typings/routes.ts
+++ b/packages/shared/lib/typings/routes.ts
@@ -12,7 +12,6 @@ export enum AppRoute {
     Congratulations = 'congratulations',
     Dashboard = 'dashboard',
     Login = 'login',
-    Settings = 'settings'
 }
 
 export enum SetupType {
@@ -52,6 +51,13 @@ export enum SettingsRoutes {
     HelpAndInfo = 'helpAndInfo',
 }
 
+export enum SettingsRoutesNoProfile {
+    Init = 'init',
+    GeneralSettings = 'generalSettings',
+    AdvancedSettings = 'advancedSettings',
+    HelpAndInfo = 'helpAndInfo',
+}
+
 export enum GeneralSettings {
     Profile = 'profile',
     Theme = 'theme',
@@ -60,6 +66,12 @@ export enum GeneralSettings {
     Notifications = 'notifications',
 }
 
+export enum GeneralSettingsNoProfile {
+    Theme = 'theme',
+    Language = 'language',
+    Notifications = 'notifications',
+}
+
 export enum SecuritySettings {
     ExportStronghold = 'exportStronghold',
     AppLock = 'appLock',
@@ -79,6 +91,13 @@ export enum AdvancedSettings {
     StateExport = 'stateExport',
 }
 
+export enum AdvancedSettingsNoProfile {
+    DeveloperMode = 'developerMode',
+    DeepLinks = 'deepLinks',
+    ErrorLog = 'errorLog',
+    Diagnostics = 'diagnostics',
+}
+
 export enum HelpAndInfo {
     Troubleshoot = 'troubleshoot',
     Documentation = 'documentation',
diff --git a/packages/shared/lib/wallet.ts b/packages/shared/lib/wallet.ts
index 8864148fa55..473dbccffb1 100644
--- a/packages/shared/lib/wallet.ts
+++ b/packages/shared/lib/wallet.ts
@@ -1,20 +1,18 @@
 import { mnemonic } from 'shared/lib/app'
-import type { ErrorEventPayload } from 'shared/lib/typings/events'
-import type { Account as BaseAccount } from 'shared/lib/typings/account'
 import { convertToFiat, currencies, CurrencyTypes, exchangeRates } from 'shared/lib/currency'
 import { localize } from 'shared/lib/i18n'
 import type { HistoryData, PriceData } from 'shared/lib/marketData'
 import { HistoryDataProps } from 'shared/lib/marketData'
 import { showAppNotification, showSystemNotification } from 'shared/lib/notifications'
-import { activeProfile, updateProfile } from 'shared/lib/profile'
-import { formatUnit } from 'shared/lib/units'
-import { get, writable, Writable } from 'svelte/store'
-import type { Account, SyncedAccount } from 'shared/lib/typings/account'
+import { activeProfile, isStrongholdLocked } from 'shared/lib/profile'
+import type { Account, Account as BaseAccount, SyncedAccount } from 'shared/lib/typings/account'
 import type { Address } from 'shared/lib/typings/address'
 import type { Actor } from 'shared/lib/typings/bridge'
-import type { TransferProgressEventType } from 'shared/lib/typings/events'
+import type { ErrorEventPayload, TransferProgressEventType } from 'shared/lib/typings/events'
 import type { Message } from 'shared/lib/typings/message'
+import { formatUnit } from 'shared/lib/units'
 import type { ApiClient } from 'shared/lib/walletApi'
+import { get, writable, Writable } from 'svelte/store'
 
 const ACCOUNT_COLORS = ['turquoise', 'green', 'orange', 'yellow', 'purple', 'pink']
 
@@ -189,7 +187,7 @@ export const initialiseListeners = () => {
      */
     api.onStrongholdStatusChange({
         onSuccess(response) {
-            updateProfile('isStrongholdLocked', response.payload.snapshot.status === 'Locked')
+            isStrongholdLocked.set(response.payload.snapshot.status === 'Locked')
         },
         onError(error) {
             console.error(error)
diff --git a/packages/shared/routes/dashboard/Dashboard.svelte b/packages/shared/routes/dashboard/Dashboard.svelte
index d55a270eb47..a5bbb8095d6 100644
--- a/packages/shared/routes/dashboard/Dashboard.svelte
+++ b/packages/shared/routes/dashboard/Dashboard.svelte
@@ -1,9 +1,9 @@
 <script lang="typescript">
     import { Idle, Sidebar } from 'shared/components'
     import { logout, sendParams } from 'shared/lib/app'
+    import { appSettings } from 'shared/lib/appSettings'
     import { deepLinkRequestActive } from 'shared/lib/deepLinking'
     import { Electron } from 'shared/lib/electron'
-    import { activeProfile } from 'shared/lib/profile'
     import { dashboardRoute, routerNext } from 'shared/lib/router'
     import { Tabs } from 'shared/lib/typings/routes'
     import { parseDeepLink } from 'shared/lib/utils'
@@ -44,7 +44,7 @@
             }
         }
 
-        if (!get(activeProfile)?.settings.deepLinking) {
+        if (!$appSettings.deepLinking) {
             _redirect(Tabs.Settings)
             // TODO: Add alert system
             console.log('deep linking not enabled')
diff --git a/packages/shared/routes/dashboard/settings/Settings.svelte b/packages/shared/routes/dashboard/settings/Settings.svelte
index a8d9a30598d..cc4f5fef5c4 100644
--- a/packages/shared/routes/dashboard/settings/Settings.svelte
+++ b/packages/shared/routes/dashboard/settings/Settings.svelte
@@ -1,25 +1,20 @@
 <script lang="typescript">
     import { Icon } from 'shared/components'
+    import { appSettings } from 'shared/lib/appSettings'
     import { deepLinkRequestActive } from 'shared/lib/deepLinking'
-    import { activeProfile } from 'shared/lib/profile'
-    import { accountRoute, dashboardRoute, settingsRoute, walletRoute, settingsChildRoute } from 'shared/lib/router'
-    import { AccountRoutes, SettingsRoutes, WalletRoutes, Tabs } from 'shared/lib/typings/routes'
+    import { isLocaleLoaded } from 'shared/lib/i18n'
+    import { accountRoute, dashboardRoute, settingsChildRoute, settingsRoute, walletRoute } from 'shared/lib/router'
+    import { AccountRoutes, SettingsRoutes, Tabs, WalletRoutes } from 'shared/lib/typings/routes'
     import { selectedAccountId } from 'shared/lib/wallet'
-    import { createEventDispatcher, onDestroy } from 'svelte'
-    import { get } from 'svelte/store'
+    import { onDestroy } from 'svelte'
     import { SettingsHome, SettingsViewer } from './views'
 
     export let locale
     export let mobile
-
-    const dispatch = createEventDispatcher()
-
-    function navigate(params) {
-        dispatch('next', params)
-    }
+    export let handleClose
 
     $: {
-        if ($deepLinkRequestActive && !get(activeProfile)?.settings.deepLinking) {
+        if ($deepLinkRequestActive && !$appSettings.deepLinking) {
             settingsRoute.set(SettingsRoutes.AdvancedSettings)
             deepLinkRequestActive.set(false)
         }
@@ -33,19 +28,23 @@
     }
 
     onDestroy(() => {
-        settingsRoute.set(SettingsRoutes.Init)
-        settingsChildRoute.set(null)
+        // When a new locale is loaded the pages are reloaded
+        // so don't reset the router in this case
+        if ($isLocaleLoaded) {
+            settingsRoute.set(SettingsRoutes.Init)
+            settingsChildRoute.set(null)
+        }
     })
 </script>
 
 <div
     class="relative w-full h-full px-16 py-12 flex flex-1 bg-white dark:bg-gray-900 {$settingsRoute !== SettingsRoutes.Init && 'pt-20'} ">
-    <button on:click={closeSettings} class="absolute top-8 right-8">
+    <button on:click={handleClose || closeSettings} class="absolute top-8 right-8">
         <Icon icon="close" classes="text-gray-800 dark:text-white" />
     </button>
     {#if $settingsRoute === SettingsRoutes.Init}
         <SettingsHome {mobile} {locale} />
     {:else}
-        <SettingsViewer {mobile} {locale} {navigate} />
+        <SettingsViewer {mobile} {locale} />
     {/if}
 </div>
diff --git a/packages/shared/routes/dashboard/settings/views/Advanced.svelte b/packages/shared/routes/dashboard/settings/views/Advanced.svelte
index f0e23a7f503..ff6378c9cd7 100644
--- a/packages/shared/routes/dashboard/settings/views/Advanced.svelte
+++ b/packages/shared/routes/dashboard/settings/views/Advanced.svelte
@@ -1,12 +1,12 @@
 <script lang="typescript">
-    import type { ClientOptions } from 'lib/typings/client'
     import { Button, Checkbox, Dropdown, HR, Radio, Text } from 'shared/components'
-    import { developerMode } from 'shared/lib/app'
+    import { loggedIn } from 'shared/lib/app'
+    import { appSettings } from 'shared/lib/appSettings'
     import { DEFAULT_NODE, DEFAULT_NODES } from 'shared/lib/network'
     import { showAppNotification } from 'shared/lib/notifications'
     import { openPopup } from 'shared/lib/popup'
     import { activeProfile, updateProfile } from 'shared/lib/profile'
-    import type { Node } from 'shared/lib/typings/client'
+    import type { ClientOptions, Node } from 'shared/lib/typings/client'
     import { api, isSyncing, syncAccounts, wallet, WalletAccount } from 'shared/lib/wallet'
     import { get } from 'svelte/store'
 
@@ -15,11 +15,11 @@
     const { accounts } = $wallet
 
     let outsourcePowChecked = get(activeProfile)?.settings.outsourcePow
-    let deepLinkingChecked = get(activeProfile)?.settings.deepLinking
+    let deepLinkingChecked = $appSettings.deepLinking
     let automaticNodeSelection = get(activeProfile)?.settings.automaticNodeSelection
 
     $: updateProfile('settings.outsourcePow', outsourcePowChecked)
-    $: updateProfile('settings.deepLinking', deepLinkingChecked)
+    $: $appSettings.deepLinking = deepLinkingChecked
     $: updateProfile('settings.automaticNodeSelection', automaticNodeSelection)
 
     $: if (automaticNodeSelection) {
@@ -162,53 +162,53 @@
 </script>
 
 <div>
-    <section id="nodeSettings" class="w-3/4">
-        <Text type="h4" classes="mb-3">{locale('views.settings.nodeSettings.title')}</Text>
-        <Text type="p" secondary classes="mb-5">{locale('views.settings.nodeSettings.description')}</Text>
-        <Radio value={true} bind:group={automaticNodeSelection} label={locale('general.automaticNodeSelection')} />
-        <Radio value={false} bind:group={automaticNodeSelection} label={locale('general.manualNodeSelection')} />
-    </section>
-    <HR classes="pb-5 mt-5 justify-center" />
-
-    {#if !automaticNodeSelection}
-        <section id="configureNodeList" class="w-3/4">
-            <Text type="h4" classes="mb-3">{locale('views.settings.configureNodeList.title')}</Text>
-            <Text type="p" secondary classes="mb-5">{locale('views.settings.configureNodeList.description')}</Text>
-            <!-- Nodes list -->
-            <Text type="h4" classes="mb-3">{locale('general.nodes')}</Text>
-            <Dropdown
-                onSelect={selectNode}
-                value={$activeProfile?.settings.node?.url}
-                items={[...DEFAULT_NODES, ...$activeProfile?.settings.customNodes].map((node) => ({
-                    value: node.url,
-                    label: node.url,
-                }))} />
-
-            <!-- As client options (nodes) have association with accounts, disable "Add node" button if there are no accounts in wallet -->
-            <Button classes="w-1/4 mt-4" disabled={!$accounts.length} onClick={() => handleAddNodeClick()}>
-                {locale('actions.addNode')}
-            </Button>
-            <Button
-                classes="w-1/2 mt-4"
-                onClick={() => handleRemoveNodeClick()}
-                disabled={!$activeProfile?.settings.customNodes.find((n) => n.url === $activeProfile?.settings.node?.url)}>
-                {locale('actions.removeNode')}
-            </Button>
+    {#if $loggedIn}
+        <section id="nodeSettings" class="w-3/4">
+            <Text type="h4" classes="mb-3">{locale('views.settings.nodeSettings.title')}</Text>
+            <Text type="p" secondary classes="mb-5">{locale('views.settings.nodeSettings.description')}</Text>
+            <Radio value={true} bind:group={automaticNodeSelection} label={locale('general.automaticNodeSelection')} />
+            <Radio value={false} bind:group={automaticNodeSelection} label={locale('general.manualNodeSelection')} />
+        </section>
+        <HR classes="pb-5 mt-5 justify-center" />
+        {#if !automaticNodeSelection}
+            <section id="configureNodeList" class="w-3/4">
+                <Text type="h4" classes="mb-3">{locale('views.settings.configureNodeList.title')}</Text>
+                <Text type="p" secondary classes="mb-5">{locale('views.settings.configureNodeList.description')}</Text>
+                <!-- Nodes list -->
+                <Text type="h4" classes="mb-3">{locale('general.nodes')}</Text>
+                <Dropdown
+                    onSelect={selectNode}
+                    value={$activeProfile?.settings.node?.url}
+                    items={[...DEFAULT_NODES, ...$activeProfile?.settings.customNodes].map((node) => ({
+                        value: node.url,
+                        label: node.url,
+                    }))} />
+
+                <!-- As client options (nodes) have association with accounts, disable "Add node" button if there are no accounts in wallet -->
+                <Button classes="w-1/4 mt-4" disabled={!$accounts.length} onClick={() => handleAddNodeClick()}>
+                    {locale('actions.addNode')}
+                </Button>
+                <Button
+                    classes="w-1/2 mt-4"
+                    onClick={() => handleRemoveNodeClick()}
+                    disabled={!$activeProfile?.settings.customNodes.find((n) => n.url === $activeProfile?.settings.node?.url)}>
+                    {locale('actions.removeNode')}
+                </Button>
+            </section>
+            <HR classes="pb-5 mt-5 justify-center" />
+            {/if}
+        <section id="proofOfWork" class="w-3/4 opacity-50">
+            <Text type="h4" classes="mb-3">{locale('views.settings.proofOfWork.title')}</Text>
+            <Text type="p" secondary classes="mb-5">{locale('views.settings.proofOfWork.description')}</Text>
+            <Checkbox label={locale('actions.outsourceProofOfWork')} disabled bind:checked={outsourcePowChecked} />
         </section>
         <HR classes="pb-5 mt-5 justify-center" />
     {/if}
-
-    <section id="proofOfWork" class="w-3/4 opacity-50">
-        <Text type="h4" classes="mb-3">{locale('views.settings.proofOfWork.title')}</Text>
-        <Text type="p" secondary classes="mb-5">{locale('views.settings.proofOfWork.description')}</Text>
-        <Checkbox label={locale('actions.outsourceProofOfWork')} disabled bind:checked={outsourcePowChecked} />
-    </section>
-    <HR classes="pb-5 mt-5 justify-center" />
     <!-- TODO: Implement and enable -->
     <section id="developerMode" class="w-3/4 opacity-50">
         <Text type="h4" classes="mb-3">{locale('views.settings.developerMode.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.developerMode.description')}</Text>
-        <Checkbox label={locale('actions.enableDeveloperMode')} disabled bind:checked={$developerMode} />
+        <Checkbox label={locale('actions.enableDeveloperMode')} disabled bind:checked={$appSettings.developerMode} />
     </section>
     <HR classes="pb-5 mt-5 justify-center" />
     <section id="deepLinks" class="w-3/4">
@@ -216,12 +216,14 @@
         <Text type="p" secondary classes="mb-5">{locale('views.settings.deepLinks.description')}</Text>
         <Checkbox label={locale('actions.enableDeepLinks')} bind:checked={deepLinkingChecked} />
     </section>
-    <HR classes="pb-5 mt-5 justify-center" />
-    <section id="resyncAccounts" class="w-3/4">
-        <Text type="h4" classes="mb-3">{locale('views.settings.resyncAccounts.title')}</Text>
-        <Text type="p" secondary classes="mb-5">{locale('views.settings.resyncAccounts.description')}</Text>
-        <Button classes="w-1/4" onClick={syncAccounts} disabled={$isSyncing}>{locale('actions.syncAll')}</Button>
-    </section>
+    {#if $loggedIn}
+         <HR classes="pb-5 mt-5 justify-center" />
+        <section id="resyncAccounts" class="w-3/4">
+            <Text type="h4" classes="mb-3">{locale('views.settings.resyncAccounts.title')}</Text>
+            <Text type="p" secondary classes="mb-5">{locale('views.settings.resyncAccounts.description')}</Text>
+            <Button classes="w-1/4" onClick={syncAccounts} disabled={$isSyncing}>{locale('actions.syncAll')}</Button>
+        </section>
+    {/if}
     <HR classes="pb-5 mt-5 justify-center" />
     <section id="errorLog" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.errorLog.title')}</Text>
@@ -234,11 +236,13 @@
         <Text type="p" secondary classes="mb-5">{locale('views.settings.diagnostics.description')}</Text>
         <Button classes="w-1/4" onClick={() => handleDiagnosticsClick()}>{locale('views.settings.diagnostics.title')}</Button>
     </section>
-    <HR classes="pb-5 mt-5 justify-center" />
-    <!-- TODO: Implemnet state export -->
-    <section id="stateExport" class="w-3/4 opacity-50">
-        <Text type="h4" classes="mb-3">{locale('views.settings.stateExport.title')}</Text>
-        <Text type="p" secondary classes="mb-5">{locale('views.settings.stateExport.description')}</Text>
-        <Button classes="w-1/4" disabled onClick={() => {}}>{locale('actions.exportState')}</Button>
-    </section>
+    {#if $loggedIn}
+       <HR classes="pb-5 mt-5 justify-center" />
+        <!-- TODO: Implement state export -->
+        <section id="stateExport" class="w-3/4 opacity-50">
+            <Text type="h4" classes="mb-3">{locale('views.settings.stateExport.title')}</Text>
+            <Text type="p" secondary classes="mb-5">{locale('views.settings.stateExport.description')}</Text>
+            <Button classes="w-1/4" disabled onClick={() => {}}>{locale('actions.exportState')}</Button>
+        </section>
+    {/if}
 </div>
diff --git a/packages/shared/routes/dashboard/settings/views/General.svelte b/packages/shared/routes/dashboard/settings/views/General.svelte
index 811a3d03334..c57171d9ec8 100644
--- a/packages/shared/routes/dashboard/settings/views/General.svelte
+++ b/packages/shared/routes/dashboard/settings/views/General.svelte
@@ -1,26 +1,20 @@
 <script lang="typescript">
     import { Checkbox, Dropdown, HR, Radio, Text } from 'shared/components'
-    import { darkMode } from 'shared/lib/app'
+    import { loggedIn } from 'shared/lib/app'
+    import { appSettings } from 'shared/lib/appSettings'
     import { exchangeRates } from 'shared/lib/currency'
-    import { locales, setupI18n } from 'shared/lib/i18n'
+    import { locales, setLanguage, _ } from 'shared/lib/i18n'
     import { addProfileCurrencyPriceData } from 'shared/lib/marketData'
     import { activeProfile, updateProfile } from 'shared/lib/profile'
     import { updateAccountsBalanceEquiv, updateBalanceOverviewFiat } from 'shared/lib/wallet'
-    import { get } from 'svelte/store'
 
     export let locale
 
-    let darkModeEnabled = $darkMode
-    let notificationsChecked = get(activeProfile)?.settings.notifications ?? true
+    let darkModeEnabled = $appSettings.darkMode
+    let notificationsChecked = $appSettings.notifications
 
-    $: darkMode.set(darkModeEnabled)
-    $: updateProfile('settings.notifications', notificationsChecked)
-
-    const setLanguage = (item) => {
-        const locale = Object.keys(locales).find((key) => locales[key] === item.value)
-        updateProfile('settings.language', locale)
-        setupI18n({ withLocale: locale })
-    }
+    $: $appSettings.darkMode = darkModeEnabled
+    $: $appSettings.notifications = notificationsChecked
 
     const handleCurrencySelect = (item) => {
         updateProfile('settings.currency', item.value)
@@ -28,6 +22,11 @@
         updateBalanceOverviewFiat()
         updateAccountsBalanceEquiv()
     }
+
+    const handleLanguage = (item) => {
+        setLanguage(item)
+        locale = $_
+    }
 </script>
 
 <div>
@@ -49,22 +48,24 @@
         <Text type="p" secondary classes="mb-5">{locale('views.settings.language.description')}</Text>
         <Dropdown
             sortItems={true}
-            onSelect={(item) => setLanguage(item)}
-            value={locales[$activeProfile?.settings.language]}
+            onSelect={handleLanguage}
+            value={locales[$appSettings.language]}
             items={Object.values(locales).map((locale) => ({ value: locale, label: locale }))} />
     </section>
+    {#if $loggedIn}
     <HR classes="pb-5 mt-5 justify-center" />
-    <section id="currency" class="w-3/4">
-        <Text type="h4" classes="mb-3">{locale('views.settings.currency.title')}</Text>
-        <Text type="p" secondary classes="mb-5">{locale('views.settings.currency.description')}</Text>
-        <Dropdown
-            sortItems={true}
-            onSelect={handleCurrencySelect}
-            value={$activeProfile?.settings.currency}
-            items={Object.keys($exchangeRates)
-                .map((currency) => ({ value: currency, label: currency }))
-                .sort()} />
-    </section>
+        <section id="currency" class="w-3/4">
+            <Text type="h4" classes="mb-3">{locale('views.settings.currency.title')}</Text>
+            <Text type="p" secondary classes="mb-5">{locale('views.settings.currency.description')}</Text>
+            <Dropdown
+                sortItems={true}
+                onSelect={handleCurrencySelect}
+                value={$activeProfile?.settings.currency}
+                items={Object.keys($exchangeRates)
+                    .map((currency) => ({ value: currency, label: currency }))
+                    .sort()} />
+        </section>
+    {/if}
     <HR classes="pb-5 mt-5 justify-center" />
     <section id="notifications" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.notifications.title')}</Text>
diff --git a/packages/shared/routes/dashboard/settings/views/Security.svelte b/packages/shared/routes/dashboard/settings/views/Security.svelte
index 567eed2a9c1..a7c4e8eaa89 100644
--- a/packages/shared/routes/dashboard/settings/views/Security.svelte
+++ b/packages/shared/routes/dashboard/settings/views/Security.svelte
@@ -4,10 +4,9 @@
     import { showAppNotification } from 'shared/lib/notifications'
     import passwordInfo from 'shared/lib/password'
     import { openPopup } from 'shared/lib/popup'
-    import { activeProfile, updateProfile } from 'shared/lib/profile'
-    import { PIN_LENGTH } from 'shared/lib/utils'
+    import { activeProfile, isStrongholdLocked, updateProfile } from 'shared/lib/profile'
+    import { getDefaultStrongholdName, PIN_LENGTH } from 'shared/lib/utils'
     import { api, MAX_PASSWORD_LENGTH } from 'shared/lib/wallet'
-    import { getDefaultStrongholdName } from 'shared/lib/utils';
     import { get } from 'svelte/store'
     import zxcvbn from 'zxcvbn'
 
@@ -26,7 +25,6 @@
     const lockScreenTimeoutOptions = [1, 5, 10, 30, 60].map((time) => ({ value: time, label: assignTimeoutOptionLabel(time) }))
 
     export let locale
-    export let navigate
 
     let exportStrongholdChecked
     let currentPassword = ''
@@ -74,7 +72,7 @@
             }
         }
 
-        if (get(activeProfile)?.isStrongholdLocked) {
+        if (get(isStrongholdLocked)) {
             openPopup({
                 type: 'password',
                 props: {
diff --git a/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte b/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte
index 64bf5c1259c..3927dd23687 100644
--- a/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte
+++ b/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte
@@ -1,8 +1,17 @@
 <script lang="typescript">
     import { SettingsMenu, Text } from 'shared/components'
+    import { loggedIn } from 'shared/lib/app'
     import { settingsChildRoute, settingsRoute } from 'shared/lib/router'
     import { SettingsIcons } from 'shared/lib/typings/icons'
-    import { AdvancedSettings, GeneralSettings, HelpAndInfo, SecuritySettings, SettingsRoutes } from 'shared/lib/typings/routes'
+    import {
+        AdvancedSettings,
+        AdvancedSettingsNoProfile,
+        GeneralSettings,
+        GeneralSettingsNoProfile,
+        HelpAndInfo,
+        SecuritySettings,
+        SettingsRoutes,
+    } from 'shared/lib/typings/routes'
 
     export let locale
     export let mobile
@@ -19,6 +28,7 @@
                 iconColor="bg-blue-500"
                 icons={SettingsIcons}
                 settings={GeneralSettings}
+                activeSettings={$loggedIn ? GeneralSettings : GeneralSettingsNoProfile}
                 title={locale('views.settings.generalSettings.title')}
                 description={locale('views.settings.generalSettings.description')}
                 onClick={(setting) => {
@@ -31,6 +41,7 @@
                 iconColor="bg-yellow-500"
                 icons={SettingsIcons}
                 settings={SecuritySettings}
+                activeSettings={$loggedIn ? SecuritySettings : undefined}
                 title={locale('views.settings.security.title')}
                 description={locale('views.settings.security.description')}
                 onClick={(setting) => {
@@ -43,6 +54,7 @@
                 iconColor="bg-green-600"
                 icons={SettingsIcons}
                 settings={AdvancedSettings}
+                activeSettings={$loggedIn ? AdvancedSettings : AdvancedSettingsNoProfile}
                 title={locale('views.settings.advancedSettings.title')}
                 description={locale('views.settings.advancedSettings.description')}
                 onClick={(setting) => {
@@ -55,6 +67,7 @@
                 iconColor="bg-purple-500"
                 icons={SettingsIcons}
                 settings={HelpAndInfo}
+                activeSettings={HelpAndInfo}
                 title={locale('views.settings.helpAndInfo.title')}
                 description={locale('views.settings.helpAndInfo.description')}
                 onClick={(setting) => {
diff --git a/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte b/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
index 2f618365308..33311ff4e3a 100644
--- a/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
+++ b/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
@@ -1,26 +1,46 @@
 <script lang="typescript">
     import { Icon, Scroller, SettingsNavigator, Text } from 'shared/components'
+    import { loggedIn } from 'shared/lib/app'
     import { settingsChildRoute, settingsRoute } from 'shared/lib/router'
     import { SettingsIcons } from 'shared/lib/typings/icons'
-    import { AdvancedSettings, GeneralSettings, HelpAndInfo, SecuritySettings, SettingsRoutes } from 'shared/lib/typings/routes'
+    import {
+        AdvancedSettings,
+        AdvancedSettingsNoProfile,
+        GeneralSettings,
+        GeneralSettingsNoProfile,
+        HelpAndInfo,
+        SecuritySettings,
+        SettingsRoutes,
+        SettingsRoutesNoProfile,
+    } from 'shared/lib/typings/routes'
     import { onMount } from 'svelte'
     import { Advanced, General, Security } from './'
 
     export let locale
     export let mobile
 
-    export let navigate
-
     let scroller
     let index
 
-    const routes = Object.values(SettingsRoutes).filter((route) => route !== SettingsRoutes.Init)
+    const routes = Object.values($loggedIn ? SettingsRoutes : SettingsRoutesNoProfile).filter(
+        (route) => route !== SettingsRoutes.Init
+    )
+
+    let settings
 
-    const settings = {
-        generalSettings: GeneralSettings,
-        security: SecuritySettings,
-        advancedSettings: AdvancedSettings,
-        helpAndInfo: HelpAndInfo,
+    if ($loggedIn) {
+        settings = {
+            generalSettings: GeneralSettings,
+            security: SecuritySettings,
+            advancedSettings: AdvancedSettings,
+            helpAndInfo: HelpAndInfo,
+        }
+    } else {
+        settings = {
+            generalSettings: GeneralSettingsNoProfile,
+            advancedSettings: AdvancedSettingsNoProfile,
+            helpAndInfo: HelpAndInfo,
+        }
     }
 
     function scrollIntoView(id, options = null) {
@@ -75,7 +95,7 @@
                     {#if $settingsRoute === 'generalSettings'}
                         <General {locale} />
                     {:else if $settingsRoute === 'security'}
-                        <Security {navigate} {locale} />
+                        <Security {locale} />
                     {:else if $settingsRoute === 'advancedSettings'}
                         <Advanced {locale} />
                     {:else if $settingsRoute === 'helpAndInfo'}
diff --git a/packages/shared/routes/dashboard/wallet/Wallet.svelte b/packages/shared/routes/dashboard/wallet/Wallet.svelte
index fedffe051eb..bf61fe00846 100644
--- a/packages/shared/routes/dashboard/wallet/Wallet.svelte
+++ b/packages/shared/routes/dashboard/wallet/Wallet.svelte
@@ -1,39 +1,36 @@
 <script lang="typescript">
-    import type { Account as BaseAccount } from 'lib/typings/account'
-    import type { ErrorEventPayload } from 'lib/typings/events'
     import { DashboardPane } from 'shared/components'
     import { sendParams } from 'shared/lib/app'
-    import { convertToFiat, currencies, CurrencyTypes, exchangeRates } from 'shared/lib/currency'
+    import { appSettings } from 'shared/lib/appSettings'
     import { deepLinkRequestActive } from 'shared/lib/deepLinking'
     import { priceData } from 'shared/lib/marketData'
     import { DEFAULT_NODE, DEFAULT_NODES, network } from 'shared/lib/network'
     import { showAppNotification } from 'shared/lib/notifications'
     import { openPopup } from 'shared/lib/popup'
-    import { activeProfile, updateProfile } from 'shared/lib/profile'
+    import { isStrongholdLocked } from 'shared/lib/profile'
     import { walletRoute } from 'shared/lib/router'
     import { WalletRoutes } from 'shared/lib/typings/routes'
-    import { formatUnit } from 'shared/lib/units'
     import {
         AccountMessage,
         api,
         BalanceHistory,
         BalanceOverview,
+        getAccountMeta,
         getAccountsBalanceHistory,
         getLatestMessages,
         getWalletBalanceHistory,
         initialiseListeners,
         isTransferring,
+        prepareAccountInfo,
         selectedAccountId,
         syncAccounts,
         transferState,
         updateBalanceOverview,
         wallet,
         WalletAccount,
-        prepareAccountInfo,
-        getAccountMeta
     } from 'shared/lib/wallet'
     import { onMount, setContext } from 'svelte'
-    import { derived, get, Readable, Writable } from 'svelte/store'
+    import { derived, Readable, Writable } from 'svelte/store'
     import { Account, CreateAccount, LineChart, Security, WalletActions, WalletBalance, WalletHistory } from './views/'
 
     export let locale
@@ -226,7 +223,7 @@
                     indexation: { index: 'firefly', data: new Array() },
                 },
                 {
-                    onSuccess(response) {                        
+                    onSuccess(response) {
                         accounts.update((_accounts) => {
                             return _accounts.map((_account) => {
                                 if (_account.id === senderAccountId) {
@@ -348,7 +345,7 @@
     }
 
     $: {
-        if ($deepLinkRequestActive && get(activeProfile)?.settings.deepLinking) {
+        if ($deepLinkRequestActive && $appSettings.deepLinking) {
             walletRoute.set(WalletRoutes.Send)
             deepLinkRequestActive.set(false)
         }
@@ -363,7 +360,7 @@
 
         api.getStrongholdStatus({
             onSuccess(strongholdStatusResponse) {
-                updateProfile('isStrongholdLocked', strongholdStatusResponse.payload.snapshot.status === 'Locked')
+                isStrongholdLocked.set(strongholdStatusResponse.payload.snapshot.status === 'Locked')
             },
             onError(error) {
                 console.error(error)
diff --git a/packages/shared/routes/dashboard/wallet/views/LineChart.svelte b/packages/shared/routes/dashboard/wallet/views/LineChart.svelte
index 4ebd965715a..782eb8d25a3 100644
--- a/packages/shared/routes/dashboard/wallet/views/LineChart.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/LineChart.svelte
@@ -1,5 +1,4 @@
 <script lang="typescript">
-    import type { BalanceHistory, WalletAccount } from 'lib/wallet'
     import { Chart, Dropdown, Text } from 'shared/components'
     import {
         chartCurrency,
@@ -14,6 +13,7 @@
     import { CurrencyTypes, formatCurrencyValue } from 'shared/lib/currency'
     import { HistoryDataProps, TIMEFRAME_MAP } from 'shared/lib/marketData'
     import { activeProfile } from 'shared/lib/profile'
+    import type { BalanceHistory, WalletAccount } from 'shared/lib/wallet'
     import { getContext, onMount } from 'svelte'
     import type { Readable } from 'svelte/store'
 
diff --git a/packages/shared/routes/dashboard/wallet/views/Security.svelte b/packages/shared/routes/dashboard/wallet/views/Security.svelte
index 476102a97d4..7ae298f1c4c 100644
--- a/packages/shared/routes/dashboard/wallet/views/Security.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/Security.svelte
@@ -4,7 +4,7 @@
     import { diffDates, getBackupWarningColor } from 'shared/lib/helpers'
     import { showAppNotification } from 'shared/lib/notifications'
     import { openPopup } from 'shared/lib/popup'
-    import { activeProfile, profiles } from 'shared/lib/profile'
+    import { activeProfile, isStrongholdLocked, profiles } from 'shared/lib/profile'
     import { api } from 'shared/lib/wallet'
     import { onDestroy, onMount } from 'svelte'
     import { get } from 'svelte/store'
@@ -18,12 +18,11 @@
 
     function setup() {
         const ap = get(activeProfile)
-        const isStrongholdLocked = ap?.isStrongholdLocked
         const lastStrongholdBackupTime = ap?.lastStrongholdBackupTime
         lastBackupDate = lastStrongholdBackupTime ? new Date(lastStrongholdBackupTime) : null
         lastBackupDateFormatted = diffDates(lastBackupDate, new Date())
         color = getBackupWarningColor(lastBackupDate)
-        strongholdStatusMessage = isStrongholdLocked ? 'locked' : 'unlocked'
+        strongholdStatusMessage = get(isStrongholdLocked) ? 'locked' : 'unlocked'
     }
 
     function handleSecurityTileClick(popupType) {
@@ -33,7 +32,7 @@
                 currentVersion: $versionDetails.currentVersion,
                 lastBackupDate,
                 lastBackupDateFormatted,
-                isStrongholdLocked: get(activeProfile)?.isStrongholdLocked,
+                isStrongholdLocked: $isStrongholdLocked,
             },
         })
     }
@@ -79,9 +78,9 @@
         <SecurityTile
             title={locale('views.dashboard.security.strongholdStatus.title')}
             message={locale(`views.dashboard.security.strongholdStatus.${strongholdStatusMessage}`)}
-            color={$activeProfile?.isStrongholdLocked ? 'blue' : 'yellow'}
-            icon={$activeProfile?.isStrongholdLocked ? 'lock' : 'unlock'}
-            onClick={() => (get(activeProfile)?.isStrongholdLocked ? handleSecurityTileClick('password') : lockStronghold())} />
+            color={$isStrongholdLocked ? 'blue' : 'yellow'}
+            icon="lock"
+            onClick={() => ($isStrongholdLocked ? handleSecurityTileClick('password') : lockStronghold())} />
         <!-- Stronghold backup -->
         <SecurityTile
             title={locale('views.dashboard.security.strongholdBackup.title')}
diff --git a/packages/shared/routes/dashboard/wallet/views/WalletActions.svelte b/packages/shared/routes/dashboard/wallet/views/WalletActions.svelte
index dcf2a0dc6e8..095d3c3effc 100644
--- a/packages/shared/routes/dashboard/wallet/views/WalletActions.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/WalletActions.svelte
@@ -1,5 +1,6 @@
 <script lang="typescript">
     import { AccountTile, Button, Text } from 'shared/components'
+    import { loggedIn } from 'shared/lib/app'
     import { closePopup, openPopup } from 'shared/lib/popup'
     import { accountRoute, walletRoute } from 'shared/lib/router'
     import { AccountRoutes, WalletRoutes } from 'shared/lib/typings/routes'
@@ -19,7 +20,7 @@
 
     let startInit
 
-    if ($walletRoute === WalletRoutes.Init && !$accountsLoaded) {
+    if ($walletRoute === WalletRoutes.Init && !$accountsLoaded && $loggedIn) {
         startInit = Date.now()
         openPopup({
             type: 'busy',
diff --git a/packages/shared/routes/setup/Language.svelte b/packages/shared/routes/setup/Language.svelte
index f0f960a2a35..672d61d01a1 100644
--- a/packages/shared/routes/setup/Language.svelte
+++ b/packages/shared/routes/setup/Language.svelte
@@ -1,14 +1,15 @@
 <script lang="typescript">
+    import { Button, Dropdown, Illustration, OnboardingLayout, Radio, Text } from 'shared/components'
+    import { appSettings } from 'shared/lib/appSettings'
+    import { locales, setLanguage } from 'shared/lib/i18n'
     import { createEventDispatcher } from 'svelte'
-    import { OnboardingLayout, Illustration, Text, Button, Dropdown, Radio } from 'shared/components'
-    import { darkMode } from 'shared/lib/app'
 
     export let locale
     export let mobile
 
-    let darkModeEnabled = $darkMode
+    let darkModeEnabled = $appSettings.darkMode
 
-    $: darkMode.set(darkModeEnabled)
+    $: $appSettings.darkMode = darkModeEnabled
 
     const dispatch = createEventDispatcher()
 
@@ -27,13 +28,13 @@
         <div slot="leftpane__content">
             <Text type="h2" classes="mb-5">{locale('views.language.title')}</Text>
             <Text type="p" secondary classes="mb-8">{locale('views.language.body')}</Text>
-            <!-- TODO: Implement and enable -->
             <Dropdown
-                value="English"
-                label={locale('general.language')}
-                items={[{ value: 1, label: 'English' }, { value: 2, label: 'Belula' }]}
-                disabled
-                classes="mb-4 opacity-50" />
+                sortItems={true}
+                onSelect={(item) => setLanguage(item)}
+                value={locales[$appSettings.language]}
+                items={Object.values(locales).map((locale) => ({ value: locale, label: locale }))}
+                classes="mb-4" />
+            <!-- TODO: Implement and enable -->
             <div>
                 <Text type="p" classes="mb-2 mt-4" smaller>{locale('general.appearance')}</Text>
                 <Radio value={false} bind:group={darkModeEnabled} label={locale('general.lightTheme')} />
diff --git a/packages/shared/routes/setup/Setup.svelte b/packages/shared/routes/setup/Setup.svelte
index e21989acdbd..46629abe6dd 100644
--- a/packages/shared/routes/setup/Setup.svelte
+++ b/packages/shared/routes/setup/Setup.svelte
@@ -1,11 +1,12 @@
 <script lang="typescript">
     import { Button, Checkbox, Illustration, Input, OnboardingLayout, Text } from 'shared/components'
-    import { developerMode } from 'shared/lib/app'
+    import { cleanupSignup } from 'shared/lib/app'
+    import { appSettings } from 'shared/lib/appSettings'
     import { Electron } from 'shared/lib/electron'
     import { hasOnlyWhitespaces } from 'shared/lib/helpers'
     import { createProfile, disposeNewProfile, newProfile, profiles } from 'shared/lib/profile'
     import { SetupType } from 'shared/lib/typings/routes'
-    import { getStoragePath, initialise, api, MAX_PROFILE_NAME_LENGTH } from 'shared/lib/wallet'
+    import { api, getStoragePath, initialise, MAX_PROFILE_NAME_LENGTH } from 'shared/lib/wallet'
     import { createEventDispatcher } from 'svelte'
     import { get } from 'svelte/store'
 
@@ -50,6 +51,7 @@
     }
 
     function handleBackClick() {
+        cleanupSignup()
         disposeNewProfile()
         dispatch('previous')
     }
@@ -68,7 +70,7 @@
                 classes="w-full"
                 autofocus
                 submitHandler={() => handleContinueClick(SetupType.New)} />
-            {#if $developerMode}
+            {#if $appSettings.developerMode}
                 <Checkbox label={locale('general.developerProfile')} bind:checked={isDeveloperProfile} />
             {/if}
         </div>

From 146b7dfb78c05783398023856eaf9ba839a31b66 Mon Sep 17 00:00:00 2001
From: Charlie Varley <charlie.varley@iota.org>
Date: Thu, 18 Mar 2021 00:02:18 +0000
Subject: [PATCH 10/11] fix: dark mode full logo

---
 .../logos/firefly_logo_full_darkmode.svg      | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/shared/assets/logos/firefly_logo_full_darkmode.svg b/packages/shared/assets/logos/firefly_logo_full_darkmode.svg
index 5d70936cd77..51847ebe71f 100644
--- a/packages/shared/assets/logos/firefly_logo_full_darkmode.svg
+++ b/packages/shared/assets/logos/firefly_logo_full_darkmode.svg
@@ -1,11 +1,12 @@
-<svg width="240" height="80" viewBox="0 0 240 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M64.1625 30.0815C67.5273 33.4463 72.9828 33.4463 76.3476 30.0815C79.7124 26.7167 79.7124 21.2612 76.3476 17.8964C72.9828 14.5316 67.5273 14.5316 64.1625 17.8964C60.7977 21.2612 60.7977 26.7167 64.1625 30.0815Z" fill="#108CFF"/>
-<path d="M45.2854 33.4429C39.3448 31.7133 32.9349 33.4134 28.6322 37.8597L24.4017 42.2316C17.2539 49.6181 20.8878 61.9777 30.896 64.3201C35.4151 65.3777 40.158 63.9908 43.3952 60.6649L62.9374 40.5874C63.6268 39.8792 63.3137 38.6918 62.3647 38.4155L45.2854 33.4429Z" fill="#FFCA62"/>
-<path d="M45.5264 45.8726C39.615 47.6994 33.178 46.1047 28.803 41.7296L24.5013 37.4277C17.2333 30.1595 20.6639 17.7419 30.6324 15.2356C35.1335 14.104 39.8985 15.413 43.1898 18.6852L63.0588 38.4394C63.7597 39.1362 63.4661 40.3286 62.5218 40.6204L45.5264 45.8726Z" fill="#108CFF"/>
-<path d="M124.373 28.7328V22.8472H106V54.059H112.066V42.0202H124.022V36.1345H112.066V28.7328H124.373Z" fill="white"/>
-<path d="M131.342 29.0895C133.276 29.0895 134.859 27.4844 134.859 25.5671C134.859 23.6498 133.276 22 131.342 22C129.452 22 127.87 23.6498 127.87 25.5671C127.87 27.4844 129.452 29.0895 131.342 29.0895ZM128.529 54.059H134.2V31.7648H128.529V54.059Z" fill="white"/>
-<path d="M145.06 35.5994V31.7648H139.389V54.059H145.06V43.4024C145.06 38.7206 148.796 37.383 151.741 37.7397V31.319C148.972 31.319 146.202 32.5674 145.06 35.5994Z" fill="white"/>
-<path d="M159.032 45.2751H175.603C175.735 44.5171 175.823 43.7591 175.823 42.9119C175.823 36.3574 171.208 31.1406 164.703 31.1406C157.802 31.1406 153.098 36.2683 153.098 42.9119C153.098 49.5556 157.758 54.6832 165.142 54.6832C169.362 54.6832 172.658 52.9443 174.724 49.9123L170.153 47.237C169.186 48.53 167.428 49.4664 165.23 49.4664C162.241 49.4664 159.824 48.2179 159.032 45.2751ZM158.945 40.8163C159.604 37.9626 161.67 36.3128 164.703 36.3128C167.076 36.3128 169.45 37.6059 170.153 40.8163H158.945Z" fill="white"/>
-<path d="M190.962 22.2229C183.973 22.2229 180.632 25.3887 180.632 31.5419V31.7648H177.467V37.2938H180.632V54.059H186.302V37.2938H189.951V31.7648H186.302V31.5419C186.302 28.5099 188.017 27.2614 190.962 27.2614C191.533 27.2614 192.148 27.2614 192.764 27.306V54.059H198.434V23.1593C196.016 22.6688 193.731 22.2229 190.962 22.2229Z" fill="white"/>
-<path d="M217.934 31.7648L213.055 46.7465L207.341 31.7648H201.143L210.154 53.3456C209.099 56.333 207.517 57.6706 204.396 57.6261V62.9767C209.978 63.2888 213.715 60.4797 216 54.059L224 31.7648H217.934Z" fill="white"/>
+<svg width="1044" height="348" viewBox="0 0 1044 348" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M279.107 130.855C293.744 145.491 317.475 145.491 332.112 130.855C346.749 116.218 346.749 92.4865 332.112 77.8495C317.475 63.2126 293.744 63.2126 279.107 77.8495C264.47 92.4865 264.47 116.218 279.107 130.855Z" fill="#108CFF"/>
+<path d="M196.992 145.477C171.15 137.953 143.267 145.348 124.55 164.69L106.147 183.708C75.0544 215.839 90.8621 269.603 134.398 279.792C154.056 284.393 174.687 278.36 188.769 263.892L273.778 176.555C276.776 173.474 275.415 168.309 271.287 167.107L196.992 145.477Z" fill="#FFCA62"/>
+<path d="M198.04 199.546C172.325 207.492 144.324 200.556 125.293 181.524L106.581 162.811C74.9648 131.194 89.8882 77.1773 133.251 66.2751C152.831 61.3524 173.558 67.0464 187.876 81.2809L274.306 167.211C277.355 170.243 276.078 175.43 271.97 176.699L198.04 199.546Z" fill="#108CFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.291 181.523C144.322 200.555 172.323 207.491 198.038 199.545L271.968 176.698C273.394 176.257 274.48 175.344 275.161 174.212C276.013 171.34 274.475 168.041 271.284 167.112L196.989 145.481C171.147 137.957 143.264 145.353 124.547 164.694L116.637 172.869L125.291 181.523Z" fill="#0066FF"/>
+<path d="M541.023 124.988V99.3852H461.1V235.157H487.486V182.788H539.494V157.185H487.486V124.988H541.023Z" fill="white"/>
+<path d="M571.34 126.54C579.753 126.54 586.636 119.557 586.636 111.217C586.636 102.876 579.753 95.7 571.34 95.7C563.118 95.7 556.235 102.876 556.235 111.217C556.235 119.557 563.118 126.54 571.34 126.54ZM559.103 235.157H583.768V138.177H559.103V235.157Z" fill="white"/>
+<path d="M631.009 154.858V138.177H606.344V235.157H631.009V188.8C631.009 168.435 647.261 162.616 660.072 164.168V136.237C648.026 136.237 635.98 141.668 631.009 154.858Z" fill="white"/>
+<path d="M691.791 196.947H763.875C764.449 193.649 764.831 190.352 764.831 186.667C764.831 158.155 744.755 135.462 716.456 135.462C686.437 135.462 665.978 157.767 665.978 186.667C665.978 215.567 686.246 237.872 718.368 237.872C736.724 237.872 751.064 230.308 760.051 217.118L740.166 205.481C735.959 211.106 728.311 215.179 718.751 215.179C705.749 215.179 695.233 209.748 691.791 196.947ZM691.409 177.551C694.277 165.137 703.263 157.961 716.456 157.961C726.781 157.961 737.106 163.586 740.166 177.551H691.409Z" fill="white"/>
+<path d="M830.683 96.6698C800.282 96.6698 785.75 110.441 785.75 137.207V138.177H771.983V162.228H785.75V235.157H810.415V162.228H826.285V138.177H810.415V137.207C810.415 124.018 817.872 118.587 830.683 118.587C833.169 118.587 835.846 118.587 838.522 118.781V235.157H863.188V100.743C852.672 98.6094 842.729 96.6698 830.683 96.6698Z" fill="white"/>
+<path d="M948.014 138.177L926.79 203.347L901.934 138.177H874.974L914.171 232.053C909.582 245.049 902.698 250.867 889.123 250.673V273.948C913.406 275.306 929.658 263.087 939.601 235.157L974.4 138.177H948.014Z" fill="white"/>
 </svg>

From be56438678c9cb2d5936934ea81fc29334c35b12 Mon Sep 17 00:00:00 2001
From: Charlie Varley <charlie.varley@iota.org>
Date: Thu, 18 Mar 2021 00:20:18 +0000
Subject: [PATCH 11/11] fix: dark mode popup assets

---
 .../assets/logos/stronghold_darkmode.svg      | 24 +++++++++++++++++++
 packages/shared/components/Logo.svelte        |  4 ++++
 .../shared/components/popups/Backup.svelte    |  6 +++--
 .../shared/components/popups/Version.svelte   |  6 ++---
 4 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 packages/shared/assets/logos/stronghold_darkmode.svg

diff --git a/packages/shared/assets/logos/stronghold_darkmode.svg b/packages/shared/assets/logos/stronghold_darkmode.svg
new file mode 100644
index 00000000000..0865b01bd51
--- /dev/null
+++ b/packages/shared/assets/logos/stronghold_darkmode.svg
@@ -0,0 +1,24 @@
+<svg width="141" height="56" viewBox="0 0 141 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M69.2905 44.9462C71.2568 44.9462 72.1088 43.933 72.1088 42.7491C72.1088 40.0934 67.8703 40.9146 67.8703 39.5921C67.8703 39.0588 68.351 38.7068 69.1047 38.7068C69.8694 38.7068 70.645 38.9628 71.2131 39.5174L71.945 38.5895C71.2677 37.9495 70.3501 37.5976 69.214 37.5976C67.6191 37.5976 66.5595 38.5042 66.5595 39.6774C66.5595 42.3012 70.8089 41.3732 70.8089 42.8664C70.8089 43.3357 70.3938 43.837 69.3451 43.837C68.3292 43.837 67.5426 43.3784 67.0401 42.8558L66.3301 43.8157C66.9746 44.4876 67.9468 44.9462 69.2905 44.9462Z" fill="#8493AD"/>
+<path d="M76.4127 44.8183V38.8028H78.6193V37.7042H72.9279V38.8028H75.1346V44.8183H76.4127Z" fill="#8493AD"/>
+<path d="M85.5576 44.8183L83.777 42.0238C84.6509 41.8852 85.503 41.2026 85.503 39.9334C85.503 38.6215 84.5635 37.7042 83.1216 37.7042H79.9209V44.8183H81.1989V42.1625H82.4661L84.0829 44.8183H85.5576ZM82.9468 41.0639H81.1989V38.8028H82.9468C83.6677 38.8028 84.1921 39.2508 84.1921 39.9334C84.1921 40.616 83.6677 41.0639 82.9468 41.0639Z" fill="#8493AD"/>
+<path d="M90.3961 44.9462C92.5809 44.9462 94.1211 43.3891 94.1211 41.2666C94.1211 39.1441 92.5809 37.5869 90.3961 37.5869C88.2113 37.5869 86.671 39.1441 86.671 41.2666C86.671 43.3891 88.2113 44.9462 90.3961 44.9462ZM90.3961 43.837C88.9214 43.837 87.9819 42.7278 87.9819 41.2666C87.9819 39.7947 88.9214 38.6961 90.3961 38.6961C91.8599 38.6961 92.8103 39.7947 92.8103 41.2666C92.8103 42.7278 91.8599 43.837 90.3961 43.837Z" fill="#8493AD"/>
+<path d="M101.884 44.8183V37.7042H100.606V42.6425L96.8811 37.7042H95.5702V44.8183H96.8483V39.7414L100.65 44.8183H101.884Z" fill="#8493AD"/>
+<path d="M107.147 44.9569C108.414 44.9569 109.43 44.445 110.151 43.6664V40.9999H106.699V42.0985H108.873V43.2077C108.545 43.5064 107.889 43.8477 107.147 43.8477C105.705 43.8477 104.634 42.7598 104.634 41.2666C104.634 39.7734 105.705 38.6961 107.147 38.6961C107.966 38.6961 108.654 39.1121 109.036 39.6454L110.085 39.0694C109.495 38.2482 108.567 37.5869 107.147 37.5869C105.038 37.5869 103.323 39.0374 103.323 41.2666C103.323 43.4957 105.038 44.9569 107.147 44.9569Z" fill="#8493AD"/>
+<path d="M118.046 44.8183V37.7042H116.768V40.616H112.978V37.7042H111.7V44.8183H112.978V41.7145H116.768V44.8183H118.046Z" fill="#8493AD"/>
+<path d="M123.21 44.9462C125.394 44.9462 126.935 43.3891 126.935 41.2666C126.935 39.1441 125.394 37.5869 123.21 37.5869C121.025 37.5869 119.485 39.1441 119.485 41.2666C119.485 43.3891 121.025 44.9462 123.21 44.9462ZM123.21 43.837C121.735 43.837 120.795 42.7278 120.795 41.2666C120.795 39.7947 121.735 38.6961 123.21 38.6961C124.673 38.6961 125.624 39.7947 125.624 41.2666C125.624 42.7278 124.673 43.837 123.21 43.837Z" fill="#8493AD"/>
+<path d="M132.873 44.8183V43.7197H129.662V37.7042H128.384V44.8183H132.873Z" fill="#8493AD"/>
+<path d="M136.955 44.8183C139.227 44.8183 140.767 43.3571 140.767 41.2666C140.767 39.1761 139.227 37.7042 136.955 37.7042H134.245V44.8183H136.955ZM136.955 43.7197H135.524V38.8028H136.955C138.582 38.8028 139.456 39.8907 139.456 41.2666C139.456 42.6105 138.539 43.7197 136.955 43.7197Z" fill="#8493AD"/>
+<path d="M68.5603 12.1445H66.3643V31.3874H68.5603V12.1445Z" fill="white"/>
+<path d="M75.6299 21.7504C75.6299 16.3585 80.1516 11.792 85.469 11.792C90.8173 11.792 95.2743 16.3245 95.2743 21.7504C95.2743 27.1764 90.7865 31.7089 85.469 31.7089C80.1824 31.7398 75.6299 27.1764 75.6299 21.7504ZM93.0782 21.7504C93.0782 17.4746 89.6083 13.8356 85.469 13.8356C81.3298 13.8356 77.829 17.4746 77.829 21.7504C77.829 26.0603 81.3298 29.6962 85.469 29.6962C89.6083 29.6962 93.0782 26.0603 93.0782 21.7504Z" fill="white"/>
+<path d="M106.546 14.2191H100.084V12.1445H115.176V14.2191H108.711V31.3874H106.515L106.546 14.2191Z" fill="white"/>
+<path d="M126.697 14.8251L119.406 31.3874H117.019L125.01 13.2297C125.297 12.5588 125.966 12.1445 126.666 12.1445C127.397 12.1445 128.036 12.5588 128.323 13.2297L136.314 31.3874H133.927L126.697 14.8251Z" fill="white"/>
+<path d="M23.1942 0.244507C23.5687 0.0283116 24.1245 -0.017962 24.6612 0.00552189C25.7438 0.0528863 26.7497 0.519148 27.6881 1.06094L47.9284 12.7467C48.8812 13.2968 49.4682 14.3135 49.4682 15.4138V40.4181C49.4682 41.5184 48.8812 42.5351 47.9284 43.0852L26.274 55.5874C25.3211 56.1375 24.1471 56.1375 23.1942 55.5874L1.53987 43.0852C0.586995 42.5351 0 41.5184 0 40.4181V15.4138C0 14.3135 0.586994 13.2968 1.53987 12.7467L23.1942 0.244507Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1525 16.0501C29.1885 15.5786 28.9514 15.1281 28.5424 14.8908L26.3699 13.6303C25.4141 13.0757 24.2345 13.0757 23.2787 13.6303L21.2847 14.7873C20.8757 15.0246 20.6387 15.475 20.6746 15.9465L20.8135 17.7676C20.8482 18.2217 20.6295 18.6578 20.245 18.9016L18.6763 19.8965C18.0632 20.2853 17.2487 20.0624 16.919 19.4156L16.6854 18.9575C16.3645 18.3279 15.5809 18.0968 14.9697 18.4514L13.255 19.4464C12.1477 20.0888 11.5534 21.3492 11.762 22.6121L13.5348 33.3429C13.8217 35.0801 14.8385 36.6115 16.3282 37.5501L23.8273 42.2754C24.4354 42.6586 25.2106 42.6543 25.8145 42.2645L33.1622 37.5217C34.5929 36.5983 35.5774 35.1237 35.882 33.4483L37.8463 22.6425C38.0785 21.3652 37.4848 20.0794 36.3618 19.4279L34.8228 18.5349C34.2116 18.1803 33.428 18.4114 33.1071 19.0409L32.9161 19.4157C32.5864 20.0624 31.7718 20.2853 31.1588 19.8965L29.5901 18.9017C29.2056 18.6578 28.9869 18.2217 29.0215 17.7676L29.1525 16.0501ZM26.1744 29.8175C27.1957 29.3221 27.8998 28.2752 27.8998 27.0639C27.8998 25.3746 26.5304 24.0052 24.8411 24.0052C23.1518 24.0052 21.7824 25.3746 21.7824 27.0639C21.7824 28.2122 22.4151 29.2127 23.3509 29.7357V33.2597C23.3509 34.0394 23.983 34.6714 24.7627 34.6714C25.5423 34.6714 26.1744 34.0394 26.1744 33.2597V29.8175Z" fill="#F6F8FC"/>
+<defs>
+<linearGradient id="paint0_linear" x1="24.7341" y1="0" x2="24.7341" y2="56" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8493AD"/>
+<stop offset="1" stop-color="#131F37"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/shared/components/Logo.svelte b/packages/shared/components/Logo.svelte
index 24294a6af31..6e64322ae94 100644
--- a/packages/shared/components/Logo.svelte
+++ b/packages/shared/components/Logo.svelte
@@ -19,6 +19,10 @@
             default: 'firefly_logo.svg',
             darkmode: 'firefly_logo.svg',
         },
+        'logo-stronghold': {
+            default: 'stronghold.svg',
+            darkmode: 'stronghold_darkmode.svg',
+        }
     }
 </script>
 
diff --git a/packages/shared/components/popups/Backup.svelte b/packages/shared/components/popups/Backup.svelte
index 29a35d9084c..db5fc163a37 100644
--- a/packages/shared/components/popups/Backup.svelte
+++ b/packages/shared/components/popups/Backup.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Button, Text } from 'shared/components'
+    import { Button, Text, Logo } from 'shared/components'
     import { Electron } from 'shared/lib/electron'
     import { getBackupWarningColor } from 'shared/lib/helpers'
     import { closePopup, openPopup } from 'shared/lib/popup'
@@ -62,7 +62,9 @@
                   values: { date: $date(lastBackupDate, { format: 'long' }) },
               }) : locale('popups.backup.notBackedUp')}
     </Text>
-    <div class="w-full p-4 bg-gray-50 flex justify-center content-center"><img src="assets/logos/stronghold.svg" alt="" /></div>
+    <div class="w-full p-4 bg-gray-50 dark:bg-gray-800 flex justify-center content-center">        
+        <Logo width="50%" logo="logo-stronghold" />    
+    </div>
     <div class="w-full text-center my-6 px-8">
         <Text overrideColor type="h5" classes="mb-2 text-{color}-600">
             {#if !lastBackupDate}
diff --git a/packages/shared/components/popups/Version.svelte b/packages/shared/components/popups/Version.svelte
index a7b4d1b1742..b2501b6babc 100644
--- a/packages/shared/components/popups/Version.svelte
+++ b/packages/shared/components/popups/Version.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import { date } from 'svelte-i18n'
     import { closePopup } from 'shared/lib/popup'
-    import { Text, Button } from 'shared/components'
+    import { Text, Button, Logo } from 'shared/components'
 
     import { versionDetails, updateDownload, updateBusy } from 'shared/lib/appUpdater'
 
@@ -27,8 +27,8 @@
 
 <Text type="h4" classes="mb-5">{locale('popups.version.title', { values: { version: $versionDetails.currentVersion } })}</Text>
 <div class="flex w-full flex-row flex-wrap">
-    <div class="w-full p-4 bg-gray-50 flex justify-center content-center">
-        <img src="assets/logos/firefly_logo_full.svg" alt="" />
+    <div class="w-full p-4 bg-gray-50 dark:bg-gray-800 flex justify-center content-center">
+        <Logo width="50%" logo="logo-firefly-full" />
     </div>
     {#if $versionDetails.upToDate}
         <div class="w-full text-center my-6 px-8">