feat: style the export dialog form

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogContent.module.scss

@@ -0,0 +1,18 @@
+
+
+.root{
+  padding: 20px;
+}
+
+.footer{
+  margin-top: 2rem;
+}
+
+.resourceFormGroup{
+  max-width: 280px;
+}
+
+.paragraph{
+  color: #5F6B7C;
+  margin-bottom: 1.2rem;
+}

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogForm.tsx

@@ -1,13 +1,16 @@
 // @ts-nocheck
 import { Formik } from 'formik';
 
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose, transformToForm } from '@/utils';
 
 import { ExportDialogFormSchema } from './ExportDialogForm.schema';
 import { ExportDialogFormContent } from './ExportDialogFormContent';
 import { useResourceExport } from '@/hooks/query/FinancialReports/use-export';
 import { ExportFormInitialValues } from './type';
+import { AppToaster } from '@/components';
+import { Intent } from '@blueprintjs/core';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 // Default initial form values.
 const defaultInitialValues = {
@@ -39,9 +42,14 @@ function ExportDialogFormRoot({
     mutateExport({ resource, format })
       .then(() => {
         setSubmitting(false);
+        closeDialog(DialogsName.Export);
       })
       .catch(() => {
         setSubmitting(false);
+        AppToaster.show({
+          intent: Intent.DANGER,
+          message: 'Something went wrong!',
+        });
       });
   };
 

packages/webapp/src/containers/Dialogs/ExportDialog/ExportDialogFormContent.tsx

@@ -1,29 +1,63 @@
-import { FFormGroup, FRadioGroup, FSelect } from '@/components';
-import { Button, Callout, Intent, Radio } from '@blueprintjs/core';
-import { Form } from 'formik';
+// @ts-nocheck
+import { FFormGroup, FRadioGroup, FSelect, Group } from '@/components';
+import { Button, Intent, Radio } from '@blueprintjs/core';
+import { Form, useFormikContext } from 'formik';
 import { ExportResources } from './constants';
+import styles from './ExportDialogContent.module.scss';
+import { compose } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
+
+function ExportDialogFormContentRoot({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+  const handleCancelBtnClick = () => {
+    closeDialog(DialogsName.Export);
+  };
 
-export function ExportDialogFormContent() {
   return (
     <Form>
-      <Callout>
-        You can export data from Bigcapital in CSV or XLSX format
-      </Callout>
+      <div className={styles.root}>
+        <p className={styles.paragraph}>
+          You can export data from Bigcapital in CSV or XLSX format
+        </p>
 
-      <FFormGroup name={'resource'} label={'Select Resource'}>
-        <FSelect name={'resource'} items={ExportResources} />
-      </FFormGroup>
+        <FFormGroup
+          name={'resource'}
+          label={'Select Resource'}
+          className={styles.resourceFormGroup}
+        >
+          <FSelect
+            name={'resource'}
+            items={ExportResources}
+            popoverProps={{ minimal: true }}
+          />
+        </FFormGroup>
 
-      <FRadioGroup label={'Export As'} name={'format'}>
-        <Radio value={'xlsx'}>XLSX (Microsoft Excel)</Radio>
-        <Radio value={'csv'}>CSV (Comma Seperated Value)</Radio>
-      </FRadioGroup>
+        <FRadioGroup label={'Export As'} name={'format'}>
+          <Radio value={'xlsx'}>XLSX (Microsoft Excel)</Radio>
+          <Radio value={'csv'}>CSV (Comma Seperated Value)</Radio>
+        </FRadioGroup>
 
-      <div>
-        <Button type={'submit'} intent={Intent.PRIMARY}>
-          Export
-        </Button>
+        <Group position={'right'} spacing={10} className={styles.footer}>
+          <Button intent={Intent.NONE} onClick={handleCancelBtnClick}>
+            Cancel
+          </Button>
+          <Button
+            type={'submit'}
+            intent={Intent.PRIMARY}
+            loading={isSubmitting}
+          >
+            Export
+          </Button>
+        </Group>
       </div>
     </Form>
   );
 }
+
+export const ExportDialogFormContent = compose(withDialogActions)(
+  ExportDialogFormContentRoot,
+);