diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts deleted file mode 100644 index 3b2247ce0d..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - alignItems: 'center', - }, - header: { - fontSize: theme.fontSizes.mainHeader, - }, -})); diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx index 8b8a32e343..7a6117a961 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx @@ -1,21 +1,28 @@ -import { Typography } from '@mui/material'; +import { styled, Typography } from '@mui/material'; import { Edit } from '@mui/icons-material'; import { useNavigate } from 'react-router-dom'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions'; -import { useStyles } from './FeatureSettingsInformation.style'; interface IFeatureSettingsInformationProps { projectId: string; featureId: string; } +const StyledContainer = styled('div')({ + display: 'flex', + alignItems: 'center', +}); + +const StyledTypography = styled(Typography)(({ theme }) => ({ + fontSize: theme.fontSizes.mainHeader, +})); + export const FeatureSettingsInformation = ({ projectId, featureId, }: IFeatureSettingsInformationProps) => { - const { classes: styles } = useStyles(); const { feature } = useFeature(projectId, featureId); const navigate = useNavigate(); @@ -25,10 +32,8 @@ export const FeatureSettingsInformation = ({ return ( <> -
- - Feature information - + + Feature information -
+ Name: {feature.name} diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts deleted file mode 100644 index 7c222ac736..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'grid', - gap: theme.spacing(2), - }, -})); diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx index 4bf401ace6..54920f4db0 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx @@ -3,13 +3,17 @@ import useProject from 'hooks/api/getters/useProject/useProject'; import { IFeatureToggle } from 'interfaces/featureToggle'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Dialogue } from 'component/common/Dialogue/Dialogue'; -import { useStyles } from './FeatureSettingsProjectConfirm.styles'; import { arraysHaveSameItems } from 'utils/arraysHaveSameItems'; import { Alert, List, ListItem, styled } from '@mui/material'; import { Link } from 'react-router-dom'; import { IChangeRequest } from 'component/changeRequest/changeRequest.types'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; +const StyledContainer = styled('div')(({ theme }) => ({ + display: 'grid', + gap: theme.spacing(2), +})); + const StyledAlert = styled(Alert)(({ theme }) => ({ marginBottom: theme.spacing(1), })); @@ -37,7 +41,6 @@ const FeatureSettingsProjectConfirm = ({ }: IFeatureSettingsProjectConfirm) => { const currentProjectId = useRequiredPathParam('projectId'); const { project } = useProject(projectId); - const { classes: styles } = useStyles(); const hasSameEnvironments: boolean = useMemo(() => { return arraysHaveSameItems( @@ -62,7 +65,7 @@ const FeatureSettingsProjectConfirm = ({ primaryButtonText="Change project" secondaryButtonText="Cancel" > -
+ This feature toggle is compatible with the new project. @@ -71,7 +74,7 @@ const FeatureSettingsProjectConfirm = ({ Are you sure you want to change the project for this toggle?

-
+ } elseShow={ @@ -81,7 +84,7 @@ const FeatureSettingsProjectConfirm = ({ title="Confirm change project" primaryButtonText="OK" > -
+ Incompatible project environments @@ -119,7 +122,7 @@ const FeatureSettingsProjectConfirm = ({ } /> -
+ } /> diff --git a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts deleted file mode 100644 index 2d29ff8027..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - width: '42px', - height: '42px', - fontSize: '0.7em', - background: 'gray', - borderRadius: theme.shape.borderRadius, - textAlign: 'center', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - padding: '13px 10px', - }, -})); diff --git a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx deleted file mode 100644 index 6767e9657d..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { useStyles } from './FeatureStatus.styles'; -import TimeAgo from 'react-timeago'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { Tooltip, TooltipProps } from '@mui/material'; -import React from 'react'; - -function generateUnit(unit?: string): string { - switch (unit) { - case 'second': - return 's'; - case 'minute': - return 'm'; - case 'hour': - return 'h'; - case 'day': - return 'D'; - case 'week': - return 'W'; - case 'month': - return 'M'; - case 'year': - return 'Y'; - default: - return ''; - } -} - -function getColor(unit?: string): string { - switch (unit) { - case 'second': - return '#98E3AF'; - case 'minute': - return '#98E3AF'; - case 'hour': - return '#98E3AF'; - case 'day': - return '#98E3AF'; - case 'week': - return '#ECD875'; - case 'month': - return '#F5A69A'; - case 'year': - return '#F5A69A'; - default: - return '#EDF0F1'; - } -} - -interface IFeatureStatusProps { - lastSeenAt?: string | Date | null; - tooltipPlacement?: TooltipProps['placement']; -} - -const FeatureStatus = ({ - lastSeenAt, - tooltipPlacement, -}: IFeatureStatusProps) => { - const { classes: styles } = useStyles(); - - const Wrapper = ( - props: React.PropsWithChildren<{ color: string; toolTip: string }> - ) => { - return ( - -
- {props.children} -
- - ); - }; - - return ( - ( - { - return ( - - {value} - {generateUnit(unit)} - - ); - }} - /> - )} - elseShow={ - - ⊕ - - } - /> - ); -}; - -export default FeatureStatus; diff --git a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts deleted file mode 100644 index 2611881121..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - icon: { - color: theme.palette.inactiveIcon, - }, -})); diff --git a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx deleted file mode 100644 index 161d2f9659..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useStyles } from './FeatureType.styles'; -import { Tooltip } from '@mui/material'; -import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons'; -import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes'; - -interface IFeatureTypeProps { - type: string; -} - -const FeatureStatus = ({ type }: IFeatureTypeProps) => { - const { classes: styles } = useStyles(); - const { featureTypes } = useFeatureTypes(); - const IconComponent = getFeatureTypeIcons(type); - - const typeName = featureTypes.filter(t => t.id === type).map(t => t.name); - const title = `"${typeName || type}" toggle`; - - return ( - - - - ); -}; - -export default FeatureStatus; diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts deleted file mode 100644 index c02a3587c2..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - error: { - color: theme.palette.error.main, - fontSize: theme.fontSizes.smallBody, - position: 'relative', - }, - input: { - maxWidth: 350, - width: '100%', - }, - grid: { - marginBottom: '0.5rem', - }, - weightInput: { - marginRight: '0.8rem', - }, - label: { - display: 'flex', - alignItems: 'center', - gap: '1ch', - marginBottom: '1rem', - }, - info: { - width: '18.5px', - height: '18.5px', - color: 'grey', - }, - select: { - minWidth: '100px', - width: '100%', - }, -})); diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx index 8c45b00137..9045818dfc 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx @@ -5,6 +5,7 @@ import { FormControlLabel, Grid, InputAdornment, + styled, } from '@mui/material'; import { weightTypes } from './enums'; import { OverrideConfig } from './OverrideConfig/OverrideConfig'; @@ -18,7 +19,6 @@ import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; import { IFeatureVariant } from 'interfaces/featureToggle'; import cloneDeep from 'lodash.clonedeep'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; -import { useStyles } from './AddFeatureVariant.styles'; import Input from 'component/common/Input/Input'; import { formatUnknownError } from 'utils/formatUnknownError'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; @@ -34,6 +34,33 @@ const payloadOptions = [ const EMPTY_PAYLOAD = { type: 'string', value: '' }; +const StyledError = styled('p')(({ theme }) => ({ + color: theme.palette.error.main, + fontSize: theme.fontSizes.smallBody, + position: 'relative', +})); + +const StyledInput = styled(Input)({ + maxWidth: 350, + width: '100%', +}); + +const StyledGrid = styled(Grid)(({ theme }) => ({ + marginBottom: theme.spacing(1), +})); + +const StyledLabel = styled('p')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: '1ch', + marginBottom: theme.spacing(2), +})); + +const StyledGeneralSelect = styled(GeneralSelect)({ + minWidth: '100px', + width: '100%', +}); + interface IAddVariantProps { showDialog: boolean; closeDialog: () => void; @@ -55,7 +82,6 @@ export const AddVariant = ({ title, editing, }: IAddVariantProps) => { - const { classes: styles } = useStyles(); const [data, setData] = useState>({}); const [payload, setPayload] = useState(EMPTY_PAYLOAD); const [overrides, overridesDispatch] = useOverrides([]); @@ -232,13 +258,12 @@ export const AddVariant = ({ onSubmit={submit} className={themeStyles.contentSpacingY} > -

{error.general}

- {error.general} +
- + {/* If we're editing, we need to have at least 2 existing variants, since we require at least 1 variable. If adding, we could be adding nr 2, and as such should be allowed to set weightType to variable */} 0) } show={ - + ), }} - className={styles.weightInput} + sx={{ marginRight: '0.8rem' }} value={data.weight} error={Boolean(error.weight)} errorText={error.weight} @@ -312,18 +337,17 @@ export const AddVariant = ({ } /> - -

+ + Payload -

+ - 0} show={ -

+ Overrides -

+ } /> ({ - contextFieldSelect: { - marginRight: '8px', - }, -})); diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx index e38188b089..d1c7916f8c 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx @@ -2,7 +2,6 @@ import { ChangeEvent, VFC } from 'react'; import classnames from 'classnames'; import { Grid, IconButton, TextField, Tooltip } from '@mui/material'; import { Delete } from '@mui/icons-material'; -import { useStyles } from './OverrideConfig.styles'; import { Autocomplete } from '@mui/material'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; import { useThemeStyles } from 'themes/themeStyles'; @@ -21,7 +20,6 @@ export const OverrideConfig: VFC = ({ overrides, overridesDispatch, }) => { - const { classes: styles } = useStyles(); const { classes: themeStyles } = useThemeStyles(); const { context } = useUnleashContext(); @@ -69,7 +67,7 @@ export const OverrideConfig: VFC = ({ md={3} sm={3} xs={3} - className={styles.contextFieldSelect} + sx={theme => ({ marginRight: theme.spacing(1) })} > ({ - overlay: { - pointerEvents: 'none', - display: 'grid', - padding: '1rem', - overflowY: 'auto', - alignItems: 'center', - justifyContent: 'center', - height: '100vh', - width: '100vw', - }, - modal: { - pointerEvents: 'auto', - position: 'relative', - padding: '4rem', - background: theme.palette.background.paper, - boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)', - borderRadius: '1rem', - [theme.breakpoints.down('md')]: { - padding: '2rem', - }, - }, - close: { - all: 'unset', - position: 'absolute', - top: 0, - right: 0, - }, - closeIcon: { - fontSize: '1.5rem', - color: theme.palette.inactiveIcon, - }, -})); diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx index f6d851bd24..2981b34aaa 100644 --- a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx +++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx @@ -1,20 +1,53 @@ -import { IconButton, Modal } from '@mui/material'; +import { IconButton, Modal, styled } from '@mui/material'; import React, { useContext } from 'react'; import { feedbackCESContext, IFeedbackCESState, } from 'component/feedback/FeedbackCESContext/FeedbackCESContext'; import { FeedbackCESForm } from 'component/feedback/FeedbackCES/FeedbackCESForm'; -import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCES.styles'; import { CloseOutlined } from '@mui/icons-material'; export interface IFeedbackCESProps { state?: IFeedbackCESState; } +const StyledOverlay = styled('div')(({ theme }) => ({ + pointerEvents: 'none', + display: 'grid', + padding: theme.spacing(2), + overflowY: 'auto', + alignItems: 'center', + justifyContent: 'center', + height: '100vh', + width: '100vw', +})); + +const StyledModal = styled('div')(({ theme }) => ({ + pointerEvents: 'auto', + position: 'relative', + padding: theme.spacing(8), + background: theme.palette.background.paper, + boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)', + borderRadius: theme.spacing(2), + [theme.breakpoints.down('md')]: { + padding: theme.spacing(4), + }, +})); + +const StyledClose = styled('div')({ + all: 'unset', + position: 'absolute', + top: 0, + right: 0, +}); + +const StyledCloseIcon = styled(CloseOutlined)(({ theme }) => ({ + fontSize: '1.5rem', + color: theme.palette.inactiveIcon, +})); + export const FeedbackCES = ({ state }: IFeedbackCESProps) => { const { hideFeedbackCES } = useContext(feedbackCESContext); - const { classes: styles } = useStyles(); const modalContent = state && ( @@ -26,19 +59,16 @@ export const FeedbackCES = ({ state }: IFeedbackCESProps) => { onClose={hideFeedbackCES} aria-label={state?.title} > -
-
-
+ + + - + -
+ {modalContent} -
-
+ + ); }; diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts deleted file mode 100644 index 7b5972ab4d..0000000000 --- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - fontWeight: theme.fontWeight.thin, - }, - form: { - display: 'grid', - gap: '3rem', - gridTemplateColumns: 'minmax(auto, 40rem)', - justifyContent: 'center', - }, - title: { - all: 'unset', - display: 'block', - textAlign: 'center', - color: theme.palette.text.secondary, - }, - subtitle: { - all: 'unset', - display: 'block', - marginTop: '2.5rem', - fontSize: '1.5rem', - textAlign: 'center', - }, - textLabel: { - display: 'block', - marginBottom: '0.5rem', - }, - buttons: { - textAlign: 'center', - }, - button: { - minWidth: '15rem', - }, -})); diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx index 3422428111..a6dfcb1de7 100644 --- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx +++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx @@ -1,5 +1,4 @@ -import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCESForm.styles'; -import { Button, TextField } from '@mui/material'; +import { Box, Button, styled, TextField } from '@mui/material'; import React, { useState } from 'react'; import produce from 'immer'; import useToast from 'hooks/useToast'; @@ -18,10 +17,40 @@ export interface IFeedbackCESForm { path: string; } +const StyledContainer = styled('div')(({ theme }) => ({ + fontWeight: theme.fontWeight.thin, +})); + +const StyledTitle = styled('h1')(({ theme }) => ({ + all: 'unset', + display: 'block', + textAlign: 'center', + color: theme.palette.text.secondary, +})); + +const StyledForm = styled('form')(({ theme }) => ({ + display: 'grid', + gap: theme.spacing(6), + gridTemplateColumns: 'minmax(auto, 40rem)', + justifyContent: 'center', +})); + +const StyledSubtitle = styled('p')(({ theme }) => ({ + all: 'unset', + display: 'block', + marginTop: theme.spacing(5), + fontSize: theme.spacing(3), + textAlign: 'center', +})); + +const StyledTextLabel = styled('label')(({ theme }) => ({ + display: 'block', + marginBottom: theme.spacing(1), +})); + export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => { const [loading, setLoading] = useState(false); const { setToastData } = useToast(); - const { classes: styles } = useStyles(); const [form, setForm] = useState>({ path: state.path, @@ -57,19 +86,15 @@ export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => { }; return ( -
-

Please help us improve

-
-

{state.title}

+ + Please help us improve + + {state.title} - - -
+ + + ); }; diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts deleted file mode 100644 index 78d348269a..0000000000 --- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - scoreInput: { - display: 'flex', - gap: '1rem', - alignItems: 'center', - margin: '0 auto', - }, - scoreHelp: { - width: '6.25rem', - whiteSpace: 'nowrap', - color: theme.palette.text.secondary, - '&:first-of-type': { - textAlign: 'right', - }, - [theme.breakpoints.down('sm')]: { - display: 'none', - }, - }, - scoreValue: { - '& input': { - clip: 'rect(0 0 0 0)', - clipPath: 'inset(50%)', - overflow: 'hidden', - position: 'absolute', - whiteSpace: 'nowrap', - width: 1, - height: 1, - }, - '& span': { - display: 'grid', - justifyContent: 'center', - alignItems: 'center', - background: theme.palette.grey[300], - width: '3rem', - height: '3rem', - borderRadius: '10rem', - fontSize: '1.25rem', - paddingBottom: 2, - userSelect: 'none', - cursor: 'pointer', - }, - '& input:checked + span': { - fontWeight: theme.fontWeight.bold, - background: theme.palette.primary.main, - color: 'white', - }, - '& input:focus-visible + span': { - outline: '2px solid', - outlineOffset: 2, - outlineColor: theme.palette.primary.main, - }, - }, -})); diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx index 029be6c28a..8c2cc6eec1 100644 --- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx +++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx @@ -1,16 +1,68 @@ import React from 'react'; import produce from 'immer'; -import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCESScore.styles'; import { IFeedbackCESForm } from 'component/feedback/FeedbackCES/FeedbackCESForm'; +import { styled } from '@mui/material'; interface IFeedbackCESScoreProps { form: Partial; setForm: React.Dispatch>>; } -export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => { - const { classes: styles } = useStyles(); +const StyledScoreInput = styled('div')(({ theme }) => ({ + display: 'flex', + gap: theme.spacing(2), + alignItems: 'center', + margin: '0 auto', +})); +const StyledScoreHelp = styled('span')(({ theme }) => ({ + width: '6.25rem', + whiteSpace: 'nowrap', + color: theme.palette.text.secondary, + '&:first-of-type': { + textAlign: 'right', + }, + [theme.breakpoints.down('sm')]: { + display: 'none', + }, +})); + +const StyledScoreValue = styled('label')(({ theme }) => ({ + '& input': { + clip: 'rect(0 0 0 0)', + clipPath: 'inset(50%)', + overflow: 'hidden', + position: 'absolute', + whiteSpace: 'nowrap', + width: 1, + height: 1, + }, + '& span': { + display: 'grid', + justifyContent: 'center', + alignItems: 'center', + background: theme.palette.grey[300], + width: '3rem', + height: '3rem', + borderRadius: '10rem', + fontSize: '1.25rem', + paddingBottom: 2, + userSelect: 'none', + cursor: 'pointer', + }, + '& input:checked + span': { + fontWeight: theme.fontWeight.bold, + background: theme.palette.primary.main, + color: theme.palette.text.tertiaryContrast, + }, + '& input:focus-visible + span': { + outline: '2px solid', + outlineOffset: 2, + outlineColor: theme.palette.primary.main, + }, +})); + +export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => { const onScoreChange = (event: React.ChangeEvent) => { setForm( produce(draft => { @@ -20,10 +72,10 @@ export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => { }; return ( -
- Very difficult + + Very difficult {[1, 2, 3, 4, 5, 6, 7].map(score => ( - + ))} - Very easy -
+ Very easy + ); }; diff --git a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap index bc2bf3ae72..344ba39ca2 100644 --- a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap +++ b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap @@ -4,32 +4,32 @@ exports[`FeedbackCESForm 1`] = `

Please help us improve

a

Very difficult Very easy @@ -122,7 +122,7 @@ exports[`FeedbackCESForm 1`] = ` hidden="" >