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,48 +86,47 @@ 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}
+                    {!!onDelete && (
-            >
+                      <Button
-              <Container className={classes.container}>
+                        variant="contained"
-                {!!onDelete && (
+                        onClick={onDelete}
-                  <Button
+                        className={classes.deleteButton}
-                    variant="contained"
+                        data-test="button-bar-delete"
-                    onClick={onDelete}
+                      >
-                    className={classes.deleteButton}
+                        {labels && labels.delete
-                    data-test="button-bar-delete"
+                          ? labels.delete
-                  >
+                          : intl.formatMessage(buttonMessages.delete)}
-                    {labels && labels.delete
+                      </Button>
-                      ? labels.delete
+                    )}
-                      : intl.formatMessage(buttonMessages.delete)}
+                    <div className={classes.spacer} />
-                  </Button>
+                    <Button
-                )}
+                      className={classes.cancelButton}
-                <div className={classes.spacer} />
+                      variant="text"
-                <Button
+                      onClick={onCancel}
-                  className={classes.cancelButton}
+                      data-test="button-bar-cancel"
-                  variant="text"
+                    >
-                  onClick={onCancel}
+                      {maybe(
-                  data-test="button-bar-cancel"
+                        () => labels.cancel,
-                >
+                        intl.formatMessage(buttonMessages.back)
-                  {maybe(
+                      )}
-                    () => labels.cancel,
+                    </Button>
-                    intl.formatMessage(buttonMessages.back)
+                    <ConfirmButton
-                  )}
+                      disabled={disabled}
-                </Button>
+                      onClick={onSave}
-                <ConfirmButton
+                      transitionState={state}
-                  disabled={disabled}
+                      data-test="button-bar-confirm"
-                  onClick={onSave}
+                    >
-                  transitionState={state}
+                      {maybe(
-                  data-test="button-bar-confirm"
+                        () => labels.save,
-                >
+                        intl.formatMessage(buttonMessages.save)
-                  {maybe(
+                      )}
-                    () => labels.save,
+                    </ConfirmButton>
-                    intl.formatMessage(buttonMessages.save)
+                  </CardContent>
-                  )}
+                </Card>
-                </ConfirmButton>
               </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: {