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)

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">
-                <Typography variant="body1">
+                Your new token has been created successfully.
-                    Your new token has been created successfully.
+            </Typography>
-                </Typography>
+            <UserToken token={token} />
-                <UserToken token={token} />
-            </div>
             <ConditionallyRender
                 condition={type === TokenType.FRONTEND}
                 show={

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',

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>
         </>

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',

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" sx={{ mb: 2 }}>
-                <Typography variant="body1">
+                A new team member has been added.
-                    A new team member has been added. Please provide them with
+            </Typography>
-                    the following link to get started:
+            <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} />
+            </Alert>
-
-                <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>
         </Dialogue>
     );
 };

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
+                        Please provide them with the following link to get
-                        them with the following link to get started:
+                        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

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',

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:
+                the text field below: <strong>{deletedFeature?.name}</strong>
-                <br />
-                <strong>{deletedFeature?.name}</strong>
             </StyledDeleteParagraph>
 
             <form id={formId}>

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',
-    },
-}));

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>
+            <StyledDialogTitle>{title}</StyledDialogTitle>
-            <ConditionallyRender
+            <StyledDialogBody>
-                condition={Boolean(children)}
-                show={
-                    <DialogContent className={styles.dialogContentPadding}>
-                        {children}
-                    </DialogContent>
-                }
-            />
-
-            <DialogActions>
                 <ConditionallyRender
-                    condition={Boolean(permissionButton)}
+                    condition={Boolean(children)}
-                    show={permissionButton!}
+                    show={<StyledDialogContent>{children}</StyledDialogContent>}
-                    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>
-                            }
-                        />
-                    }
                 />
+                <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
+                    <ConditionallyRender
-                    condition={Boolean(onClose)}
+                        condition={Boolean(onClose)}
-                    show={
+                        show={
-                        <Button onClick={onClose}>
+                            <Button onClick={onClose}>
-                            {secondaryButtonText || 'No, take me back'}
+                                {secondaryButtonText || 'No, take me back'}
-                        </Button>
+                            </Button>
-                    }
+                        }
-                />
+                    />
-            </DialogActions>
+                </StyledDialogActions>
-        </Dialog>
+            </StyledDialogBody>
+        </StyledDialog>
     );
 };

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),
     },
 }));

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>
                                 </>
                             }
                         />

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',
     },

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>

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>
     );
 };