fix: page layout and change title size

bigcommerce · Mar 17, 2023 · 1ee4418 · 1ee4418
1 parent 51cad65
commit 1ee4418
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 9 deletions.
diff --git a/apps/storefront/src/components/layout/B3Mainheader.tsx b/apps/storefront/src/components/layout/B3Mainheader.tsx
@@ -95,7 +95,7 @@ export const B3Mainheader = ({
           sx={{
             height: '40px',
             m: '0',
-            fontSize: '32px',
+            fontSize: '34px',
             fontWeight: 400,
             lineHeight: '42px',
             display: 'flex',

diff --git a/apps/storefront/src/hooks/useRegisteredbctob2b.ts b/apps/storefront/src/hooks/useRegisteredbctob2b.ts
@@ -1,7 +1,7 @@
 import {
-  useEffect,
   SetStateAction,
   Dispatch,
+  useCallback,
 } from 'react'
 
 import {
@@ -14,6 +14,10 @@ import type {
 
 import globalB3 from '@b3/global-b3'
 
+import {
+  useMutationObservable,
+} from '@b3/hooks'
+
 const useRegisteredbctob2b = (setOpenPage: Dispatch<SetStateAction<OpenPageState>>, isB2BUser: boolean, customerId:number | string) => {
   const b3Lang = useB3Lang()
 
@@ -28,8 +32,8 @@ const useRegisteredbctob2b = (setOpenPage: Dispatch<SetStateAction<OpenPageState
     return convertB2BNavNode
   }
 
-  useEffect(() => {
-    if (!isB2BUser && customerId) {
+  const cd = useCallback(() => {
+    if (!isB2BUser && customerId && document.querySelector(globalB3['dom.navUserLoginElement'])) {
       // already exist
       if (document.querySelector('.navUser-item.navUser-convert-b2b')) {
         return
@@ -52,6 +56,8 @@ const useRegisteredbctob2b = (setOpenPage: Dispatch<SetStateAction<OpenPageState
       document.querySelector('.navUser-item.navUser-convert-b2b')?.remove()
     }
   }, [isB2BUser, customerId])
+
+  useMutationObservable(document.documentElement, cd)
 }
 
 export {

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
@@ -31,6 +31,7 @@ interface OrderCheckboxProductProps {
   getProductQuantity?: (item: EditableProductItem) => number
   onProductChange?: (products: EditableProductItem[]) => void
   setCheckedArr?: (items: number[]) => void
+  textAlign?: string,
 }
 
 interface FlexProps {
@@ -43,6 +44,7 @@ interface FlexItemProps {
   padding?: string,
   flexBasis?: string,
   minHeight?: string,
+  textAlignLocation?: string,
 }
 
 const Flex = styled('div')(({
@@ -82,11 +84,13 @@ const FlexItem = styled('div')(({
   width,
   padding = '0',
   flexBasis,
+  textAlignLocation,
 }: FlexItemProps) => ({
   display: 'flex',
   flexGrow: width ? 0 : 1,
   flexShrink: width ? 0 : 1,
   alignItems: 'flex-start',
+  justifyContent: textAlignLocation === 'right' ? 'flex-end' : 'flex-start',
   flexBasis,
   width,
   padding,
@@ -137,6 +141,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
     getProductQuantity = (item) => item.editQuantity,
     onProductChange = () => {},
     setCheckedArr = () => {},
+    textAlign = 'right',
   } = props
 
   const [isMobile] = useMobile()
@@ -220,13 +225,22 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
           <FlexItem flexBasis="100px">
             <ProductHead>Product</ProductHead>
           </FlexItem>
-          <FlexItem {...itemStyle.default}>
+          <FlexItem
+            textAlignLocation={textAlign}
+            {...itemStyle.default}
+          >
             <ProductHead>Price</ProductHead>
           </FlexItem>
-          <FlexItem {...itemStyle.qty}>
+          <FlexItem
+            textAlignLocation={textAlign}
+            {...itemStyle.qty}
+          >
             <ProductHead>Qty</ProductHead>
           </FlexItem>
-          <FlexItem {...itemStyle.default}>
+          <FlexItem
+            textAlignLocation={textAlign}
+            {...itemStyle.default}
+          >
             <ProductHead>Cost</ProductHead>
           </FlexItem>
         </Flex>
@@ -289,13 +303,17 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
               </Box>
             </FlexItem>
             <FlexItem
+              textAlignLocation={textAlign}
               padding="10px 0 0"
               {...itemStyle.default}
             >
               {isMobile && <span>Price: </span>}
               {`${currencyInfo.currency_token} ${getProductPrice(product.base_price)}`}
             </FlexItem>
-            <FlexItem {...itemStyle.qty}>
+            <FlexItem
+              textAlignLocation={textAlign}
+              {...itemStyle.qty}
+            >
               <TextField
                 type="number"
                 variant="filled"
@@ -318,6 +336,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
               />
             </FlexItem>
             <FlexItem
+              textAlignLocation={textAlign}
               padding="10px 0 0"
               {...itemStyle.default}
             >

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderShipping.tsx b/apps/storefront/src/pages/orderDetail/components/OrderShipping.tsx
@@ -199,6 +199,7 @@ export const OrderShipping = () => {
                         currency={currency}
                         totalText="Cost"
                         canToProduct
+                        textAlign="right"
                       />
                     </Fragment>
                   ) : <></>

diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx
@@ -649,7 +649,7 @@ const QuoteDraft = ({
             <Typography
               component="h3"
               sx={{
-                fontSize: '32px',
+                fontSize: '34px',
                 mr: '1rem',
                 mb: `${isMobile ? '1rem' : '0'}`,
               }}

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx
@@ -215,6 +215,7 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
               <ProductTable
                 products={productList}
                 quantityEditable
+                textAlign="right"
                 onProductQuantityChange={onProductQuantityChange}
                 renderAction={(product) => (
                   <ProductTableAction