From ecd3f6b0f1c0e4153cbfa814e5b28df3e5af8995 Mon Sep 17 00:00:00 2001
From: BrianJiang2021 <80307788+BrianJiang2021@users.noreply.github.com>
Date: Fri, 28 Jul 2023 14:01:30 +0800
Subject: [PATCH] fix: change font size (#604)

* fix: change fontSize
https://bigc-b2b.atlassian.net/browse/BUN-1336

* fix: invoice status
---
 .../src/components/B3ProductList.tsx          | 32 +++++++++++++++++--
 apps/storefront/src/pages/invoice/Invoice.tsx |  2 +-
 .../src/pages/invoice/InvoiceItemCard.tsx     |  2 +-
 .../quickorder/components/QuickOrderCard.tsx  | 12 +++++--
 .../quote/components/QuoteDetailTableCard.tsx | 13 ++++++--
 .../pages/quote/components/QuoteTableCard.tsx | 14 ++++++--
 .../components/ShoppingDetailCard.tsx         |  6 ++++
 7 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx
index 57c329f8..fb47aca2 100644
--- a/apps/storefront/src/components/B3ProductList.tsx
+++ b/apps/storefront/src/components/B3ProductList.tsx
@@ -31,6 +31,9 @@ interface FlexItemProps {
   width?: string
   padding?: string
   textAlignLocation?: string
+  sx?: {
+    [key: string]: string | number
+  }
 }
 
 const Flex = styled('div')(({ isHeader, isMobile }: FlexProps) => {
@@ -67,7 +70,7 @@ const Flex = styled('div')(({ isHeader, isMobile }: FlexProps) => {
 })
 
 const FlexItem = styled('div')(
-  ({ width, textAlignLocation, padding = '0' }: FlexItemProps) => ({
+  ({ width, textAlignLocation, padding = '0', sx }: FlexItemProps) => ({
     display: 'flex',
     justifyContent: textAlignLocation === 'right' ? 'flex-end' : 'flex-start',
     flexGrow: width ? 0 : 1,
@@ -75,6 +78,7 @@ const FlexItem = styled('div')(
     alignItems: 'center',
     width,
     padding,
+    ...sx,
   })
 )
 
@@ -336,12 +340,29 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
               textAlignLocation={textAlign}
               padding={quantityEditable ? '10px 0 0' : ''}
               {...itemStyle.default}
+              sx={
+                isMobile
+                  ? {
+                      fontSize: '14px',
+                    }
+                  : {}
+              }
             >
               {isMobile && <span>Price:</span>}
               {`${currencyFormat(productPrice)}`}
             </FlexItem>
 
-            <FlexItem textAlignLocation={textAlign} {...itemStyle.qty}>
+            <FlexItem
+              textAlignLocation={textAlign}
+              {...itemStyle.qty}
+              sx={
+                isMobile
+                  ? {
+                      fontSize: '14px',
+                    }
+                  : {}
+              }
+            >
               {quantityEditable ? (
                 <TextField
                   type="number"
@@ -375,6 +396,13 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
               padding={quantityEditable ? '10px 0 0' : ''}
               {...itemStyle.default}
               textAlignLocation={textAlign}
+              sx={
+                isMobile
+                  ? {
+                      fontSize: '14px',
+                    }
+                  : {}
+              }
             >
               {isMobile && <span>{totalText}:</span>}
               {`${currencyFormat(
diff --git a/apps/storefront/src/pages/invoice/Invoice.tsx b/apps/storefront/src/pages/invoice/Invoice.tsx
index 9f14bf2d..6ff28b3c 100644
--- a/apps/storefront/src/pages/invoice/Invoice.tsx
+++ b/apps/storefront/src/pages/invoice/Invoice.tsx
@@ -587,7 +587,7 @@ function Invoice() {
         let code = item.status
 
         // (3, "Overdue")-【Display status when invoice exceeds due date. For front-end display only】
-        if (status !== 2 && currentDate > dueDate * 1000) {
+        if (status === 0 && currentDate > dueDate * 1000) {
           code = 3
         }
 
diff --git a/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx b/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx
index 28c9f3eb..3854384b 100644
--- a/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx
+++ b/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx
@@ -57,7 +57,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
   const currentCurrencyToken = handleGetCorrespondingCurrency(currentCode)
 
   let statusCode = item.status
-  if (status !== 2 && currentDate > dueDate * 1000) {
+  if (status === 0 && currentDate > dueDate * 1000) {
     statusCode = 3
   }
 
diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx
index a1be0210..4a1966ac 100644
--- a/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx
+++ b/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx
@@ -86,7 +86,9 @@ function QuickOrderCard(props: QuickOrderCardProps) {
             )}
           </Box>
 
-          <Typography>{`Price: ${currencyFormat(price)}`}</Typography>
+          <Typography sx={{ fontSize: '14px' }}>{`Price: ${currencyFormat(
+            price
+          )}`}</Typography>
           <Box
             sx={{
               '& label': {
@@ -108,6 +110,12 @@ function QuickOrderCard(props: QuickOrderCardProps) {
                 margin: '1rem 0',
                 width: '60%',
                 maxWidth: '100px',
+                '& label': {
+                  fontSize: '14px',
+                },
+                '& input': {
+                  fontSize: '14px',
+                },
               }}
               onChange={(e) => {
                 handleUpdateProductQty(shoppingDetail.id, e.target.value)
@@ -115,7 +123,7 @@ function QuickOrderCard(props: QuickOrderCardProps) {
             />
           </Box>
 
-          <Typography>{`Last ordered: ${displayFormat(
+          <Typography sx={{ fontSize: '14px' }}>{`Last ordered: ${displayFormat(
             lastOrderedAt
           )}`}</Typography>
         </Box>
diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailTableCard.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailTableCard.tsx
index a2bf98e7..f17b57d3 100644
--- a/apps/storefront/src/pages/quote/components/QuoteDetailTableCard.tsx
+++ b/apps/storefront/src/pages/quote/components/QuoteDetailTableCard.tsx
@@ -128,7 +128,11 @@ function QuoteDetailTableCard(props: QuoteTableCardProps) {
             {notes}
           </Typography>
 
-          <Typography>
+          <Typography
+            sx={{
+              fontSize: '14px',
+            }}
+          >
             Price:
             {isDiscount && (
               <span
@@ -153,12 +157,17 @@ function QuoteDetailTableCard(props: QuoteTableCardProps) {
           <Typography
             sx={{
               padding: '12px 0',
+              fontSize: '14px',
             }}
           >
             {`Qty: ${quantity}`}
           </Typography>
 
-          <Typography>
+          <Typography
+            sx={{
+              fontSize: '14px',
+            }}
+          >
             Total:
             {isDiscount && (
               <span
diff --git a/apps/storefront/src/pages/quote/components/QuoteTableCard.tsx b/apps/storefront/src/pages/quote/components/QuoteTableCard.tsx
index e9625d09..0511e647 100644
--- a/apps/storefront/src/pages/quote/components/QuoteTableCard.tsx
+++ b/apps/storefront/src/pages/quote/components/QuoteTableCard.tsx
@@ -135,7 +135,9 @@ function QuoteTableCard(props: QuoteTableCardProps) {
             )}
           </Box>
 
-          <Typography>{`Price: ${currencyFormat(price)}`}</Typography>
+          <Typography sx={{ fontSize: '14px' }}>{`Price: ${currencyFormat(
+            price
+          )}`}</Typography>
 
           <TextField
             size="small"
@@ -152,12 +154,20 @@ function QuoteTableCard(props: QuoteTableCardProps) {
               margin: '1rem 0',
               width: '60%',
               maxWidth: '100px',
+              '& label': {
+                fontSize: '14px',
+              },
+              '& input': {
+                fontSize: '14px',
+              },
             }}
             onChange={(e) => {
               handleUpdateProductQty(quoteTableItem, e.target.value)
             }}
           />
-          <Typography>{`Total: ${currencyFormat(total)}`}</Typography>
+          <Typography sx={{ fontSize: '14px' }}>{`Total: ${currencyFormat(
+            total
+          )}`}</Typography>
           <Box
             sx={{
               marginTop: '1rem',
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx
index 9b646439..0fbdb915 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx
@@ -147,6 +147,7 @@ function ShoppingDetailCard(props: ShoppingDetailCardProps) {
           <Typography
             sx={{
               color: '#212121',
+              fontSize: '14px',
             }}
           >
             {`Price: ${currencyFormat(price)}`}
@@ -169,6 +170,10 @@ function ShoppingDetailCard(props: ShoppingDetailCardProps) {
               maxWidth: '100px',
               '& label': {
                 zIndex: 0,
+                fontSize: '14px',
+              },
+              '& input': {
+                fontSize: '14px',
               },
             }}
             onChange={(e) => {
@@ -181,6 +186,7 @@ function ShoppingDetailCard(props: ShoppingDetailCardProps) {
           <Typography
             sx={{
               color: '#212121',
+              fontSize: '14px',
             }}
           >
             {`Total: ${currencyFormat(total)}`}