From fe2f2f5705a50c127f86027569c6c47e663f5891 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Wed, 14 Dec 2022 15:16:58 +0000 Subject: [PATCH] Update dialogue design (#2342) https://linear.app/unleash/issue/2-509/update-dialogues-to-match-new-designs Update dialogues to match the look on the new designs: ![image](https://user-images.githubusercontent.com/14320932/200525669-35525761-1c3e-4c60-94a7-e21b1de99ad7.png) --- .../apiToken/ConfirmToken/ConfirmToken.tsx | 10 +- .../ConfirmToken/UserToken/UserToken.tsx | 3 +- .../RemoveApiTokenButton.tsx | 10 +- .../ProjectRoleDeleteConfirm.styles.ts | 2 +- .../ConfirmUserLink/ConfirmUserLink.tsx | 52 ++++---- .../admin/users/InviteLink/InviteLink.tsx | 17 ++- .../admin/users/LinkField/LinkField.tsx | 2 +- .../ArchivedFeatureDeleteConfirm.tsx | 6 +- .../common/Dialogue/Dialogue.styles.ts | 14 --- .../component/common/Dialogue/Dialogue.tsx | 118 +++++++++++------- .../FeatureSettingsProjectConfirm.styles.ts | 1 - .../FeatureSettingsProjectConfirm.tsx | 34 +++-- .../SegmentDeleteConfirm.styles.ts | 3 - .../SegmentDeleteConfirm.tsx | 2 +- .../SegmentDeleteUsedSegment.tsx | 10 +- 15 files changed, 149 insertions(+), 135 deletions(-) delete mode 100644 frontend/src/component/common/Dialogue/Dialogue.styles.ts diff --git a/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx b/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx index f6fb6360256..b89f7b1d514 100644 --- a/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx +++ b/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx @@ -28,12 +28,10 @@ export const ConfirmToken = ({ primaryButtonText="Close" title="New token created" > -
- - Your new token has been created successfully. - - -
+ + Your new token has been created successfully. + + { backgroundColor: '#efefef', padding: '2rem', borderRadius: '3px', - margin: '1rem 0', + margin: '0', + marginTop: '1rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', diff --git a/frontend/src/component/admin/apiToken/RemoveApiTokenButton/RemoveApiTokenButton.tsx b/frontend/src/component/admin/apiToken/RemoveApiTokenButton/RemoveApiTokenButton.tsx index 38d47099b60..d71b0fdbff6 100644 --- a/frontend/src/component/admin/apiToken/RemoveApiTokenButton/RemoveApiTokenButton.tsx +++ b/frontend/src/component/admin/apiToken/RemoveApiTokenButton/RemoveApiTokenButton.tsx @@ -1,7 +1,7 @@ import { DELETE_API_TOKEN } from 'component/providers/AccessProvider/permissions'; import { Delete } from '@mui/icons-material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { IconButton, Tooltip } from '@mui/material'; +import { IconButton, styled, Tooltip } from '@mui/material'; import { IApiToken, useApiTokens, @@ -12,6 +12,10 @@ import { Dialogue } from 'component/common/Dialogue/Dialogue'; import useToast from 'hooks/useToast'; import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi'; +const StyledUl = styled('ul')({ + marginBottom: 0, +}); + interface IRemoveApiTokenButtonProps { token: IApiToken; } @@ -54,7 +58,7 @@ export const RemoveApiTokenButton = ({ token }: IRemoveApiTokenButtonProps) => {
Are you sure you want to delete the following API token?
-
    +
  • username:{' '} {token.username} @@ -62,7 +66,7 @@ export const RemoveApiTokenButton = ({ token }: IRemoveApiTokenButtonProps) => {
  • type: {token.type}
    • -
+
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts index 7937593eb6f..b6278aeb91a 100644 --- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts +++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts @@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ deleteParagraph: { - marginTop: '2rem', + marginTop: theme.spacing(3), }, roleDeleteInput: { marginTop: '1rem', diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx index 614f3d6351e..710cf8b2466 100644 --- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx +++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx @@ -1,6 +1,5 @@ import { Typography } from '@mui/material'; import { Alert } from '@mui/material'; -import { useThemeStyles } from 'themes/themeStyles'; import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { LinkField } from '../../LinkField/LinkField'; @@ -15,7 +14,6 @@ const ConfirmUserLink = ({ closeConfirm, inviteLink, }: IConfirmUserLink) => { - const { classes: themeStyles } = useThemeStyles(); return ( -
- - A new team member has been added. Please provide them with - the following link to get started: + + A new team member has been added. + + + Please provide them with the following link. This will allow + them to set up their password and get started with their Unleash + account. + + + + + Want to avoid this step in the future?{' '} + {/* TODO - ADD LINK HERE ONCE IT EXISTS*/} + + If you configure an email server for Unleash + {' '} + we'll automatically send informational getting started + emails to new users once you add them. - - - - Copy the link and send it to the user. This will allow them - to set up their password and get started with their Unleash - account. - - - - Want to avoid this step in the future?{' '} - {/* TODO - ADD LINK HERE ONCE IT EXISTS*/} - - If you configure an email server for Unleash - {' '} - we'll automatically send informational getting started - emails to new users once you add them. - - -
+ ); }; diff --git a/frontend/src/component/admin/users/InviteLink/InviteLink.tsx b/frontend/src/component/admin/users/InviteLink/InviteLink.tsx index abde3cc1f2b..f918ec6b41b 100644 --- a/frontend/src/component/admin/users/InviteLink/InviteLink.tsx +++ b/frontend/src/component/admin/users/InviteLink/InviteLink.tsx @@ -232,18 +232,17 @@ export const InviteLink: VFC = () => { primaryButtonText="Close" title="Invite link created" > - - - New team members now sign-up to Unleash. Please provide - them with the following link to get started: + + + Using this link, new team members can now sign-up to + Unleash. - - - Copy the link and send it to the user. This will allow - them to set up their password and get started with their - Unleash account. + Please provide them with the following link to get + started. This will allow them to set up their password + and get started with their Unleash account. + { py: 4, px: 4, borderRadius: theme => `${theme.shape.borderRadius}px`, - my: 2, + mt: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center', diff --git a/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx b/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx index 0ab88b915fb..0b9cfa4c06e 100644 --- a/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx +++ b/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx @@ -15,7 +15,7 @@ interface IArchivedFeatureDeleteConfirmProps { } const StyledDeleteParagraph = styled('p')(({ theme }) => ({ - marginTop: theme.spacing(4), + marginTop: theme.spacing(3), })); const StyledFormInput = styled(Input)(({ theme }) => ({ @@ -79,9 +79,7 @@ export const ArchivedFeatureDeleteConfirm = ({ In order to delete this feature toggle, please enter its name in - the text field below: -
- {deletedFeature?.name} + the text field below: {deletedFeature?.name}
diff --git a/frontend/src/component/common/Dialogue/Dialogue.styles.ts b/frontend/src/component/common/Dialogue/Dialogue.styles.ts deleted file mode 100644 index d127fb3e82c..00000000000 --- a/frontend/src/component/common/Dialogue/Dialogue.styles.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - dialogTitle: { - backgroundColor: theme.palette.dialogHeaderBackground, - color: theme.palette.dialogHeaderText, - height: '150px', - padding: '2rem 3rem', - clipPath: ' ellipse(130% 115px at 120% 20%)', - }, - dialogContentPadding: { - padding: '2rem 3rem', - }, -})); diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx index e4436a67f4d..751fe7179be 100644 --- a/frontend/src/component/common/Dialogue/Dialogue.tsx +++ b/frontend/src/component/common/Dialogue/Dialogue.tsx @@ -5,12 +5,42 @@ import { DialogActions, DialogContent, DialogTitle, + styled, } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './Dialogue.styles'; import { DIALOGUE_CONFIRM_ID } from 'utils/testIds'; +const StyledDialog = styled(Dialog)(({ theme, maxWidth }) => ({ + '& .MuiDialog-paper': { + borderRadius: theme.shape.borderRadiusLarge, + maxWidth: !maxWidth ? theme.spacing(85) : undefined, + backgroundColor: 'transparent', + }, +})); + +const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({ + backgroundColor: theme.palette.primary.main, + color: theme.palette.text.tertiaryContrast, + padding: theme.spacing(3.5, 6), + fontWeight: theme.fontWeight.medium, +})); + +const StyledDialogBody = styled('div')(({ theme }) => ({ + padding: theme.spacing(6), + backgroundColor: theme.palette.background.paper, +})); + +const StyledDialogContent = styled(DialogContent)(({ theme }) => ({ + padding: 0, + marginBottom: theme.spacing(6), +})); + +const StyledDialogActions = styled(DialogActions)(({ theme }) => ({ + gap: theme.spacing(2), + padding: 0, +})); + interface IDialogue { primaryButtonText?: string; secondaryButtonText?: string; @@ -35,12 +65,11 @@ export const Dialogue: React.FC = ({ primaryButtonText, disabledPrimaryButton = false, secondaryButtonText, - maxWidth = 'sm', + maxWidth, fullWidth = false, formId, permissionButton, }) => { - const { classes: styles } = useStyles(); const handleClick = formId ? (e: React.SyntheticEvent) => { e.preventDefault(); @@ -50,7 +79,7 @@ export const Dialogue: React.FC = ({ } : onClick; return ( - = ({ aria-describedby={'simple-modal-description'} maxWidth={maxWidth} > - {title} - - {children} - - } - /> - - + {title} + - {primaryButtonText || "Yes, I'm sure"} - - } - /> - } + condition={Boolean(children)} + show={{children}} /> + + + {primaryButtonText || "Yes, I'm sure"} + + } + /> + } + /> - - {secondaryButtonText || 'No, take me back'} - - } - /> - - + + {secondaryButtonText || 'No, take me back'} + + } + /> + + + ); }; 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 index 6525f8ecf58..7c222ac7362 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts @@ -4,6 +4,5 @@ export const useStyles = makeStyles()(theme => ({ container: { display: 'grid', gap: theme.spacing(2), - paddingTop: 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 14e3053bcf4..4bf401ace6a 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx @@ -5,11 +5,19 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { useStyles } from './FeatureSettingsProjectConfirm.styles'; import { arraysHaveSameItems } from 'utils/arraysHaveSameItems'; -import { Alert, List, ListItem } from '@mui/material'; +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 StyledAlert = styled(Alert)(({ theme }) => ({ + marginBottom: theme.spacing(1), +})); + +const StyledList = styled(List)({ + padding: 0, +}); + interface IFeatureSettingsProjectConfirm { projectId: string; open: boolean; @@ -55,28 +63,28 @@ const FeatureSettingsProjectConfirm = ({ secondaryButtonText="Cancel" >
- + This feature toggle is compatible with the new project. - + +

+ Are you sure you want to change the project for this + toggle? +

-

- Are you sure you want to change the project for this - toggle? -

} elseShow={
- + Incompatible project environments - +

In order to move a feature toggle between two projects, both projects must have the exact same @@ -92,7 +100,7 @@ const FeatureSettingsProjectConfirm = ({ feature toggle is currently referenced in the following change requests:

- + {changeRequests?.map(changeRequest => { return ( ); })} - + } /> diff --git a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.styles.ts b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.styles.ts index 42049c7b5b3..8b4998c7c77 100644 --- a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.styles.ts +++ b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.styles.ts @@ -1,9 +1,6 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ - deleteParagraph: { - marginTop: '2rem', - }, deleteInput: { marginTop: '1rem', }, diff --git a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx index 43d1fafa937..007f40ea1b8 100644 --- a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx +++ b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx @@ -43,7 +43,7 @@ export const SegmentDeleteConfirm = ({ onClose={handleCancel} formId={formId} > -

+

In order to delete this segment, please enter the name of the segment in the field below: {segment?.name}

diff --git a/frontend/src/component/segments/SegmentDelete/SegmentDeleteUsedSegment/SegmentDeleteUsedSegment.tsx b/frontend/src/component/segments/SegmentDelete/SegmentDeleteUsedSegment/SegmentDeleteUsedSegment.tsx index df5de5fd4de..bec57145d55 100644 --- a/frontend/src/component/segments/SegmentDelete/SegmentDeleteUsedSegment/SegmentDeleteUsedSegment.tsx +++ b/frontend/src/component/segments/SegmentDelete/SegmentDeleteUsedSegment/SegmentDeleteUsedSegment.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { useStyles } from '../SegmentDeleteConfirm/SegmentDeleteConfirm.styles'; import { ISegment } from 'interfaces/segment'; @@ -6,6 +5,11 @@ import { IFeatureStrategy } from 'interfaces/strategy'; import { Link } from 'react-router-dom'; import { formatEditStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit'; import { formatStrategyName } from 'utils/strategyNames'; +import { styled } from '@mui/material'; + +const StyledUl = styled('ul')({ + marginBottom: 0, +}); interface ISegmentDeleteUsedSegmentProps { segment: ISegment; @@ -33,7 +37,7 @@ export const SegmentDeleteUsedSegment = ({ The following feature toggles are using the{' '} {segment.name} segment for their strategies:

-
    + {strategies?.map(strategy => (
    • ))} -
+ ); };