Merge pull request #143 from mirumee/fix/table-cell-padding

Fix table cell padding

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

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"
   },

src/collections/components/CollectionList/CollectionList.tsx

@@ -28,7 +28,9 @@ const styles = (theme: Theme) =>
       colAvailability: {
         width: 240
       },
-      colName: {},
+      colName: {
+        paddingLeft: 0
+      },
       colProducts: {
         width: 240
       }

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: {

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -45,6 +45,7 @@ const styles = createStyles({
     overflowY: "scroll"
   },
   wideCell: {
+    paddingLeft: 0,
     width: "100%"
   }
 });

src/components/ProductList/ProductList.tsx

@@ -59,7 +59,8 @@ const styles = (theme: Theme) =>
     colName: {
       "&$colNameFixed": {
         width: 250
-      }
+      },
+      paddingLeft: 0
     },
     colNameFixed: {},
     colNameHeader: {

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,

src/customers/components/CustomerList/CustomerList.tsx

@@ -31,7 +31,9 @@ const styles = (theme: Theme) =>
       }
     },
     colEmail: {},
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     colOrders: {
       textAlign: "center"
     },

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: {

src/discounts/components/SaleList/SaleList.tsx

@@ -47,7 +47,9 @@ const styles = (theme: Theme) =>
     colEnd: {
       textAlign: "right"
     },
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     colStart: {
       textAlign: "right"
     },

src/discounts/components/VoucherList/VoucherList.tsx

@@ -56,7 +56,9 @@ const styles = (theme: Theme) =>
     colMinSpent: {
       textAlign: "right"
     },
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     colStart: {
       textAlign: "right"
     },

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"}>

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;

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>

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"

src/orders/components/OrderDraftList/OrderDraftList.tsx

@@ -43,7 +43,9 @@ const styles = (theme: Theme) =>
     },
     colCustomer: {},
     colDate: {},
-    colNumber: {},
+    colNumber: {
+      paddingLeft: 0
+    },
     colTotal: {
       textAlign: "right"
     },

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

src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx

@@ -25,6 +25,7 @@ const styles = createStyles({
     cursor: "pointer"
   },
   colName: {
+    paddingLeft: 0,
     width: "auto"
   },
   colNameLabel: {

src/pages/components/PageList/PageList.tsx

@@ -38,7 +38,9 @@ const styles = (theme: Theme) =>
       }
     },
     colSlug: {},
-    colTitle: {},
+    colTitle: {
+      paddingLeft: 0
+    },
     colVisibility: {},
     link: {
       cursor: "pointer"

src/productTypes/components/ProductTypeList/ProductTypeList.tsx

@@ -33,7 +33,9 @@ const styles = (theme: Theme) =>
         width: 300
       }
     },
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     colTax: {},
     colType: {},
     link: {

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"

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"
     }

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"

src/theme.ts

@@ -270,8 +270,7 @@ export default (colors: IThemeColors): Theme =>
           paddingTop: 8
         },
         head: {
-          fontSize: ".875rem",
+          fontSize: ".875rem"
-          fontWeight: 400
         },
         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: {