idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 1 | import { QuestionMark } from "@mui/icons-material"; |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 2 | import { IconButton } from "@mui/material"; |
idillon-sfl | d5cc786 | 2022-08-25 11:11:34 -0400 | [diff] [blame] | 3 | import { styled } from "@mui/styles"; |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 4 | import { CameraIcon, CancelIcon, CrossedEyeIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons"; |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 5 | |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 6 | const RoundButton = styled( |
idillon-sfl | d5cc786 | 2022-08-25 11:11:34 -0400 | [diff] [blame] | 7 | ({Icon, ...props}) => ( |
| 8 | <IconButton {...props} disableRipple={true}> |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 9 | <Icon fontSize="inherit"/> |
| 10 | </IconButton> |
| 11 | ) |
idillon-sfl | deabd28 | 2022-08-25 22:50:03 -0400 | [diff] [blame] | 12 | )(({theme}) => ({ |
| 13 | border: `1px solid ${theme.palette.primary.dark}`, |
| 14 | color: theme.palette.primary.dark, |
idillon-sfl | d5cc786 | 2022-08-25 11:11:34 -0400 | [diff] [blame] | 15 | fontSize: "15px", |
| 16 | "&:hover": { |
idillon-sfl | deabd28 | 2022-08-25 22:50:03 -0400 | [diff] [blame] | 17 | background: theme.palette.primary.light, |
idillon-sfl | d5cc786 | 2022-08-25 11:11:34 -0400 | [diff] [blame] | 18 | }, |
| 19 | "&:active": { |
| 20 | color: "#FFF", |
idillon-sfl | deabd28 | 2022-08-25 22:50:03 -0400 | [diff] [blame] | 21 | background: theme.palette.primary.dark, |
idillon-sfl | d5cc786 | 2022-08-25 11:11:34 -0400 | [diff] [blame] | 22 | }, |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 23 | "&.MuiIconButton-sizeSmall": { |
| 24 | height: "15px", |
| 25 | width: "15px", |
| 26 | }, |
| 27 | "&.MuiIconButton-sizeMedium": { |
| 28 | height: "30px", |
| 29 | width: "30px", |
| 30 | }, |
| 31 | "&.MuiIconButton-sizeLarge": { |
| 32 | height: "53px", |
| 33 | width: "53px", |
| 34 | } |
idillon-sfl | d5cc786 | 2022-08-25 11:11:34 -0400 | [diff] [blame] | 35 | })); |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 36 | |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 37 | export const CancelButton = (props) => { |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 38 | return ( |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 39 | <RoundButton {...props} |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 40 | aria-label="remove picture" |
| 41 | Icon={CancelIcon} |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 42 | size="large" |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 43 | /> |
| 44 | ) |
| 45 | } |
| 46 | |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 47 | export const EditButton = (props) => { |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 48 | return ( |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 49 | <RoundButton {...props} |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 50 | aria-label="edit picture" |
| 51 | Icon={PenIcon} |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 52 | size="large" |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 53 | /> |
| 54 | ) |
| 55 | } |
| 56 | |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 57 | export const UploadButton = (props) => { |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 58 | return ( |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 59 | <RoundButton {...props} |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 60 | aria-label="upload picture" |
| 61 | Icon={FolderIcon} |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 62 | size="large" |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 63 | /> |
| 64 | ) |
| 65 | } |
| 66 | |
| 67 | export const TakePictureButton = (props) => { |
| 68 | return ( |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 69 | <RoundButton {...props} |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 70 | aria-label="take picture" |
| 71 | Icon={CameraIcon} |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 72 | size="large" |
idillon-sfl | 44b0534 | 2022-08-24 15:46:42 -0400 | [diff] [blame] | 73 | /> |
| 74 | ) |
| 75 | } |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 76 | |
| 77 | export const InfoButton = (props) => { |
| 78 | return ( |
| 79 | <RoundButton {...props} |
| 80 | aria-label="informations" |
| 81 | Icon={InfoIcon} |
| 82 | size="small" |
| 83 | /> |
| 84 | ) |
| 85 | } |
| 86 | |
| 87 | export const TipButton = (props) => { |
| 88 | return ( |
| 89 | <RoundButton {...props} |
| 90 | aria-label="informations" |
| 91 | Icon={QuestionMark} |
| 92 | size="medium" |
| 93 | /> |
| 94 | ) |
| 95 | } |
| 96 | |
| 97 | export const ToggleVisibilityButton = styled( |
| 98 | ({visible, ...props}) => { |
| 99 | const Icon = visible ? CrossedEyeIcon : EyeIcon |
| 100 | return ( |
| 101 | <IconButton {...props} disableRipple={true}> |
| 102 | <Icon fontSize="inherit"/> |
| 103 | </IconButton> |
| 104 | ) |
| 105 | } |
| 106 | )(({theme}) => ({ |
| 107 | color: theme.palette.primary.dark, |
| 108 | fontSize: "15px", |
| 109 | height: "15px", |
| 110 | width: "15px", |
| 111 | "&:hover": { |
| 112 | background: theme.palette.primary.light, |
| 113 | }, |
| 114 | })); |