Merge pull request #98 from Cardinal-Cryptography/SD-106-update-logos

Author: rAskVAL

src/domains/misc/components/Layout/Layout.tsx

@@ -94,6 +94,7 @@ const BottomNavigationContainer = styled.div`
   width: 100%;
 
   background: ${vars('--color-neutral-background-2-rest')};
+  overflow: hidden;
 
   border-top: 1px solid ${vars('--color-neutral-stroke-2-rest')};
 `;

src/domains/misc/components/Layout/TopBar/Brand.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import vars from 'src/domains/styling/utils/vars';
 
-import { BRAND_CONTAINER_TITLE, BRAND_LOGO_WIDTH_DESKTOP } from './consts';
+import { BRAND_CONTAINER_TITLE, BRAND_LOGO_WIDTH_MOBILE } from './consts';
 import LogoSvg from './logo.svg?react';
 import LogoTypeSvg from './logoType.svg?react';
 
@@ -32,13 +32,13 @@ const Container = styled.div`
 const MobileLogo = styled(LogoSvg)`
   display: none;
     
-  @container ${BRAND_CONTAINER_TITLE} (max-width: ${BRAND_LOGO_WIDTH_DESKTOP}) { /* stylelint-disable-line at-rule-prelude-no-invalid */
+  @container ${BRAND_CONTAINER_TITLE} (max-width: ${BRAND_LOGO_WIDTH_MOBILE}) { /* stylelint-disable-line at-rule-prelude-no-invalid */
     display: block;
   }
 `;
 
 const DesktopLogo = styled(LogoTypeSvg)`
-  @container ${BRAND_CONTAINER_TITLE} (max-width: ${BRAND_LOGO_WIDTH_DESKTOP}) { /* stylelint-disable-line at-rule-prelude-no-invalid */
+  @container ${BRAND_CONTAINER_TITLE} (max-width: ${BRAND_LOGO_WIDTH_MOBILE}) { /* stylelint-disable-line at-rule-prelude-no-invalid */
     display: none;
   }
 `;

src/domains/misc/components/Layout/TopBar/TopBar.tsx

@@ -15,7 +15,7 @@ import Navigation from '../Navigation';
 
 import Brand from './Brand';
 import * as NavBox from './NavBox';
-import { BRAND_CONTAINER_TITLE, BRAND_LOGO_HEIGHT } from './consts';
+import { BRAND_CONTAINER_TITLE, BRAND_LOGO_HEIGHT_DESKTOP, BRAND_LOGO_HEIGHT_MOBILE } from './consts';
 import UserIcon from './userIcon.svg?react';
 
 const TopBar = () => {
@@ -70,9 +70,13 @@ export default TopBar;
 
 const StyledBrand = styled(Brand)`
   margin-left: 8px;
-  height: ${BRAND_LOGO_HEIGHT};
+  height: ${BRAND_LOGO_HEIGHT_DESKTOP};
 
   flex-shrink: 0;
+
+  @media (width <= ${BOTTOM_MENU_BREAKPOINT}) { /* stylelint-disable-line media-query-no-invalid */
+    height: ${BRAND_LOGO_HEIGHT_MOBILE};
+  }
 `;
 
 const BrandContainer = styled.div`

src/domains/misc/components/Layout/TopBar/consts.ts

@@ -1,3 +1,4 @@
 export const BRAND_CONTAINER_TITLE = 'brandcontainer';
-export const BRAND_LOGO_WIDTH_DESKTOP = '150px';
-export const BRAND_LOGO_HEIGHT = '18px';
+export const BRAND_LOGO_WIDTH_MOBILE = '175px';
+export const BRAND_LOGO_HEIGHT_DESKTOP = '39px';
+export const BRAND_LOGO_HEIGHT_MOBILE = '32px';