Minor fixes (#97)

* Fix letter spacing * Fix sidebar styles
saleor · Dec 14, 2021 · d694292 · d694292
1 parent 83e3f26
commit d694292
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/src/LayoutButton/styles.ts b/src/LayoutButton/styles.ts
@@ -19,7 +19,7 @@ const useStyles = makeStyles(
       fontSize: theme.typography.body1.fontSize,
       fontWeight: 500,
       height: 40,
-      letterSpacing: "0.06rem",
+      letterSpacing: "0.02rem",
       padding: theme.spacing(0.5, 2),
       textAlign: "center",
       transition: theme.transitions.duration.shorter + "ms",

diff --git a/src/Sidebar/ExpandButton.tsx b/src/Sidebar/ExpandButton.tsx
@@ -1,7 +1,7 @@
 import { ButtonProps } from "@material-ui/core/Button";
 import clsx from "clsx";
 import React from "react";
-import { ArrowRightIcon } from "../icons";
+import { ChevronIcon } from "../icons";
 
 import { SquareButton } from "../SquareButton";
 import { makeStyles } from "../theme";
@@ -10,9 +10,10 @@ const useStyles = makeStyles(
   (theme) => ({
     arrow: {
       transition: theme.transitions.duration.shortest + "ms",
+      transform: "rotate(-90deg)",
     },
     shrunk: {
-      transform: "scaleX(-1)",
+      transform: "rotate(-90deg) scaleY(-1)",
     },
   }),
   {
@@ -32,7 +33,7 @@ export const ExpandButton: React.FC<ExpandButtonProps> = ({
 
   return (
     <SquareButton disableRipple {...rest}>
-      <ArrowRightIcon
+      <ChevronIcon
         className={clsx(classes.arrow, {
           [classes.shrunk]: !isShrunk,
         })}

diff --git a/src/Sidebar/MenuItem.tsx b/src/Sidebar/MenuItem.tsx
@@ -46,7 +46,7 @@ const useStyles = makeStyles(
     },
     labelRoot: {
       position: "absolute",
-      left: 72,
+      left: 60,
       width: 200,
       textAlign: "left",
       pointerEvents: "none",

diff --git a/src/theme/createSaleorTheme/createSaleorTheme.tsx b/src/theme/createSaleorTheme/createSaleorTheme.tsx
@@ -257,6 +257,9 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme =>
         icon: <CheckboxIcon />,
         indeterminateIcon: <CheckboxIndeterminateIcon />,
       },
+      MuiMenuItem: {
+        button: false,
+      },
       MuiTableRow: {
         hover: true,
       },

diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts
@@ -55,7 +55,7 @@ export const buttonOverrides = (colors: SaleorThemeColors): Overrides => {
         border: `1px solid ${colors.active[1]}`,
         borderRadius: 4,
         fontSize: "1.6rem",
-        letterSpacing: "0.06rem",
+        letterSpacing: "0.02rem",
         lineHeight: 1.55,
         padding: "7px 16px",
         textTransform: "none",