commit b3788bf546ec7017527da9ab0d8bf77e2f1dfea6
author idillon <io.daza-dillon@savoirfairelinux.com> Mon Aug 29 15:57:57 2022 -0400
committer idillon <io.daza-dillon@savoirfairelinux.com> Fri Sep 16 17:14:07 2022 -0400
tree f785764d5d8c8560c04b081bba52b8c2b98bb6fa
parent 760b7fb35b3e62cccab9537a4f9355e99a8e3e65

add 'close' and 'back' buttons

Change-Id: I443ea72bb514753f83c63c7de70124a7aa6f4049

client/src/components/buttons.js

diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index 0919c69..bf4700f 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,7 +1,7 @@
 import { QuestionMark } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import { styled } from "@mui/styles";
-import { CameraIcon, CancelIcon, CrossedEyeIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons";
+import { ArrowIcon, CameraIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons";
 
 const RoundButton = styled(
     ({Icon, ...props}) => (
@@ -94,6 +94,44 @@
     )
 }
 
+export const BackButton = styled(
+    (props) => {
+        return (
+            <IconButton {...props} disableRipple={true}>
+                <ArrowIcon fontSize="inherit"/>
+            </IconButton>
+        )
+    }
+)(({theme}) => ({
+    color: theme.palette.primary.dark,
+    fontSize: "15px",
+    height: "30px",
+    width: "51px",
+    borderRadius: "5px",
+    "&:hover": {
+        background: theme.palette.primary.light,
+    },
+}))
+
+export const CloseButton = styled(
+    (props) => {
+        return (
+            <IconButton {...props} disableRipple={true}>
+                <CrossIcon fontSize="inherit"/>
+            </IconButton>
+        )
+    }
+)(({theme}) => ({
+    color: theme.palette.primary.dark,
+    fontSize: "15px",
+    height: "30px",
+    width: "30px",
+    borderRadius: "5px",
+    "&:hover": {
+        background: theme.palette.primary.light,
+    },
+}))
+
 export const ToggleVisibilityButton = styled(
     ({visible, ...props}) => {
         const Icon = visible ? CrossedEyeIcon : EyeIcon
@@ -111,4 +149,4 @@
     "&:hover": {
         background: theme.palette.primary.light,
     },
-}));
\ No newline at end of file
+}))