From 46f543cd9ffc7ab94bc4fa92cca636ebbbedb529 Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <jim@deriv.com>
Date: Fri, 13 Jan 2023 10:09:43 +0800
Subject: [PATCH] chore: update currency switcher styles

---
 .../currency-switcher-container.scss          | 82 ++++++++++++-------
 .../currency-switcher-container.tsx           | 43 +++++-----
 .../demo/demo-account-card.tsx                |  2 +-
 .../real/real-account-card.tsx                |  1 +
 4 files changed, 77 insertions(+), 51 deletions(-)

diff --git a/packages/appstore/src/components/containers/currency-switcher-container.scss b/packages/appstore/src/components/containers/currency-switcher-container.scss
index 317a458d2cb5..ce5a8df882b7 100644
--- a/packages/appstore/src/components/containers/currency-switcher-container.scss
+++ b/packages/appstore/src/components/containers/currency-switcher-container.scss
@@ -1,42 +1,64 @@
-.currency-switcher-container {
-    display: inline-flex;
-    align-items: center;
-    height: 72px;
-    border: 1px solid var(--general-hover);
-    border-radius: 8px;
-    padding: 2rem 1.6rem;
-    margin-left: auto;
-    gap: 1.6rem;
-    flex-shrink: 0;
-    cursor: pointer;
-    transition: all 0.3s ease-in-out;
-
-    &--has-interaction {
-        &:hover {
-            box-shadow: 0 12px 16px -4px var(--shadow-menu), 0 4px 6px -2px var(--shadow-menu);
+.currency-switcher {
+    &__currency {
+        &--icon {
+            margin-right: 1rem;
         }
     }
-
-    @include mobile {
-        width: 100%;
+    &__button {
+        @include desktop {
+            margin-right: 1rem;
+        }
     }
 
-    &__content {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
+    &-container {
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 72px;
+        border: 1px solid var(--general-hover);
+        border-radius: 8px;
+        padding: 2rem 1.6rem;
+        margin-left: auto;
+        gap: 1.6rem;
+        flex-shrink: 0;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
 
-        &--text {
-            &--none {
-                padding-bottom: 0.5rem;
-                font-size: var(--text-size-xs);
+        &--has-interaction {
+            &:hover {
+                box-shadow: 0 12px 16px -4px var(--shadow-menu), 0 4px 6px -2px var(--shadow-menu);
             }
         }
-    }
 
-    &__arrow {
         @include mobile {
-            margin-left: 1.5rem;
+            width: 100%;
+        }
+
+        &__content {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            margin-left: 1rem;
+            &--text {
+                &--none {
+                    padding-bottom: 0.5rem;
+                    font-size: var(--text-size-xs);
+                }
+            }
+        }
+
+        &__arrow {
+            @include mobile {
+                margin-left: 1.5rem;
+            }
+        }
+        &--left {
+            display: inline-flex;
+            align-items: center;
+        }
+        &--right {
+            display: inline-flex;
+            align-items: center;
         }
     }
 }
diff --git a/packages/appstore/src/components/containers/currency-switcher-container.tsx b/packages/appstore/src/components/containers/currency-switcher-container.tsx
index a36959cc9c20..39fe998cd724 100644
--- a/packages/appstore/src/components/containers/currency-switcher-container.tsx
+++ b/packages/appstore/src/components/containers/currency-switcher-container.tsx
@@ -33,32 +33,35 @@ const CurrentSwitcherContainer = ({
             })}
             {...props}
         >
-            <CurrencyIcon icon={icon} size={32} />
-            <div
-                className={classNames(
-                    'currency-switcher-container__content',
-                    `currency-switcher-container--${document_status || 'failed' || 'pending' || 'default'}`
-                )}
-            >
+            <div className='currency-switcher-container--left'>
+                <CurrencyIcon icon={icon} size={32} className='currency-switcher__currency--icon' />
                 <div
                     className={classNames(
-                        'currency-switcher-container__content--text',
-                        `currency-switcher-container__content--text--${
-                            document_status || 'failed' || 'pending' || 'default'
-                        }`
+                        'currency-switcher-container__content',
+                        `currency-switcher-container--${document_status || 'failed' || 'pending' || 'default'}`
                     )}
                 >
-                    {title}
+                    <div
+                        className={classNames(
+                            'currency-switcher-container__content--text',
+                            `currency-switcher-container__content--text--${
+                                document_status || 'failed' || 'pending' || 'default'
+                            }`
+                        )}
+                    >
+                        {title}
+                    </div>
+                    {children}
                 </div>
-                {children}
             </div>
-
-            {actions}
-            {(has_interaction || is_eu_user) && (
-                <div className='currency-switcher-container__arrow'>
-                    <Icon icon='IcChevronDownBold' />
-                </div>
-            )}
+            <div className='currency-switcher-container--right'>
+                {actions}
+                {(has_interaction || is_eu_user) && (
+                    <div className='currency-switcher-container__arrow'>
+                        <Icon icon='IcChevronDownBold' />
+                    </div>
+                )}
+            </div>
         </div>
     );
 };
diff --git a/packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx b/packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx
index 19cbd4def6eb..6c7984381579 100644
--- a/packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx
+++ b/packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx
@@ -27,7 +27,7 @@ const DemoAccountCard = () => {
             }
             actions={
                 canResetBalance() && (
-                    <Button secondary onClick={resetVirtualBalance}>
+                    <Button secondary onClick={resetVirtualBalance} className='currency-switcher__button'>
                         {localize('Reset Balance')}
                     </Button>
                 )
diff --git a/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx b/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx
index 40b6f6052938..cb758d819d9d 100644
--- a/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx
+++ b/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx
@@ -36,6 +36,7 @@ const RealAccountCard = () => {
                         history.push(routes.cashier_deposit);
                     }}
                     secondary
+                    className='currency-switcher__button'
                 >
                     {localize('Deposit')}
                 </Button>