Fix table cell padding

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