add 'close' and 'back' buttons
Change-Id: I443ea72bb514753f83c63c7de70124a7aa6f4049
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index 0919c69..bf4700f 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,7 +1,7 @@
import { QuestionMark } from "@mui/icons-material";
import { IconButton } from "@mui/material";
import { styled } from "@mui/styles";
-import { CameraIcon, CancelIcon, CrossedEyeIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons";
+import { ArrowIcon, CameraIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons";
const RoundButton = styled(
({Icon, ...props}) => (
@@ -94,6 +94,44 @@
)
}
+export const BackButton = styled(
+ (props) => {
+ return (
+ <IconButton {...props} disableRipple={true}>
+ <ArrowIcon fontSize="inherit"/>
+ </IconButton>
+ )
+ }
+)(({theme}) => ({
+ color: theme.palette.primary.dark,
+ fontSize: "15px",
+ height: "30px",
+ width: "51px",
+ borderRadius: "5px",
+ "&:hover": {
+ background: theme.palette.primary.light,
+ },
+}))
+
+export const CloseButton = styled(
+ (props) => {
+ return (
+ <IconButton {...props} disableRipple={true}>
+ <CrossIcon fontSize="inherit"/>
+ </IconButton>
+ )
+ }
+)(({theme}) => ({
+ color: theme.palette.primary.dark,
+ fontSize: "15px",
+ height: "30px",
+ width: "30px",
+ borderRadius: "5px",
+ "&:hover": {
+ background: theme.palette.primary.light,
+ },
+}))
+
export const ToggleVisibilityButton = styled(
({visible, ...props}) => {
const Icon = visible ? CrossedEyeIcon : EyeIcon
@@ -111,4 +149,4 @@
"&:hover": {
background: theme.palette.primary.light,
},
-}));
\ No newline at end of file
+}))
diff --git a/client/src/components/inputs.js b/client/src/components/inputs.js
index f7e5824..0a5ce9e 100644
--- a/client/src/components/inputs.js
+++ b/client/src/components/inputs.js
@@ -2,11 +2,11 @@
import { styled } from "@mui/styles"
import React from "react"
import { InfoButton, ToggleVisibilityButton } from "./buttons"
-import { CheckedIcon, CrossIcon, LockIcon, PenIcon, PersonIcon } from "./svgIcons"
+import { CheckedIcon, RoundCrossIcon, LockIcon, PenIcon, PersonIcon } from "./svgIcons"
const iconsHeight = "16px"
const StyledCheckedIconSuccess = styled(CheckedIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.success.main}))
-const StyledCrossIconError = styled(CrossIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.error.main}))
+const StyledRoundCrossIconError = styled(RoundCrossIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.error.main}))
const StyledPenIconLight = styled(PenIcon)({height: iconsHeight, color: "#03B9E9"})
const StyledPenIconDark = styled(PenIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.primary.dark}))
const StyledPersonIconLight = styled(PersonIcon)({height: iconsHeight, color: "#03B9E9"})
@@ -27,7 +27,7 @@
let Icon = StyledPersonIconLight
let visibility = "visible"
if (props.error) {
- Icon = StyledCrossIconError
+ Icon = StyledRoundCrossIconError
}
else if (props.success) {
Icon = StyledCheckedIconSuccess
@@ -75,7 +75,7 @@
let Icon = StyledLockIcon
let visibility = "visible"
if (props.error) {
- Icon = StyledCrossIconError
+ Icon = StyledRoundCrossIconError
}
else if (props.success) {
Icon = StyledCheckedIconSuccess
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index 0fe7d85..bd14ced 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -10,6 +10,16 @@
- Play with the viewBox attribute in order to center the icon and make it uses all available space. Adding a temporary border with inline style might help.
*/
+export const ArrowIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 -3 20 20">
+ <g>
+ <path d="M0.302825536,7.53652162 L6.27862638,13.4439361 L6.37822306,13.542393 C6.77660979,13.9362206 7.47378655,13.8377637 7.77257659,13.4439361 C8.07136664,13.0501085 8.07136664,12.3609101 7.67297991,12.0655394 L3.39032264,7.83189235 L18.9274048,7.83189235 C19.5249849,7.83189235 19.9233716,7.43806472 19.9233716,6.84732327 C19.9233716,6.25658182 19.5249849,5.86275419 18.9274048,5.86275419 L3.39032264,5.86275419 L7.67297991,1.62910716 C7.97176996,1.23527953 7.97176996,0.742994993 7.67297991,0.349167363 C7.27459319,-0.0446602682 6.67701311,-0.143117176 6.27862638,0.250710455 L0.302825536,6.15812492 C0.00403549366,6.45349564 -0.0955611871,6.84732327 0.103632174,7.2411509 C0.103632174,7.33960781 0.203228855,7.43806472 0.302825536,7.53652162" id="Fill-1"></path>
+ </g>
+ </SvgIcon>
+ )
+}
+
export const CameraIcon = (props) => {
return (
<SvgIcon {...props} viewBox="2 3 20 19">
@@ -46,9 +56,8 @@
export const CrossIcon = (props) => {
return (
- <SvgIcon {...props} viewBox="0 0 16 16">
- <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z"/>
- <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z"/>
+ <SvgIcon {...props} viewBox="5 5 14 14">
+ <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
</SvgIcon>
)
}
@@ -109,3 +118,12 @@
</SvgIcon>
)
}
+
+export const RoundCrossIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 16">
+ <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z"/>
+ <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z"/>
+ </SvgIcon>
+ )
+}