update inprogress state

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
+            <DialogContent>
-                style={{
+                <VerticallyCentered>
-                    marginBottom: '30px',
+                    <Box mb={1.5}>
-                    padding: '0 5%',
+                        <ComfySpan>
-                    display: 'flex',
+                            {' '}
-                    alignItems: 'center',
+                            {props.exportProgress.current} /{' '}
-                    flexDirection: 'column',
+                            {props.exportProgress.total}{' '}
-                }}>
+                        </ComfySpan>{' '}
-                <div style={{ marginBottom: '10px' }}>
+                        <span>
-                    <ComfySpan>
+                            {' '}
-                        {' '}
+                            files exported{' '}
-                        {props.exportProgress.current} /{' '}
+                            {props.exportStage === ExportStage.PAUSED &&
-                        {props.exportProgress.total}{' '}
+                                `(paused)`}
-                    </ComfySpan>{' '}
+                        </span>
-                    <span style={{ marginLeft: '10px' }}>
+                    </Box>
-                        {' '}
+                    <FlexWrapper px={1}>
-                        files exported{' '}
+                        <ProgressBar
-                        {props.exportStage === ExportStage.PAUSED && `(paused)`}
+                            style={{ width: '100%' }}
-                    </span>
+                            now={Math.round(
-                </div>
+                                (props.exportProgress.current * 100) /
-                <div style={{ width: '100%', marginBottom: '30px' }}>
+                                    props.exportProgress.total
-                    <ProgressBar
+                            )}
-                        now={Math.round(
+                            animated={
-                            (props.exportProgress.current * 100) /
+                                !(props.exportStage === ExportStage.PAUSED)
-                                props.exportProgress.total
+                            }
-                        )}
+                            variant="upload-progress-bar"
-                        animated={!(props.exportStage === ExportStage.PAUSED)}
+                        />
-                        variant="upload-progress-bar"
+                    </FlexWrapper>
-                    />
+                </VerticallyCentered>
-                </div>
+            </DialogContent>
-                <div
+            <DialogActions>
-                    style={{
+                {props.exportStage === ExportStage.PAUSED ? (
-                        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' }} />
                     <Button
-                        block
+                        size="large"
-                        variant={'outline-danger'}
+                        onClick={props.resumeExport}
-                        onClick={props.cancelExport}>
+                        color="accent">
-                        {constants.CANCEL}
+                        {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>
         </>
     );
 }

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>
+        <DialogContent>
-            <Button size="large" color="accent" onClick={props.startExport}>
+            <DialogActions>
-                {constants.START}
+                <Button size="large" color="accent" onClick={startExport}>
-            </Button>
+                    {constants.START}
-        </DialogActions>
+                </Button>
+            </DialogActions>
+        </DialogContent>
     );
 }

src/components/ExportModal.tsx

@@ -299,23 +299,12 @@ export default function ExportModal(props: Props) {
     const ExportDynamicContent = () => {
         switch (exportStage) {
             case ExportStage.INIT:
-                return (
+                return <ExportInit startExport={startExport} />;
-                    <ExportInit
+
-                        {...props}
-                        exportFolder={exportFolder}
-                        exportSize={exportSize}
-                        updateExportFolder={updateExportFolder}
-                        startExport={startExport}
-                        selectExportDirectory={selectExportDirectory}
-                    />
-                );
             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>
     );
 }