Merge pull request binary-com#134 from jim-deriv/Jim/85796/currency-s…

…witcher-does-not-follow-the-design Jim/85796/currency switcher does not follow the design
jim-deriv · Jan 13, 2023 · cb7676e · cb7676e
2 parents 4ff0eaf + ade90dc
commit cb7676e
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 47 deletions.
diff --git 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
@@ -55,28 +55,31 @@ 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}
-            <Dropdown />
+            <div className='currency-switcher-container--right'>
+                {actions}
+                <Dropdown />
+            </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
@@ -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
@@ -49,6 +49,7 @@ const RealAccountCard = () => {
                         history.push(routes.cashier_deposit);
                     }}
                     secondary
+                    className='currency-switcher__button'
                 >
                     {localize('Deposit')}
                 </Button>