feat: style the export dialog form

packages/webapp/src/containers/Accounts/AccountsActionsBar.tsx

@@ -121,7 +121,7 @@ function AccountsActionsBar({
   // Handle the export button click.
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'account' });
-  }
+  };
 
   return (
     <DashboardActionsBar>
@@ -186,18 +186,18 @@ function AccountsActionsBar({
           icon={<Icon icon="print-16" iconSize={16} />}
           text={<T id={'print'} />}
         />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="file-export-16" iconSize={16} />}
-          text={<T id={'export'} />}
-          onClick={handleExportBtnClick}
-        />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="file-import-16" iconSize={16} />}
           text={<T id={'import'} />}
           onClick={handleImportBtnClick}
         />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+          onClick={handleExportBtnClick}
+        />
         <NavbarDivider />
         <DashboardRowsHeightButton
           initialValue={accountsTableSize}

packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx

@@ -92,13 +92,13 @@ function CashFlowAccountsActionsBar({
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-export-16" iconSize={16} />}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
-          text={<T id={'export'} />}
+          text={<T id={'import'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-import-16" iconSize={16} />}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
-          text={<T id={'import'} />}
+          text={<T id={'export'} />}
         />
         <NavbarDivider />
         <Can I={CashflowAction.Edit} a={AbilitySubject.Cashflow}>
@@ -117,7 +117,7 @@ function CashFlowAccountsActionsBar({
             text={'Connect to Bank / Credit Card'}
             onClick={handleConnectToBank}
           />
-        <NavbarDivider />
+          <NavbarDivider />
         </FeatureCan>
         <Button
           className={Classes.MINIMAL}

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