feat: Add css utilities to Box, Stack and Group components

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormBody.tsx

@@ -2,15 +2,14 @@
 import React from 'react';
 import { FastField } from 'formik';
 import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
+import { Box } from '@/components';
 
 /**
  * Payment Receive form body.
  */
 export default function PaymentReceiveFormBody() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+    <Box p="18px 32px 0">
       <FastField name={'entries'}>
         {({ form: { values, setFieldValue }, field: { value } }) => (
           <PaymentReceiveItemsTable
@@ -22,6 +21,6 @@ export default function PaymentReceiveFormBody() {
           />
         )}
       </FastField>
-    </div>
+    </Box>
   );
 }

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { x } from '@xstyled/emotion';
 
-import { Row, Col, Paper } from '@/components';
+import { Row, Col, Paper, Box } from '@/components';
 import { PaymentReceiveFormFootetLeft } from './PaymentReceiveFormFootetLeft';
 import { PaymentReceiveFormFootetRight } from './PaymentReceiveFormFootetRight';
 import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
@@ -12,7 +12,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
  */
 export default function PaymentReceiveFormFooter() {
   return (
-    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
+    <Box mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
       <Paper p={'20px'}>
         <Row>
           <Col md={8}>
@@ -25,6 +25,6 @@ export default function PaymentReceiveFormFooter() {
           </Col>
         </Row>
       </Paper>
-    </x.div>
+    </Box>
   );
 }

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
-import { Money } from '@/components';
+import { Group, Money } from '@/components';
 import { FormattedMessage as T } from '@/components';
 
 import { CLASSES } from '@/constants/classes';
@@ -14,12 +14,16 @@ import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
  */
 function PaymentReceiveFormHeader() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        <PaymentReceiveHeaderFields />
-        <PaymentReceiveFormBigTotal />
-      </div>
-    </div>
+    <Group
+      position="apart"
+      align={'flex-start'}
+      bg="white"
+      p="25px 32px"
+      borderBottom="1px solid #d2dce2"
+    >
+      <PaymentReceiveHeaderFields />
+      <PaymentReceiveFormBigTotal />
+    </Group>
   );
 }
 

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormPage.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { css } from '@xstyled/emotion';
+import { css } from '@emotion/css';
 import {
   PaymentReceiveFormProvider,
   usePaymentReceiveFormContext,