From ee0b75b09f527dc4c3cb1683c2c35ea0ab526892 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Mon, 27 Jun 2022 07:50:35 +0530
Subject: [PATCH] update inprogress state

---
 src/components/ExportInProgress.tsx | 124 ++++++++++++++--------------
 src/components/ExportInit.tsx       |  22 ++---
 src/components/ExportModal.tsx      |  21 ++---
 3 files changed, 74 insertions(+), 93 deletions(-)

diff --git a/src/components/ExportInProgress.tsx b/src/components/ExportInProgress.tsx
index 0e87bc290..c27632418 100644
--- a/src/components/ExportInProgress.tsx
+++ b/src/components/ExportInProgress.tsx
@@ -1,9 +1,16 @@
 import React from 'react';
-import { Button, ProgressBar } from 'react-bootstrap';
 import { ExportProgress } from 'types/export';
-import { styled } from '@mui/material';
+import {
+    Box,
+    Button,
+    DialogActions,
+    DialogContent,
+    styled,
+} from '@mui/material';
 import constants from 'utils/strings/constants';
 import { ExportStage } from 'constants/export';
+import VerticallyCentered, { FlexWrapper } from './Container';
+import { ProgressBar } from 'react-bootstrap';
 
 export const ComfySpan = styled('span')`
     word-spacing: 1rem;
@@ -11,10 +18,6 @@ export const ComfySpan = styled('span')`
 `;
 
 interface Props {
-    show: boolean;
-    onHide: () => void;
-    exportFolder: string;
-    exportSize: string;
     exportStage: ExportStage;
     exportProgress: ExportProgress;
     resumeExport: () => void;
@@ -25,66 +28,59 @@ interface Props {
 export default function ExportInProgress(props: Props) {
     return (
         <>
-            <div
-                style={{
-                    marginBottom: '30px',
-                    padding: '0 5%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    flexDirection: 'column',
-                }}>
-                <div style={{ marginBottom: '10px' }}>
-                    <ComfySpan>
-                        {' '}
-                        {props.exportProgress.current} /{' '}
-                        {props.exportProgress.total}{' '}
-                    </ComfySpan>{' '}
-                    <span style={{ marginLeft: '10px' }}>
-                        {' '}
-                        files exported{' '}
-                        {props.exportStage === ExportStage.PAUSED && `(paused)`}
-                    </span>
-                </div>
-                <div style={{ width: '100%', marginBottom: '30px' }}>
-                    <ProgressBar
-                        now={Math.round(
-                            (props.exportProgress.current * 100) /
-                                props.exportProgress.total
-                        )}
-                        animated={!(props.exportStage === ExportStage.PAUSED)}
-                        variant="upload-progress-bar"
-                    />
-                </div>
-                <div
-                    style={{
-                        width: '100%',
-                        display: 'flex',
-                        justifyContent: 'space-around',
-                    }}>
-                    {props.exportStage === ExportStage.PAUSED ? (
-                        <Button
-                            block
-                            variant={'outline-secondary'}
-                            onClick={props.resumeExport}>
-                            {constants.RESUME}
-                        </Button>
-                    ) : (
-                        <Button
-                            block
-                            variant={'outline-secondary'}
-                            onClick={props.pauseExport}>
-                            {constants.PAUSE}
-                        </Button>
-                    )}
-                    <div style={{ width: '30px' }} />
+            <DialogContent>
+                <VerticallyCentered>
+                    <Box mb={1.5}>
+                        <ComfySpan>
+                            {' '}
+                            {props.exportProgress.current} /{' '}
+                            {props.exportProgress.total}{' '}
+                        </ComfySpan>{' '}
+                        <span>
+                            {' '}
+                            files exported{' '}
+                            {props.exportStage === ExportStage.PAUSED &&
+                                `(paused)`}
+                        </span>
+                    </Box>
+                    <FlexWrapper px={1}>
+                        <ProgressBar
+                            style={{ width: '100%' }}
+                            now={Math.round(
+                                (props.exportProgress.current * 100) /
+                                    props.exportProgress.total
+                            )}
+                            animated={
+                                !(props.exportStage === ExportStage.PAUSED)
+                            }
+                            variant="upload-progress-bar"
+                        />
+                    </FlexWrapper>
+                </VerticallyCentered>
+            </DialogContent>
+            <DialogActions>
+                {props.exportStage === ExportStage.PAUSED ? (
                     <Button
-                        block
-                        variant={'outline-danger'}
-                        onClick={props.cancelExport}>
-                        {constants.CANCEL}
+                        size="large"
+                        onClick={props.resumeExport}
+                        color="accent">
+                        {constants.RESUME}
                     </Button>
-                </div>
-            </div>
+                ) : (
+                    <Button
+                        size="large"
+                        onClick={props.pauseExport}
+                        color="primary">
+                        {constants.PAUSE}
+                    </Button>
+                )}
+                <Button
+                    size="large"
+                    onClick={props.cancelExport}
+                    color="secondary">
+                    {constants.CANCEL}
+                </Button>
+            </DialogActions>
         </>
     );
 }
diff --git a/src/components/ExportInit.tsx b/src/components/ExportInit.tsx
index 37f3a25ea..3c8757c45 100644
--- a/src/components/ExportInit.tsx
+++ b/src/components/ExportInit.tsx
@@ -1,22 +1,18 @@
-import { Button, DialogActions } from '@mui/material';
+import { Button, DialogActions, DialogContent } from '@mui/material';
 import React from 'react';
 import constants from 'utils/strings/constants';
 
 interface Props {
-    show: boolean;
-    onHide: () => void;
-    updateExportFolder: (newFolder: string) => void;
-    exportFolder: string;
     startExport: () => void;
-    exportSize: string;
-    selectExportDirectory: () => void;
 }
-export default function ExportInit(props: Props) {
+export default function ExportInit({ startExport }: Props) {
     return (
-        <DialogActions>
-            <Button size="large" color="accent" onClick={props.startExport}>
-                {constants.START}
-            </Button>
-        </DialogActions>
+        <DialogContent>
+            <DialogActions>
+                <Button size="large" color="accent" onClick={startExport}>
+                    {constants.START}
+                </Button>
+            </DialogActions>
+        </DialogContent>
     );
 }
diff --git a/src/components/ExportModal.tsx b/src/components/ExportModal.tsx
index 9d7d3cdb5..7a94c0ee2 100644
--- a/src/components/ExportModal.tsx
+++ b/src/components/ExportModal.tsx
@@ -299,23 +299,12 @@ export default function ExportModal(props: Props) {
     const ExportDynamicContent = () => {
         switch (exportStage) {
             case ExportStage.INIT:
-                return (
-                    <ExportInit
-                        {...props}
-                        exportFolder={exportFolder}
-                        exportSize={exportSize}
-                        updateExportFolder={updateExportFolder}
-                        startExport={startExport}
-                        selectExportDirectory={selectExportDirectory}
-                    />
-                );
+                return <ExportInit startExport={startExport} />;
+
             case ExportStage.INPROGRESS:
             case ExportStage.PAUSED:
                 return (
                     <ExportInProgress
-                        {...props}
-                        exportFolder={exportFolder}
-                        exportSize={exportSize}
                         exportStage={exportStage}
                         exportProgress={exportProgress}
                         resumeExport={resumeExport}
@@ -348,7 +337,7 @@ export default function ExportModal(props: Props) {
                 {constants.EXPORT_DATA}
             </DialogTitleWithCloseButton>
             <DialogContent>
-                <Stack spacing={2} mb={4}>
+                <Stack spacing={2}>
                     <ExportDirectory
                         exportFolder={exportFolder}
                         selectExportDirectory={selectExportDirectory}
@@ -356,9 +345,9 @@ export default function ExportModal(props: Props) {
                     />
                     <ExportSize exportSize={exportSize} />
                 </Stack>
-                <Divider />
-                <ExportDynamicContent />
             </DialogContent>
+            <Divider />
+            <ExportDynamicContent />
         </Dialog>
     );
 }