chore: added a wrapper for the logo in traders hub and scss styles (#…

…8411)
binary-com · May 12, 2023 · 96b5578 · 96b5578
1 parent 3bc96cb
commit 96b5578
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
@@ -213,7 +213,13 @@ const TradingHubHeader = ({
 
                     {header_extension && is_logged_in && <div>{header_extension}</div>}
                 </MobileWrapper>
-                <DerivBrandLogo className='trading-hub-header__logo' />
+                <div
+                    className={classNames('`trading-hub-header__logo-wrapper', {
+                        'trading-hub-header__logo-wrapper--cashier': cashier_routes,
+                    })}
+                >
+                    <DerivBrandLogo className='trading-hub-header__logo' />
+                </div>
                 <DesktopWrapper>
                     <Divider />
                     <TradersHubHomeButton is_dark_mode={is_dark_mode} />

diff --git a/packages/core/src/sass/app/_common/layout/trading-hub-header.scss b/packages/core/src/sass/app/_common/layout/trading-hub-header.scss
@@ -22,8 +22,7 @@
     }
 
     @media screen and (max-width: 380px) {
-        &__cashier-button,
-        &__logo-wrapper {
+        &__cashier-button {
             display: none;
         }
     }
@@ -34,6 +33,15 @@
         height: 4rem;
     }
 
+    &__logo-wrapper {
+        display: block;
+        @media screen and (max-width: 380px) {
+            &--cashier {
+                display: none;
+            }
+        }
+    }
+
     &__menu-left {
         display: inline-flex;
         height: #{$HEADER_HEIGHT - 1px};