From d8a39f048d982628355e2bcda7c6d88714385a69 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 18 Jul 2023 11:34:00 +0200
Subject: [PATCH 1/5] refactor: cleanup box

---
 .../shared/components/atoms/SubjectBox.svelte |  4 +--
 .../shared/components/boxes/AddressBox.svelte |  2 +-
 packages/shared/components/boxes/Box.svelte   | 29 +++++++------------
 .../components/boxes/CopyableBox.svelte       |  4 +--
 4 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/shared/components/atoms/SubjectBox.svelte b/packages/shared/components/atoms/SubjectBox.svelte
index 5ad8efd1f95..ed3aed0633c 100644
--- a/packages/shared/components/atoms/SubjectBox.svelte
+++ b/packages/shared/components/atoms/SubjectBox.svelte
@@ -7,13 +7,13 @@
 </script>
 
 {#if subject.type === 'account'}
-    <Box row clearBackground clearPadding classes="justify-center">
+    <Box row centered>
         <AccountLabel account={subject.account} />
     </Box>
 {:else if subject.type === 'address'}
     <AddressBox clearBackground clearPadding isCopyable address={subject.address} />
 {:else}
-    <Box row clearBackground clearPadding classes="justify-center">
+    <Box row centered>
         <Text type={TextType.pre} fontSize="base" fontWeight={FontWeight.medium}>
             {localize('general.unknownAddress')}
         </Text>
diff --git a/packages/shared/components/boxes/AddressBox.svelte b/packages/shared/components/boxes/AddressBox.svelte
index e5cc93e3bf2..debe3ea585c 100644
--- a/packages/shared/components/boxes/AddressBox.svelte
+++ b/packages/shared/components/boxes/AddressBox.svelte
@@ -13,7 +13,7 @@
 </script>
 
 {#if address}
-    <CopyableBox bind:this={copyableBoxElement} col {isCopyable} value={address} clearBoxPadding {...$$restProps}>
+    <CopyableBox bind:this={copyableBoxElement} col {isCopyable} value={address} {...$$restProps}>
         {#if address.length > 20}
             <Text type="pre" {fontSize} fontWeight={FontWeight.medium}>
                 {address.slice(0, address.length / 2)}
diff --git a/packages/shared/components/boxes/Box.svelte b/packages/shared/components/boxes/Box.svelte
index 8e1d144e5ec..2b106cbdac9 100644
--- a/packages/shared/components/boxes/Box.svelte
+++ b/packages/shared/components/boxes/Box.svelte
@@ -1,23 +1,16 @@
 <script lang="ts">
-    export let col = false
-    export let row = false
-    export let clearBackground = false
-    export let clearPadding = false
-    export let backgroundColor = 'gray-50'
-    export let darkBackgroundColor = 'gray-850'
-    export let classes = ''
+    export let col: boolean = false
+    export let row: boolean = false
+    export let backgroundColor: string = ''
+    export let centered: boolean = false
+    export let padding: string = ''
 </script>
 
-<box
-    class={`
-        w-full flex rounded-lg
-        ${col ? 'flex-col' : ''}
-        ${row ? 'flex-row' : ''}
-        ${clearPadding ? '' : 'px-4 py-4'}
-        ${backgroundColor && !clearBackground ? 'bg-' + backgroundColor : ''}  
-        ${darkBackgroundColor && !clearBackground ? 'dark:bg-' + darkBackgroundColor : ''}
-        ${classes}
-    `}
+<box-content
+    class="w-full flex rounded-lg {padding} {backgroundColor}"
+    class:flex-col={col}
+    class:flex-row={row}
+    class:justify-center={centered}
 >
     <slot />
-</box>
+</box-content>
diff --git a/packages/shared/components/boxes/CopyableBox.svelte b/packages/shared/components/boxes/CopyableBox.svelte
index 9c339b5428c..81109c4f186 100644
--- a/packages/shared/components/boxes/CopyableBox.svelte
+++ b/packages/shared/components/boxes/CopyableBox.svelte
@@ -8,9 +8,7 @@
     export let value = ''
     export let isCopyable = true
     export let clearPadding = false
-    export let clearBoxPadding = false
     export let offset: number = undefined
-    export let classes = ''
 
     let tooltipAnchor: HTMLElement
     let showTooltip = false
@@ -38,7 +36,7 @@
         on:click={onClick}
         class="{clearPadding ? '' : 'w-full'} {isCopyable ? 'cursor-pointer' : 'cursor-default'}"
     >
-        <Box clearPadding={clearBoxPadding} {...$$restProps} {classes}>
+        <Box {...$$restProps}>
             <slot />
         </Box>
     </button>

From f45c2f3bfa6756ca3211e8e67873365ea2053c26 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Wed, 23 Aug 2023 16:53:21 +0200
Subject: [PATCH 2/5] fix: bring back classes and fix props

---
 .../popups/MintNftConfirmationPopup.svelte         |  2 +-
 packages/shared/components/boxes/Box.svelte        |  3 ++-
 .../shared/components/boxes/CopyableBox.svelte     | 14 +++++++-------
 .../shared/components/boxes/KeyValueBox.svelte     | 14 +++++---------
 4 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/desktop/components/popups/MintNftConfirmationPopup.svelte b/packages/desktop/components/popups/MintNftConfirmationPopup.svelte
index bab7511570c..74d5ce8647e 100644
--- a/packages/desktop/components/popups/MintNftConfirmationPopup.svelte
+++ b/packages/desktop/components/popups/MintNftConfirmationPopup.svelte
@@ -129,7 +129,7 @@
                     <KeyValueBox
                         keyText={localize('general.metadata')}
                         valueText={JSON.stringify(irc27Metadata, null, '\t')}
-                        classes="whitespace-pre-wrap"
+                        isPreText
                     />
                 {/if}
             </activity-details>
diff --git a/packages/shared/components/boxes/Box.svelte b/packages/shared/components/boxes/Box.svelte
index 2b106cbdac9..4dd30cc964d 100644
--- a/packages/shared/components/boxes/Box.svelte
+++ b/packages/shared/components/boxes/Box.svelte
@@ -4,10 +4,11 @@
     export let backgroundColor: string = ''
     export let centered: boolean = false
     export let padding: string = ''
+    export let classes = ''
 </script>
 
 <box-content
-    class="w-full flex rounded-lg {padding} {backgroundColor}"
+    class="w-full flex rounded-lg {padding} {backgroundColor} {classes}"
     class:flex-col={col}
     class:flex-row={row}
     class:justify-center={centered}
diff --git a/packages/shared/components/boxes/CopyableBox.svelte b/packages/shared/components/boxes/CopyableBox.svelte
index 81109c4f186..fb837b55aa4 100644
--- a/packages/shared/components/boxes/CopyableBox.svelte
+++ b/packages/shared/components/boxes/CopyableBox.svelte
@@ -5,10 +5,10 @@
     import { localize } from '@core/i18n'
     import { onDestroy } from 'svelte'
 
-    export let value = ''
-    export let isCopyable = true
-    export let clearPadding = false
-    export let offset: number = undefined
+    export let value: string = ''
+    export let isCopyable: boolean = true
+    export let offset: number | undefined = undefined
+    export let classes: string = ''
 
     let tooltipAnchor: HTMLElement
     let showTooltip = false
@@ -34,9 +34,9 @@
         type="button"
         bind:this={tooltipAnchor}
         on:click={onClick}
-        class="{clearPadding ? '' : 'w-full'} {isCopyable ? 'cursor-pointer' : 'cursor-default'}"
+        class="w-full {isCopyable ? 'cursor-pointer' : 'cursor-default'}"
     >
-        <Box {...$$restProps}>
+        <Box {...$$restProps} {classes}>
             <slot />
         </Box>
     </button>
@@ -44,7 +44,7 @@
 {#if isCopyable && showTooltip}
     <InformationTooltip
         anchor={tooltipAnchor}
-        offset={clearPadding ? offset ?? 25 : offset ?? 15}
+        offset={offset ?? 15}
         size="small"
         backgroundColor="green-600"
         borderColor="green-600"
diff --git a/packages/shared/components/boxes/KeyValueBox.svelte b/packages/shared/components/boxes/KeyValueBox.svelte
index 87359de5124..f4022e1f561 100644
--- a/packages/shared/components/boxes/KeyValueBox.svelte
+++ b/packages/shared/components/boxes/KeyValueBox.svelte
@@ -5,18 +5,16 @@
 
     export let keyText: string = ''
     export let valueText: string = ''
-    export let textColor: string = 'gray-600'
-    export let darkTextColor: string = 'gray-500'
-    export let backgroundColor: string = 'gray-50'
-    export let darkBackgroundColor: string = 'gray-850'
+    export let textColor: string = 'text-gray-600 dark:text-gray-500'
+    export let darkTextColor: string = 'text-gray-500'
+    export let backgroundColor: string = 'bg-gray-50 dark:bg-gray-850'
     export let padding: string = 'px-4 py-2.5'
-    export let classes: string = ''
     export let copyValue: string = ''
     export let isCopyable: boolean = false
     export let tooltipText: string = ''
     export let shrink: boolean = false
     export let isPreText: boolean = false
-    export let maxHeight: number = undefined
+    export let maxHeight: number | undefined = undefined
     export let isLoading: boolean = false
     export let outline: boolean = false
 
@@ -37,9 +35,7 @@
         row={!isVertical}
         col={isVertical}
         {backgroundColor}
-        {darkBackgroundColor}
-        clearBoxPadding
-        classes="w-full overflow-hidden {padding} {classes} {isLoading ? 'animate-pulse' : ''} {outline
+        classes="w-full overflow-hidden {padding} {isLoading ? 'animate-pulse' : ''} {outline
             ? 'border-2 border-gray-100'
             : ''}"
     >

From 47b6845782a6bfff9fa76ce0dfb216196710ce8a Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Thu, 24 Aug 2023 13:48:29 +0200
Subject: [PATCH 3/5] feat: bring back props

---
 packages/shared/components/SubjectBox.svelte  |  4 ++--
 .../shared/components/boxes/AddressBox.svelte | 16 +++++++-------
 packages/shared/components/boxes/Box.svelte   | 22 ++++++++++++-------
 .../components/boxes/CopyableBox.svelte       |  8 ++++---
 .../components/boxes/KeyValueBox.svelte       | 12 ++++++----
 5 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/packages/shared/components/SubjectBox.svelte b/packages/shared/components/SubjectBox.svelte
index 7ea60b96819..b615b8c07bd 100644
--- a/packages/shared/components/SubjectBox.svelte
+++ b/packages/shared/components/SubjectBox.svelte
@@ -7,13 +7,13 @@
 </script>
 
 {#if subject?.type === 'account'}
-    <Box row centered>
+    <Box row clearBackground clearPadding classes="justify-center">
         <AccountLabel account={subject?.account} />
     </Box>
 {:else if subject?.type === 'address'}
     <AddressBox clearBackground clearPadding isCopyable address={subject?.address} />
 {:else}
-    <Box row centered>
+    <Box row clearBackground clearPadding classes="justify-center">
         <Text type={TextType.pre} fontSize="base" fontWeight={FontWeight.medium}>
             {localize('general.unknownAddress')}
         </Text>
diff --git a/packages/shared/components/boxes/AddressBox.svelte b/packages/shared/components/boxes/AddressBox.svelte
index debe3ea585c..25726827742 100644
--- a/packages/shared/components/boxes/AddressBox.svelte
+++ b/packages/shared/components/boxes/AddressBox.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { Text, CopyableBox, FontWeight } from 'shared/components'
+    import { Text, CopyableBox, FontWeight, TextType } from 'shared/components'
 
-    export let address = ''
-    export let isCopyable = false
-    export let fontSize = 'base'
+    export let address: string = ''
+    export let isCopyable: boolean = false
+    export let fontSize: string = 'base'
 
     let copyableBoxElement: CopyableBox
 
@@ -13,16 +13,16 @@
 </script>
 
 {#if address}
-    <CopyableBox bind:this={copyableBoxElement} col {isCopyable} value={address} {...$$restProps}>
+    <CopyableBox bind:this={copyableBoxElement} col {isCopyable} value={address} clearBoxPadding {...$$restProps}>
         {#if address.length > 20}
-            <Text type="pre" {fontSize} fontWeight={FontWeight.medium}>
+            <Text type={TextType.pre} {fontSize} fontWeight={FontWeight.medium}>
                 {address.slice(0, address.length / 2)}
             </Text>
-            <Text type="pre" {fontSize} fontWeight={FontWeight.medium}>
+            <Text type={TextType.pre} {fontSize} fontWeight={FontWeight.medium}>
                 {address.slice(address.length / 2)}
             </Text>
         {:else}
-            <Text type="pre" {fontSize} fontWeight={FontWeight.medium}>
+            <Text type={TextType.pre} {fontSize} fontWeight={FontWeight.medium}>
                 {address}
             </Text>
         {/if}
diff --git a/packages/shared/components/boxes/Box.svelte b/packages/shared/components/boxes/Box.svelte
index 4dd30cc964d..9f05d1b1a67 100644
--- a/packages/shared/components/boxes/Box.svelte
+++ b/packages/shared/components/boxes/Box.svelte
@@ -1,17 +1,23 @@
 <script lang="ts">
     export let col: boolean = false
     export let row: boolean = false
-    export let backgroundColor: string = ''
-    export let centered: boolean = false
-    export let padding: string = ''
-    export let classes = ''
+    export let clearBackground: boolean = false
+    export let clearPadding: boolean = false
+    export let backgroundColor: string = 'gray-50'
+    export let darkBackgroundColor: string = 'gray-850'
+    export let classes: string = ''
 </script>
 
 <box-content
-    class="w-full flex rounded-lg {padding} {backgroundColor} {classes}"
-    class:flex-col={col}
-    class:flex-row={row}
-    class:justify-center={centered}
+    class={`
+    w-full flex rounded-lg
+    ${col ? 'flex-col' : ''}
+    ${row ? 'flex-row' : ''}
+    ${clearPadding ? '' : 'px-4 py-4'}
+    ${backgroundColor && !clearBackground ? 'bg-' + backgroundColor : ''}  
+    ${darkBackgroundColor && !clearBackground ? 'dark:bg-' + darkBackgroundColor : ''}
+    ${classes}
+`}
 >
     <slot />
 </box-content>
diff --git a/packages/shared/components/boxes/CopyableBox.svelte b/packages/shared/components/boxes/CopyableBox.svelte
index fb837b55aa4..aca769c5212 100644
--- a/packages/shared/components/boxes/CopyableBox.svelte
+++ b/packages/shared/components/boxes/CopyableBox.svelte
@@ -7,6 +7,8 @@
 
     export let value: string = ''
     export let isCopyable: boolean = true
+    export let clearPadding: boolean = false
+    export let clearBoxPadding: boolean = false
     export let offset: number | undefined = undefined
     export let classes: string = ''
 
@@ -34,9 +36,9 @@
         type="button"
         bind:this={tooltipAnchor}
         on:click={onClick}
-        class="w-full {isCopyable ? 'cursor-pointer' : 'cursor-default'}"
+        class="{clearPadding ? '' : 'w-full'} {isCopyable ? 'cursor-pointer' : 'cursor-default'}"
     >
-        <Box {...$$restProps} {classes}>
+        <Box clearPadding={clearBoxPadding} {...$$restProps} {classes}>
             <slot />
         </Box>
     </button>
@@ -44,7 +46,7 @@
 {#if isCopyable && showTooltip}
     <InformationTooltip
         anchor={tooltipAnchor}
-        offset={offset ?? 15}
+        offset={clearPadding ? offset ?? 25 : offset ?? 15}
         size="small"
         backgroundColor="green-600"
         borderColor="green-600"
diff --git a/packages/shared/components/boxes/KeyValueBox.svelte b/packages/shared/components/boxes/KeyValueBox.svelte
index f4022e1f561..f02377e1b0f 100644
--- a/packages/shared/components/boxes/KeyValueBox.svelte
+++ b/packages/shared/components/boxes/KeyValueBox.svelte
@@ -5,10 +5,12 @@
 
     export let keyText: string = ''
     export let valueText: string = ''
-    export let textColor: string = 'text-gray-600 dark:text-gray-500'
-    export let darkTextColor: string = 'text-gray-500'
-    export let backgroundColor: string = 'bg-gray-50 dark:bg-gray-850'
+    export let textColor: string = 'gray-600'
+    export let darkTextColor: string = 'gray-500'
+    export let backgroundColor: string = 'gray-50'
+    export let darkBackgroundColor: string = 'gray-850'
     export let padding: string = 'px-4 py-2.5'
+    export let classes: string = ''
     export let copyValue: string = ''
     export let isCopyable: boolean = false
     export let tooltipText: string = ''
@@ -35,7 +37,9 @@
         row={!isVertical}
         col={isVertical}
         {backgroundColor}
-        classes="w-full overflow-hidden {padding} {isLoading ? 'animate-pulse' : ''} {outline
+        {darkBackgroundColor}
+        clearBoxPadding
+        classes="w-full overflow-hidden {padding} {classes} {isLoading ? 'animate-pulse' : ''} {outline
             ? 'border-2 border-gray-100'
             : ''}"
     >

From 3fb08cb53af43b9da5fd3424dacd5a673481761b Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Fri, 25 Aug 2023 18:39:15 +0200
Subject: [PATCH 4/5] fix: cleanup and remove backsticks

---
 packages/shared/components/boxes/Box.svelte | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/shared/components/boxes/Box.svelte b/packages/shared/components/boxes/Box.svelte
index 9f05d1b1a67..e58f004f5a0 100644
--- a/packages/shared/components/boxes/Box.svelte
+++ b/packages/shared/components/boxes/Box.svelte
@@ -9,15 +9,12 @@
 </script>
 
 <box-content
-    class={`
-    w-full flex rounded-lg
-    ${col ? 'flex-col' : ''}
-    ${row ? 'flex-row' : ''}
-    ${clearPadding ? '' : 'px-4 py-4'}
-    ${backgroundColor && !clearBackground ? 'bg-' + backgroundColor : ''}  
-    ${darkBackgroundColor && !clearBackground ? 'dark:bg-' + darkBackgroundColor : ''}
-    ${classes}
-`}
+    class="w-full flex rounded-lg
+    {clearPadding ? '' : 'px-4 py-4'}
+    {backgroundColor && !clearBackground ? 'bg-' + backgroundColor : ''}
+    {darkBackgroundColor && !clearBackground ? 'dark:bg-' + darkBackgroundColor : ''} {classes}"
+    class:flex-col={col}
+    class:flex-row={row}
 >
     <slot />
 </box-content>

From 1a3174389ca1ba14bbcef55931ef723d0c1c3cbb Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Mon, 28 Aug 2023 16:44:33 +0200
Subject: [PATCH 5/5] fix amount filter css

---
 packages/desktop/components/filter/FilterItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/desktop/components/filter/FilterItem.svelte b/packages/desktop/components/filter/FilterItem.svelte
index 9d8acd5d2f1..57a0bd42304 100644
--- a/packages/desktop/components/filter/FilterItem.svelte
+++ b/packages/desktop/components/filter/FilterItem.svelte
@@ -66,7 +66,7 @@
 
 <style lang="scss">
     filter-item {
-        :global(box) {
+        :global(box-content) {
             @apply p-2;
         }