commit d5cc7866b863e32de5a18ec3e42fff21d857aa77
author idillon-sfl <io.daza-dillon@savoirfairelinux.com> Thu Aug 25 11:11:34 2022 -0400
committer idillon <io.daza-dillon@savoirfairelinux.com> Fri Sep 16 17:14:07 2022 -0400
tree b1c5e217508def79f0b1a47976cf19d75c87066c
parent 0e3ef4ebd48913e4db8dbb842c2b7179b7a9c26f

use 'styled' instead of 'sx' for 'choose picture' buttons

Change-Id: Ie1f2ac3ae90e880e4f6a5da96011ee53d93b2d5d

client/src/components/buttons.js

diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index aef2456..620d0aa 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,30 +1,27 @@
 import { IconButton } from "@mui/material";
+import { styled } from "@mui/styles";
 import { CameraIcon, CancelIcon, FolderIcon, PenIcon } from "./svgIcons";
 
-const CustomisePictureButton = ({Icon, ...props}) => {
-    return (
-        <IconButton
-            {...props}
-            disableRipple={true}
-            sx={{
-                border: "1px solid #005699",
-                color: "#005699",
-                height: "53px",
-                width: "53px",
-                fontSize: "15px",
-                "&:hover": {
-                    background: "#0056991A",
-                },
-                "&:active": {
-                    color: "#FFF",
-                    background: "#005699",
-                },
-            }}
-        >
+const CustomisePictureButton = styled(
+    ({Icon, ...props}) => (
+        <IconButton {...props} disableRipple={true}>
             <Icon fontSize="inherit"/>
         </IconButton>
     )
-}
+)(() => ({
+    border: "1px solid #005699",
+    color: "#005699",
+    height: "53px",
+    width: "53px",
+    fontSize: "15px",
+    "&:hover": {
+        background: "#0056991A",
+    },
+    "&:active": {
+        color: "#FFF",
+        background: "#005699",
+    },
+}));
 
 export const RemovePictureButton = (props) => {
     return (