Merge pull request #625 from ente-io/message-dialog-redesign-v4

Message dialog redesign v4

src/components/Collections/CollectionNamer.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import constants from 'utils/strings/constants';
-import DialogBox from 'components/DialogBox';
 import SingleInputForm, {
     SingleInputFormProps,
 } from 'components/SingleInputForm';
+import DialogBoxBase from 'components/DialogBox/base';
+import { DialogContent, DialogTitle } from '@mui/material';
 
 export interface CollectionNamerAttributes {
     callback: (name: string) => void;
@@ -39,19 +40,19 @@ export default function CollectionNamer({ attributes, ...props }: Props) {
     };
 
     return (
-        <DialogBox
+        <DialogBoxBase open={props.show} onClose={props.onHide}>
-            open={props.show}
+            <DialogTitle>{attributes.title}</DialogTitle>
-            attributes={{ title: attributes.title }}
+            <DialogContent>
-            onClose={props.onHide}
-            titleCloseButton
-            maxWidth="xs">
                 <SingleInputForm
                     callback={onSubmit}
                     fieldType="text"
                     buttonText={attributes.buttonText}
                     placeholder={constants.ENTER_ALBUM_NAME}
                     initialValue={attributes.autoFilledName}
+                    submitButtonProps={{ sx: { mt: 1, mb: 2 } }}
+                    secondaryButtonAction={props.onHide}
                 />
-        </DialogBox>
+            </DialogContent>
+        </DialogBoxBase>
     );
 }

src/components/Collections/CollectionOptions/index.tsx

@@ -113,7 +113,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
                     close: { variant: 'danger' },
                 });
             } finally {
-                syncWithRemote();
+                syncWithRemote(false, true);
                 loader && finishLoading();
             }
         };

src/components/Collections/CollectionShare/emailShare.tsx

@@ -8,7 +8,6 @@ import { handleSharingErrors } from 'utils/error';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import constants from 'utils/strings/constants';
 import { CollectionShareSharees } from './sharees';
-import CollectionShareSubmitButton from './submitButton';
 export default function EmailShare({ collection }) {
     const galleryContext = useContext(GalleryContext);
 
@@ -38,7 +37,10 @@ export default function EmailShare({ collection }) {
                 placeholder={constants.ENTER_EMAIL}
                 fieldType="email"
                 buttonText={constants.SHARE}
-                customSubmitButton={CollectionShareSubmitButton}
+                submitButtonProps={{
+                    size: 'medium',
+                    sx: { mt: 1, mb: 2 },
+                }}
             />
             <CollectionShareSharees collection={collection} />
         </>

src/components/Collections/CollectionShare/publicShare/setPassword.tsx

@@ -1,8 +1,19 @@
-import DialogBox from 'components/DialogBox';
+import { DialogContent, DialogTitle, styled } from '@mui/material';
+import DialogBoxBase from 'components/DialogBox/base';
 import SingleInputForm from 'components/SingleInputForm';
 import React from 'react';
 import CryptoWorker from 'utils/crypto';
 import constants from 'utils/strings/constants';
+
+const SetPublicLinkSetPasswordDialog = styled(DialogBoxBase)(({ theme }) => ({
+    '& .MuiDialog-container': {
+        justifyContent: 'flex-end',
+    },
+    '& .MuiDialog-paper': {
+        marginRight: theme.spacing(9),
+    },
+}));
+
 export function PublicLinkSetPassword({
     open,
     onClose,
@@ -35,20 +46,18 @@ export function PublicLinkSetPassword({
         });
     };
     return (
-        <DialogBox
+        <SetPublicLinkSetPasswordDialog open={open} onClose={onClose}>
-            open={open}
+            <DialogTitle>{constants.PASSWORD_LOCK}</DialogTitle>
-            onClose={onClose}
+            <DialogContent>
-            PaperProps={{ sx: { maxWidth: '350px' } }}
-            titleCloseButton
-            attributes={{
-                title: constants.PASSWORD_LOCK,
-            }}>
                 <SingleInputForm
                     callback={savePassword}
                     placeholder={constants.RETURN_PASSPHRASE_HINT}
                     buttonText={constants.LOCK}
                     fieldType="password"
+                    secondaryButtonAction={onClose}
+                    submitButtonProps={{ sx: { mt: 1, mb: 2 } }}
                 />
-        </DialogBox>
+            </DialogContent>
+        </SetPublicLinkSetPasswordDialog>
     );
 }

src/components/Collections/CollectionShare/submitButton.tsx

@@ -1,10 +0,0 @@
-import { FlexWrapper } from 'components/Container';
-import SubmitButton, { SubmitButtonProps } from 'components/SubmitButton';
-import React from 'react';
-export default function CollectionShareSubmitButton(props: SubmitButtonProps) {
-    return (
-        <FlexWrapper style={{ justifyContent: 'flex-end' }}>
-            <SubmitButton {...props} size="medium" inline sx={{ my: 2 }} />
-        </FlexWrapper>
-    );
-}

src/components/SingleInputForm.tsx

@@ -6,6 +6,7 @@ import SubmitButton from './SubmitButton';
 import TextField from '@mui/material/TextField';
 import ShowHidePassword from './Form/ShowHidePassword';
 import { FlexWrapper } from './Container';
+import { Button } from '@mui/material';
 
 interface formValues {
     inputValue: string;
@@ -18,11 +19,15 @@ export interface SingleInputFormProps {
     fieldType: 'text' | 'email' | 'password';
     placeholder: string;
     buttonText: string;
-    customSubmitButton?: any;
+    submitButtonProps?: any;
     initialValue?: string;
+    secondaryButtonAction?: () => void;
 }
 
 export default function SingleInputForm(props: SingleInputFormProps) {
+    const { submitButtonProps } = props;
+    const { sx: buttonSx, ...restSubmitButtonProps } = submitButtonProps ?? {};
+
     const [loading, SetLoading] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
 
@@ -100,19 +105,24 @@ export default function SingleInputForm(props: SingleInputFormProps) {
                             ),
                         }}
                     />
-                    <FlexWrapper></FlexWrapper>
+                    <FlexWrapper justifyContent={'flex-end'}>
-                    {props.customSubmitButton ? (
+                        {props.secondaryButtonAction && (
-                        <props.customSubmitButton
+                            <Button
-                            buttonText={props.buttonText}
+                                onClick={props.secondaryButtonAction}
-                            loading={loading}
+                                size="large"
-                        />
+                                color="secondary"
-                    ) : (
+                                sx={{ mt: 2, mb: 4, mr: 1, ...buttonSx }}
-                        <SubmitButton
+                                {...restSubmitButtonProps}>
-                            sx={{ mt: 2 }}
+                                {constants.CANCEL}
-                            buttonText={props.buttonText}
+                            </Button>
-                            loading={loading}
-                        />
                         )}
+                        <SubmitButton
+                            sx={{ mt: 2, ...buttonSx }}
+                            buttonText={props.buttonText}
+                            loading={loading}
+                            {...restSubmitButtonProps}
+                        />
+                    </FlexWrapper>
                 </form>
             )}
         </Formik>

src/components/SubmitButton.tsx

@@ -4,13 +4,12 @@ import React, { FC } from 'react';
 export interface SubmitButtonProps {
     loading: boolean;
     buttonText: string;
-    inline?: any;
+
     disabled?: boolean;
 }
 const SubmitButton: FC<ButtonProps<'button', SubmitButtonProps>> = ({
     loading,
     buttonText,
-    inline,
     disabled,
     sx,
     ...props
@@ -21,7 +20,6 @@ const SubmitButton: FC<ButtonProps<'button', SubmitButtonProps>> = ({
             variant="contained"
             color="accent"
             type="submit"
-            fullWidth={!inline}
             disabled={loading || disabled}
             sx={{ my: 4, ...sx }}
             {...props}>

src/components/TwoFactor/Modal/Manage.tsx

@@ -71,12 +71,11 @@ export default function TwoFactorModalManageSection(props: Iprops) {
     return (
         <>
             <Grid
-                mb={2}
+                mb={1.5}
-                container
                 rowSpacing={1}
+                container
                 alignItems="center"
-                justifyContent="center"
+                justifyContent="center">
-                textAlign={'center'}>
                 <Grid item sm={9} xs={12}>
                     {constants.UPDATE_TWO_FACTOR_LABEL}
                 </Grid>
@@ -84,17 +83,16 @@ export default function TwoFactorModalManageSection(props: Iprops) {
                     <Button
                         color={'accent'}
                         onClick={warnTwoFactorReconfigure}
-                        style={{ width: '100%' }}>
+                        size="large">
                         {constants.RECONFIGURE}
                     </Button>
                 </Grid>
             </Grid>
             <Grid
-                container
                 rowSpacing={1}
+                container
                 alignItems="center"
-                justifyContent="center"
+                justifyContent="center">
-                textAlign={'center'}>
                 <Grid item sm={9} xs={12}>
                     {constants.DISABLE_TWO_FACTOR_LABEL}{' '}
                 </Grid>
@@ -103,7 +101,7 @@ export default function TwoFactorModalManageSection(props: Iprops) {
                     <Button
                         color={'danger'}
                         onClick={warnTwoFactorDisable}
-                        style={{ width: '100%' }}>
+                        size="large">
                         {constants.DISABLE}
                     </Button>
                 </Grid>

src/components/TwoFactor/Modal/index.tsx

@@ -3,10 +3,16 @@ import { getTwoFactorStatus } from 'services/userService';
 import { SetLoading } from 'types/gallery';
 import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
 import constants from 'utils/strings/constants';
-import DialogBox from '../../DialogBox';
 import TwoFactorModalSetupSection from './Setup';
 import TwoFactorModalManageSection from './Manage';
+import { Dialog, DialogContent, styled } from '@mui/material';
+import DialogTitleWithCloseButton from 'components/DialogBox/TitleWithCloseButton';
 
+const TwoFactorDialog = styled(Dialog)(({ theme }) => ({
+    '& .MuiDialogContent-root': {
+        padding: theme.spacing(2, 4),
+    },
+}));
 interface Props {
     show: boolean;
     onHide: () => void;
@@ -18,18 +24,21 @@ function TwoFactorModal(props: Props) {
     const [isTwoFactorEnabled, setTwoFactorStatus] = useState(false);
 
     useEffect(() => {
-        if (!props.show) {
-            return;
-        }
         const isTwoFactorEnabled =
             getData(LS_KEYS.USER).isTwoFactorEnabled ?? false;
         setTwoFactorStatus(isTwoFactorEnabled);
+    }, []);
+
+    useEffect(() => {
+        if (!props.show) {
+            return;
+        }
         const main = async () => {
             const isTwoFactorEnabled = await getTwoFactorStatus();
             setTwoFactorStatus(isTwoFactorEnabled);
             setData(LS_KEYS.USER, {
                 ...getData(LS_KEYS.USER),
-                isTwoFactorEnabled: false,
+                isTwoFactorEnabled,
             });
         };
         main();
@@ -41,22 +50,18 @@ function TwoFactorModal(props: Props) {
     };
 
     return (
-        <DialogBox
+        <TwoFactorDialog maxWidth="xs" open={props.show} onClose={props.onHide}>
-            size="xs"
+            <DialogTitleWithCloseButton onClose={props.onHide}>
-            fullWidth
+                {constants.TWO_FACTOR_AUTHENTICATION}
-            open={props.show}
+            </DialogTitleWithCloseButton>
-            onClose={props.onHide}
+            <DialogContent sx={{ px: 4 }}>
-            attributes={{
-                title: constants.TWO_FACTOR_AUTHENTICATION,
-            }}>
-            <>
                 {isTwoFactorEnabled ? (
                     <TwoFactorModalManageSection close={close} />
                 ) : (
                     <TwoFactorModalSetupSection close={close} />
                 )}
-            </>
+            </DialogContent>
-        </DialogBox>
+        </TwoFactorDialog>
     );
 }
 export default TwoFactorModal;

src/components/TwoFactor/VerifyForm.tsx

@@ -50,11 +50,12 @@ export default function VerifyTwoFactor(props: Props) {
             validateOnBlur={false}
             onSubmit={submitForm}>
             {({ values, errors, handleChange, handleSubmit, submitForm }) => (
-                <form
+                <VerticallyCentered>
-                    noValidate
+                    <form noValidate onSubmit={handleSubmit}>
-                    onSubmit={handleSubmit}
+                        <Typography
-                    style={{ width: '100%' }}>
+                            mb={2}
-                    <Typography mb={2} variant="body2" color="text.secondary">
+                            variant="body2"
+                            color="text.secondary">
                             {constants.ENTER_TWO_FACTOR_OTP}
                         </Typography>
                         <Box my={2}>
@@ -62,7 +63,10 @@ export default function VerifyTwoFactor(props: Props) {
                                 ref={otpInputRef}
                                 shouldAutoFocus
                                 value={values.otp}
-                            onChange={onChange(handleChange('otp'), submitForm)}
+                                onChange={onChange(
+                                    handleChange('otp'),
+                                    submitForm
+                                )}
                                 numInputs={6}
                                 separator={'-'}
                                 isInputNum
@@ -82,6 +86,7 @@ export default function VerifyTwoFactor(props: Props) {
                             disabled={values.otp.length < 6}
                         />
                     </form>
+                </VerticallyCentered>
             )}
         </Formik>
     );

src/components/Upload/UploadTypeSelector/index.tsx

@@ -3,8 +3,9 @@ import constants from 'utils/strings/constants';
 import { default as FileUploadIcon } from '@mui/icons-material/ImageOutlined';
 import { default as FolderUploadIcon } from '@mui/icons-material/PermMediaOutlined';
 import GoogleIcon from '@mui/icons-material/Google';
-import DialogBox from 'components/DialogBox';
 import { UploadTypeOption } from './option';
+import DialogTitleWithCloseButton from 'components/DialogBox/TitleWithCloseButton';
+import { Dialog, DialogContent } from '@mui/material';
 
 export default function UploadTypeSelector({
     onHide,
@@ -14,14 +15,11 @@ export default function UploadTypeSelector({
     uploadGoogleTakeoutZips,
 }) {
     return (
-        <DialogBox
+        <Dialog open={show} maxWidth={'xs'} onClose={onHide}>
-            attributes={{
+            <DialogTitleWithCloseButton onClose={onHide}>
-                title: constants.UPLOAD,
+                {constants.UPLOAD}
-            }}
+            </DialogTitleWithCloseButton>
-            open={show}
+            <DialogContent sx={{ '&&&&': { pt: 0 } }}>
-            size={'xs'}
-            onClose={onHide}
-            titleCloseButton>
                 <UploadTypeOption
                     uploadFunc={uploadFiles}
                     Icon={FileUploadIcon}
@@ -37,6 +35,7 @@ export default function UploadTypeSelector({
                     Icon={GoogleIcon}
                     uploadName={constants.UPLOAD_GOOGLE_TAKEOUT}
                 />
-        </DialogBox>
+            </DialogContent>
+        </Dialog>
     );
 }

src/pages/two-factor/verify/index.tsx

@@ -55,7 +55,7 @@ export default function Home() {
     };
     return (
         <FormContainer>
-            <FormPaper sx={{ maxWidth: '400px' }}>
+            <FormPaper sx={{ maxWidth: '410px' }}>
                 <FormTitle>{constants.TWO_FACTOR}</FormTitle>
                 <VerifyTwoFactor
                     onSubmit={onSubmit}