Merge pull request #68 from saleor/SALEOR-4623-update-logo-styles

Update logo styles
saleor · Oct 18, 2021 · b7db1ec · b7db1ec
2 parents ac5dc18 + 81053ea
commit b7db1ec
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 11 deletions.
diff --git a/src/Sidebar/Sidebar.tsx b/src/Sidebar/Sidebar.tsx
@@ -2,8 +2,9 @@ import clsx from "clsx";
 import React from "react";
 
 import { Logo } from "../icons/Logo";
+import { LogoLight } from "../icons/LogoLight";
 import { localStorageKeys } from "../localStorageKeys";
-import { makeStyles } from "../theme";
+import { makeStyles, useTheme } from "../theme";
 import useLocalStorage from "../tools/useLocalStorage";
 import { ExpandButton } from "./ExpandButton";
 import { MenuItem, menuWidth, shrunkMenuWidth } from "./MenuItem";
@@ -50,6 +51,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
   toolbar,
   onMenuItemClick,
 }) => {
+  const theme = useTheme();
   const classes = useStyles({});
   const { value: isShrunkStr, setValue: setShrink } = useLocalStorage(
     localStorageKeys.menuShrink,
@@ -65,7 +67,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
     >
       <div className={classes.float}>
         <div className={classes.logo}>
-          <Logo />
+          {theme.themeType === "light" ? <Logo /> : <LogoLight />}
         </div>
         {menuItems.map((menuItem) => (
           <MenuItem

diff --git a/src/SidebarDrawer/SidebarDrawer.tsx b/src/SidebarDrawer/SidebarDrawer.tsx
@@ -7,8 +7,10 @@ import React from "react";
 import SVG from "react-inlinesvg";
 
 import { Logo } from "../icons/Logo";
+import { LogoLight } from "../icons/LogoLight";
 import { BaseSidebarProps, SidebarMenuItem } from "../Sidebar/types";
 import { SquareButton } from "../SquareButton";
+import { useTheme } from "../theme";
 import { MenuItemBtn } from "./MenuItemBtn";
 import useStyles from "./styles";
 
@@ -18,6 +20,7 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
   menuItems,
   onMenuItemClick,
 }) => {
+  const theme = useTheme();
   const [isOpened, setOpened] = React.useState(false);
   const classes = useStyles({});
   const [activeMenu, setActiveMenu] = React.useState<SidebarMenuItem | null>(
@@ -65,7 +68,7 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
           >
             <div className={classes.content}>
               <div className={classes.logo}>
-                <Logo />
+                {theme.themeType === "light" ? <Logo /> : <LogoLight />}
               </div>
               {menuItems.map((menuItem) => (
                 <MenuItemBtn

diff --git a/src/icons/Logo.tsx b/src/icons/Logo.tsx
@@ -1,19 +1,14 @@
 import React from "react";
 
-export const Logo: React.FC = () => (
+export const Logo: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg
     width="36"
     height="33"
     viewBox="0 0 36 33"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M16.6072 33C22.4977 33 23.9789 30.6214 23.9789 27.3629C23.9789 23.3549 20.3772 22.6056 17.3814 22.1167C15.0924 21.7258 14.0489 21.5304 14.0489 20.1292C14.0489 19.0867 14.9577 18.6954 16.4389 18.6954C18.2566 18.6954 18.7614 19.2168 18.9298 20.7482L23.7097 20.0314C23.3055 16.7404 21.4542 15.0787 16.5735 15.0787C11.2216 15.0787 9.33654 17.2293 9.33654 20.6504C9.30299 25.082 13.4768 25.5382 16.5735 26.0594C18.492 26.418 19.2328 26.7437 19.2328 28.0146C19.2328 29.0573 18.5933 29.5135 16.6745 29.5135C14.5539 29.5135 13.9144 29.1551 13.6451 27.4281L9 28.1124C9.43753 31.599 11.4908 33 16.6072 33Z"
-      fill="#28234A"
-    />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
@@ -23,7 +18,7 @@ export const Logo: React.FC = () => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M6.15911 2.31187C6.27552 2.1958 6.4332 2.13062 6.59759 2.13062H27.3248C27.5761 2.13062 27.8026 2.28211 27.8987 2.51437C27.9947 2.74664 27.9412 3.01388 27.7632 3.19134L21.7867 9.1508C21.6703 9.26687 21.5126 9.33205 21.3482 9.33205H0.621008C0.369679 9.33205 0.143131 9.18056 0.0471181 8.94829C-0.0488948 8.71603 0.00456112 8.44879 0.182532 8.27133L6.15911 2.31187ZM6.85429 3.37259L2.12325 8.09007H21.0915L25.8225 3.37259H6.85429Z"
+      d="M6.59759 2.13062C6.4332 2.13062 6.27552 2.1958 6.15911 2.31187L0.182532 8.27133C0.00456112 8.44879 -0.0488948 8.71603 0.0471181 8.94829C0.143131 9.18056 0.369679 9.33205 0.621008 9.33205H21.3482C21.5126 9.33205 21.6703 9.26687 21.7867 9.1508L27.7632 3.19134C27.9412 3.01388 27.9947 2.74664 27.8987 2.51437C27.8026 2.28211 27.5761 2.13062 27.3248 2.13062H6.59759ZM2.12325 8.09007L6.85429 3.37259H25.8225L21.0915 8.09007H2.12325ZM23.9789 27.3629C23.9789 30.6214 22.4977 33 16.6072 33C11.4908 33 9.43754 31.599 9 28.1124L13.6451 27.4281C13.9144 29.1551 14.5539 29.5135 16.6745 29.5135C18.5933 29.5135 19.2328 29.0573 19.2328 28.0146C19.2328 26.7437 18.492 26.418 16.5735 26.0594C16.4207 26.0337 16.2653 26.0082 16.1079 25.9823C13.0752 25.4835 9.30464 24.8634 9.33654 20.6504C9.33654 17.2293 11.2216 15.0787 16.5735 15.0787C21.4542 15.0787 23.3055 16.7404 23.7097 20.0314L18.9298 20.7482C18.7614 19.2168 18.2566 18.6954 16.4389 18.6954C14.9577 18.6954 14.0489 19.0867 14.0489 20.1292C14.0489 21.5304 15.0924 21.7258 17.3814 22.1167C20.3772 22.6056 23.9789 23.3549 23.9789 27.3629Z"
       fill="#28234A"
     />
   </svg>

diff --git a/src/icons/LogoLight.tsx b/src/icons/LogoLight.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+export const LogoLight: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="36"
+    height="33"
+    viewBox="0 0 36 33"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.7838 0L13.4043 6.64709H29.1638L35.5433 0H19.7838Z"
+      fill="#8AC4EB"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.59759 2.13062C6.4332 2.13062 6.27552 2.1958 6.15911 2.31187L0.182532 8.27133C0.00456112 8.44879 -0.0488948 8.71603 0.0471181 8.94829C0.143131 9.18056 0.369679 9.33205 0.621008 9.33205H21.3482C21.5126 9.33205 21.6703 9.26687 21.7867 9.1508L27.7632 3.19134C27.9412 3.01388 27.9947 2.74664 27.8987 2.51437C27.8026 2.28211 27.5761 2.13062 27.3248 2.13062H6.59759ZM2.12325 8.09007L6.85429 3.37259H25.8225L21.0915 8.09007H2.12325ZM23.9789 27.3629C23.9789 30.6214 22.4977 33 16.6072 33C11.4908 33 9.43754 31.599 9 28.1124L13.6451 27.4281C13.9144 29.1551 14.5539 29.5135 16.6745 29.5135C18.5933 29.5135 19.2328 29.0573 19.2328 28.0146C19.2328 26.7437 18.492 26.418 16.5735 26.0594C16.4207 26.0337 16.2653 26.0082 16.1079 25.9823C13.0752 25.4835 9.30464 24.8634 9.33654 20.6504C9.33654 17.2293 11.2216 15.0787 16.5735 15.0787C21.4542 15.0787 23.3055 16.7404 23.7097 20.0314L18.9298 20.7482C18.7614 19.2168 18.2566 18.6954 16.4389 18.6954C14.9577 18.6954 14.0489 19.0867 14.0489 20.1292C14.0489 21.5304 15.0924 21.7258 17.3814 22.1167C20.3772 22.6056 23.9789 23.3549 23.9789 27.3629Z"
+      fill="#FAFAFA"
+    />
+  </svg>
+);
+
+LogoLight.displayName = "LogoLight";