Update savebar design

src/components/SaveButtonBar/SaveButtonBar.tsx

@@ -1,9 +1,10 @@
 import Button from "@material-ui/core/Button";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
 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";
 
@@ -22,7 +23,10 @@ const useStyles = makeStyles(
     cancelButton: {
       marginRight: theme.spacing(2)
     },
-    container: {
+    content: {
+      "&:last-child": {
+        paddingBottom: theme.spacing(2)
+      },
       display: "flex",
       paddingBottom: theme.spacing(2),
       paddingTop: theme.spacing(2),
@@ -38,20 +42,10 @@ const useStyles = makeStyles(
       color: theme.palette.error.contrastText
     },
     root: {
-      background: theme.palette.background.default,
-      borderTop: "1px solid transparent",
-      boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`,
-      height: 70,
-      transition: `box-shadow ${theme.transitions.duration.shortest}ms`
+      height: 120
     },
     spacer: {
       flex: "1"
-    },
-    stop: {
-      "&$root": {
-        borderTopColor: theme.palette.divider,
-        boxShadow: `0 0 0 0 ${theme.palette.divider}`
-      }
     }
   }),
   { name: "SaveButtonBar" }
@@ -92,13 +86,10 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
       {anchor =>
         anchor ? (
           <Portal container={anchor.current}>
-            <div
-              className={classNames(classes.root, {
-                [classes.stop]: scrolledToBottom
-              })}
-              {...rest}
-            >
-              <Container className={classes.container}>
+            <div className={classes.root} {...rest}>
+              <Container>
+                <Card elevation={scrolledToBottom ? 0 : 16}>
+                  <CardContent className={classes.content}>
                     {!!onDelete && (
                       <Button
                         variant="contained"
@@ -134,6 +125,8 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
                         intl.formatMessage(buttonMessages.save)
                       )}
                     </ConfirmButton>
+                  </CardContent>
+                </Card>
               </Container>
             </div>
           </Portal>