Visual improvements

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

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
       }
     },

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