add 'choose picture' buttons
Change-Id: I847d6ad406192066c2dc35af0f1498695d1496c8
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
new file mode 100644
index 0000000..aef2456
--- /dev/null
+++ b/client/src/components/buttons.js
@@ -0,0 +1,63 @@
+import { IconButton } from "@mui/material";
+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",
+ },
+ }}
+ >
+ <Icon fontSize="inherit"/>
+ </IconButton>
+ )
+}
+
+export const RemovePictureButton = (props) => {
+ return (
+ <CustomisePictureButton {...props}
+ aria-label="remove picture"
+ Icon={CancelIcon}
+ />
+ )
+}
+
+export const EditPictureButton = (props) => {
+ return (
+ <CustomisePictureButton {...props}
+ aria-label="edit picture"
+ Icon={PenIcon}
+ />
+ )
+}
+
+export const UploadPictureButton = (props) => {
+ return (
+ <CustomisePictureButton {...props}
+ aria-label="upload picture"
+ Icon={FolderIcon}
+ />
+ )
+}
+
+export const TakePictureButton = (props) => {
+ return (
+ <CustomisePictureButton {...props}
+ aria-label="take picture"
+ Icon={CameraIcon}
+ />
+ )
+}