From 0b3916f46bf4e167dc7cd2f98ee76fa5125034d6 Mon Sep 17 00:00:00 2001
From: sektordv <roman@sawblade.pl>
Date: Thu, 10 Jun 2021 09:28:41 +0200
Subject: [PATCH] added contrast sidebar logos for dark mode

---
 assets/images/logo-sidebar-dark.svg            | 3 +++
 src/components/SideBar/SideBar.tsx             | 5 ++++-
 src/components/SideBarDrawer/SideBarDrawer.tsx | 9 ++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 assets/images/logo-sidebar-dark.svg

diff --git a/assets/images/logo-sidebar-dark.svg b/assets/images/logo-sidebar-dark.svg
new file mode 100644
index 000000000..99ea02741
--- /dev/null
+++ b/assets/images/logo-sidebar-dark.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="32" viewBox="0 0 29 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.81903 0C6.65524 0 6.49813 0.0649451 6.38214 0.180598L0.181871 6.36311C0.00454462 6.53993 -0.0487177 6.8062 0.0469475 7.03762C0.142613 7.26905 0.36834 7.41999 0.618759 7.41999H22.1217C22.2855 7.41999 22.4426 7.35505 22.5586 7.2394L28.7589 1.05688C28.9362 0.880065 28.9895 0.613794 28.8938 0.382369C28.7981 0.150943 28.5724 0 28.322 0H6.81903ZM2.11557 6.18251L7.0748 1.23748H26.8252L21.8659 6.18251H2.11557ZM21.984 26.1519C21.984 29.5323 20.4474 32 14.3364 32C9.02849 32 6.89835 30.5465 6.44444 26.9294L11.2634 26.2196C11.5428 28.0111 12.2062 28.3829 14.4062 28.3829C16.3968 28.3829 17.0603 27.9097 17.0603 26.828C17.0603 25.5095 16.2917 25.1716 14.3014 24.7996C14.1429 24.773 13.9816 24.7464 13.8184 24.7196C10.6722 24.2021 6.76049 23.5588 6.79358 19.1882C6.79358 15.639 8.74915 13.4079 14.3014 13.4079C19.3648 13.4079 21.2854 15.1318 21.7047 18.546L16.7459 19.2896C16.5712 17.7009 16.0475 17.16 14.1618 17.16C12.6251 17.16 11.6823 17.5659 11.6823 18.6474C11.6823 20.1011 12.7649 20.3038 15.1395 20.7093C18.2474 21.2165 21.984 21.9939 21.984 26.1519Z" fill="white"/>
+</svg>
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index 1505065f4..8c7d6b465 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -1,9 +1,11 @@
+import logoDark from "@assets/images/logo-sidebar-dark.svg";
 import logoLight from "@assets/images/logo-sidebar-light.svg";
 import configurationIcon from "@assets/images/menu-configure-icon.svg";
 import { configurationMenuUrl } from "@saleor/configuration";
 import { User } from "@saleor/fragments/types/User";
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import { UseNavigatorResult } from "@saleor/hooks/useNavigator";
+import useTheme from "@saleor/hooks/useTheme";
 import { sectionNames } from "@saleor/intl";
 import { makeStyles } from "@saleor/theme";
 import classNames from "classnames";
@@ -74,6 +76,7 @@ const SideBar: React.FC<SideBarProps> = ({
   const [isShrunk, setShrink] = useLocalStorage("isMenuSmall", false);
   const intl = useIntl();
   const configureMenuItem = getConfigureMenuItem(intl);
+  const { isDark } = useTheme();
 
   return (
     <div
@@ -83,7 +86,7 @@ const SideBar: React.FC<SideBarProps> = ({
     >
       <div className={classes.float}>
         <div className={classes.logo}>
-          <SVG src={logoLight} />
+          <SVG src={isDark ? logoDark : logoLight} />
         </div>
         {menuItems.map(menuItem => {
           const isActive = isMenuActive(location, menuItem);
diff --git a/src/components/SideBarDrawer/SideBarDrawer.tsx b/src/components/SideBarDrawer/SideBarDrawer.tsx
index a1fb78ded..b43a931da 100644
--- a/src/components/SideBarDrawer/SideBarDrawer.tsx
+++ b/src/components/SideBarDrawer/SideBarDrawer.tsx
@@ -1,7 +1,9 @@
+import logoDark from "@assets/images/logo-sidebar-dark.svg";
 import logoLight from "@assets/images/logo-sidebar-light.svg";
 import { Drawer, Typography } from "@material-ui/core";
 import ArrowLeftIcon from "@material-ui/icons/ArrowLeft";
 import MenuIcon from "@material-ui/icons/Menu";
+import useTheme from "@saleor/hooks/useTheme";
 import classNames from "classnames";
 import React from "react";
 import SVG from "react-inlinesvg";
@@ -30,6 +32,8 @@ const SideBarDrawer: React.FC<SideBarDrawerProps> = ({
 
   const configureMenuItem = getConfigureMenuItem(intl);
 
+  const { isDark } = useTheme();
+
   const handleMenuItemClick = (url: string) => {
     setOpened(false);
     setShowSubmenu(false);
@@ -68,7 +72,10 @@ const SideBarDrawer: React.FC<SideBarDrawerProps> = ({
             })}
           >
             <div className={classes.content}>
-              <SVG className={classes.logo} src={logoLight} />
+              <SVG
+                className={classes.logo}
+                src={isDark ? logoDark : logoLight}
+              />
               {menuItems.map(menuItem => {
                 if (
                   menuItem.permission &&