Repository: mirumee/saleor-dashboard
Pull request #143 (2019-09-02 08:47:25)

Fix table cell padding
I want to merge this change because it prepares ground for the table sorting.

### Pull Request Checklist

<!-- Please keep this section. It will make maintainer's life easier. -->

1. [x] All visible strings are translated with proper context.
1. [x] All data-formatting is locale-aware (dates, numbers, and so on).
1. [x] Translated strings are extracted to `.pot` file.
1. [x] Number of API calls is optimized.
1. [x] The changes are tested.
1. [x] Type definitions are up to date.
1. [x] Changes are mentioned in the changelog.



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 77362c6c6..aa1cfa460 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,3 +13,4 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add dynamic dashboard settings - #135 by @benekex2
 - Fix plugins page translations - #141 by @benekex2
 - Add attributes to column picker - #136 by @dominik-zeglen
+- Fix table cell padding - #143 by @dominik-zeglen
diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx
index d3edbcf6e..715a2badb 100644
--- a/src/attributes/components/AttributeList/AttributeList.tsx
+++ b/src/attributes/components/AttributeList/AttributeList.tsx
@@ -46,7 +46,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   colSearchable: {
     textAlign: "center"
   },
-  colSlug: {},
+  colSlug: {
+    paddingLeft: 0
+  },
   colVisible: {
     textAlign: "center"
   },
diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx
index ff5763b18..3690c39ea 100644
--- a/src/collections/components/CollectionList/CollectionList.tsx
+++ b/src/collections/components/CollectionList/CollectionList.tsx
@@ -28,7 +28,9 @@ const styles = (theme: Theme) =>
       colAvailability: {
         width: 240
       },
-      colName: {},
+      colName: {
+        paddingLeft: 0
+      },
       colProducts: {
         width: 240
       }
diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx
index 2fb889616..8cc81be9f 100644
--- a/src/collections/components/CollectionProducts/CollectionProducts.tsx
+++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx
@@ -35,9 +35,10 @@ const styles = (theme: Theme) =>
       "&:last-child": {
         paddingRight: 0
       },
-      width: 48 + theme.spacing.unit / 2
+      width: 76 + theme.spacing.unit / 2
     },
     colName: {
+      paddingLeft: 0,
       width: "auto"
     },
     colNameLabel: {
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 255741583..fe8ee4613 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -45,6 +45,7 @@ const styles = createStyles({
     overflowY: "scroll"
   },
   wideCell: {
+    paddingLeft: 0,
     width: "100%"
   }
 });
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index 3d3251203..a0d91d610 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/src/components/ProductList/ProductList.tsx
@@ -59,7 +59,8 @@ const styles = (theme: Theme) =>
     colName: {
       "&$colNameFixed": {
         width: 250
-      }
+      },
+      paddingLeft: 0
     },
     colNameFixed: {},
     colNameHeader: {
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
index 2989dae10..8dbf5060f 100644
--- a/src/components/Timeline/Timeline.tsx
+++ b/src/components/Timeline/Timeline.tsx
@@ -21,7 +21,7 @@ const styles = (theme: Theme) =>
         width: "100%"
       },
       alignSelf: "flex-start",
-      marginRight: theme.spacing.unit * 5.5
+      marginRight: 28
     },
     cardActionsExpanded: {
       maxHeight: theme.spacing.unit * 6
@@ -41,7 +41,8 @@ const styles = (theme: Theme) =>
       },
       alignItems: "center",
       background: theme.palette.background.default,
-      display: "flex"
+      display: "flex",
+      paddingLeft: theme.spacing.unit * 3
     },
     root: {
       borderColor: theme.overrides.MuiCard.root.borderColor,
diff --git a/src/customers/components/CustomerList/CustomerList.tsx b/src/customers/components/CustomerList/CustomerList.tsx
index 084825438..67b3622dd 100644
--- a/src/customers/components/CustomerList/CustomerList.tsx
+++ b/src/customers/components/CustomerList/CustomerList.tsx
@@ -31,7 +31,9 @@ const styles = (theme: Theme) =>
       }
     },
     colEmail: {},
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     colOrders: {
       textAlign: "center"
     },
diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
index a39a1ba4c..bb3ec90e2 100644
--- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx
+++ b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
@@ -42,9 +42,10 @@ const styles = (theme: Theme) =>
       "&:last-child": {
         paddingRight: 0
       },
-      width: 48 + theme.spacing.unit / 2
+      width: 76 + theme.spacing.unit / 2
     },
     colName: {
+      paddingLeft: 0,
       width: "auto"
     },
     colNameLabel: {
diff --git a/src/discounts/components/SaleList/SaleList.tsx b/src/discounts/components/SaleList/SaleList.tsx
index 7f07d9d64..5f0a7bb80 100644
--- a/src/discounts/components/SaleList/SaleList.tsx
+++ b/src/discounts/components/SaleList/SaleList.tsx
@@ -47,7 +47,9 @@ const styles = (theme: Theme) =>
     colEnd: {
       textAlign: "right"
     },
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     colStart: {
       textAlign: "right"
     },
diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx
index 5c30a56c1..50b4eaff7 100644
--- a/src/discounts/components/VoucherList/VoucherList.tsx
+++ b/src/discounts/components/VoucherList/VoucherList.tsx
@@ -56,7 +56,9 @@ const styles = (theme: Theme) =>
     colMinSpent: {
       textAlign: "right"
     },
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     colStart: {
       textAlign: "right"
     },
diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
index 21e3ad6c9..6b5964d18 100644
--- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx
+++ b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
@@ -29,8 +29,12 @@ const styles = (theme: Theme) =>
     },
     avatarSpacing: {
       paddingBottom: theme.spacing.unit * 2,
+      paddingRight: theme.spacing.unit,
       paddingTop: theme.spacing.unit * 2
     },
+    label: {
+      paddingLeft: 0
+    },
     noProducts: {
       paddingBottom: 20,
       paddingTop: 20
@@ -81,7 +85,7 @@ export const HomeProductList = withStyles(styles, { name: "HomeProductList" })(
                     avatarProps={classes.avatarProps}
                   />
 
-                  <TableCell>
+                  <TableCell className={classes.label}>
                     {variant ? (
                       <>
                         <Typography color={"primary"}>
diff --git a/src/icons/ArrowSort.tsx b/src/icons/ArrowSort.tsx
new file mode 100644
index 000000000..8fd77f548
--- /dev/null
+++ b/src/icons/ArrowSort.tsx
@@ -0,0 +1,16 @@
+import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
+import React from "react";
+
+export const ArrowSort = createSvgIcon(
+  <>
+    <rect width="24" height="24" fill="transparent" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
+      fill="currentColor"
+    />
+  </>
+);
+ArrowSort.displayName = "ArrowSort";
+export default ArrowSort;
diff --git a/src/navigation/components/MenuList/MenuList.tsx b/src/navigation/components/MenuList/MenuList.tsx
index 423efcc0f..3bb49f988 100644
--- a/src/navigation/components/MenuList/MenuList.tsx
+++ b/src/navigation/components/MenuList/MenuList.tsx
@@ -39,7 +39,9 @@ const styles = (theme: Theme) =>
     colItems: {
       textAlign: "right"
     },
-    colTitle: {},
+    colTitle: {
+      paddingLeft: 0
+    },
     row: {
       cursor: "pointer"
     }
@@ -88,6 +90,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
               id="menuListItems"
             />
           </TableCell>
+          <TableCell />
         </TableHead>
         <TableFooter>
           <TableRow>
diff --git a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
index 099469372..5d0a40c47 100644
--- a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
+++ b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
@@ -36,7 +36,7 @@ const styles = (theme: Theme) =>
       "&:last-child": {
         paddingRight: 0
       },
-      width: 48 + theme.spacing.unit / 2
+      width: 76 + theme.spacing.unit / 2
     },
     colName: {
       width: "auto"
diff --git a/src/orders/components/OrderDraftList/OrderDraftList.tsx b/src/orders/components/OrderDraftList/OrderDraftList.tsx
index 70946e36d..75203ec14 100644
--- a/src/orders/components/OrderDraftList/OrderDraftList.tsx
+++ b/src/orders/components/OrderDraftList/OrderDraftList.tsx
@@ -43,7 +43,9 @@ const styles = (theme: Theme) =>
     },
     colCustomer: {},
     colDate: {},
-    colNumber: {},
+    colNumber: {
+      paddingLeft: 0
+    },
     colTotal: {
       textAlign: "right"
     },
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index c68b19c2b..e507de50f 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -39,6 +39,12 @@ const styles = (theme: Theme) =>
     avatar: {
       paddingLeft: 0
     },
+    colName: {
+      paddingLeft: 0
+    },
+    colVariantCheckbox: {
+      padding: 0
+    },
     content: {
       overflowY: "scroll"
     },
@@ -259,7 +265,7 @@ const OrderProductAddDialog = withStyles(styles, {
                           className={classes.avatar}
                           thumbnail={maybe(() => product.thumbnail.url)}
                         />
-                        <TableCell className={classes.wideCell} colSpan={2}>
+                        <TableCell className={classes.colName} colSpan={2}>
                           {maybe(() => product.name)}
                         </TableCell>
                       </TableRow>
@@ -267,7 +273,7 @@ const OrderProductAddDialog = withStyles(styles, {
                         (variant, variantIndex) => (
                           <TableRow key={variant.id}>
                             <TableCell />
-                            <TableCell>
+                            <TableCell className={classes.colVariantCheckbox}>
                               <Checkbox
                                 className={classes.variantCheckbox}
                                 checked={
@@ -288,7 +294,7 @@ const OrderProductAddDialog = withStyles(styles, {
                                 }
                               />
                             </TableCell>
-                            <TableCell>
+                            <TableCell className={classes.colName}>
                               <div>{variant.name}</div>
                               <div className={classes.grayText}>
                                 <FormattedMessage
diff --git a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
index 147f578a6..c0ff1a313 100644
--- a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
+++ b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
@@ -25,6 +25,7 @@ const styles = createStyles({
     cursor: "pointer"
   },
   colName: {
+    paddingLeft: 0,
     width: "auto"
   },
   colNameLabel: {
diff --git a/src/pages/components/PageList/PageList.tsx b/src/pages/components/PageList/PageList.tsx
index 7af2fa53d..89e283529 100644
--- a/src/pages/components/PageList/PageList.tsx
+++ b/src/pages/components/PageList/PageList.tsx
@@ -38,7 +38,9 @@ const styles = (theme: Theme) =>
       }
     },
     colSlug: {},
-    colTitle: {},
+    colTitle: {
+      paddingLeft: 0
+    },
     colVisibility: {},
     link: {
       cursor: "pointer"
diff --git a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
index afb28f5b6..5ba7d21d3 100644
--- a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
+++ b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
@@ -33,7 +33,9 @@ const styles = (theme: Theme) =>
         width: 300
       }
     },
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     colTax: {},
     colType: {},
     link: {
diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
index 7d198b50d..4d4915cb1 100644
--- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
+++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
@@ -23,6 +23,10 @@ import { ProductVariantDetails_productVariant } from "../../types/ProductVariant
 
 const styles = (theme: Theme) =>
   createStyles({
+    colName: {
+      paddingLeft: 0,
+      textAlign: [["left"], "!important"] as any
+    },
     link: {
       cursor: "pointer"
     },
@@ -37,9 +41,6 @@ const styles = (theme: Theme) =>
         width: 2
       },
       position: "relative"
-    },
-    textLeft: {
-      textAlign: [["left"], "!important"] as any
     }
   });
 
@@ -92,7 +93,7 @@ const ProductVariantNavigation = withStyles(styles, {
                     fallbackThumbnail
                   )}
                 />
-                <TableCell className={classes.textLeft}>
+                <TableCell className={classes.colName}>
                   {variant ? variant.name || variant.sku : <Skeleton />}
                 </TableCell>
               </TableRow>
@@ -114,7 +115,7 @@ const ProductVariantNavigation = withStyles(styles, {
                   className={classes.tabActive}
                   thumbnail={null}
                 />
-                <TableCell className={classes.textLeft}>
+                <TableCell className={classes.colName}>
                   <FormattedMessage
                     defaultMessage="New Variant"
                     description="variant name"
diff --git a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
index 779383bda..aaf1001d4 100644
--- a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
+++ b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
@@ -45,7 +45,9 @@ const styles = (theme: Theme) =>
       width: ICONBUTTON_SIZE + theme.spacing.unit / 2
     },
     colCountries: {},
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     row: {
       cursor: "pointer"
     }
diff --git a/src/theme.ts b/src/theme.ts
index 890e3a0dd..24666c790 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -270,8 +270,7 @@ export default (colors: IThemeColors): Theme =>
           paddingTop: 8
         },
         head: {
-          fontSize: ".875rem",
-          fontWeight: 400
+          fontSize: ".875rem"
         },
         paddingCheckbox: {
           "&:first-child": {
@@ -292,7 +291,7 @@ export default (colors: IThemeColors): Theme =>
           },
           borderBottomColor: colors.paperBorder,
           height: 56,
-          padding: "4px 24px 4px 0"
+          padding: "4px 24px"
         }
       },
       MuiTableRow: {


Test patch:
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 484755290..1abd81848 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -46674,7 +46674,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeProductList-label-id"
                 >
                   <p
                     class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
@@ -47401,7 +47401,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                   </div>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id HomeProductList-label-id"
                 >
                   <span
                     class="Skeleton-skeleton-id"
@@ -49050,6 +49050,10 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
             >
               Items
             </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            />
           </tr>
         </thead>
         <tfoot
@@ -49388,6 +49392,10 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
             >
               Items
             </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            />
           </tr>
         </thead>
         <tfoot
@@ -49661,6 +49669,10 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
             >
               Items
             </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id"
+              scope="col"
+            />
           </tr>
         </thead>
         <tfoot
@@ -82515,7 +82527,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     New Variant
                   </td>
@@ -82942,7 +82954,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Cordoba Oro
                   </td>
@@ -82970,7 +82982,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     silver
                   </td>
@@ -83024,7 +83036,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     New Variant
                   </td>
@@ -83462,7 +83474,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     <span
                       class="Skeleton-skeleton-id"
@@ -83520,7 +83532,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     New Variant
                   </td>
@@ -83890,7 +83902,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Cordoba Oro
                   </td>
@@ -83918,7 +83930,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     silver
                   </td>
@@ -83972,7 +83984,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     New Variant
                   </td>
@@ -95477,7 +95489,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Extended Hard
                   </td>
@@ -95505,7 +95517,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Extended Soft
                   </td>
@@ -95533,7 +95545,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Normal Hard
                   </td>
@@ -95561,7 +95573,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Normal Soft
                   </td>
@@ -96160,7 +96172,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Extended Hard
                   </td>
@@ -96188,7 +96200,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Extended Soft
                   </td>
@@ -96216,7 +96228,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Normal Hard
                   </td>
@@ -96244,7 +96256,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     Normal Soft
                   </td>
@@ -96849,7 +96861,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                     </div>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                   >
                     <span
                       class="Skeleton-skeleton-id"