use 'styled' instead of 'sx' for 'choose picture' buttons
Change-Id: Ie1f2ac3ae90e880e4f6a5da96011ee53d93b2d5d
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 (