fix: design top line of side menu should be alligned with top line of…

… page header (#950) * fix: design top line of side menu should be alligned with top line of page header https://bigc-b2b.atlassian.net/browse/BUN-2063
bigcommerce · Mar 5, 2024 · 1ed88ce · 1ed88ce
1 parent e64ef56
commit 1ed88ce
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 20 deletions.
diff --git a/apps/storefront/src/components/layout/B3Layout.tsx b/apps/storefront/src/components/layout/B3Layout.tsx
@@ -156,11 +156,9 @@ export default function B3Layout({ children }: { children: ReactNode }) {
             <CompanyCredit />
             <Box
               component="main"
-              sx={
-                {
-                  // flexGrow: 1,
-                }
-              }
+              sx={{
+                mt: !isMobile && !title ? '24px' : '0',
+              }}
             >
               {children}
             </Box>

diff --git a/apps/storefront/src/components/layout/B3Logo.tsx b/apps/storefront/src/components/layout/B3Logo.tsx
@@ -31,17 +31,29 @@ export default function B3Logo() {
 
   return (
     <Box
-      sx={{
-        flexShrink: '0',
-        height: 'auto',
-        width: `${isMobile ? '45%' : '100%'}`,
-        '& img': {
-          width: '100%',
-          height: '100%',
-          objectFit: 'contain',
-        },
-        display: 'contents',
-      }}
+      sx={
+        isMobile
+          ? {
+              flexShrink: '0',
+              height: 'auto',
+              width: '45%',
+              display: 'contents',
+              '& img': {
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+              },
+            }
+          : {
+              width: '100%',
+              height: '64px',
+              '& img': {
+                width: '100%',
+                maxHeight: '64px',
+                objectFit: 'contain',
+              },
+            }
+      }
     >
       <ImageListItem
         sx={{

diff --git a/apps/storefront/src/components/layout/B3Mainheader.tsx b/apps/storefront/src/components/layout/B3Mainheader.tsx
@@ -4,6 +4,7 @@ import { CallbackKey, useCallbacks } from '@b3/hooks'
 import { useB3Lang } from '@b3/lang'
 import { Box, Button, Typography } from '@mui/material'
 
+import useMobile from '@/hooks/useMobile'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { store } from '@/store'
@@ -21,6 +22,7 @@ export default function B3Mainheader({ title }: { title: string }) {
   const { global } = store.getState()
   const navigate = useNavigate()
   const b3Lang = useB3Lang()
+  const [isMobile] = useMobile()
 
   const {
     state: {
@@ -149,7 +151,8 @@ export default function B3Mainheader({ title }: { title: string }) {
             lineHeight: '42px',
             display: 'flex',
             alignItems: 'end',
-            mb: '8px',
+            mb: '24px',
+            mt: isMobile ? 0 : '24px',
             color: customColor,
           }}
         >

diff --git a/apps/storefront/src/components/layout/B3MobileLayout.tsx b/apps/storefront/src/components/layout/B3MobileLayout.tsx
@@ -98,7 +98,7 @@ export default function B3MobileLayout({
         sx={{
           p: 0,
           m: 0,
-          mb: '2vw',
+          mb: '6vw',
           fontSize: '34px',
           fontWeight: '400',
           color: customColor || '#263238',

diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx
@@ -671,7 +671,13 @@ function QuoteDraft({ setOpenPage }: QuoteDraftProps) {
                 marginRight: '0.5rem',
               }}
             />
-            <p>{backText()}</p>
+            <p
+              style={{
+                margin: '0',
+              }}
+            >
+              {backText()}
+            </p>
           </Box>
         </Box>
         <Box

diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx
@@ -101,6 +101,7 @@ function QuoteDetailHeader(props: QuoteDetailHeaderProps) {
             <p
               style={{
                 color: primaryColor,
+                margin: '0',
               }}
             >
               {b3Lang('quoteDetail.header.backToQuoteLists')}

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailHeader.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailHeader.tsx
@@ -109,7 +109,7 @@ function ShoppingDetailHeader(props: ShoppingDetailHeaderProps) {
             sx={{
               margin: 0,
               color: customColor,
-              m: '16px 0',
+              m: '0',
             }}
           >
             {openAPPParams.shoppingListBtn !== 'add'