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 | b3788bf | 2022-08-29 15:57:57 -0400 | [diff] [blame] | 4 | import { ArrowIcon, CameraIcon, CancelIcon, CrossedEyeIcon, CrossIcon, 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 | |
idillon | b3788bf | 2022-08-29 15:57:57 -0400 | [diff] [blame] | 97 | export const BackButton = styled( |
| 98 | (props) => { |
| 99 | return ( |
| 100 | <IconButton {...props} disableRipple={true}> |
| 101 | <ArrowIcon fontSize="inherit"/> |
| 102 | </IconButton> |
| 103 | ) |
| 104 | } |
| 105 | )(({theme}) => ({ |
| 106 | color: theme.palette.primary.dark, |
| 107 | fontSize: "15px", |
| 108 | height: "30px", |
| 109 | width: "51px", |
| 110 | borderRadius: "5px", |
| 111 | "&:hover": { |
| 112 | background: theme.palette.primary.light, |
| 113 | }, |
| 114 | })) |
| 115 | |
| 116 | export const CloseButton = styled( |
| 117 | (props) => { |
| 118 | return ( |
| 119 | <IconButton {...props} disableRipple={true}> |
| 120 | <CrossIcon fontSize="inherit"/> |
| 121 | </IconButton> |
| 122 | ) |
| 123 | } |
| 124 | )(({theme}) => ({ |
| 125 | color: theme.palette.primary.dark, |
| 126 | fontSize: "15px", |
| 127 | height: "30px", |
| 128 | width: "30px", |
| 129 | borderRadius: "5px", |
| 130 | "&:hover": { |
| 131 | background: theme.palette.primary.light, |
| 132 | }, |
| 133 | })) |
| 134 | |
idillon-sfl | 37c18df | 2022-08-26 18:44:27 -0400 | [diff] [blame] | 135 | export const ToggleVisibilityButton = styled( |
| 136 | ({visible, ...props}) => { |
| 137 | const Icon = visible ? CrossedEyeIcon : EyeIcon |
| 138 | return ( |
| 139 | <IconButton {...props} disableRipple={true}> |
| 140 | <Icon fontSize="inherit"/> |
| 141 | </IconButton> |
| 142 | ) |
| 143 | } |
| 144 | )(({theme}) => ({ |
| 145 | color: theme.palette.primary.dark, |
| 146 | fontSize: "15px", |
| 147 | height: "15px", |
| 148 | width: "15px", |
| 149 | "&:hover": { |
| 150 | background: theme.palette.primary.light, |
| 151 | }, |
idillon | b3788bf | 2022-08-29 15:57:57 -0400 | [diff] [blame] | 152 | })) |