From 3d571e3f4f4ab5d00ee2f304fdd8089814fd6258 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 8 Sep 2020 12:14:13 +0200
Subject: [PATCH] Visual improvements

---
 src/components/SaveButtonBar/SaveButtonBar.tsx | 16 +++++++++++++++-
 src/components/SideBar/MenuItem.tsx            |  2 +-
 src/components/SideBar/SideBar.tsx             |  3 ++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx
index 681c75e73..b7a5b6cf0 100644
--- a/src/components/SaveButtonBar/SaveButtonBar.tsx
+++ b/src/components/SaveButtonBar/SaveButtonBar.tsx
@@ -5,6 +5,7 @@ import Portal from "@material-ui/core/Portal";
 import { makeStyles } from "@material-ui/core/styles";
 import useWindowScroll from "@saleor/hooks/useWindowScroll";
 import { buttonMessages } from "@saleor/intl";
+import classNames from "classnames";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -17,12 +18,21 @@ import Container from "../Container";
 
 const useStyles = makeStyles(
   theme => ({
+    applyShadow: {
+      "&$card": {
+        boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)"
+      }
+    },
     button: {
       marginRight: theme.spacing(1)
     },
     cancelButton: {
       marginRight: theme.spacing(2)
     },
+    card: {
+      boxShadow: "0px 0px 0px rgba(0, 0, 0, 0.16)",
+      transition: theme.transitions.duration.shortest + "ms"
+    },
     content: {
       "&:last-child": {
         paddingBottom: theme.spacing(2)
@@ -88,7 +98,11 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
           <Portal container={anchor.current}>
             <div className={classes.root} {...rest}>
               <Container>
-                <Card elevation={scrolledToBottom ? 0 : 16}>
+                <Card
+                  className={classNames(classes.card, {
+                    [classes.applyShadow]: !scrolledToBottom
+                  })}
+                >
                   <CardContent className={classes.content}>
                     {!!onDelete && (
                       <Button
diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx
index c7c728e76..6ae19b402 100644
--- a/src/components/SideBar/MenuItem.tsx
+++ b/src/components/SideBar/MenuItem.tsx
@@ -75,7 +75,7 @@ const useStyles = makeStyles(
     rootActive: {
       "&$root": {
         background: theme.palette.background.paper,
-        boxShadow: `9px 9px 20px 0 ${theme.palette.grey[300]}`,
+        boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)",
         color: theme.palette.primary.main
       }
     },
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index 892a1ae5f..0f521b9ff 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -28,7 +28,8 @@ const useStyles = makeStyles(
     },
     root: {
       transition: "width 0.5s ease",
-      width: menuWidth
+      width: menuWidth,
+      zIndex: 100
     },
     rootShrink: {
       width: shrunkMenuWidth