idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame^] | 1 | import { IconButton } from "@mui/material"; |
| 2 | import { CameraIcon, CancelIcon, FolderIcon, PenIcon } from "./svgIcons"; |
| 3 | |
| 4 | const CustomisePictureButton = ({Icon, ...props}) => { |
| 5 | return ( |
| 6 | <IconButton |
| 7 | {...props} |
| 8 | disableRipple={true} |
| 9 | sx={{ |
| 10 | border: "1px solid #005699", |
| 11 | color: "#005699", |
| 12 | height: "53px", |
| 13 | width: "53px", |
| 14 | fontSize: "15px", |
| 15 | "&:hover": { |
| 16 | background: "#0056991A", |
| 17 | }, |
| 18 | "&:active": { |
| 19 | color: "#FFF", |
| 20 | background: "#005699", |
| 21 | }, |
| 22 | }} |
| 23 | > |
| 24 | <Icon fontSize="inherit"/> |
| 25 | </IconButton> |
| 26 | ) |
| 27 | } |
| 28 | |
| 29 | export const RemovePictureButton = (props) => { |
| 30 | return ( |
| 31 | <CustomisePictureButton {...props} |
| 32 | aria-label="remove picture" |
| 33 | Icon={CancelIcon} |
| 34 | /> |
| 35 | ) |
| 36 | } |
| 37 | |
| 38 | export const EditPictureButton = (props) => { |
| 39 | return ( |
| 40 | <CustomisePictureButton {...props} |
| 41 | aria-label="edit picture" |
| 42 | Icon={PenIcon} |
| 43 | /> |
| 44 | ) |
| 45 | } |
| 46 | |
| 47 | export const UploadPictureButton = (props) => { |
| 48 | return ( |
| 49 | <CustomisePictureButton {...props} |
| 50 | aria-label="upload picture" |
| 51 | Icon={FolderIcon} |
| 52 | /> |
| 53 | ) |
| 54 | } |
| 55 | |
| 56 | export const TakePictureButton = (props) => { |
| 57 | return ( |
| 58 | <CustomisePictureButton {...props} |
| 59 | aria-label="take picture" |
| 60 | Icon={CameraIcon} |
| 61 | /> |
| 62 | ) |
| 63 | } |