Update savebar buttons (#90)

saleor · Nov 25, 2021 · cbdbbea · cbdbbea
1 parent 538a94e
commit cbdbbea
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 19 deletions.
diff --git a/src/ActionBar/styles.ts b/src/ActionBar/styles.ts
@@ -7,6 +7,7 @@ const useStyles = makeStyles(
         paddingBottom: theme.spacing(2),
       },
       display: "flex",
+      gap: theme.spacing(2),
       paddingBottom: theme.spacing(2),
       paddingTop: theme.spacing(2),
       [theme.breakpoints.down("sm")]: {

diff --git a/src/Savebar/Savebar.tsx b/src/Savebar/Savebar.tsx
@@ -1,5 +1,5 @@
-import Button from "@material-ui/core/Button";
 import React from "react";
+import { Button } from "..";
 
 import { useActionBar } from "../ActionBar";
 import { ActionBar } from "../ActionBar/ActionBar";
@@ -43,9 +43,9 @@ export const Savebar: React.FC<SavebarProps> = ({
       {!!onDelete && (
         <ButtonTooltipDecorator tooltip={tooltips?.delete}>
           <Button
-            variant="contained"
+            error
+            variant="primary"
             onClick={onDelete}
-            className={classes.deleteButton}
             data-test="button-bar-delete"
           >
             {labels.delete}
@@ -55,8 +55,8 @@ export const Savebar: React.FC<SavebarProps> = ({
       <div className={classes.spacer} />
       <ButtonTooltipDecorator tooltip={tooltips?.cancel}>
         <Button
-          className={classes.cancelButton}
-          variant="text"
+          color="text"
+          variant="secondary"
           onClick={onCancel}
           data-test="button-bar-cancel"
         >

diff --git a/src/Savebar/styles.ts b/src/Savebar/styles.ts
@@ -1,20 +1,7 @@
 import { makeStyles } from "../theme";
 
 const useStyles = makeStyles(
-  (theme) => ({
-    button: {
-      marginRight: theme.spacing(1),
-    },
-    cancelButton: {
-      marginRight: theme.spacing(2),
-    },
-    deleteButton: {
-      "&:hover": {
-        backgroundColor: theme.palette.error.dark,
-      },
-      backgroundColor: theme.palette.error.main,
-      color: theme.palette.error.contrastText,
-    },
+  () => ({
     spacer: {
       flex: "1",
     },