djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added contrast sidebar logos for dark mode

Browse source
This commit is contained in:
sektordv 2021-06-10 09:28:41 +02:00
parent 4e65418c51
commit 0b3916f46b
3 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/images/logo-sidebar-dark.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

5
src/components/SideBar/SideBar.tsx
View file

@ -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);

9
src/components/SideBarDrawer/SideBarDrawer.tsx
View file

@ -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 &&