fix: update shopping list details style

bigcommerce · Jan 6, 2023 · 6b93818 · 6b93818
1 parent 57789df
commit 6b93818
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx
@@ -433,8 +433,11 @@ export const ReAddToCart = (props: ShoppingProductsProps) => {
                             {
                               newOptionList.length > 0 && optionsValue.length > 0 && optionsValue.map((option: CustomFieldItems) => (
                                 <Typography
-                                  variant="body1"
-                                  color="#616161"
+                                  sx={{
+                                    fontSize: '0.75rem',
+                                    lineHeight: '1.5',
+                                    color: '#455A64',
+                                  }}
                                   key={option.valueLabel}
                                 >
                                   {`${option.valueLabel

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx
@@ -111,8 +111,18 @@ const ShoppingDetailCard = (props: ShoppingDetailCardProps) => {
             flex: 1,
           }}
         >
-          <Typography>{productName}</Typography>
-          <Typography>{variantSku}</Typography>
+          <Typography
+            variant="body1"
+            color="#212121"
+          >
+            {productName}
+          </Typography>
+          <Typography
+            variant="body1"
+            color="#616161"
+          >
+            {variantSku}
+          </Typography>
           <Box
             sx={{
               margin: '1rem 0',
@@ -123,7 +133,14 @@ const ShoppingDetailCard = (props: ShoppingDetailCardProps) => {
                 <Box>
                   {
                     optionsValue.map((option: any) => (
-                      <Typography key={option.valueLabel}>
+                      <Typography
+                        sx={{
+                          fontSize: '0.75rem',
+                          lineHeight: '1.5',
+                          color: '#455A64',
+                        }}
+                        key={option.valueLabel}
+                      >
                         {`${option.valueLabel
                         }: ${option.valueText}`}
                       </Typography>

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx
@@ -139,6 +139,11 @@ const ShoppingDetailFooter = (props: ShoppingDetailFooterProps) => {
         skus.push(node.variantSku)
       })
 
+      if (skus.length === 0) {
+        snackbar.error('Please select at least one item to add to cart')
+        return
+      }
+
       const getInventoryInfos = await getB2BVariantInfoBySkus({
         skus,
       })

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
@@ -331,14 +331,31 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
               loading="lazy"
             />
             <Box>
-              <Typography>{row.productName}</Typography>
-              <Typography>{row.variantSku}</Typography>
+              <Typography
+                variant="body1"
+                color="#212121"
+              >
+                {row.productName}
+              </Typography>
+              <Typography
+                variant="body1"
+                color="#616161"
+              >
+                {row.variantSku}
+              </Typography>
               {
                 (optionList.length > 0 && optionsValue.length > 0) && (
                   <Box>
                     {
                       optionsValue.map((option: any) => (
-                        <Typography key={option.valueLabel}>
+                        <Typography
+                          sx={{
+                            fontSize: '0.75rem',
+                            lineHeight: '1.5',
+                            color: '#455A64',
+                          }}
+                          key={option.valueLabel}
+                        >
                           {`${option.valueLabel
                           }: ${option.valueText}`}
                         </Typography>