Fix table cell padding

2019-09-02 10:44:26 +02:00 · 2019-09-02 10:44:26 +02:00 · 585cd25332
commit 585cd25332
parent 94eeca32f2
22 changed files with 81 additions and 28 deletions
--- 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"
  },
--- 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
      }
--- 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: {
--- 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%"
  }
 });
--- 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: {
--- 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,
--- 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"
    },
--- 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: {
--- 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"
    },
--- 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"
    },
--- 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"}>
--- a/src/icons/ArrowSort.tsx
+++ 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;
--- 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>
--- 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"
--- 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"
    },
--- 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
--- 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: {
--- 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"
--- 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: {
--- 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"
--- 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"
    }
--- 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: {