Merge pull request #690 from mirumee/ref/savebar

Update savebar design

CHANGELOG.md

@@ -33,6 +33,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Update order history information - #680 by @dominik-zeglen
 - Add metadata editor to creator views - #684 by @dominik-zeglen
 - Update product visibility card component - #679 by @AlicjaSzu
+- Update savebar design - #690 by @dominik-zeglen
 
 ## 2.10.1
 

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,
+      height: 120
-      borderTop: "1px solid transparent",
-      boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`,
-      height: 70,
-      transition: `box-shadow ${theme.transitions.duration.shortest}ms`
     },
     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
+            <div className={classes.root} {...rest}>
-              className={classNames(classes.root, {
+              <Container>
-                [classes.stop]: scrolledToBottom
+                <Card elevation={scrolledToBottom ? 0 : 16}>
-              })}
+                  <CardContent className={classes.content}>
-              {...rest}
-            >
-              <Container className={classes.container}>
                     {!!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>

src/components/Theme/themes.ts

@@ -70,7 +70,7 @@ export const dark: IThemeColors = {
 export const light: IThemeColors = {
   autofill: "#f4f6c5",
   background: {
-    default: "#F1F6F6",
+    default: "#EFF5F8",
     paper: "#FFFFFF"
   },
   checkbox: {