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)
2025-04-15 01:16:22 +02:00 · 2022-12-14 15:16:58 +00:00 · 2022-12-14 15:16:58 +00:00 · fe2f2f5705
commit fe2f2f5705
parent 160b9a0604
15 changed files with 149 additions and 135 deletions
--- 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"
        >
-            <div className={themeStyles.contentSpacingYLarge}>
-                <Typography variant="body1">
-                    Your new token has been created successfully.
-                </Typography>
-                <UserToken token={token} />
-            </div>
+            <Typography variant="body1">
+                Your new token has been created successfully.
+            </Typography>
+            <UserToken token={token} />
            <ConditionallyRender
                condition={type === TokenType.FRONTEND}
                show={
--- a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
+++ b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
@ -29,7 +29,8 @@ export const UserToken = ({ token }: IUserTokenProps) => {
                backgroundColor: '#efefef',
                padding: '2rem',
                borderRadius: '3px',
-                margin: '1rem 0',
+                margin: '0',
+                marginTop: '1rem',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
--- 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) => {
                <div>
                    Are you sure you want to delete the following API token?
                    <br />
-                    <ul>
+                    <StyledUl>
                        <li>
                            <strong>username</strong>:{' '}
                            <code>{token.username}</code>
@ -62,7 +66,7 @@ export const RemoveApiTokenButton = ({ token }: IRemoveApiTokenButtonProps) => {
                        <li>
                            <strong>type</strong>: <code>{token.type}</code>
                        </li>
-                    </ul>
+                    </StyledUl>
                </div>
            </Dialogue>
        </>
--- 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',
--- 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 (
        <Dialogue
            open={open}
@ -23,34 +21,30 @@ const ConfirmUserLink = ({
            primaryButtonText="Close"
            title="Team member added"
        >
-            <div className={themeStyles.contentSpacingYLarge}>
-                <Typography variant="body1">
-                    A new team member has been added. Please provide them with
-                    the following link to get started:
+            <Typography variant="body1" sx={{ mb: 2 }}>
+                A new team member has been added.
+            </Typography>
+            <Typography variant="body1">
+                Please provide them with the following link. This will allow
+                them to set up their password and get started with their Unleash
+                account.
+            </Typography>
+            <LinkField inviteLink={inviteLink} />
+            <Alert severity="info" sx={{ mt: 2 }}>
+                <Typography variant="body2">
+                    Want to avoid this step in the future?{' '}
+                    {/* TODO - ADD LINK HERE ONCE IT EXISTS*/}
+                    <a
+                        href="https://docs.getunleash.io/docs/deploy/email"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        If you configure an email server for Unleash
+                    </a>{' '}
+                    we'll automatically send informational getting started
+                    emails to new users once you add them.
                </Typography>
-                <LinkField inviteLink={inviteLink} />
-
-                <Typography variant="body1">
-                    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.
-                </Typography>
-                <Alert severity="info">
-                    <Typography variant="body2">
-                        Want to avoid this step in the future?{' '}
-                        {/* TODO - ADD LINK HERE ONCE IT EXISTS*/}
-                        <a
-                            href="https://docs.getunleash.io/docs/deploy/email"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            If you configure an email server for Unleash
-                        </a>{' '}
-                        we'll automatically send informational getting started
-                        emails to new users once you add them.
-                    </Typography>
-                </Alert>
-            </div>
+            </Alert>
        </Dialogue>
    );
 };
--- 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<ICreateInviteLinkProps> = () => {
                primaryButtonText="Close"
                title="Invite link created"
            >
-                <Box sx={{ pt: 2 }}>
+                <Box>
+                    <Typography variant="body1" sx={{ mb: 2 }}>
+                        Using this link, new team members can now sign-up to
+                        Unleash.
+                    </Typography>
                    <Typography variant="body1">
-                        New team members now sign-up to Unleash. Please provide
-                        them with the following link to get started:
+                        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.
                    </Typography>
                    <LinkField inviteLink={inviteLink} />
-
-                    <Typography variant="body1">
-                        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.
-                    </Typography>
                </Box>
            </Dialogue>
            <Dialogue
--- a/frontend/src/component/admin/users/LinkField/LinkField.tsx
+++ b/frontend/src/component/admin/users/LinkField/LinkField.tsx
@ -41,7 +41,7 @@ export const LinkField = ({ inviteLink, small }: ILinkFieldProps) => {
                py: 4,
                px: 4,
                borderRadius: theme => `${theme.shape.borderRadius}px`,
-                my: 2,
+                mt: 2,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
--- 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 = ({

            <StyledDeleteParagraph>
                In order to delete this feature toggle, please enter its name in
-                the text field below:
-                <br />
-                <strong>{deletedFeature?.name}</strong>
+                the text field below: <strong>{deletedFeature?.name}</strong>
            </StyledDeleteParagraph>

            <form id={formId}>
--- a/frontend/src/component/common/Dialogue/Dialogue.styles.ts
+++ b/frontend/src/component/common/Dialogue/Dialogue.styles.ts
@ -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',
-    },
-}));
--- 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<IDialogue> = ({
    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<IDialogue> = ({
          }
        : onClick;
    return (
-        <Dialog
+        <StyledDialog
            open={open}
            onClose={onClose}
            fullWidth={fullWidth}
@ -58,50 +87,47 @@ export const Dialogue: React.FC<IDialogue> = ({
            aria-describedby={'simple-modal-description'}
            maxWidth={maxWidth}
        >
-            <DialogTitle className={styles.dialogTitle}>{title}</DialogTitle>
-            <ConditionallyRender
-                condition={Boolean(children)}
-                show={
-                    <DialogContent className={styles.dialogContentPadding}>
-                        {children}
-                    </DialogContent>
-                }
-            />
-
-            <DialogActions>
+            <StyledDialogTitle>{title}</StyledDialogTitle>
+            <StyledDialogBody>
                <ConditionallyRender
-                    condition={Boolean(permissionButton)}
-                    show={permissionButton!}
-                    elseShow={
-                        <ConditionallyRender
-                            condition={Boolean(onClick)}
-                            show={
-                                <Button
-                                    form={formId}
-                                    color="primary"
-                                    variant="contained"
-                                    onClick={handleClick}
-                                    autoFocus={!formId}
-                                    disabled={disabledPrimaryButton}
-                                    data-testid={DIALOGUE_CONFIRM_ID}
-                                    type={formId ? 'submit' : 'button'}
-                                >
-                                    {primaryButtonText || "Yes, I'm sure"}
-                                </Button>
-                            }
-                        />
-                    }
+                    condition={Boolean(children)}
+                    show={<StyledDialogContent>{children}</StyledDialogContent>}
                />
+                <StyledDialogActions>
+                    <ConditionallyRender
+                        condition={Boolean(permissionButton)}
+                        show={permissionButton!}
+                        elseShow={
+                            <ConditionallyRender
+                                condition={Boolean(onClick)}
+                                show={
+                                    <Button
+                                        form={formId}
+                                        color="primary"
+                                        variant="contained"
+                                        onClick={handleClick}
+                                        autoFocus={!formId}
+                                        disabled={disabledPrimaryButton}
+                                        data-testid={DIALOGUE_CONFIRM_ID}
+                                        type={formId ? 'submit' : 'button'}
+                                    >
+                                        {primaryButtonText || "Yes, I'm sure"}
+                                    </Button>
+                                }
+                            />
+                        }
+                    />

-                <ConditionallyRender
-                    condition={Boolean(onClose)}
-                    show={
-                        <Button onClick={onClose}>
-                            {secondaryButtonText || 'No, take me back'}
-                        </Button>
-                    }
-                />
-            </DialogActions>
-        </Dialog>
+                    <ConditionallyRender
+                        condition={Boolean(onClose)}
+                        show={
+                            <Button onClick={onClose}>
+                                {secondaryButtonText || 'No, take me back'}
+                            </Button>
+                        }
+                    />
+                </StyledDialogActions>
+            </StyledDialogBody>
+        </StyledDialog>
    );
 };
--- 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),
    },
 }));
--- 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"
                >
                    <div className={styles.container}>
-                        <Alert severity="success">
+                        <StyledAlert severity="success">
                            This feature toggle is compatible with the new
                            project.
-                        </Alert>
+                        </StyledAlert>
+                        <p>
+                            Are you sure you want to change the project for this
+                            toggle?
+                        </p>
                    </div>
-                    <p>
-                        Are you sure you want to change the project for this
-                        toggle?
-                    </p>
                </Dialogue>
            }
            elseShow={
                <Dialogue
                    open={open}
-                    onClose={onClose}
+                    onClick={onClose}
                    title="Confirm change project"
-                    secondaryButtonText="OK"
+                    primaryButtonText="OK"
                >
                    <div className={styles.container}>
-                        <Alert severity="warning">
+                        <StyledAlert severity="warning">
                            Incompatible project environments
-                        </Alert>
+                        </StyledAlert>
                        <p>
                            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:
                                    </p>
-                                    <List>
+                                    <StyledList>
                                        {changeRequests?.map(changeRequest => {
                                            return (
                                                <ListItem
@ -107,7 +115,7 @@ const FeatureSettingsProjectConfirm = ({
                                                </ListItem>
                                            );
                                        })}
-                                    </List>
+                                    </StyledList>
                                </>
                            }
                        />
--- 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',
    },
--- 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}
        >
-            <p className={styles.deleteParagraph}>
+            <p>
                In order to delete this segment, please enter the name of the
                segment in the field below: <strong>{segment?.name}</strong>
            </p>
--- 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{' '}
                <strong>{segment.name}</strong> segment for their strategies:
            </p>
-            <ul>
+            <StyledUl>
                {strategies?.map(strategy => (
                    <li key={strategy.id}>
                        <Link
@ -52,7 +56,7 @@ export const SegmentDeleteUsedSegment = ({
                        </Link>
                    </li>
                ))}
-            </ul>
+            </StyledUl>
        </Dialogue>
    );
 };