From 1ed88ce702e18b7a1261aa357b3f80d1ff494002 Mon Sep 17 00:00:00 2001
From: BrianJiang2021 <80307788+BrianJiang2021@users.noreply.github.com>
Date: Thu, 29 Feb 2024 14:10:33 +0800
Subject: [PATCH] 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
---
 .../src/components/layout/B3Layout.tsx        |  8 ++---
 .../src/components/layout/B3Logo.tsx          | 34 +++++++++++++------
 .../src/components/layout/B3Mainheader.tsx    |  5 ++-
 .../src/components/layout/B3MobileLayout.tsx  |  2 +-
 .../storefront/src/pages/quote/QuoteDraft.tsx |  8 ++++-
 .../quote/components/QuoteDetailHeader.tsx    |  1 +
 .../components/ShoppingDetailHeader.tsx       |  2 +-
 7 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/apps/storefront/src/components/layout/B3Layout.tsx b/apps/storefront/src/components/layout/B3Layout.tsx
index b93454c8..f1b8eb88 100644
--- 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
index 506aa959..54eedde2 100644
--- 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
index d8d9a082..6447c238 100644
--- 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
index 23910085..f8d6438e 100644
--- 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
index fb7b7511..313c41a8 100644
--- 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
index 4e7e82cb..f5bb7d05 100644
--- 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
index 91e72dc0..9b82cd0a 100644
--- 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'