From 026b36fd40f7e9d1898968619cc76fea453b2ef2 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 28 Mar 2023 01:42:36 +0530
Subject: [PATCH 1/3] update button padding

---
 src/themes/darkThemeOptions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/themes/darkThemeOptions.tsx b/src/themes/darkThemeOptions.tsx
index 7d52c4d92..133795e88 100644
--- a/src/themes/darkThemeOptions.tsx
+++ b/src/themes/darkThemeOptions.tsx
@@ -180,7 +180,7 @@ const darkThemeOptions = createTheme({
             },
             styleOverrides: {
                 root: {
-                    padding: '12px 16px',
+                    padding: '14px 16px',
                     borderRadius: '4px',
                 },
                 startIcon: {

From d151ee75bae15350b9624b6c6116a4fe2672dfa5 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 28 Mar 2023 01:43:14 +0530
Subject: [PATCH 2/3] added dialogBoxV2

---
 src/components/DialogBoxV2/index.tsx | 126 +++++++++++++++++++++++++++
 src/types/dialogBox/index.ts         |  38 +++++++-
 2 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DialogBoxV2/index.tsx

diff --git a/src/components/DialogBoxV2/index.tsx b/src/components/DialogBoxV2/index.tsx
new file mode 100644
index 000000000..be9d76ef9
--- /dev/null
+++ b/src/components/DialogBoxV2/index.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import {
+    Box,
+    Breakpoint,
+    Button,
+    Dialog,
+    DialogProps,
+    Stack,
+    Typography,
+} from '@mui/material';
+import { t } from 'i18next';
+import { dialogCloseHandler } from 'components/DialogBox/TitleWithCloseButton';
+import { DialogBoxAttributesV2 } from 'types/dialogBox';
+
+type IProps = React.PropsWithChildren<
+    Omit<DialogProps, 'onClose' | 'maxSize'> & {
+        onClose: () => void;
+        attributes: DialogBoxAttributesV2;
+        size?: Breakpoint;
+        titleCloseButton?: boolean;
+    }
+>;
+
+export default function DialogBoxV2({
+    attributes,
+    children,
+    open,
+    onClose,
+    ...props
+}: IProps) {
+    if (!attributes) {
+        return <></>;
+    }
+
+    const handleClose = dialogCloseHandler({
+        staticBackdrop: attributes.staticBackdrop,
+        nonClosable: attributes.nonClosable,
+        onClose: onClose,
+    });
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            {...props}
+            PaperProps={{
+                sx: {
+                    padding: '8px 12px',
+                    maxWidth: '360px',
+                },
+            }}>
+            <Stack spacing={'36px'} p={'16px'}>
+                <Stack spacing={'19px'}>
+                    {attributes.icon && (
+                        <Box
+                            sx={{
+                                '& > svg': {
+                                    fontSize: '32px',
+                                },
+                            }}>
+                            {attributes.icon}
+                        </Box>
+                    )}
+                    {attributes.title && (
+                        <Typography variant="h4" fontWeight={'bold'}>
+                            {attributes.title}
+                        </Typography>
+                    )}
+                    {children ||
+                        (attributes?.content && (
+                            <Typography color="text.secondary">
+                                {attributes.content}
+                            </Typography>
+                        ))}
+                </Stack>
+                <Stack
+                    spacing={'8px'}
+                    direction={
+                        attributes.buttonDirection === 'row'
+                            ? 'row-reverse'
+                            : 'column'
+                    }
+                    flex={1}>
+                    {attributes.proceed && (
+                        <Button
+                            size="large"
+                            color={attributes.proceed?.variant}
+                            onClick={() => {
+                                attributes.proceed.action();
+                                onClose();
+                            }}
+                            disabled={attributes.proceed.disabled}>
+                            {attributes.proceed.text}
+                        </Button>
+                    )}
+                    {attributes.close && (
+                        <Button
+                            size="large"
+                            color={attributes.close?.variant ?? 'secondary'}
+                            onClick={() => {
+                                attributes.close.action &&
+                                    attributes.close?.action();
+                                onClose();
+                            }}>
+                            {attributes.close?.text ?? t('OK')}
+                        </Button>
+                    )}
+                    {attributes.buttons &&
+                        attributes.buttons.map((b) => (
+                            <Button
+                                size="large"
+                                key={b.text}
+                                color={b.variant}
+                                onClick={() => {
+                                    b.action();
+                                    onClose();
+                                }}
+                                disabled={b.disabled}>
+                                {b.text}
+                            </Button>
+                        ))}
+                </Stack>
+            </Stack>
+        </Dialog>
+    );
+}
diff --git a/src/types/dialogBox/index.ts b/src/types/dialogBox/index.ts
index 0cbc20d30..ca737ba3b 100644
--- a/src/types/dialogBox/index.ts
+++ b/src/types/dialogBox/index.ts
@@ -14,7 +14,7 @@ export interface DialogBoxAttributes {
     proceed?: {
         text: string;
         action: () => void;
-        variant: ButtonProps['color'];
+        variant?: ButtonProps['color'];
         disabled?: boolean;
     };
     secondary?: {
@@ -28,3 +28,39 @@ export interface DialogBoxAttributes {
 export type SetDialogBoxAttributes = React.Dispatch<
     React.SetStateAction<DialogBoxAttributes>
 >;
+
+export interface DialogBoxAttributesV2 {
+    icon?: React.ReactNode;
+    title?: string;
+    staticBackdrop?: boolean;
+    nonClosable?: boolean;
+    content?: any;
+    close?: {
+        text?: string;
+        variant?: ButtonProps['color'];
+        action?: () => void;
+    };
+    proceed?: {
+        text: string;
+        action: () => void;
+        variant?: ButtonProps['color'];
+        disabled?: boolean;
+    };
+    secondary?: {
+        text: string;
+        action: () => void;
+        variant?: ButtonProps['color'];
+        disabled?: boolean;
+    };
+    buttons?: {
+        text: string;
+        action: () => void;
+        variant: ButtonProps['color'];
+        disabled?: boolean;
+    }[];
+    buttonDirection?: 'row' | 'column';
+}
+
+export type SetDialogBoxAttributesV2 = React.Dispatch<
+    React.SetStateAction<DialogBoxAttributesV2>
+>;

From b03907deca75a49aa250fc3efefcdf5adc1592e0 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 28 Mar 2023 01:45:09 +0530
Subject: [PATCH 3/3] added dialogBoxV2 use support

---
 src/pages/_app.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7f549b4ba..22cd04ef1 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -25,7 +25,11 @@ import { styled, ThemeProvider } from '@mui/material/styles';
 import darkThemeOptions from 'themes/darkThemeOptions';
 import lightThemeOptions from 'themes/lightThemeOptions';
 import { CssBaseline, useMediaQuery } from '@mui/material';
-import { SetDialogBoxAttributes, DialogBoxAttributes } from 'types/dialogBox';
+import {
+    SetDialogBoxAttributes,
+    DialogBoxAttributes,
+    DialogBoxAttributesV2,
+} from 'types/dialogBox';
 import {
     getFamilyPortalRedirectURL,
     getRoadmapRedirectURL,
@@ -57,6 +61,7 @@ import { setupI18n } from 'i18n';
 import createEmotionCache from 'themes/createEmotionCache';
 import { CacheProvider, EmotionCache } from '@emotion/react';
 import { AppProps } from 'next/app';
+import DialogBoxV2 from 'components/DialogBoxV2';
 
 export const MessageContainer = styled('div')`
     background-color: #111;
@@ -95,6 +100,7 @@ type AppContextType = {
     theme: THEME_COLOR;
     setTheme: SetTheme;
     somethingWentWrong: () => void;
+    setDialogBoxAttributesV2: (attributes: DialogBoxAttributesV2) => void;
 };
 
 export enum FLASH_MESSAGE_TYPE {
@@ -144,7 +150,11 @@ export default function App(props) {
     const isLoadingBarRunning = useRef(false);
     const loadingBar = useRef(null);
     const [dialogMessage, setDialogMessage] = useState<DialogBoxAttributes>();
+    const [dialogBoxAttributeV2, setDialogBoxAttributesV2] =
+        useState<DialogBoxAttributesV2>();
+    useState<DialogBoxAttributes>(null);
     const [messageDialogView, setMessageDialogView] = useState(false);
+    const [dialogBoxV2View, setDialogBoxV2View] = useState(false);
     const [isFolderSyncRunning, setIsFolderSyncRunning] = useState(false);
     const [watchFolderView, setWatchFolderView] = useState(false);
     const [watchFolderFiles, setWatchFolderFiles] = useState<FileList>(null);
@@ -294,6 +304,10 @@ export default function App(props) {
         setMessageDialogView(true);
     }, [dialogMessage]);
 
+    useEffect(() => {
+        setDialogBoxV2View(true);
+    }, [dialogBoxV2View]);
+
     useEffect(() => {
         setNotificationView(true);
     }, [notificationAttributes]);
@@ -327,6 +341,7 @@ export default function App(props) {
     };
 
     const closeMessageDialog = () => setMessageDialogView(false);
+    const closeDialogBoxV2 = () => setDialogBoxV2View(false);
 
     const somethingWentWrong = () =>
         setDialogMessage({
@@ -385,6 +400,12 @@ export default function App(props) {
                     onClose={closeMessageDialog}
                     attributes={dialogMessage}
                 />
+                <DialogBoxV2
+                    sx={{ zIndex: 1600 }}
+                    open={dialogBoxV2View}
+                    onClose={closeDialogBoxV2}
+                    attributes={dialogBoxAttributeV2}
+                />
                 <Notification
                     open={notificationView}
                     onClose={closeNotification}
@@ -416,6 +437,7 @@ export default function App(props) {
                         theme,
                         setTheme,
                         somethingWentWrong,
+                        setDialogBoxAttributesV2,
                     }}>
                     {loading || !isI18nReady ? (
                         <VerticallyCentered>