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)
Unleash · Dec 14, 2022 · fe2f2f5 · fe2f2f5
1 parent 160b9a0
commit fe2f2f5
Show file tree

Hide file tree

Showing 15 changed files with 149 additions and 135 deletions.
diff --git 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={

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

diff --git 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,15 +58,15 @@ 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>
                         </li>
                         <li>
                             <strong>type</strong>: <code>{token.type}</code>
                         </li>
-                    </ul>
+                    </StyledUl>
                 </div>
             </Dialogue>
         </>

diff --git a/...min/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts b/...min/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
@@ -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,42 +14,37 @@ const ConfirmUserLink = ({
     closeConfirm,
     inviteLink,
 }: IConfirmUserLink) => {
-    const { classes: themeStyles } = useThemeStyles();
     return (
         <Dialogue
             open={open}
             onClick={closeConfirm}
             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>
     );
 };

diff --git 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 }}>
-                    <Typography variant="body1">
-                        New team members now sign-up to Unleash. Please provide
-                        them with the following link to get started:
+                <Box>
+                    <Typography variant="body1" sx={{ mb: 2 }}>
+                        Using this link, new team members can now sign-up to
+                        Unleash.
                     </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.
+                        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} />
                 </Box>
             </Dialogue>
             <Dialogue

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

diff --git a/...e/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx b/...e/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}>

diff --git a/frontend/src/component/common/Dialogue/Dialogue.styles.ts b/frontend/src/component/common/Dialogue/Dialogue.styles.ts
diff --git 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,58 +79,55 @@ export const Dialogue: React.FC<IDialogue> = ({
           }
         : onClick;
     return (
-        <Dialog
+        <StyledDialog
             open={open}
             onClose={onClose}
             fullWidth={fullWidth}
             aria-labelledby={'simple-modal-title'}
             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>
     );
 };
diff --git a/...tureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts b/...tureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts
@@ -4,6 +4,5 @@ export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'grid',
         gap: theme.spacing(2),
-        paddingTop: theme.spacing(2),
     },
 }));