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