From 025f1ee7ab6b080f0c0089b81e1539433c5c554a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Mon, 22 Mar 2021 01:00:32 +0100
Subject: [PATCH 1/4] remove scrollbar bg color

---
 packages/desktop/App.svelte | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/desktop/App.svelte b/packages/desktop/App.svelte
index 493a7e901dc..e68e45ba54f 100644
--- a/packages/desktop/App.svelte
+++ b/packages/desktop/App.svelte
@@ -106,9 +106,6 @@
             :global(::-webkit-scrollbar-thumb) {
                 @apply bg-gray-700;
             }
-            :global(::-webkit-scrollbar-track) {
-                @apply bg-gray-900;
-            }
         }
     }
     ::-webkit-scrollbar {
@@ -119,8 +116,7 @@
         border-radius: 10px;
     }
     ::-webkit-scrollbar-track {
-        @apply bg-gray-100;
-        border-radius: 10px;
+        @apply bg-transparent;
     }
 </style>
 

From 0e0f61c05c3c331662031649498eb78205d58499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Mon, 22 Mar 2021 01:04:29 +0100
Subject: [PATCH 2/4] polish ui: font sizes, send cancel button, floating
 labels, scrollbars

---
 packages/shared/components/Profile.svelte        |  4 ++--
 packages/shared/components/icon/Index.svelte     |  8 +++++++-
 packages/shared/components/inputs/Address.svelte | 16 ++++++----------
 .../shared/components/inputs/Dropdown.svelte     | 16 ++++++----------
 packages/shared/components/inputs/Input.svelte   | 16 ++++++----------
 .../dashboard/wallet/views/AccountHistory.svelte |  2 +-
 .../routes/dashboard/wallet/views/Send.svelte    |  4 ++--
 .../dashboard/wallet/views/WalletActions.svelte  |  2 +-
 .../dashboard/wallet/views/WalletHistory.svelte  |  2 +-
 9 files changed, 32 insertions(+), 38 deletions(-)

diff --git a/packages/shared/components/Profile.svelte b/packages/shared/components/Profile.svelte
index 8ec02900e91..6140b6989bf 100644
--- a/packages/shared/components/Profile.svelte
+++ b/packages/shared/components/Profile.svelte
@@ -32,10 +32,10 @@
             {#if slots}
                 <slot />
             {:else}
-                <Text type="h2" classes="text-white">{getInitials()}</Text>
+                <Text type="h3" classes="text-white">{getInitials()}</Text>
             {/if}
         </div>
-        <Text type="h4" classes="mt-5">{name}</Text>
+        <Text type="h5" classes="mt-5">{name}</Text>
         {#if isDeveloper}
             <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>
diff --git a/packages/shared/components/icon/Index.svelte b/packages/shared/components/icon/Index.svelte
index 2c0860fe7df..6b27c12391c 100644
--- a/packages/shared/components/icon/Index.svelte
+++ b/packages/shared/components/icon/Index.svelte
@@ -9,9 +9,15 @@
     $: selected = icons[icon]
 </script>
 
+<style type="text/scss">
+    .boxed {
+        border-radius: 0.625rem; // TODO: add to tailwind
+    }
+</style>
+
 {#if selected}
     {#if boxed}
-        <div class={`w-8 h-8 flex justify-center items-center rounded-lg ${boxClasses}`}>
+        <div class="boxed w-8 h-8 flex justify-center items-center {boxClasses}">
             <svg
                 data-label="icon"
                 class="flex-shrink-0 {classes}"
diff --git a/packages/shared/components/inputs/Address.svelte b/packages/shared/components/inputs/Address.svelte
index 53b1f478ff1..26a753abf2b 100644
--- a/packages/shared/components/inputs/Address.svelte
+++ b/packages/shared/components/inputs/Address.svelte
@@ -14,7 +14,7 @@
     textarea {
         @apply py-4;
         @apply pr-8;
-        @apply pl-4;
+        @apply pl-3;
         border-radius: 0.625rem; // TODO: add to tailwind
 
         &::placeholder {
@@ -30,8 +30,8 @@
         }
 
         &.floating-active {
-            @apply pt-5;
-            @apply pb-3;
+            @apply pt-6;
+            @apply pb-2;
         }
 
         + floating-label {
@@ -45,11 +45,11 @@
             @apply opacity-0;
             @apply pointer-events-none;
             @apply absolute;
-            @apply left-4;
+            @apply left-3;
             @apply select-none;
             @apply whitespace-nowrap;
             @apply w-full;
-            top: 7px;
+            top: 8px;
         }
         &:not(:disabled) {
             + floating-label {
@@ -81,11 +81,7 @@
             spellcheck={false}
             maxlength={ADDRESS_LENGTH} />
         {#if label}
-            <floating-label
-                class="block text-gray-500 text-11 leading-120 overflow-hidden opacity-0 pointer-events-none absolute top-2 left-4 select-none whitespace-nowrap w-full"
-                class:floating-active={address && label}>
-                {label}
-            </floating-label>
+            <floating-label class:floating-active={address && label}>{label}</floating-label>
         {/if}
     </address-input>
     {#if error}
diff --git a/packages/shared/components/inputs/Dropdown.svelte b/packages/shared/components/inputs/Dropdown.svelte
index 50933b80638..328e7199159 100644
--- a/packages/shared/components/inputs/Dropdown.svelte
+++ b/packages/shared/components/inputs/Dropdown.svelte
@@ -31,7 +31,7 @@
             @apply border;
             @apply border-solid;
             @apply py-4;
-            @apply pl-4;
+            @apply pl-3;
             @apply pr-10;
         }
         &:not(.small) {
@@ -89,8 +89,8 @@
 
         &.floating-active {
             .selection {
-                @apply pt-5;
-                @apply pb-3;
+                @apply pt-6;
+                @apply pb-2;
             }
         }
 
@@ -105,11 +105,11 @@
             @apply opacity-0;
             @apply pointer-events-none;
             @apply absolute;
-            @apply left-4;
+            @apply left-3;
             @apply select-none;
             @apply whitespace-nowrap;
             @apply w-full;
-            top: 7px;
+            top: 8px;
             &.floating-active {
                 @apply opacity-100;
                 transform: none;
@@ -148,11 +148,7 @@
             height={small ? 16 : 24}
             classes="absolute text-gray-500 fill-current" />
         {#if label}
-            <floating-label
-                class="block text-gray-500 text-11 leading-120 overflow-hidden opacity-0 pointer-events-none absolute top-2 left-4 select-none whitespace-nowrap w-full"
-                class:floating-active={value && label}>
-                {label}
-            </floating-label>
+            <floating-label class:floating-active={value && label}>{label}</floating-label>
         {/if}
     </div>
     <nav
diff --git a/packages/shared/components/inputs/Input.svelte b/packages/shared/components/inputs/Input.svelte
index 94603dc0464..cbc153215ba 100644
--- a/packages/shared/components/inputs/Input.svelte
+++ b/packages/shared/components/inputs/Input.svelte
@@ -60,7 +60,7 @@
     input {
         @apply py-4;
         @apply pr-8;
-        @apply pl-4;
+        @apply pl-3;
         border-radius: 0.625rem; // TODO: add to tailwind
 
         &::placeholder {
@@ -76,8 +76,8 @@
         }
 
         &.floating-active {
-            @apply pt-5;
-            @apply pb-3;
+            @apply pt-6;
+            @apply pb-2;
         }
 
         + floating-label {
@@ -91,11 +91,11 @@
             @apply opacity-0;
             @apply pointer-events-none;
             @apply absolute;
-            @apply left-4;
+            @apply left-3;
             @apply select-none;
             @apply whitespace-nowrap;
             @apply w-full;
-            top: 7px;
+            top: 8px;
         }
         &:not(:disabled) {
             + floating-label {
@@ -131,11 +131,7 @@
             {...$$restProps}
             {placeholder} />
         {#if label}
-            <floating-label
-                class="block text-gray-500 text-11 leading-120 overflow-hidden opacity-0 pointer-events-none absolute top-2 left-4 select-none whitespace-nowrap w-full"
-                class:floating-active={value && label}>
-                {label}
-            </floating-label>
+            <floating-label class:floating-active={value && label}>{label}</floating-label>
         {/if}
     </div>
     {#if error}
diff --git a/packages/shared/routes/dashboard/wallet/views/AccountHistory.svelte b/packages/shared/routes/dashboard/wallet/views/AccountHistory.svelte
index e649ae1a6d7..b0cd2780b23 100644
--- a/packages/shared/routes/dashboard/wallet/views/AccountHistory.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/AccountHistory.svelte
@@ -56,7 +56,7 @@
     {#if $selectedMessage}
         <ActivityDetail onBackClick={handleBackClick} {...$selectedMessage} {locale} />
     {:else}
-        <div class="overflow-y-auto flex-auto h-1 space-y-2.5">
+        <div class="overflow-y-auto flex-auto h-1 space-y-2.5 -mr-2 pr-2">
             {#if transactions.length}
                 {#each transactions as transaction}
                     <ActivityRow onClick={() => handleTransactionClick(transaction)} {...transaction} {color} />
diff --git a/packages/shared/routes/dashboard/wallet/views/Send.svelte b/packages/shared/routes/dashboard/wallet/views/Send.svelte
index bff01be09da..deac176153a 100644
--- a/packages/shared/routes/dashboard/wallet/views/Send.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/Send.svelte
@@ -182,7 +182,7 @@
 <div class="w-full h-full flex flex-col justify-between p-8">
     <div>
         <div class="flex flex-row w-full justify-between mb-8">
-            <div class="flex flex-row space-x-4">
+            <div class="flex flex-row space-x-6">
                 <button
                     on:click={() => handleSendTypeClick(SEND_TYPE.EXTERNAL)}
                     disabled={$isTransferring}
@@ -257,7 +257,7 @@
     </div>
     {#if !$isTransferring}
         <div class="flex flex-row justify-between px-2">
-            <Button secondary classes="-mx-2 w-1/2" onClick={() => handleBackClick()}>{locale('actions.back')}</Button>
+            <Button secondary classes="-mx-2 w-1/2" onClick={() => handleBackClick()}>{locale('actions.cancel')}</Button>
             <Button classes="-mx-2 w-1/2" onClick={() => handleSendClick()}>{locale('actions.send')}</Button>
         </div>
     {/if}
diff --git a/packages/shared/routes/dashboard/wallet/views/WalletActions.svelte b/packages/shared/routes/dashboard/wallet/views/WalletActions.svelte
index 1c40a6eeacf..592c9637116 100644
--- a/packages/shared/routes/dashboard/wallet/views/WalletActions.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/WalletActions.svelte
@@ -66,7 +66,7 @@
             </div>
             {#if $accounts.length > 0}
                 <div
-                    class="grid grid-cols-{$accounts.length <= 2 ? $accounts.length : '3'} auto-rows-max {$accounts.length <= 2 ? 'gap-4' : 'gap-2.5'} w-full flex-auto overflow-y-auto h-1">
+                    class="grid grid-cols-{$accounts.length <= 2 ? $accounts.length : '3'} auto-rows-max {$accounts.length <= 2 ? 'gap-4' : 'gap-2.5'} w-full flex-auto overflow-y-auto h-1 -mr-2 pr-2">
                     {#each $accounts as account}
                         <AccountTile
                             color={account.color}
diff --git a/packages/shared/routes/dashboard/wallet/views/WalletHistory.svelte b/packages/shared/routes/dashboard/wallet/views/WalletHistory.svelte
index e46cbaf60c4..a6009d02224 100644
--- a/packages/shared/routes/dashboard/wallet/views/WalletHistory.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/WalletHistory.svelte
@@ -32,7 +32,7 @@
             <Icon icon="refresh" classes="{$isSyncing && 'animate-spin-reverse'} text-gray-500 dark:text-white" />
         </button>
     </div>
-    <div class="overflow-y-auto flex-auto h-1 space-y-2.5">
+    <div class="overflow-y-auto flex-auto h-1 space-y-2.5 -mr-2 pr-2">
         {#if $transactions?.length}
             {#each $transactions as transaction}
                 <ActivityRow

From 2f78551a539dcc9248f8b50fbd867ec981817509 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Mon, 22 Mar 2021 01:06:01 +0100
Subject: [PATCH 3/4] update dashboard security panel to new design

---
 .../shared/components/SecurityTile.svelte     | 31 ++++++++--
 packages/shared/components/icon/icons.js      | 60 +++++++++++++------
 .../shared/components/inputs/Toggle.svelte    | 38 +++++-------
 packages/shared/locales/en.json               |  8 +--
 .../dashboard/wallet/views/Security.svelte    | 42 ++++++-------
 5 files changed, 108 insertions(+), 71 deletions(-)

diff --git a/packages/shared/components/SecurityTile.svelte b/packages/shared/components/SecurityTile.svelte
index 0737d7a8097..00dd500172c 100644
--- a/packages/shared/components/SecurityTile.svelte
+++ b/packages/shared/components/SecurityTile.svelte
@@ -1,20 +1,39 @@
 <script lang="typescript">
-    import { Icon, Text } from 'shared/components'
+    import { Icon, Text, Toggle } from 'shared/components'
 
     export let icon = 'shield'
     export let title = ''
     export let message = ''
     export let color = 'blue'
     export let classes = ''
+    export let toggle = false
+    export let toggleActive = undefined
+    export let warning = false
     export let onClick = () => {}
 </script>
 
+<style type="text/scss">
+    button:not(.toggle) {
+        @apply h-0;
+        min-height: 139px;
+    }
+</style>
+
 <button
     on:click={() => onClick()}
-    class="flex flex-col flex-wrap text-left rounded-xl px-3 py-3 bg-{color}-50 dark:bg-gray-900 dark:bg-opacity-50 {classes}">
-    <Icon boxed {icon} classes="text-white" boxClasses="mb-2 bg-{color}-600" />
-    <div>
-        <Text>{title}</Text>
-        <Text smaller overrideColor classes="text-{color}-500">{message}</Text>
+    class="relative flex {toggle ? 'flex-row items-center space-x-4' : 'flex-col flex-wrap '} justify-between text-left rounded-xl {toggle ? 'bg-gray-50 p-4' : `bg-${color}-50 px-4 pt-4 pb-5`} dark:bg-gray-900 dark:bg-opacity-50 {classes}"
+    class:toggle>
+    <div class="h-full {toggle ? 'flex flex-row items-center space-x-4' : 'flex flex-col justify-between'} flex-nowrap">
+        <Icon boxed {icon} classes="text-white" boxClasses="{toggle ? 'bg-gray-400' : `mb-2 bg-${color}-500`} dark:bg-gray-900" />
+        <div>
+            <Text smaller bold>{title}</Text>
+            <p class="text-10 leading-120 text-gray-500 {toggle ? 'mt-1' : 'mt-1.5'}">{message}</p>
+        </div>
     </div>
+    {#if toggle}
+        <Toggle active={toggleActive} {color} />
+    {/if}
+    {#if !toggle && warning}
+        <Icon icon="warning-filled" classes="absolute right-4 top-5 {color ? `text-${color}-500` : 'text-yellow-500'}" />
+    {/if}
 </button>
diff --git a/packages/shared/components/icon/icons.js b/packages/shared/components/icon/icons.js
index 90fcc8726b2..f2c478c63a4 100644
--- a/packages/shared/components/icon/icons.js
+++ b/packages/shared/components/icon/icons.js
@@ -753,6 +753,18 @@ export const icons = {
             },
         ],
     },
+    'warning-filled': {
+        width: 24,
+        height: 24,
+        path: [
+            {
+                d:
+                    'M14.6116 2.62066C13.4632 0.588889 10.5366 0.58889 9.38821 2.62066L1.52991 16.5238C0.399542 18.5237 1.84437 21 4.1416 21H19.8582C22.1554 21 23.6002 18.5237 22.4699 16.5238L14.6116 2.62066ZM12.4125 6.48004C13.0041 6.48004 13.4664 6.99086 13.4076 7.57954L12.8344 13.3113C12.7915 13.7398 12.4309 14.0661 12.0003 14.0661C11.5696 14.0661 11.209 13.7398 11.1662 13.3113L10.593 7.57954C10.5341 6.99086 10.9964 6.48004 11.588 6.48004H12.4125ZM10.4829 17.1006C10.4829 16.2626 11.1622 15.5834 12.0001 15.5834C12.838 15.5834 13.5173 16.2626 13.5173 17.1006C13.5173 17.9385 12.838 18.6178 12.0001 18.6178C11.1622 18.6178 10.4829 17.9385 10.4829 17.1006Z',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+            },
+        ],
+    },
     work: {
         width: 24,
         height: 24,
@@ -941,65 +953,77 @@ export const icons = {
         height: 24,
         path: [
             {
-                d: 'M14 1.5C14 2.32843 13.3284 3 12.5 3C11.6716 3 11 2.32843 11 1.5C11 0.671573 11.6716 0 12.5 0C13.3284 0 14 0.671573 14 1.5Z',
+                d:
+                    'M14 1.5C14 2.32843 13.3284 3 12.5 3C11.6716 3 11 2.32843 11 1.5C11 0.671573 11.6716 0 12.5 0C13.3284 0 14 0.671573 14 1.5Z',
             },
             {
-                d: 'M12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7L12 17Z',
+                d:
+                    'M12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7L12 17Z',
                 fillRule: 'evenodd',
                 clipRule: 'evenodd',
             },
             {
-                d: 'M12.5 24C13.3284 24 14 23.3284 14 22.5C14 21.6716 13.3284 21 12.5 21C11.6716 21 11 21.6716 11 22.5C11 23.3284 11.6716 24 12.5 24Z',
+                d:
+                    'M12.5 24C13.3284 24 14 23.3284 14 22.5C14 21.6716 13.3284 21 12.5 21C11.6716 21 11 21.6716 11 22.5C11 23.3284 11.6716 24 12.5 24Z',
             },
             {
-                d: 'M20.9855 5.63604C20.3997 6.22182 19.4499 6.22182 18.8641 5.63604C18.2784 5.05025 18.2784 4.1005 18.8641 3.51472C19.4499 2.92893 20.3997 2.92893 20.9855 3.51472C21.5713 4.1005 21.5713 5.05025 20.9855 5.63604Z',
+                d:
+                    'M20.9855 5.63604C20.3997 6.22182 19.4499 6.22182 18.8641 5.63604C18.2784 5.05025 18.2784 4.1005 18.8641 3.51472C19.4499 2.92893 20.3997 2.92893 20.9855 3.51472C21.5713 4.1005 21.5713 5.05025 20.9855 5.63604Z',
             },
             {
-                d: 'M4.01453 20.4853C4.60032 21.0711 5.55007 21.0711 6.13586 20.4853C6.72164 19.8995 6.72164 18.9498 6.13586 18.364C5.55007 17.7782 4.60032 17.7782 4.01453 18.364C3.42875 18.9498 3.42875 19.8995 4.01453 20.4853Z',
+                d:
+                    'M4.01453 20.4853C4.60032 21.0711 5.55007 21.0711 6.13586 20.4853C6.72164 19.8995 6.72164 18.9498 6.13586 18.364C5.55007 17.7782 4.60032 17.7782 4.01453 18.364C3.42875 18.9498 3.42875 19.8995 4.01453 20.4853Z',
             },
             {
-                d: 'M22.5 13.5C21.6716 13.5 21 12.8284 21 12C21 11.1715 21.6716 10.5 22.5 10.5C23.3284 10.5 24 11.1715 24 12C24 12.8284 23.3284 13.5 22.5 13.5Z',
+                d:
+                    'M22.5 13.5C21.6716 13.5 21 12.8284 21 12C21 11.1715 21.6716 10.5 22.5 10.5C23.3284 10.5 24 11.1715 24 12C24 12.8284 23.3284 13.5 22.5 13.5Z',
             },
             {
-                d: 'M0 11.9997C0 12.8282 0.671573 13.4997 1.5 13.4997C2.32843 13.4997 3 12.8282 3 11.9997C3 11.1713 2.32843 10.4997 1.5 10.4997C0.671573 10.4997 0 11.1713 0 11.9997Z',
+                d:
+                    'M0 11.9997C0 12.8282 0.671573 13.4997 1.5 13.4997C2.32843 13.4997 3 12.8282 3 11.9997C3 11.1713 2.32843 10.4997 1.5 10.4997C0.671573 10.4997 0 11.1713 0 11.9997Z',
             },
             {
-                d: 'M18.3639 20.4852C17.7781 19.8994 17.7781 18.9497 18.3639 18.3639C18.9497 17.7781 19.8995 17.7781 20.4852 18.3639C21.071 18.9497 21.071 19.8994 20.4852 20.4852C19.8995 21.071 18.9497 21.071 18.3639 20.4852Z',
+                d:
+                    'M18.3639 20.4852C17.7781 19.8994 17.7781 18.9497 18.3639 18.3639C18.9497 17.7781 19.8995 17.7781 20.4852 18.3639C21.071 18.9497 21.071 19.8994 20.4852 20.4852C19.8995 21.071 18.9497 21.071 18.3639 20.4852Z',
             },
             {
-                d: 'M3.5148 3.51447C2.92901 4.10026 2.92901 5.05001 3.5148 5.63579C4.10058 6.22158 5.05033 6.22158 5.63612 5.63579C6.2219 5.05001 6.2219 4.10026 5.63612 3.51447C5.05033 2.92869 4.10058 2.92869 3.5148 3.51447Z',
+                d:
+                    'M3.5148 3.51447C2.92901 4.10026 2.92901 5.05001 3.5148 5.63579C4.10058 6.22158 5.05033 6.22158 5.63612 5.63579C6.2219 5.05001 6.2219 4.10026 5.63612 3.51447C5.05033 2.92869 4.10058 2.92869 3.5148 3.51447Z',
             },
-        ]
+        ],
     },
     'theme-dark': {
         width: 24,
         height: 24,
         path: [
             {
-                d: 'M16.7898 15.0238C12.4745 15.0238 8.97629 11.5256 8.97629 7.21037C8.97629 6.99944 8.9847 6.79019 9.00122 6.58298C7.20317 7.6544 6 9.61894 6 11.8611C6 15.2515 8.74847 18 12.1389 18C14.3811 18 16.3456 16.7969 17.4171 14.9989C17.2099 15.0154 17.0007 15.0238 16.7898 15.0238ZM16.7898 13.0238C13.5791 13.0238 10.9763 10.4211 10.9763 7.21037C10.9763 6.71325 11.0387 6.2307 11.1561 5.77013C11.3886 4.85778 10.7859 3.77879 9.88087 4.03959C6.48437 5.01838 4 8.14963 4 11.8611C4 16.3561 7.64392 20 12.1389 20C15.8503 20 18.9815 17.5158 19.9604 14.1195C20.2212 13.2146 19.1413 12.6121 18.2284 12.8445C17.7683 12.9616 17.2863 13.0238 16.7898 13.0238Z',
+                d:
+                    'M16.7898 15.0238C12.4745 15.0238 8.97629 11.5256 8.97629 7.21037C8.97629 6.99944 8.9847 6.79019 9.00122 6.58298C7.20317 7.6544 6 9.61894 6 11.8611C6 15.2515 8.74847 18 12.1389 18C14.3811 18 16.3456 16.7969 17.4171 14.9989C17.2099 15.0154 17.0007 15.0238 16.7898 15.0238ZM16.7898 13.0238C13.5791 13.0238 10.9763 10.4211 10.9763 7.21037C10.9763 6.71325 11.0387 6.2307 11.1561 5.77013C11.3886 4.85778 10.7859 3.77879 9.88087 4.03959C6.48437 5.01838 4 8.14963 4 11.8611C4 16.3561 7.64392 20 12.1389 20C15.8503 20 18.9815 17.5158 19.9604 14.1195C20.2212 13.2146 19.1413 12.6121 18.2284 12.8445C17.7683 12.9616 17.2863 13.0238 16.7898 13.0238Z',
                 fillRule: 'evenodd',
                 clipRule: 'evenodd',
             },
-        ]
+        ],
     },
     backspace: {
         width: 20,
         height: 14,
         path: [
             {
-                d: 'M7.41379 0H18.0004C18.5309 0 19.0396 0.210714 19.4146 0.585786C19.7897 0.960859 20.0004 1.46957 20.0004 2V12C20.0004 12.5304 19.7897 13.0391 19.4146 13.4142C19.0396 13.7893 18.5309 14 18.0004 14H7.41379C6.8834 13.9999 6.37477 13.7891 5.99979 13.414L0.292786 7.707C0.105315 7.51947 0 7.26516 0 7C0 6.73484 0.105315 6.48053 0.292786 6.293L5.99979 0.586C6.37477 0.210901 6.8834 0.000113275 7.41379 0ZM7.41379 12H18.0004V2H7.41379L2.41379 7L7.41379 12ZM14.4144 7L15.8284 8.414C16.0106 8.6026 16.1114 8.8552 16.1091 9.1174C16.1068 9.3796 16.0017 9.63041 15.8163 9.81582C15.6308 10.0012 15.38 10.1064 15.1178 10.1087C14.8556 10.111 14.603 10.0102 14.4144 9.828L13.0004 8.414L11.5864 9.828C11.4942 9.92351 11.3838 9.99969 11.2618 10.0521C11.1398 10.1045 11.0086 10.1321 10.8758 10.1333C10.7431 10.1344 10.6114 10.1091 10.4885 10.0588C10.3656 10.0085 10.2539 9.93429 10.16 9.84039C10.0661 9.7465 9.9919 9.63485 9.94162 9.51195C9.89134 9.38906 9.86603 9.25738 9.86719 9.1246C9.86834 8.99182 9.89593 8.8606 9.94834 8.7386C10.0007 8.61659 10.0769 8.50625 10.1724 8.414L11.5864 7L10.1724 5.586C10.0769 5.49375 10.0007 5.38341 9.94834 5.2614C9.89593 5.1394 9.86834 5.00818 9.86719 4.8754C9.86603 4.74262 9.89134 4.61094 9.94162 4.48805C9.9919 4.36515 10.0661 4.2535 10.16 4.15961C10.2539 4.06571 10.3656 3.99146 10.4885 3.94118C10.6114 3.8909 10.7431 3.8656 10.8758 3.86675C11.0086 3.8679 11.1398 3.89549 11.2618 3.9479C11.3838 4.00031 11.4942 4.07649 11.5864 4.172L13.0004 5.586L14.4144 4.172C14.5067 4.07649 14.617 4.00031 14.739 3.9479C14.861 3.89549 14.9923 3.8679 15.125 3.86675C15.2578 3.8656 15.3895 3.8909 15.5124 3.94118C15.6353 3.99146 15.7469 4.06571 15.8408 4.15961C15.9347 4.2535 16.009 4.36515 16.0593 4.48805C16.1095 4.61094 16.1348 4.74262 16.1337 4.8754C16.1325 5.00818 16.1049 5.1394 16.0525 5.2614C16.0001 5.38341 15.9239 5.49375 15.8284 5.586L14.4144 7Z'
-            }
-        ]
+                d:
+                    'M7.41379 0H18.0004C18.5309 0 19.0396 0.210714 19.4146 0.585786C19.7897 0.960859 20.0004 1.46957 20.0004 2V12C20.0004 12.5304 19.7897 13.0391 19.4146 13.4142C19.0396 13.7893 18.5309 14 18.0004 14H7.41379C6.8834 13.9999 6.37477 13.7891 5.99979 13.414L0.292786 7.707C0.105315 7.51947 0 7.26516 0 7C0 6.73484 0.105315 6.48053 0.292786 6.293L5.99979 0.586C6.37477 0.210901 6.8834 0.000113275 7.41379 0ZM7.41379 12H18.0004V2H7.41379L2.41379 7L7.41379 12ZM14.4144 7L15.8284 8.414C16.0106 8.6026 16.1114 8.8552 16.1091 9.1174C16.1068 9.3796 16.0017 9.63041 15.8163 9.81582C15.6308 10.0012 15.38 10.1064 15.1178 10.1087C14.8556 10.111 14.603 10.0102 14.4144 9.828L13.0004 8.414L11.5864 9.828C11.4942 9.92351 11.3838 9.99969 11.2618 10.0521C11.1398 10.1045 11.0086 10.1321 10.8758 10.1333C10.7431 10.1344 10.6114 10.1091 10.4885 10.0588C10.3656 10.0085 10.2539 9.93429 10.16 9.84039C10.0661 9.7465 9.9919 9.63485 9.94162 9.51195C9.89134 9.38906 9.86603 9.25738 9.86719 9.1246C9.86834 8.99182 9.89593 8.8606 9.94834 8.7386C10.0007 8.61659 10.0769 8.50625 10.1724 8.414L11.5864 7L10.1724 5.586C10.0769 5.49375 10.0007 5.38341 9.94834 5.2614C9.89593 5.1394 9.86834 5.00818 9.86719 4.8754C9.86603 4.74262 9.89134 4.61094 9.94162 4.48805C9.9919 4.36515 10.0661 4.2535 10.16 4.15961C10.2539 4.06571 10.3656 3.99146 10.4885 3.94118C10.6114 3.8909 10.7431 3.8656 10.8758 3.86675C11.0086 3.8679 11.1398 3.89549 11.2618 3.9479C11.3838 4.00031 11.4942 4.07649 11.5864 4.172L13.0004 5.586L14.4144 4.172C14.5067 4.07649 14.617 4.00031 14.739 3.9479C14.861 3.89549 14.9923 3.8679 15.125 3.86675C15.2578 3.8656 15.3895 3.8909 15.5124 3.94118C15.6353 3.99146 15.7469 4.06571 15.8408 4.15961C15.9347 4.2535 16.009 4.36515 16.0593 4.48805C16.1095 4.61094 16.1348 4.74262 16.1337 4.8754C16.1325 5.00818 16.1049 5.1394 16.0525 5.2614C16.0001 5.38341 15.9239 5.49375 15.8284 5.586L14.4144 7Z',
+            },
+        ],
     },
     'success-check': {
         width: 38,
         height: 36,
         path: [
             {
-                d: 'M30.6865 10.2201C31.2764 10.8223 31.2483 11.7717 30.6237 12.3405L15.5246 26.0915L8.23344 19.0607C7.62596 18.4749 7.62596 17.5251 8.23344 16.9393C8.84093 16.3536 9.82585 16.3536 10.4333 16.9393L15.5866 21.9086L28.4875 10.1595C29.1121 9.59067 30.0966 9.61779 30.6865 10.2201Z',
+                d:
+                    'M30.6865 10.2201C31.2764 10.8223 31.2483 11.7717 30.6237 12.3405L15.5246 26.0915L8.23344 19.0607C7.62596 18.4749 7.62596 17.5251 8.23344 16.9393C8.84093 16.3536 9.82585 16.3536 10.4333 16.9393L15.5866 21.9086L28.4875 10.1595C29.1121 9.59067 30.0966 9.61779 30.6865 10.2201Z',
                 fillRule: 'evenodd',
                 clipRule: 'evenodd',
             },
-        ]
-    }
+        ],
+    },
 }
diff --git a/packages/shared/components/inputs/Toggle.svelte b/packages/shared/components/inputs/Toggle.svelte
index b25e0c865b5..9eeec075ccc 100644
--- a/packages/shared/components/inputs/Toggle.svelte
+++ b/packages/shared/components/inputs/Toggle.svelte
@@ -1,32 +1,26 @@
 <script lang="typescript">
-    export let value = undefined
-    export let storeItem = undefined
-    export let label = ''
+    export let active = false
     export let classes = ''
-
-    $: active = value === true || $storeItem === true
-
-    function onClick() {
-        if (value) {
-            value = !value
-        } else if (storeItem) {
-            storeItem.update((storeItem) => !storeItem)
-        }
-    }
+    export let color = 'blue'
+    export let onClick = () => {}
 </script>
 
 <style type="text/scss">
-    knob {
-        transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+    toggle {
+        knob {
+            transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+        }
         &.active {
-            left: 20px;
+            knob {
+                left: 20px;
+            }
         }
     }
 </style>
 
-<label class={`w-full flex items-center mb-4 text-12 leading-160 text-gray-800 dark:text-white ${classes}`}>
-    <toggle on:click={onClick} class="relative block mr-5 w-10 h-6 rounded-full bg-gray-300">
-        <knob class:active class="absolute top-1 left-1 h-4 w-4 rounded-full bg-white" />
-    </toggle>
-    {label}
-</label>
+<toggle
+    on:click={onClick}
+    class:active
+    class="relative block w-10 flex-shrink-0 h-6 rounded-full {active ? `bg-${color}-500` : 'bg-gray-200 dark:bg-gray-900'} {classes}">
+    <knob class="absolute top-1 left-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800" />
+</toggle>
diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json
index 6c602b138be..676dc76df57 100644
--- a/packages/shared/locales/en.json
+++ b/packages/shared/locales/en.json
@@ -287,12 +287,12 @@
                     "noneDetected": "None detected"
                 },
                 "strongholdStatus": {
-                    "title": "Stronghold Status",
-                    "locked": "Locked",
-                    "unlocked": "Unlocked"
+                    "title": "Wallet Status",
+                    "locked": "Stronghold locked",
+                    "unlocked": "Stronghold unlocked"
                 },
                 "strongholdBackup": {
-                    "title": "Stronghold Backup",
+                    "title": "Wallet Backup",
                     "weeksAgo": "{weeks, plural, one {# week} other {# weeks}} ago"
                 }
             },
diff --git a/packages/shared/routes/dashboard/wallet/views/Security.svelte b/packages/shared/routes/dashboard/wallet/views/Security.svelte
index 4f5c107da33..0eebd03ffb8 100644
--- a/packages/shared/routes/dashboard/wallet/views/Security.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/Security.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import { SecurityTile, Text } from 'shared/components'
     import { versionDetails } from 'shared/lib/appUpdater'
-    import { diffDates, getBackupWarningColor } from 'shared/lib/helpers'
+    import { diffDates, getBackupWarningColor, isRecentDate } from 'shared/lib/helpers'
     import { showAppNotification } from 'shared/lib/notifications'
     import { openPopup } from 'shared/lib/popup'
     import { activeProfile, isStrongholdLocked, profiles } from 'shared/lib/profile'
@@ -13,6 +13,7 @@
 
     let lastBackupDate
     let lastBackupDateFormatted
+    let backupSafe
     let color
 
     function setup() {
@@ -20,6 +21,7 @@
         const lastStrongholdBackupTime = ap?.lastStrongholdBackupTime
         lastBackupDate = lastStrongholdBackupTime ? new Date(lastStrongholdBackupTime) : null
         lastBackupDateFormatted = diffDates(lastBackupDate, new Date())
+        backupSafe = lastBackupDate && isRecentDate(lastBackupDate)?.lessThanAMonth
         color = getBackupWarningColor(lastBackupDate)
     }
 
@@ -55,38 +57,36 @@
     onDestroy(unsubscribe)
 </script>
 
-<div data-label="security" class="py-6 px-8 flex-grow flex flex-col">
+<div data-label="security" class="py-6 px-8 flex-grow flex flex-col h-full">
     <Text type="h5" classes="mb-5">{locale('general.security')}</Text>
-    <div class="grid grid-cols-2 gap-2">
+    <div class="grid grid-cols-2 gap-3 auto-rows-max w-full overflow-y-auto flex-auto h-1 -mr-2 pr-2">
+        <!-- Stronghold backup -->
+        <SecurityTile
+            title={locale('views.dashboard.security.strongholdBackup.title')}
+            message={$activeProfile?.lastStrongholdBackupTime ? locale(`dates.${lastBackupDateFormatted.unit}`, {
+                      values: { time: lastBackupDateFormatted.value },
+                  }) : locale('popups.backup.notBackedUp')}
+            onClick={() => handleSecurityTileClick('backup')}
+            icon="shield"
+            warning={!backupSafe}
+            {color} />
         <!-- Firefly version -->
         <SecurityTile
             title={locale('views.dashboard.security.version.title', { values: { version: $versionDetails.currentVersion } })}
             message={locale(`views.dashboard.security.version.${$versionDetails.upToDate ? 'upToDate' : 'outOfDate'}`)}
             color={$versionDetails.upToDate ? 'blue' : 'yellow'}
+            warning={!$versionDetails.upToDate}
             icon="firefly"
             onClick={() => handleSecurityTileClick('version')} />
-        <!-- Hardware Device -->
-        <SecurityTile
-            title={locale('views.dashboard.security.hardwareDevice.title')}
-            message={locale('views.dashboard.security.hardwareDevice.noneDetected')}
-            color="gray"
-            icon="chip"
-            classes="pointer-events-none" />
         <!-- Stronghold status -->
         <SecurityTile
             title={locale('views.dashboard.security.strongholdStatus.title')}
             message={locale(`views.dashboard.security.strongholdStatus.${$isStrongholdLocked ? 'locked' : 'unlocked'}`)}
-            color={$isStrongholdLocked ? 'blue' : 'yellow'}
+            color="yellow"
             icon={$isStrongholdLocked ? 'lock' : 'unlock'}
-            onClick={() => ($isStrongholdLocked ? handleSecurityTileClick('password') : lockStronghold())} />
-        <!-- Stronghold backup -->
-        <SecurityTile
-            title={locale('views.dashboard.security.strongholdBackup.title')}
-            message={$activeProfile?.lastStrongholdBackupTime ? locale(`dates.${lastBackupDateFormatted.unit}`, {
-                      values: { time: lastBackupDateFormatted.value },
-                  }) : locale('popups.backup.notBackedUp')}
-            onClick={() => handleSecurityTileClick('backup')}
-            icon="shield"
-            {color} />
+            onClick={() => ($isStrongholdLocked ? handleSecurityTileClick('password') : lockStronghold())}
+            classes="col-span-2"
+            toggle
+            toggleActive={$isStrongholdLocked} />
     </div>
 </div>

From 1efcc170127ed2433026a23f5003869381652f6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Mon, 22 Mar 2021 03:29:24 +0100
Subject: [PATCH 4/4] invert stronghold toggle status

---
 packages/shared/routes/dashboard/wallet/views/Security.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/routes/dashboard/wallet/views/Security.svelte b/packages/shared/routes/dashboard/wallet/views/Security.svelte
index 0eebd03ffb8..637cf0cdbf2 100644
--- a/packages/shared/routes/dashboard/wallet/views/Security.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/Security.svelte
@@ -87,6 +87,6 @@
             onClick={() => ($isStrongholdLocked ? handleSecurityTileClick('password') : lockStronghold())}
             classes="col-span-2"
             toggle
-            toggleActive={$isStrongholdLocked} />
+            toggleActive={!$isStrongholdLocked} />
     </div>
 </div>