From 102c36f677af28c35e4690cf01c49e8e8dcc3f27 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Mon, 17 Jul 2023 18:25:45 +0200
Subject: [PATCH] refactor: cleanup recoveryPhrase

---
 .../shared/components/RecoveryPhrase.svelte   | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/packages/shared/components/RecoveryPhrase.svelte b/packages/shared/components/RecoveryPhrase.svelte
index cea33944ff3..feeafcd819b 100644
--- a/packages/shared/components/RecoveryPhrase.svelte
+++ b/packages/shared/components/RecoveryPhrase.svelte
@@ -1,14 +1,9 @@
 <script lang="ts">
-    import { appSettings } from '@core/app'
-
-    export let recoveryPhrase: string[] = []
-    export let verifyRecoveryPhrase: string[] = undefined
-
+    export let recoveryPhrase: string[]
+    export let verifyRecoveryPhrase: string[] | undefined = undefined
     export let blurred: boolean = false
     export let disabled: boolean = false
     export let boxed: boolean = false
-
-    $: dark = $appSettings.darkMode
 </script>
 
 {#if recoveryPhrase}
@@ -24,7 +19,6 @@
             <recovery-word
                 id="recovery-word-{i}"
                 class:boxed
-                class:dark
                 class:disabled
                 class:errored
                 class:selected
@@ -64,11 +58,8 @@
     }
 
     recovery-word:not(.boxed) {
-        @apply px-6 py-4 rounded-2xl bg-gray-200;
-
-        &.dark {
-            @apply bg-gray-800;
-        }
+        @apply px-6 py-4 rounded-2xl;
+        @apply bg-gray-200 dark:bg-gray-800;
 
         &.unmatched {
             @apply filter blur-sm;
@@ -84,18 +75,12 @@
 
         &.selected {
             @apply rounded border border-solid border-blue-500 bg-blue-50;
+            @apply dark:bg-blue-300 dark:bg-opacity-10;
         }
 
         &.errored {
             @apply rounded border border-solid border-red-500 bg-red-50;
-        }
-
-        &.dark.selected {
-            @apply bg-blue-300 bg-opacity-10;
-        }
-
-        &.dark.errored {
-            @apply bg-red-300 bg-opacity-10;
+            @apply dark:bg-red-300 dark:bg-opacity-10;
         }
     }
 </style>