fix: change font size (#604)

* fix: change fontSize https://bigc-b2b.atlassian.net/browse/BUN-1336 * fix: invoice status
bigcommerce · Jul 31, 2023 · ecd3f6b · ecd3f6b
1 parent fe3972a
commit ecd3f6b
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 10 deletions.
diff --git 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,14 +70,15 @@ 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,
     flexShrink: width ? 0 : 1,
     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
@@ -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
@@ -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
@@ -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,14 +110,20 @@ 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)
               }}
             />
           </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
@@ -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
@@ -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
@@ -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)}`}