From 6915150ff60c2acdff1d73ce35db9c4926a48dc9 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Tue, 4 Jul 2023 18:15:40 +0200
Subject: [PATCH] refactor: cleanup `Toggle` component (#7092)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: cleanup `Toggle` component

* fix: remove unnecessary cursor-pointer

---------

Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>
---
 .../popups/send/SendConfirmationPopup.svelte  |  3 +-
 .../buttons/ProfileLockButton.svelte          |  2 +-
 .../drawers/send/views/ReviewView.svelte      |  3 +-
 .../components/filters/FilterItem.svelte      | 11 ++--
 .../shared/components/inputs/Toggle.svelte    | 66 ++++++++++++-------
 .../components/modals/ProfileActions.svelte   |  2 +-
 6 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/packages/desktop/components/popups/send/SendConfirmationPopup.svelte b/packages/desktop/components/popups/send/SendConfirmationPopup.svelte
index fee12b35a32..2b5a37f6d8a 100644
--- a/packages/desktop/components/popups/send/SendConfirmationPopup.svelte
+++ b/packages/desktop/components/popups/send/SendConfirmationPopup.svelte
@@ -42,6 +42,7 @@
         TARGET_CONTRACTS,
         TRANSFER_ALLOWANCE,
     } from '@core/layer-2'
+    import { ToggleColor } from '@ui/inputs/Toggle.svelte'
 
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
     export let disableBack = false
@@ -221,7 +222,7 @@
                 <KeyValueBox keyText={localize('general.giftStorageDeposit')}>
                     <Toggle
                         slot="value"
-                        color="green"
+                        color={ToggleColor.Green}
                         disabled={disableToggleGift}
                         active={giftStorageDeposit}
                         onClick={toggleGiftStorageDeposit}
diff --git a/packages/mobile/components/buttons/ProfileLockButton.svelte b/packages/mobile/components/buttons/ProfileLockButton.svelte
index 6d32a9350aa..666b8b1b4db 100644
--- a/packages/mobile/components/buttons/ProfileLockButton.svelte
+++ b/packages/mobile/components/buttons/ProfileLockButton.svelte
@@ -52,7 +52,7 @@
             </span>
         </div>
         <div class="col-end-12 h-full flex justify-center items-center justify-items-center">
-            <Toggle active={$isStrongholdLocked} onClick={() => {}} />
+            <Toggle active={$isStrongholdLocked} />
         </div>
     </div>
 </button>
diff --git a/packages/mobile/components/drawers/send/views/ReviewView.svelte b/packages/mobile/components/drawers/send/views/ReviewView.svelte
index 553017ae2f1..0216504e84c 100644
--- a/packages/mobile/components/drawers/send/views/ReviewView.svelte
+++ b/packages/mobile/components/drawers/send/views/ReviewView.svelte
@@ -22,6 +22,7 @@
     import { DrawerId, openDrawer } from '@/auxiliary/drawer'
     import { sendRouter } from '@/routers'
     import { activeProfile } from '@core/profile'
+    import { ToggleColor } from '@ui/inputs/Toggle.svelte'
 
     export let sendTransaction: () => Promise<void>
     export let storageDeposit: number
@@ -110,7 +111,7 @@
                     <KeyValueBox keyText={localize('general.giftStorageDeposit')}>
                         <Toggle
                             slot="value"
-                            color="green"
+                            color={ToggleColor.Green}
                             disabled={$newTransactionDetails.disableToggleGift}
                             active={$newTransactionDetails.giftStorageDeposit}
                             onClick={toggleGiftStorageDeposit}
diff --git a/packages/mobile/components/filters/FilterItem.svelte b/packages/mobile/components/filters/FilterItem.svelte
index ddf4ca21b69..f0c01e450a1 100644
--- a/packages/mobile/components/filters/FilterItem.svelte
+++ b/packages/mobile/components/filters/FilterItem.svelte
@@ -10,8 +10,13 @@
 
     import { localize } from '@core/i18n'
     import { FilterUnit } from '@core/utils/interfaces/filter'
+    import { ToggleColor } from '@ui/inputs/Toggle.svelte'
 
     export let filterUnit: FilterUnit
+
+    function handleToggleClick(): void {
+        filterUnit.active = !filterUnit.active
+    }
 </script>
 
 <filter-item class="block px-5 -mx-5 border-t border-solid border-gray-200 dark:border-gray-800">
@@ -19,11 +24,7 @@
         <Text fontWeight={FontWeight.medium} fontSize="15"
             >{localize(filterUnit.labelKey ?? filterUnit.localeKey + '.label')}</Text
         >
-        <Toggle
-            onClick={() => (filterUnit.active = !filterUnit.active)}
-            bind:active={filterUnit.active}
-            color="green"
-        />
+        <Toggle onClick={handleToggleClick} bind:active={filterUnit.active} color={ToggleColor.Green} />
     </filter-item-toggle>
     {#if filterUnit.active}
         <filter-item-type
diff --git a/packages/shared/components/inputs/Toggle.svelte b/packages/shared/components/inputs/Toggle.svelte
index f226dac135c..59c68185658 100644
--- a/packages/shared/components/inputs/Toggle.svelte
+++ b/packages/shared/components/inputs/Toggle.svelte
@@ -1,10 +1,16 @@
+<script lang="ts" context="module">
+    export enum ToggleColor {
+        Green = 'green',
+        Blue = 'blue',
+    }
+</script>
+
 <script lang="ts">
-    export let active = false
-    export let classes = ''
-    export let color = 'blue'
-    export let disabled = false
+    export let active: boolean = false
+    export let color: ToggleColor = ToggleColor.Blue
+    export let disabled: boolean = false
 
-    export let onClick: () => void
+    export let onClick: (() => unknown) | undefined = undefined
 
     function onToggleClick(): void {
         if (!disabled && onClick) {
@@ -13,29 +19,45 @@
     }
 </script>
 
-<button
-    on:click={onToggleClick}
-    class:active
-    {disabled}
-    type="button"
-    class="
-        toggle relative block w-10 shrink-0 h-6 rounded-full border-solid border border-transparent dark:border-gray-700
-        {disabled ? 'opacity-40' : 'cursor-pointer'}
-        {active ? `bg-${color}-500` : 'bg-gray-200 dark:bg-gray-900'} 
-        {classes}"
->
-    <knob class="absolute top-1/2 transform -translate-y-1/2 left-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800" />
+<button on:click={onToggleClick} {disabled} type="button" class:active class={active ? `toggle-${color}` : null}>
+    <knob />
 </button>
 
-<style type="text/scss">
-    .toggle {
-        knob {
-            transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+<style lang="scss">
+    button {
+        @apply relative;
+        @apply block;
+        @apply w-10;
+        @apply shrink-0;
+        @apply h-6;
+        @apply rounded-full;
+        @apply border border-solid border-transparent dark:border-gray-700;
+        @apply bg-gray-200 dark:bg-gray-900;
+
+        &[disabled] {
+            @apply opacity-40;
         }
+
         &.active {
+            &.toggle-green {
+                @apply bg-green-500;
+            }
+            &.toggle-blue {
+                @apply bg-blue-500;
+            }
             knob {
-                left: 20px;
+                @apply left-5;
             }
         }
+
+        knob {
+            @apply absolute;
+            @apply rounded-full;
+            @apply h-4 w-4;
+            @apply top-1/2 left-1;
+            @apply transform -translate-y-1/2;
+            @apply bg-white dark:bg-gray-800;
+            transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+        }
     }
 </style>
diff --git a/packages/shared/components/modals/ProfileActions.svelte b/packages/shared/components/modals/ProfileActions.svelte
index c3ec5847ca0..01c1511e52c 100644
--- a/packages/shared/components/modals/ProfileActions.svelte
+++ b/packages/shared/components/modals/ProfileActions.svelte
@@ -166,7 +166,7 @@
                         </Text>
                     </div>
                 </div>
-                <Toggle active={$isStrongholdLocked} onClick={onStrongholdToggleClick} classes="cursor-pointer" />
+                <Toggle active={$isStrongholdLocked} onClick={onStrongholdToggleClick} />
             </div>
             <HR />
         {:else}