client/src/components/buttons.js

import { QuestionMark } from "@mui/icons-material";
import { IconButton } from "@mui/material";
import { styled } from "@mui/styles";
import { ArrowIcon, CameraIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons";

const RoundButton = styled(
    ({Icon, ...props}) => (
        <IconButton {...props} disableRipple={true}>
            <Icon fontSize="inherit"/>
        </IconButton>
    )
)(({theme}) => ({
    border: `1px solid ${theme.palette.primary.dark}`,
    color: theme.palette.primary.dark,
    fontSize: "15px",
    "&:hover": {
        background: theme.palette.primary.light,
    },
    "&:active": {
        color: "#FFF",
        background: theme.palette.primary.dark,
    },
    "&.MuiIconButton-sizeSmall": {
        height: "15px",
        width: "15px",
    },
    "&.MuiIconButton-sizeMedium": {
        height: "30px",
        width: "30px",
    },
    "&.MuiIconButton-sizeLarge": {
        height: "53px",
        width: "53px",
    }
}));

export const CancelButton = (props) => {
    return (
        <RoundButton {...props}
            aria-label="remove picture"
            Icon={CancelIcon}
            size="large"
        />
    )
}

export const EditButton = (props) => {
    return (
        <RoundButton {...props}
            aria-label="edit picture"
            Icon={PenIcon}
            size="large"
        />
    )
}

export const UploadButton = (props) => {
    return (
        <RoundButton {...props}
            aria-label="upload picture"
            Icon={FolderIcon}
            size="large"
        />
    )
}

export const TakePictureButton = (props) => {
    return (
        <RoundButton {...props}
            aria-label="take picture"
            Icon={CameraIcon}
            size="large"
        />
    )
}

export const InfoButton = (props) => {
    return (
        <RoundButton {...props}
            aria-label="informations"
            Icon={InfoIcon}
            size="small"
        />
    )
}

export const TipButton = (props) => {
    return (
        <RoundButton {...props}
            aria-label="informations"
            Icon={QuestionMark}
            size="medium"
        />
    )
}

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
        return (
            <IconButton {...props} disableRipple={true}>
                <Icon fontSize="inherit"/>
            </IconButton>
        )
    }
)(({theme}) => ({
    color: theme.palette.primary.dark,
    fontSize: "15px",
    height: "15px",
    width: "15px",
    "&:hover": {
        background: theme.palette.primary.light,
    },
}))