Radiobutton component

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import SetNewPasswordPage from "./scenes/login/SetNewPassword";
 
 
 
+
 function App() {
   // const isAuthenticated = useSelector((state) => state.auth.isLoggedIn); // TODO: redux implementation
   const isAuthenticated = true;// emulate login

frontend/src/Styles.js

@@ -0,0 +1,29 @@
+export const colors = {
+    purple: '#7F56D9',
+    darkGrey: '#344054',
+    grey: '#5D6B98',
+    lightGrey: '#B9C0D4',
+    green: '#079455'
+};
+
+export const fonts = {
+    fontFamily: "Inter, sans-serif",
+    bold: {
+        size: '16px',
+        lineHeight: '24px',
+        color: colors.darkGrey,
+        fontWeight: 500
+    },
+    default: {
+        size: '13px',
+        lineHeight: '13px',
+        color: colors.darkGrey,
+        fontWeight: 400
+    },
+    informative: {
+        size: '11px',
+        lineHeight: '11px',
+        color: colors.darkGrey,
+        fontWeight: 400
+    }
+};

frontend/src/components/CheckIcon/CheckIcon.jsx

@@ -0,0 +1,33 @@
+import { ThemeProvider, createTheme } from "@mui/material";
+import { PropTypes } from "@mui/material";
+import { colors } from "../../Styles";
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+
+export default function CheckIcon({ size, type, color }) {
+    const theme = createTheme({
+        palette: {
+            purple: colors.purple,
+            black: colors.black,
+            green: colors.green
+        }
+    });
+
+    const iconSize = size === "small" ? 20 : size === "medium" ? 24 : 28;
+
+    const checkIconStyle = {
+        width: iconSize,
+        height: iconSize,
+        color: color === "purple" || color === "black" ? color : "green",
+        ...style
+    };
+
+    return (
+        <ThemeProvider theme={theme}>
+            {(type == 'outline') ?
+                <CheckCircleOutlineIcon sx={checkIconStyle} /> :
+                <CheckCircleIcon sx={checkIconStyle} />
+            }
+        </ThemeProvider>
+    )
+}

frontend/src/components/CheckIcon/CheckIcon.stories.js

@@ -0,0 +1,52 @@
+const commonOutlinedProps = {
+    type: 'outline',
+    size: 'medium'
+};
+
+const commonSolidProps = {
+    type: 'solid',
+    size: 'medium'
+}
+
+
+export const PurpleOutline = {
+    args: {
+        ...commonOutlinedProps,
+        color: 'purple'
+    }
+};
+
+export const BlackOutline = {
+    args: {
+        ...commonOutlinedProps,
+        color: 'black'
+    }
+};
+
+export const GreenOutline = {
+    args: {
+        ...commonOutlinedProps,
+        color: 'green'
+    }
+};
+
+export const PurpleSolid = {
+    args: {
+        ...commonSolidProps,
+        color: 'purple'
+    }
+};
+
+export const BlackSolid = {
+    args: {
+        ...commonSolidProps,
+        color: 'black'
+    }
+};
+
+export const GreenSolid = {
+    args: {
+        ...commonSolidProps,
+        color: 'green'
+    }
+};

frontend/src/components/RadioButton/RadioButton.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import './RadioButtonStyles.css';
+import PropTypes from "prop-types";
+import { Radio } from "@mui/material";
+
+const RadioButton = ({
+    id,
+    name,
+    value,
+    label,
+    onChange,
+    buttonSize = 'small',
+    color = 'default',
+    enabled = true,
+}) => {
+    const main_purple = 'var(--main-purple)';
+    const sizeClass = buttonSize ==='large' ? 'radio-large' : 'radio-small';
+    return (
+        <div className={`radio-button ${sizeClass}`}>
+            <Radio                
+                id={id}                
+                name = {name}
+                value={value}            
+                disabled={!enabled}
+                onChange={onChange}
+                size={buttonSize === 'large' ? 'large' : 'small'}
+                style={{ color: color === 'default' ? main_purple : color }}
+            />
+            { label && <label htmlFor={id}>{label}</label> }
+        </div >
+    );
+};
+
+RadioButton.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    enabled: PropTypes.bool,
+    onchange: PropTypes.func,
+    color: PropTypes.string,
+};
+
+export default RadioButton;

frontend/src/components/RadioButton/RadioButtonStyles.css

@@ -0,0 +1,20 @@
+input{
+    accent-color: #7F56D9;
+}
+
+input:active{
+    accent-color: #7F56D9;
+    outline: 5px solid #9E77ED3D;
+    border-radius: 5px;
+}
+.radio-small {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+}
+
+.radio-large {
+    width: 20px;
+    height: 20px;
+    border-radius: 6px;
+}