From 74b74a27228ede8f10a9cc99944bf0c539c6b2fa Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Fri, 14 Jun 2024 08:27:30 +0200
Subject: [PATCH] fix: add space between buttons on floating actions bar

---
 .../MakeJournal/MakeJournalFormFloatingActions.tsx  |  9 ++++++---
 .../CustomerForm/CustomerFloatingActions.tsx        | 10 ++++++----
 .../Expenses/ExpenseForm/ExpenseFloatingActions.tsx |  9 ++++++---
 .../containers/Items/ItemFormFloatingActions.tsx    | 10 ++++++----
 .../webapp/src/containers/Items/ItemFormPage.tsx    |  1 -
 .../Bills/BillForm/BillFloatingActions.tsx          |  9 ++++++---
 .../VendorCreditNoteFloatingActions.tsx             | 10 +++++++---
 .../PaymentForm/PaymentMadeFloatingActions.tsx      | 13 +++++++------
 .../CreditNoteForm/CreditNoteFloatingActions.tsx    | 10 +++++++---
 .../EstimateForm/EstimateFloatingActions.tsx        | 11 ++++++++---
 .../Invoices/InvoiceForm/InvoiceFloatingActions.tsx |  9 ++++++---
 .../PaymentReceiveFloatingActions.tsx               | 12 +++++++-----
 .../ReceiptForm/ReceiptFormFloatingActions.tsx      | 10 +++++++---
 .../Vendors/VendorForm/VendorFloatingActions.tsx    |  9 ++++++---
 packages/webapp/src/style/pages/Items/Form.scss     |  4 +---
 15 files changed, 86 insertions(+), 50 deletions(-)

diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx
index 1b5d801c6..ab157d59e 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx
@@ -13,7 +13,7 @@ import {
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import classNames from 'classnames';
-import { Icon, If, FormattedMessage as T } from '@/components';
+import { Group, Icon, If, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 
@@ -76,7 +76,10 @@ export default function MakeJournalFloatingAction() {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save And Publish ----------- */}
       <If condition={!manualJournal || !manualJournal?.is_published}>
         <ButtonGroup>
@@ -188,6 +191,6 @@ export default function MakeJournalFloatingAction() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx
index ab0834a30..4499cc8c9 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx
@@ -13,12 +13,11 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { Icon, FormattedMessage as T } from '@/components';
+import { Group, Icon, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import { useCustomerFormContext } from './CustomerFormProvider';
 import { safeInvoke } from '@/utils';
 
-
 /**
  * Customer floating actions bar.
  */
@@ -51,7 +50,10 @@ export default function CustomerFloatingActions({ onCancel }) {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       <ButtonGroup>
         {/* ----------- Save and New ----------- */}
         <SaveButton
@@ -96,7 +98,7 @@ export default function CustomerFloatingActions({ onCancel }) {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
 
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx
index 954c8cf30..7c3facdd8 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx
@@ -11,7 +11,7 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from '@/components';
+import { Group, FormattedMessage as T } from '@/components';
 import { useHistory } from 'react-router-dom';
 
 import { CLASSES } from '@/constants/classes';
@@ -78,7 +78,10 @@ export default function ExpenseFloatingFooter() {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save And Publish ----------- */}
       <If condition={isNewMode}>
         <ButtonGroup>
@@ -190,6 +193,6 @@ export default function ExpenseFloatingFooter() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Items/ItemFormFloatingActions.tsx b/packages/webapp/src/containers/Items/ItemFormFloatingActions.tsx
index 8bb4412f5..d7656b155 100644
--- a/packages/webapp/src/containers/Items/ItemFormFloatingActions.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormFloatingActions.tsx
@@ -5,9 +5,8 @@ import classNames from 'classnames';
 import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
 import { FastField, useFormikContext } from 'formik';
 import { CLASSES } from '@/constants/classes';
-
 import { useItemFormContext } from './ItemFormProvider';
-import { FormattedMessage as T } from '@/components';
+import { Group, FormattedMessage as T } from '@/components';
 import { saveInvoke } from '@/utils';
 
 /**
@@ -37,7 +36,10 @@ export default function ItemFormFloatingActions({ onCancel }) {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       <SaveButton
         intent={Intent.PRIMARY}
         disabled={isSubmitting}
@@ -78,7 +80,7 @@ export default function ItemFormFloatingActions({ onCancel }) {
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </Group>
   );
 }
 
diff --git a/packages/webapp/src/containers/Items/ItemFormPage.tsx b/packages/webapp/src/containers/Items/ItemFormPage.tsx
index 2e5e29396..222fedd07 100644
--- a/packages/webapp/src/containers/Items/ItemFormPage.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormPage.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import ItemForm from './ItemForm';
 
-
 /**
  * Item form page.
  */
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx
index f0e1fda04..71cd537fe 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx
@@ -10,7 +10,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from '@/components';
+import { Group, FormattedMessage as T } from '@/components';
 import { useHistory } from 'react-router-dom';
 import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
@@ -76,7 +76,10 @@ export default function BillFloatingActions() {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save And Open ----------- */}
       <If condition={!bill || !bill?.is_open}>
         <ButtonGroup>
@@ -189,6 +192,6 @@ export default function BillFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx
index dd56835a7..3af632ccb 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx
@@ -13,7 +13,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T } from '@/components';
+import { If, Icon, FormattedMessage as T, Group } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 
@@ -69,11 +69,15 @@ export default function VendorCreditNoteFloatingActions() {
     history.goBack();
   };
 
+  // Handle the clear button click.
   const handleClearBtnClick = (event) => {
     resetForm();
   };
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save And Open  ----------- */}
       <If condition={!vendorCredit || !vendorCredit?.is_open}>
         <ButtonGroup>
@@ -185,6 +189,6 @@ export default function VendorCreditNoteFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.tsx
index 970c25054..d37e305f3 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.tsx
@@ -11,14 +11,12 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T } from '@/components';
+import { Group, Icon, FormattedMessage as T } from '@/components';
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { CLASSES } from '@/constants/classes';
 
-
-
 /**
  * Payment made floating actions bar.
  */
@@ -56,11 +54,14 @@ export default function PaymentMadeFloatingActions() {
   // Handle submit & continue editing button click.
   const handleSubmitContinueEditingBtnClick = (event) => {
     setSubmitPayload({ redirect: false, publish: true });
-    submitForm()
+    submitForm();
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save and New ----------- */}
       <ButtonGroup>
         <Button
@@ -109,6 +110,6 @@ export default function PaymentMadeFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
index 71dd18325..bfdc6c57f 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
@@ -12,7 +12,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T } from '@/components';
+import { If, Icon, FormattedMessage as T, Group } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
@@ -69,12 +69,16 @@ export default function CreditNoteFloatingActions() {
     history.goBack();
   };
 
+  // Handle clear button click.
   const handleClearBtnClick = (event) => {
     resetForm();
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save And Open  ----------- */}
       <If condition={!creditNote || !creditNote?.is_open}>
         <ButtonGroup>
@@ -186,6 +190,6 @@ export default function CreditNoteFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
index df212c38c..906d703d9 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
@@ -11,7 +11,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T } from '@/components';
+import { If, Icon, FormattedMessage as T, Group } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
@@ -63,16 +63,21 @@ export default function EstimateFloatingActions() {
     submitForm();
   };
 
+  // Handle the cancel button click.
   const handleCancelBtnClick = (event) => {
     history.goBack();
   };
 
+  // Handle the clear button click.
   const handleClearBtnClick = (event) => {
     resetForm();
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save And Deliver ----------- */}
       <If condition={!estimate || !estimate?.is_delivered}>
         <ButtonGroup>
@@ -188,6 +193,6 @@ export default function EstimateFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
index e212c8b7d..e3d88daf5 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
@@ -13,7 +13,7 @@ import {
 import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
 import { useFormikContext } from 'formik';
-import { If, Icon, FormattedMessage as T } from '@/components';
+import { If, Icon, FormattedMessage as T, Group } from '@/components';
 import { useHistory } from 'react-router-dom';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 
@@ -76,7 +76,10 @@ export default function InvoiceFloatingActions() {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save And Deliver ----------- */}
       <If condition={!invoice || !invoice?.is_delivered}>
         <ButtonGroup>
@@ -189,6 +192,6 @@ export default function InvoiceFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
index 4289e056b..351b88a88 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
@@ -11,12 +11,11 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T } from '@/components';
 import { useHistory } from 'react-router-dom';
+import { Group, Icon, FormattedMessage as T } from '@/components';
 import { useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
-
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+import { CLASSES } from '@/constants/classes';
 
 /**
  * Payment receive floating actions bar.
@@ -55,7 +54,10 @@ export default function PaymentReceiveFormFloatingActions() {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save and New ----------- */}
       <ButtonGroup>
         <Button
@@ -107,6 +109,6 @@ export default function PaymentReceiveFormFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx
index d8d83dfb5..aa156618d 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx
@@ -11,7 +11,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from '@/components';
+import { Group, FormattedMessage as T } from '@/components';
 import { useFormikContext } from 'formik';
 import { useHistory } from 'react-router-dom';
 import { CLASSES } from '@/constants/classes';
@@ -71,12 +71,16 @@ export default function ReceiptFormFloatingActions() {
     history.goBack();
   };
 
+  // Handle the clear button click.
   const handleClearBtnClick = (event) => {
     resetForm();
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       {/* ----------- Save And Close ----------- */}
       <If condition={!receipt || !receipt?.is_closed}>
         <ButtonGroup>
@@ -187,6 +191,6 @@ export default function ReceiptFormFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx
index 0801cbf91..99fbf0b96 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx
@@ -14,7 +14,7 @@ import styled from 'styled-components';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 
-import { Icon, FormattedMessage as T } from '@/components';
+import { Group, Icon, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import { useVendorFormContext } from './VendorFormProvider';
 import { safeInvoke } from '@/utils';
@@ -51,7 +51,10 @@ export default function VendorFloatingActions({ onCancel }) {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
       <ButtonGroup>
         {/* ----------- Save and New ----------- */}
         <SaveButton
@@ -96,7 +99,7 @@ export default function VendorFloatingActions({ onCancel }) {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </div>
+    </Group>
   );
 }
 
diff --git a/packages/webapp/src/style/pages/Items/Form.scss b/packages/webapp/src/style/pages/Items/Form.scss
index 9f147e1bd..590c9b82c 100644
--- a/packages/webapp/src/style/pages/Items/Form.scss
+++ b/packages/webapp/src/style/pages/Items/Form.scss
@@ -73,13 +73,11 @@
   }
 
   #{$self}__floating-actions {
-    // margin-left: -40px;
-    // margin-right: -40px;
 
     .form-group--active {
       display: inline-block;
       margin: 0;
-      margin-left: 40px;
+      margin-left: 20px;
     }
   }