diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx index 6320b7238a..aae6d6e722 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx @@ -7,7 +7,7 @@ import { } from 'component/common/AutocompleteBox/AutocompleteBox'; import { FeatureStrategySegmentList } from 'component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList'; import { useStyles } from 'component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.styles'; -import { SegmentDocsStrategyWarning } from 'component/segments/SegmentDocs/SegmentDocs'; +import { SegmentDocsStrategyWarning } from 'component/segments/SegmentDocs'; import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits'; import { Divider, Typography } from '@mui/material'; diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts index 4c1003c560..f683ecdc6a 100644 --- a/frontend/src/component/menu/routes.ts +++ b/frontend/src/component/menu/routes.ts @@ -48,7 +48,7 @@ import { CreateSegment } from 'component/segments/CreateSegment/CreateSegment'; import { EditSegment } from 'component/segments/EditSegment/EditSegment'; import { IRoute } from 'interfaces/route'; import { EnvironmentTable } from 'component/environments/EnvironmentTable/EnvironmentTable'; -import { SegmentTable } from 'component/segments/SegmentTable/SegmentTable'; +import { SegmentTable } from 'component/segments/SegmentTable'; import FlaggedBillingRedirect from 'component/admin/billing/FlaggedBillingRedirect/FlaggedBillingRedirect'; import { FeaturesArchiveTable } from '../archive/FeaturesArchiveTable'; import { Billing } from 'component/admin/billing/Billing'; diff --git a/frontend/src/component/segments/CreateSegment/CreateSegment.tsx b/frontend/src/component/segments/CreateSegment/CreateSegment.tsx index 7205eff2ef..81273f32f2 100644 --- a/frontend/src/component/segments/CreateSegment/CreateSegment.tsx +++ b/frontend/src/component/segments/CreateSegment/CreateSegment.tsx @@ -10,9 +10,9 @@ import useToast from 'hooks/useToast'; import { useNavigate } from 'react-router-dom'; import { formatUnknownError } from 'utils/formatUnknownError'; import { useSegmentForm } from '../hooks/useSegmentForm'; -import { SegmentForm } from '../SegmentForm/SegmentForm'; +import { SegmentForm } from '../SegmentForm'; import { feedbackCESContext } from 'component/feedback/FeedbackCESContext/FeedbackCESContext'; -import { segmentsDocsLink } from 'component/segments/SegmentDocs/SegmentDocs'; +import { segmentsDocsLink } from 'component/segments/SegmentDocs'; import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValuesCount'; import { SEGMENT_CREATE_BTN_ID } from 'utils/testIds'; import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits'; diff --git a/frontend/src/component/segments/EditSegment/EditSegment.tsx b/frontend/src/component/segments/EditSegment/EditSegment.tsx index 2a7ba360a4..7fc3f2613e 100644 --- a/frontend/src/component/segments/EditSegment/EditSegment.tsx +++ b/frontend/src/component/segments/EditSegment/EditSegment.tsx @@ -11,10 +11,10 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import { formatUnknownError } from 'utils/formatUnknownError'; import { useSegmentForm } from '../hooks/useSegmentForm'; -import { SegmentForm } from '../SegmentForm/SegmentForm'; +import { SegmentForm } from '../SegmentForm'; import { segmentsFormDescription } from 'component/segments/CreateSegment/CreateSegment'; import { UpdateButton } from 'component/common/UpdateButton/UpdateButton'; -import { segmentsDocsLink } from 'component/segments/SegmentDocs/SegmentDocs'; +import { segmentsDocsLink } from 'component/segments/SegmentDocs'; import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValuesCount'; import { SEGMENT_SAVE_BTN_ID } from 'utils/testIds'; import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits'; diff --git a/frontend/src/component/segments/SegmentDocs/SegmentDocs.tsx b/frontend/src/component/segments/SegmentDocs.tsx similarity index 100% rename from frontend/src/component/segments/SegmentDocs/SegmentDocs.tsx rename to frontend/src/component/segments/SegmentDocs.tsx diff --git a/frontend/src/component/segments/SegmentEmpty.tsx b/frontend/src/component/segments/SegmentEmpty.tsx new file mode 100644 index 0000000000..a8e1ecedc3 --- /dev/null +++ b/frontend/src/component/segments/SegmentEmpty.tsx @@ -0,0 +1,58 @@ +import { styled, Typography } from '@mui/material'; +import { Link } from 'react-router-dom'; +import { CREATE_SEGMENT } from 'component/providers/AccessProvider/permissions'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import AccessContext from 'contexts/AccessContext'; +import { useContext } from 'react'; + +const StyledDiv = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + margin: theme.spacing(6), + marginLeft: 'auto', + marginRight: 'auto', +})); + +const StyledTypography = styled(Typography)(({ theme }) => ({ + fontSize: theme.fontSizes.mainHeader, + marginBottom: theme.spacing(2.5), +})); + +const StyledParagraph = styled('p')(({ theme }) => ({ + fontSize: theme.fontSizes.smallBody, + color: theme.palette.text.secondary, + maxWidth: 515, + marginBottom: theme.spacing(2.5), + textAlign: 'center', +})); + +const StyledLink = styled(Link)(({ theme }) => ({ + textDecoration: 'none', + color: theme.palette.primary.main, + fontWeight: theme.fontWeight.bold, +})); + +export const SegmentEmpty = () => { + const { hasAccess } = useContext(AccessContext); + + return ( + + No segments yet! + + Segment makes it easy for you to define who should be exposed to + your feature. The segment is often a collection of constraints + and can be reused. + + + Create your first segment + + } + /> + + ); +}; diff --git a/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.styles.ts b/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.styles.ts deleted file mode 100644 index 2cf88bedda..0000000000 --- a/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.styles.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - empty: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - margin: theme.spacing(6), - marginLeft: 'auto', - marginRight: 'auto', - }, - title: { - fontSize: theme.fontSizes.mainHeader, - marginBottom: theme.spacing(2.5), - }, - subtitle: { - fontSize: theme.fontSizes.smallBody, - color: theme.palette.text.secondary, - maxWidth: 515, - marginBottom: theme.spacing(2.5), - textAlign: 'center', - }, - paramButton: { - textDecoration: 'none', - color: theme.palette.primary.main, - fontWeight: theme.fontWeight.bold, - }, -})); diff --git a/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.tsx b/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.tsx deleted file mode 100644 index eb402082ef..0000000000 --- a/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Typography } from '@mui/material'; -import { useStyles } from 'component/segments/SegmentEmpty/SegmentEmpty.styles'; -import { Link } from 'react-router-dom'; -import { CREATE_SEGMENT } from 'component/providers/AccessProvider/permissions'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import AccessContext from 'contexts/AccessContext'; -import { useContext } from 'react'; - -export const SegmentEmpty = () => { - const { classes } = useStyles(); - const { hasAccess } = useContext(AccessContext); - - return ( -
- No segments yet! -

- Segment makes it easy for you to define who should be exposed to - your feature. The segment is often a collection of constraints - and can be reused. -

- - Create your first segment - - } - /> -
- ); -}; diff --git a/frontend/src/component/segments/SegmentForm/SegmentForm.tsx b/frontend/src/component/segments/SegmentForm.tsx similarity index 79% rename from frontend/src/component/segments/SegmentForm/SegmentForm.tsx rename to frontend/src/component/segments/SegmentForm.tsx index d3f32d6122..e563d6bcd8 100644 --- a/frontend/src/component/segments/SegmentForm/SegmentForm.tsx +++ b/frontend/src/component/segments/SegmentForm.tsx @@ -1,14 +1,24 @@ import { IConstraint } from 'interfaces/strategy'; -import { useStyles } from './SegmentForm.styles'; -import { SegmentFormStepOne } from '../SegmentFormStepOne/SegmentFormStepOne'; -import { SegmentFormStepTwo } from '../SegmentFormStepTwo/SegmentFormStepTwo'; +import { SegmentFormStepOne } from './SegmentFormStepOne'; +import { SegmentFormStepTwo } from './SegmentFormStepTwo'; import React, { useState } from 'react'; -import { SegmentFormStepList } from 'component/segments/SegmentFormStepList/SegmentFormStepList'; +import { SegmentFormStepList } from 'component/segments/SegmentFormStepList'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { styled } from '@mui/material'; export type SegmentFormStep = 1 | 2; export type SegmentFormMode = 'create' | 'edit'; +const Styled = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + margin: theme.spacing(6), + marginLeft: 'auto', + marginRight: 'auto', +})); + interface ISegmentProps { name: string; description: string; @@ -22,6 +32,12 @@ interface ISegmentProps { mode: SegmentFormMode; } +const StyledForm = styled('form')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + height: '100%', +})); + export const SegmentForm: React.FC = ({ children, name, @@ -35,14 +51,13 @@ export const SegmentForm: React.FC = ({ clearErrors, mode, }) => { - const { classes: styles } = useStyles(); const totalSteps = 2; const [currentStep, setCurrentStep] = useState(1); return ( <> -
+ = ({ } /> - +
); }; diff --git a/frontend/src/component/segments/SegmentForm/SegmentForm.styles.ts b/frontend/src/component/segments/SegmentForm/SegmentForm.styles.ts deleted file mode 100644 index 36079cbe81..0000000000 --- a/frontend/src/component/segments/SegmentForm/SegmentForm.styles.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - maxWidth: '400px', - }, - form: { - display: 'flex', - flexDirection: 'column', - height: '100%', - }, - input: { width: '100%', marginBottom: '1rem' }, - label: { - minWidth: '300px', - [theme.breakpoints.down(600)]: { - minWidth: 'auto', - }, - }, - buttonContainer: { - marginTop: 'auto', - display: 'flex', - justifyContent: 'flex-end', - }, - cancelButton: { - marginLeft: '1.5rem', - }, - inputDescription: { - marginBottom: '0.5rem', - }, - formHeader: { - fontWeight: 'normal', - marginTop: '0', - }, - header: { - fontWeight: 'normal', - }, - errorMessage: { - fontSize: theme.fontSizes.smallBody, - color: theme.palette.error.main, - position: 'absolute', - top: '-8px', - }, - userInfoContainer: { - margin: '-20px 0', - }, - errorAlert: { - marginBottom: '1rem', - }, - flexRow: { - display: 'flex', - alignItems: 'center', - }, -})); diff --git a/frontend/src/component/segments/SegmentFormStepList.tsx b/frontend/src/component/segments/SegmentFormStepList.tsx new file mode 100644 index 0000000000..7e01e1dba7 --- /dev/null +++ b/frontend/src/component/segments/SegmentFormStepList.tsx @@ -0,0 +1,72 @@ +import { FiberManualRecord } from '@mui/icons-material'; +import React from 'react'; +import { styled } from '@mui/material'; +import { formTemplateSidebarWidth } from '../common/FormTemplate/FormTemplate.styles'; + +interface ISegmentFormStepListProps { + total: number; + current: number; +} + +const StyledContainer = styled('div')(({ theme }) => ({ + display: 'flex', + position: 'absolute', + alignItems: 'center', + justifyContent: 'center', + top: 30, + left: 0, + right: formTemplateSidebarWidth, + [theme.breakpoints.down(1100)]: { + right: 0, + }, +})); + +const StyledSteps = styled('div')(({ theme }) => ({ + position: 'relative', + borderRadius: 10, + background: theme.palette.background.paper, + padding: theme.spacing(1, 2.5), + margin: 'auto', + display: 'flex', + alignItems: 'center', +})); + +const StyledSpan = styled('span')(({ theme }) => ({ + marginRight: 15, + fontSize: theme.fontSizes.smallBody, +})); + +const StyledFiberManualRecord = styled(FiberManualRecord, { + shouldForwardProp: prop => prop !== 'filled', +})<{ filled: boolean }>(({ theme, filled }) => ({ + fill: theme.palette.primary.main, + transition: 'opacity 0.4s ease', + opacity: filled ? 1 : 0.4, + fontSize: filled ? 20 : 17, +})); + +export const SegmentFormStepList: React.FC = ({ + total, + current, +}) => { + // Create a list with all the step numbers, e.g. [1, 2, 3]. + const steps: number[] = Array.from({ length: total }).map((_, i) => { + return i + 1; + }); + + return ( + + + + Step {current} of {total} + + {steps.map(step => ( + + ))} + + + ); +}; diff --git a/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts b/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts deleted file mode 100644 index c296846693..0000000000 --- a/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; -import { formTemplateSidebarWidth } from 'component/common/FormTemplate/FormTemplate.styles'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - position: 'absolute', - alignItems: 'center', - justifyContent: 'center', - top: 30, - left: 0, - right: formTemplateSidebarWidth, - [theme.breakpoints.down(1100)]: { - right: 0, - }, - }, - steps: { - position: 'relative', - borderRadius: 10, - background: theme.palette.background.paper, - padding: '0.6rem 1.5rem', - margin: 'auto', - display: 'flex', - alignItems: 'center', - }, - stepsText: { - marginRight: 15, - fontSize: theme.fontSizes.smallBody, - }, - circle: { - fill: theme.palette.primary.main, - fontSize: 17, - opacity: 0.4, - transition: 'opacity 0.4s ease', - }, - filledCircle: { - opacity: 1, - fontSize: 20, - }, -})); diff --git a/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.tsx b/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.tsx deleted file mode 100644 index 0a2c13b84e..0000000000 --- a/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { FiberManualRecord } from '@mui/icons-material'; -import { useStyles } from './SegmentFormStepList.styles'; -import React from 'react'; -import classNames from 'classnames'; - -interface ISegmentFormStepListProps { - total: number; - current: number; -} - -export const SegmentFormStepList: React.FC = ({ - total, - current, -}) => { - const { classes: styles } = useStyles(); - - // Create a list with all the step numbers, e.g. [1, 2, 3]. - const steps: number[] = Array.from({ length: total }).map((_, i) => { - return i + 1; - }); - - return ( -
-
- - Step {current} of {total} - - {steps.map(step => ( - - ))} -
-
- ); -}; diff --git a/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.tsx b/frontend/src/component/segments/SegmentFormStepOne.tsx similarity index 63% rename from frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.tsx rename to frontend/src/component/segments/SegmentFormStepOne.tsx index ed6b244672..36f3d8b0c1 100644 --- a/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.tsx +++ b/frontend/src/component/segments/SegmentFormStepOne.tsx @@ -1,9 +1,8 @@ -import { Button } from '@mui/material'; +import { Button, styled } from '@mui/material'; import Input from 'component/common/Input/Input'; import React from 'react'; import { useNavigate } from 'react-router-dom'; -import { useStyles } from 'component/segments/SegmentFormStepOne/SegmentFormStepOne.styles'; -import { SegmentFormStep } from '../SegmentForm/SegmentForm'; +import { SegmentFormStep } from './SegmentForm'; import { SEGMENT_NAME_ID, SEGMENT_DESC_ID, @@ -20,6 +19,35 @@ interface ISegmentFormPartOneProps { setCurrentStep: React.Dispatch>; } +const StyledForm = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + height: '100%', +})); + +const StyledContainer = styled('div')(({ theme }) => ({ + maxWidth: '400px', +})); + +const StyledInputDescription = styled('p')(({ theme }) => ({ + marginBottom: theme.spacing(1), +})); + +const StyledInput = styled(Input)(({ theme }) => ({ + width: '100%', + marginBottom: theme.spacing(2), +})); + +const StyledButtonContainer = styled('div')(({ theme }) => ({ + marginTop: 'auto', + display: 'flex', + justifyContent: 'flex-end', +})); + +const StyledCancelButton = styled(Button)(({ theme }) => ({ + marginLeft: theme.spacing(3), +})); + export const SegmentFormStepOne: React.FC = ({ children, name, @@ -31,16 +59,14 @@ export const SegmentFormStepOne: React.FC = ({ setCurrentStep, }) => { const navigate = useNavigate(); - const { classes: styles } = useStyles(); return ( -
-
-

+ + + What is the segment name? -

- + setName(e.target.value)} @@ -50,11 +76,10 @@ export const SegmentFormStepOne: React.FC = ({ required data-testid={SEGMENT_NAME_ID} /> -

+ What is the segment description? -

- + setDescription(e.target.value)} @@ -62,8 +87,8 @@ export const SegmentFormStepOne: React.FC = ({ errorText={errors.description} data-testid={SEGMENT_DESC_ID} /> -
-
+ + - -
-
+ + + ); }; diff --git a/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.styles.ts b/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.styles.ts deleted file mode 100644 index ee1eced57d..0000000000 --- a/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.styles.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - maxWidth: '400px', - }, - form: { - display: 'flex', - flexDirection: 'column', - height: '100%', - }, - input: { width: '100%', marginBottom: '1rem' }, - label: { - minWidth: '300px', - [theme.breakpoints.down(600)]: { - minWidth: 'auto', - }, - }, - buttonContainer: { - marginTop: 'auto', - display: 'flex', - justifyContent: 'flex-end', - }, - cancelButton: { - marginLeft: '1.5rem', - }, - inputDescription: { - marginBottom: '0.5rem', - }, - header: { - fontWeight: 'normal', - }, - errorMessage: { - fontSize: theme.fontSizes.smallBody, - color: theme.palette.error.main, - position: 'absolute', - top: '-8px', - }, - userInfoContainer: { - margin: '-20px 0', - }, - errorAlert: { - marginBottom: '1rem', - }, - flexRow: { - display: 'flex', - alignItems: 'center', - }, -})); diff --git a/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx b/frontend/src/component/segments/SegmentFormStepTwo.tsx similarity index 65% rename from frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx rename to frontend/src/component/segments/SegmentFormStepTwo.tsx index 0799f330f2..7921bc5d11 100644 --- a/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx +++ b/frontend/src/component/segments/SegmentFormStepTwo.tsx @@ -1,5 +1,5 @@ import React, { useRef, useState, useContext } from 'react'; -import { Button } from '@mui/material'; +import { Button, styled } from '@mui/material'; import { Add } from '@mui/icons-material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import PermissionButton from 'component/common/PermissionButton/PermissionButton'; @@ -13,12 +13,11 @@ import { import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import { IConstraint } from 'interfaces/strategy'; import { useNavigate } from 'react-router-dom'; -import { useStyles } from 'component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles'; import { ConstraintAccordionList, IConstraintAccordionListRef, } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; -import { SegmentFormStep, SegmentFormMode } from '../SegmentForm/SegmentForm'; +import { SegmentFormStep, SegmentFormMode } from './SegmentForm'; import { AutocompleteBox, IAutocompleteBoxOption, @@ -26,7 +25,7 @@ import { import { SegmentDocsValuesWarning, SegmentDocsValuesError, -} from 'component/segments/SegmentDocs/SegmentDocs'; +} from 'component/segments/SegmentDocs'; import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValuesCount'; import AccessContext from 'contexts/AccessContext'; import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits'; @@ -38,6 +37,67 @@ interface ISegmentFormPartTwoProps { mode: SegmentFormMode; } +const StyledForm = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + height: '100%', +})); + +const StyledWarning = styled('div')(({ theme }) => ({ + marginBottom: '1.5rem', +})); + +const StyledInputDescription = styled('p')(({ theme }) => ({ + marginBottom: '1rem', +})); + +const StyledAddContextContainer = styled('div')(({ theme }) => ({ + marginTop: '1rem', + borderBottom: `1px solid ${theme.palette.grey[300]}`, + paddingBottom: '2rem', +})); + +const StyledError = styled('div')(({ theme }) => ({ + marginTop: '1.5rem', +})); + +const StyledNoConstraintText = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + marginTop: theme.spacing(12), +})); + +const StyledSubtitle = styled('p')(({ theme }) => ({ + fontSize: theme.fontSizes.bodySize, + color: theme.palette.tertiary.dark, + maxWidth: 515, + marginBottom: theme.spacing(2.5), + wordBreak: 'break-word', + whiteSpace: 'normal', + textAlign: 'center', +})); + +const StyledConstraintContainer = styled('div')(({ theme }) => ({ + marginBlock: theme.spacing(4), +})); + +const StyledButtonContainer = styled('div')(({ theme }) => ({ + marginTop: 'auto', + display: 'flex', + justifyContent: 'flex-end', + borderTop: `1px solid ${theme.palette.tertiary.contrast}`, + paddingTop: theme.spacing(2), +})); + +const StyledBackButton = styled(Button)(({ theme }) => ({ + marginRight: 'auto', +})); + +const StyledCancelButton = styled(Button)(({ theme }) => ({ + marginLeft: theme.spacing(3), +})); + export const SegmentFormStepTwo: React.FC = ({ children, constraints, @@ -48,7 +108,6 @@ export const SegmentFormStepTwo: React.FC = ({ const constraintsAccordionListRef = useRef(); const navigate = useNavigate(); const { hasAccess } = useContext(AccessContext); - const { classes: styles } = useStyles(); const { context = [] } = useUnleashContext(); const [open, setOpen] = useState(false); const segmentValuesCount = useSegmentValuesCount(constraints); @@ -70,28 +129,28 @@ export const SegmentFormStepTwo: React.FC = ({ return ( <> -
-
+ + -
+
-

+ Select the context fields you want to include in the segment. -

-

+ + Use a predefined context field: -

+
-
-

+ + ...or add a new context field: -

+ setOpen(false)} @@ -113,26 +172,26 @@ export const SegmentFormStepTwo: React.FC = ({ Add context field {overSegmentValuesLimit && ( -
+ -
+ )} -
+ -

+ + Start adding context fields by selecting an option from above, or you can create a new context field and use it right away -

-
+ + } /> -
+ = ({ : undefined } /> -
- -
- + {children} - -
+ + ); }; diff --git a/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles.ts b/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles.ts deleted file mode 100644 index d9d51dd97c..0000000000 --- a/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - warning: { - marginBottom: '1.5rem', - }, - error: { - marginTop: '1.5rem', - }, - form: { - display: 'flex', - flexDirection: 'column', - height: '100%', - }, - input: { width: '100%', marginBottom: '1rem' }, - label: { - minWidth: '300px', - [theme.breakpoints.down(600)]: { - minWidth: 'auto', - }, - }, - buttonContainer: { - marginTop: 'auto', - display: 'flex', - justifyContent: 'flex-end', - borderTop: `1px solid ${theme.palette.grey[300]}`, - paddingTop: 15, - }, - errorsContainer: { - marginTop: '1rem', - }, - cancelButton: { - marginLeft: '1.5rem', - }, - inputDescription: { - marginBottom: '1rem', - }, - formHeader: { - fontWeight: 'normal', - marginTop: '0', - }, - header: { - fontWeight: 'normal', - }, - errorMessage: { - fontSize: theme.fontSizes.smallBody, - color: theme.palette.error.main, - position: 'absolute', - top: '-8px', - }, - userInfoContainer: { - margin: '-20px 0', - }, - errorAlert: { - marginBottom: '1rem', - }, - flexRow: { - display: 'flex', - alignItems: 'center', - }, - backButton: { - marginRight: 'auto', - }, - addContextContainer: { - marginTop: '1rem', - borderBottom: `1px solid ${theme.palette.grey[300]}`, - paddingBottom: '2rem', - }, - addContextButton: { - color: theme.palette.primary.dark, - background: 'transparent', - boxShadow: 'none', - border: '1px solid', - '&:hover': { - background: 'transparent', - boxShadow: 'none', - }, - }, - divider: { - borderStyle: 'solid', - borderColor: `${theme.palette.grey[300]}`, - marginTop: '1rem !important', - }, - noConstraintText: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - marginTop: '6rem', - }, - subtitle: { - fontSize: theme.fontSizes.bodySize, - color: theme.palette.grey[600], - maxWidth: 515, - marginBottom: 20, - wordBreak: 'break-word', - whiteSpace: 'normal', - textAlign: 'center', - }, - constraintContainer: { - marginBlock: '2rem', - }, -})); diff --git a/frontend/src/component/segments/SegmentTable/SegmentTable.tsx b/frontend/src/component/segments/SegmentTable.tsx similarity index 98% rename from frontend/src/component/segments/SegmentTable/SegmentTable.tsx rename to frontend/src/component/segments/SegmentTable.tsx index 206d8cd861..8c5e231972 100644 --- a/frontend/src/component/segments/SegmentTable/SegmentTable.tsx +++ b/frontend/src/component/segments/SegmentTable.tsx @@ -15,7 +15,7 @@ import { useMediaQuery } from '@mui/material'; import { sortTypes } from 'utils/sortTypes'; import { useSegments } from 'hooks/api/getters/useSegments/useSegments'; import { useMemo, useState } from 'react'; -import { SegmentEmpty } from 'component/segments/SegmentEmpty/SegmentEmpty'; +import { SegmentEmpty } from 'component/segments/SegmentEmpty'; import { IconCell } from 'component/common/Table/cells/IconCell/IconCell'; import { DonutLarge } from '@mui/icons-material'; import { SegmentActionCell } from 'component/segments/SegmentActionCell/SegmentActionCell'; diff --git a/frontend/src/component/splash/SplashPage/SplashPage.tsx b/frontend/src/component/splash/SplashPage/SplashPage.tsx index 42944d50ae..44eacd683f 100644 --- a/frontend/src/component/splash/SplashPage/SplashPage.tsx +++ b/frontend/src/component/splash/SplashPage/SplashPage.tsx @@ -1,7 +1,7 @@ import { useNavigate, Navigate } from 'react-router-dom'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import useSplashApi from 'hooks/api/actions/useSplashApi/useSplashApi'; -import { SplashPageOperators } from 'component/splash/SplashPageOperators/SplashPageOperators'; +import { SplashPageOperators } from 'component/splash/SplashPageOperators'; import { useEffect } from 'react'; import { useAuthSplash } from 'hooks/api/getters/useAuth/useAuthSplash'; import { splashIds, SplashId } from 'component/splash/splash'; diff --git a/frontend/src/component/splash/SplashPageOperators.tsx b/frontend/src/component/splash/SplashPageOperators.tsx new file mode 100644 index 0000000000..f0c8ca59ba --- /dev/null +++ b/frontend/src/component/splash/SplashPageOperators.tsx @@ -0,0 +1,170 @@ +import { Link, useNavigate } from 'react-router-dom'; +import { Button, IconButton, styled } from '@mui/material'; +import { CloseOutlined } from '@mui/icons-material'; +import { OperatorUpgradeAlert } from 'component/common/OperatorUpgradeAlert/OperatorUpgradeAlert'; + +const StyledContainer = styled('section')(({ theme }) => ({ + backgroundColor: theme.palette.primary.light, + minHeight: '100vh', + padding: theme.spacing(2), + display: 'grid', + gap: theme.spacing(2), + alignItems: 'center', + alignContent: 'center', + justifyContent: 'center', + gridTemplateColumns: 'minmax(0,auto)', + fontWeight: theme.fontWeight.thin, +})); + +const StyledContent = styled('div')(({ theme }) => ({ + position: 'relative', + padding: theme.spacing(4), + borderRadius: theme.spacing(1), + backgroundColor: theme.palette.primary.main, + color: 'white', + [theme.breakpoints.up('md')]: { + padding: theme.spacing(8), + }, +})); + +const StyledHeader = styled('header')(({ theme }) => ({ + textAlign: 'center', +})); + +const StyledTitle = styled('h1')(({ theme }) => ({ + fontWeight: 'inherit', +})); + +const StyledCloseButton = styled(IconButton)(({ theme }) => ({ + position: 'absolute', + top: 0, + right: 0, + color: 'inherit', +})); +const StyledIngress = styled('p')(({ theme }) => ({ + maxWidth: theme.spacing(64), + margin: theme.spacing(3, 'auto', 0, 'auto'), +})); + +const StyledBody = styled('div')(({ theme }) => ({ + margin: theme.spacing(4, 0), + padding: theme.spacing(4, 0), + borderTop: '1px solid', + borderBottom: '1px solid', + borderTopColor: theme.palette.primary.light, + borderBottomColor: theme.palette.primary.light, +})); + +const StyledList = styled('ul')(({ theme }) => ({ + padding: theme.spacing(2, 0), + [theme.breakpoints.up('md')]: { + padding: theme.spacing(2, 4), + }, + '& li + li': { + marginTop: theme.spacing(0.5), + }, + '& strong': { + padding: theme.spacing(0, 0.5), + fontSize: theme.fontSizes.smallBody, + fontWeight: 'inherit', + backgroundColor: 'rgba(0, 0, 0, 0.2)', + }, +})); + +const StyledFooter = styled('footer')(({ theme }) => ({ + display: 'grid', + gap: theme.spacing(4), + textAlign: 'center', + justifyItems: 'center', +})); + +const StyledLink = styled('a')(({ theme }) => ({ + color: 'inherit', +})); + +export const SplashPageOperators = () => { + const navigate = useNavigate(); + + return ( + + + + New strategy operators + navigate('/')} + size="large" + > + + + + We've added some new feature strategy constraint + operators. Fine-tune your feature targeting like never + before. + + + +

For example:

+ +
  • + Toggle features at dates: + + DATE_BEFORE{' '} + DATE_AFTER + +
    • +
  • + Toggle features for versions: + + SEMVER_EQ{' '} + SEMVER_GT{' '} + SEMVER_LT + +
    • +
  • + Toggle features for strings: + + STR_CONTAINS{' '} + STR_ENDS_WITH{' '} + STR_STARTS_WITH + +
    • +
  • + Toggle features for numbers: + + NUM_GT NUM_GTE{' '} + NUM_LT NUM_LTE + +
    • +     +     + +

    + + Read all about operators in our in-depth{' '} + docs + + . +

    +

    + +

    +     +     + +     + ); +}; diff --git a/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.styles.tsx b/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.styles.tsx deleted file mode 100644 index fcc3ab7944..0000000000 --- a/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.styles.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - backgroundColor: theme.palette.primary.light, - minHeight: '100vh', - padding: '1rem', - display: 'grid', - gap: '1rem', - alignItems: 'center', - alignContent: 'center', - justifyContent: 'center', - gridTemplateColumns: 'minmax(0,auto)', - fontWeight: theme.fontWeight.thin, - }, - content: { - position: 'relative', - padding: '2rem', - borderRadius: '0.5rem', - backgroundColor: theme.palette.primary.main, - color: 'white', - [theme.breakpoints.up('md')]: { - padding: '4rem', - }, - }, - header: { - textAlign: 'center', - }, - footer: { - display: 'grid', - gap: '2rem', - textAlign: 'center', - justifyItems: 'center', - }, - body: { - margin: '2rem 0', - padding: '2rem 0', - borderTop: '1px solid', - borderBottom: '1px solid', - borderTopColor: theme.palette.primary.light, - borderBottomColor: theme.palette.primary.light, - }, - close: { - position: 'absolute', - top: 0, - right: 0, - color: 'inherit', - }, - title: { - fontWeight: 'inherit', - }, - ingress: { - maxWidth: '32rem', - margin: '1.5rem auto 0 auto', - }, - list: { - padding: '1rem 0', - [theme.breakpoints.up('md')]: { - padding: '1rem 2rem', - }, - '& li + li': { - marginTop: '0.25rem', - }, - '& strong': { - padding: '0 .2rem', - fontSize: theme.fontSizes.smallBody, - fontWeight: 'inherit', - backgroundColor: 'rgba(0, 0, 0, 0.2)', - }, - }, - link: { - color: 'inherit', - }, - button: { - background: 'white !important', - color: theme.palette.primary.main, - }, -})); diff --git a/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.tsx b/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.tsx deleted file mode 100644 index 7159b7855c..0000000000 --- a/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { useStyles } from 'component/splash/SplashPageOperators/SplashPageOperators.styles'; -import { Link, useNavigate } from 'react-router-dom'; -import { Button, IconButton } from '@mui/material'; -import { CloseOutlined } from '@mui/icons-material'; -import { OperatorUpgradeAlert } from 'component/common/OperatorUpgradeAlert/OperatorUpgradeAlert'; - -export const SplashPageOperators = () => { - const navigate = useNavigate(); - const { classes: styles } = useStyles(); - - return ( -
    -
    -
    -

    New strategy operators

    - navigate('/')} - size="large" - > - - -

    - We've added some new feature strategy constraint - operators. Fine-tune your feature targeting like never - before. -

    -
    -
    -

    For example:

    -
      -
    • - Toggle features at dates: - - DATE_BEFORE{' '} - DATE_AFTER - -
      • -
    • - Toggle features for versions: - - SEMVER_EQ{' '} - SEMVER_GT{' '} - SEMVER_LT - -
      • -
    • - Toggle features for strings: - - STR_CONTAINS{' '} - STR_ENDS_WITH{' '} - STR_STARTS_WITH - -
      • -
    • - Toggle features for numbers: - - NUM_GT NUM_GTE{' '} - NUM_LT NUM_LTE - -
      • -
    -
    - -
    - -
    - ); -}; diff --git a/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts b/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts deleted file mode 100644 index 981cdf483c..0000000000 --- a/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - maxWidth: 400, - }, - form: { - display: 'flex', - flexDirection: 'column', - height: '100%', - }, - - input: { width: '100%', marginBottom: '1rem' }, - selectInput: { - marginBottom: '1rem', - minWidth: '400px', - [theme.breakpoints.down(600)]: { - minWidth: '379px', - }, - }, - link: { - color: theme.palette.primary.light, - }, - label: { - minWidth: '300px', - [theme.breakpoints.down(600)]: { - minWidth: 'auto', - }, - }, - buttonContainer: { - marginTop: 'auto', - display: 'flex', - justifyContent: 'flex-end', - }, - cancelButton: { - marginLeft: '1.5rem', - }, - inputDescription: { - marginBottom: '0.5rem', - }, - typeDescription: { - fontSize: theme.fontSizes.smallBody, - color: theme.palette.grey[600], - top: '-13px', - position: 'relative', - }, - errorMessage: { - fontSize: theme.fontSizes.smallBody, - color: theme.palette.error.main, - position: 'absolute', - top: '-8px', - }, - flexRow: { - display: 'flex', - alignItems: 'center', - marginTop: '0.5rem', - }, - paramButton: { - color: theme.palette.primary.dark, - }, -})); diff --git a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx index 5dd95d56bc..97515bfbd9 100644 --- a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx +++ b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx @@ -1,6 +1,5 @@ import Input from 'component/common/Input/Input'; -import { Button } from '@mui/material'; -import { useStyles } from './StrategyForm.styles'; +import { Button, styled } from '@mui/material'; import { Add } from '@mui/icons-material'; import { trim } from 'component/common/util'; import { StrategyParameters } from './StrategyParameters/StrategyParameters'; @@ -23,6 +22,39 @@ interface IStrategyFormProps { setErrors: React.Dispatch>>; } +const StyledForm = styled('form')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + height: '100%', +})); + +const StyledContainer = styled('div')(({ theme }) => ({ + maxWidth: 400, +})); + +const StyledInputDescription = styled('p')(({ theme }) => ({ + marginBottom: theme.spacing(1), +})); + +const StyledInput = styled(Input)(({ theme }) => ({ + width: '100%', + marginBottom: theme.spacing(2), +})); + +const StyledParamButton = styled(Button)(({ theme }) => ({ + color: theme.palette.primary.dark, +})); + +const StyledButtonContainer = styled('div')(({ theme }) => ({ + marginTop: 'auto', + display: 'flex', + justifyContent: 'flex-end', +})); + +const StyledCancelButton = styled(Button)(({ theme }) => ({ + marginLeft: theme.spacing(3), +})); + export const StrategyForm: React.FC = ({ children, handleSubmit, @@ -38,7 +70,6 @@ export const StrategyForm: React.FC = ({ mode, clearErrors, }) => { - const { classes: styles } = useStyles(); const updateParameter = (index: number, updated: object) => { let item = { ...params[index] }; params[index] = Object.assign({}, item, updated); @@ -53,15 +84,14 @@ export const StrategyForm: React.FC = ({ }; return ( -
    -
    -

    + + + What would you like to call your strategy? -

    - + setStrategyName(trim(e.target.value))} @@ -70,11 +100,10 @@ export const StrategyForm: React.FC = ({ onFocus={clearErrors} onBlur={validateStrategyName} /> -

    + What is your strategy description? -

    - + setStrategyDesc(e.target.value)} @@ -88,29 +117,24 @@ export const StrategyForm: React.FC = ({ setParams={setParams} errors={errors} /> - -
    -
    + + + {children} - -
    -
    + + + ); }; diff --git a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.styles.ts b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.styles.ts deleted file mode 100644 index 0098f28200..0000000000 --- a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.styles.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - paramsContainer: { - maxWidth: '400px', - margin: '1rem 0', - }, - divider: { - borderStyle: 'dashed', - margin: '1rem 0 1.5rem 0', - borderColor: theme.palette.grey[500], - }, - nameContainer: { - display: 'flex', - alignItems: 'center', - marginBottom: '1rem', - }, - name: { - minWidth: '365px', - width: '100%', - }, - input: { - minWidth: '365px', - width: '100%', - marginBottom: '1rem', - }, - description: { - minWidth: '365px', - marginBottom: '1rem', - }, - checkboxLabel: { - marginTop: '-0.5rem', - }, - inputDescription: { - marginBottom: '0.5rem', - }, - errorMessage: { - fontSize: theme.fontSizes.smallBody, - color: theme.palette.error.main, - position: 'absolute', - top: '-8px', - }, - paramButton: { - color: theme.palette.primary.dark, - }, -})); diff --git a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx index fa3a7203d3..81e1eb7921 100644 --- a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx +++ b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx @@ -3,10 +3,10 @@ import { Divider, FormControlLabel, IconButton, + styled, Tooltip, } from '@mui/material'; import { Delete } from '@mui/icons-material'; -import { useStyles } from './StrategyParameter.styles'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; import Input from 'component/common/Input/Input'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; @@ -45,6 +45,49 @@ interface IStrategyParameterProps { errors: { [key: string]: string }; } +const StyledParamsContainer = styled('div')(({ theme }) => ({ + maxWidth: '400px', + margin: theme.spacing(2, 0), +})); + +const StyledDivider = styled(Divider)(({ theme }) => ({ + borderStyle: 'dashed', + margin: theme.spacing(2, 0, 3, 0), + borderColor: theme.palette.neutral.border, +})); + +const StyledParagraph = styled('p')(({ theme }) => ({ + minWidth: '365px', + width: '100%', + marginBottom: theme.spacing(2), +})); + +const StyledNameContainer = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + marginBottom: theme.spacing(2), +})); + +const StyledNameInput = styled(Input)(({ theme }) => ({ + minWidth: '365px', + width: '100%', +})); + +const StyledGeneralSelect = styled(GeneralSelect)(({ theme }) => ({ + minWidth: '365px', + width: '100%', + marginBottom: theme.spacing(2), +})); + +const StyledDescriptionInput = styled(Input)(({ theme }) => ({ + minWidth: '365px', + marginBottom: theme.spacing(2), +})); + +const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({ + marginTop: theme.spacing(-1), +})); + export const StrategyParameter = ({ set, input, @@ -53,19 +96,17 @@ export const StrategyParameter = ({ setParams, errors, }: IStrategyParameterProps) => { - const { classes: styles } = useStyles(); - const onTypeChange = (type: string) => { set({ type }); }; return ( - + ); }; diff --git a/frontend/src/component/tags/TagTypeForm/TagTypeForm.styles.ts b/frontend/src/component/tags/TagTypeForm/TagTypeForm.styles.ts deleted file mode 100644 index 53581f0b84..0000000000 --- a/frontend/src/component/tags/TagTypeForm/TagTypeForm.styles.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - maxWidth: '400px', - }, - form: { - display: 'flex', - flexDirection: 'column', - height: '100%', - }, - input: { width: '100%', marginBottom: '1rem' }, - label: { - minWidth: '300px', - [theme.breakpoints.down(600)]: { - minWidth: 'auto', - }, - }, - buttonContainer: { - marginTop: 'auto', - display: 'flex', - justifyContent: 'flex-end', - }, - cancelButton: { - marginLeft: '1.5rem', - }, - inputDescription: { - marginBottom: '0.5rem', - }, - permissionErrorContainer: { - position: 'relative', - }, - errorMessage: { - fontSize: theme.fontSizes.smallBody, - color: theme.palette.error.main, - position: 'absolute', - top: '-8px', - }, -})); diff --git a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx index 6c72345d9c..f93f247ca8 100644 --- a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx +++ b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx @@ -1,7 +1,6 @@ import Input from 'component/common/Input/Input'; -import { TextField, Button } from '@mui/material'; +import { TextField, Button, styled } from '@mui/material'; -import { useStyles } from './TagTypeForm.styles'; import React from 'react'; import { trim } from 'component/common/util'; import { EDIT } from 'constants/misc'; @@ -19,6 +18,40 @@ interface ITagTypeForm { validateNameUniqueness?: () => void; } +const StyledForm = styled('form')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + height: '100%', +})); + +const StyledContainer = styled('div')(({ theme }) => ({ + maxWidth: '400px', +})); + +const StyledInputDescription = styled('p')(({ theme }) => ({ + marginBottom: theme.spacing(1), +})); + +const StyledInput = styled(Input)(({ theme }) => ({ + width: '100%', + marginBottom: theme.spacing(2), +})); + +const StyledTextField = styled(TextField)(({ theme }) => ({ + width: '100%', + marginBottom: theme.spacing(2), +})); + +const StyledButtonContainer = styled('div')(({ theme }) => ({ + marginTop: 'auto', + display: 'flex', + justifyContent: 'flex-end', +})); + +const StyledCancelButton = styled(Button)(({ theme }) => ({ + marginLeft: theme.spacing(3), +})); + const TagTypeForm: React.FC = ({ children, handleSubmit, @@ -32,16 +65,13 @@ const TagTypeForm: React.FC = ({ validateNameUniqueness, clearErrors, }) => { - const { classes: styles } = useStyles(); - return ( -
    -
    -

    + + + What is your tag name? -

    - + setTagName(trim(e.target.value))} @@ -53,9 +83,10 @@ const TagTypeForm: React.FC = ({ autoFocus /> -

    What is this tag for?

    - + What is this tag for? + + = ({ value={tagDesc} onChange={e => setTagDesc(e.target.value)} /> -
    -
    + + {children} - -
    -
    + + + ); }; diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.styles.ts b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.styles.ts deleted file mode 100644 index b3e17342c9..0000000000 --- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.styles.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - flexDirection: 'column', - position: 'relative', - }, - button: { - width: '150px', - margin: '1rem auto', - display: 'block', - }, -})); diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx index 925bde2f62..8607d6d722 100644 --- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx +++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx @@ -1,20 +1,31 @@ -import { Button } from '@mui/material'; -import classnames from 'classnames'; +import { Button, styled } from '@mui/material'; import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react'; -import { useThemeStyles } from 'themes/themeStyles'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import PasswordChecker from './PasswordChecker/PasswordChecker'; import PasswordMatcher from './PasswordMatcher/PasswordMatcher'; -import { useStyles } from './ResetPasswordForm.styles'; import PasswordField from 'component/common/PasswordField/PasswordField'; interface IResetPasswordProps { onSubmit: (password: string) => void; } +const StyledForm = styled('form')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + position: 'relative', + '& > *': { + marginTop: `${theme.spacing(1)} !important`, + marginBottom: `${theme.spacing(1)} !important`, + }, +})); + +const StyledButton = styled(Button)(({ theme }) => ({ + width: '150px', + margin: theme.spacing(2, 'auto'), + display: 'block', +})); + const ResetPasswordForm = ({ onSubmit }: IResetPasswordProps) => { - const { classes: styles } = useStyles(); - const { classes: themeStyles } = useThemeStyles(); const [password, setPassword] = useState(''); const [showPasswordChecker, setShowPasswordChecker] = useState(false); const [confirmPassword, setConfirmPassword] = useState(''); @@ -50,13 +61,7 @@ const ResetPasswordForm = ({ onSubmit }: IResetPasswordProps) => { const started = Boolean(password && confirmPassword); return ( -
    + { started={started} matchingPasswords={matchingPasswords} /> - - + +
    ); };