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

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx

@@ -16,7 +16,7 @@ import { useReceiptFormContext } from './ReceiptFormProvider';
 import ReceiptFromHeader from './ReceiptFormHeader';
 import ReceiptItemsEntriesEditor from './ReceiptItemsEntriesEditor';
 import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
-import ReceiptFormFooter from './ReceiptFormFooter';
+import { ReceiptFormFooter } from './ReceiptFormFooter';
 import ReceiptFormDialogs from './ReceiptFormDialogs';
 import ReceiptFormTopBar from './ReceiptFormTopbar';
 
@@ -162,7 +162,7 @@ function ReceiptFormRoot({
           overflow: 'hidden',
           display: 'flex',
           flexDirection: 'column',
-          flex: 1
+          flex: 1,
         })}
       >
         <PageForm flex={1}>

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.tsx

@@ -1,18 +1,15 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
-import styled from 'styled-components';
-
-import { CLASSES } from '@/constants/classes';
+import { x } from '@xstyled/emotion';
 import { Paper, Row, Col } from '@/components';
 import { ReceiptFormFooterLeft } from './ReceiptFormFooterLeft';
 import { ReceiptFormFooterRight } from './ReceiptFormFooterRight';
 import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
-export default function ReceiptFormFooter({}) {
+export function ReceiptFormFooter({}) {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <ReceiptFooterPaper>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <ReceiptFormFooterLeft />
@@ -23,11 +20,7 @@ export default function ReceiptFormFooter({}) {
             <ReceiptFormFooterRight />
           </Col>
         </Row>
-      </ReceiptFooterPaper>
-    </div>
+      </Paper>
+    </x.div>
   );
 }
-
-const ReceiptFooterPaper = styled(Paper)`
-  padding: 20px;
-`;

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx

@@ -1,13 +1,9 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-
-import { CLASSES } from '@/constants/classes';
-import { PageFormBigNumber } from '@/components';
+import { Group, PageFormBigNumber } from '@/components';
 import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
-
 import { getEntriesTotal } from '@/containers/Entries/utils';
 
 /**
@@ -18,12 +14,18 @@ function ReceiptFormHeader({
   onReceiptNumberChanged,
 }) {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <Group
+      position="apart"
+      align={'flex-start'}
+      display="flex"
+      bg="white"
+      p="25px 32px"
+    >
       <ReceiptFormHeaderFields
         onReceiptNumberChanged={onReceiptNumberChanged}
       />
       <ReceiptFormHeaderBigTotal />
-    </div>
+    </Group>
   );
 }
 

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { css } from '@emotion/css';
 
 import {
   ReceiptFormProvider,
@@ -30,7 +31,13 @@ function ReceiptFormPageContent() {
   const { isBootLoading } = useReceiptFormContext();
 
   return (
-    <DashboardInsider loading={isBootLoading}>
+    <DashboardInsider
+      loading={isBootLoading}
+      className={css`
+        min-height: calc(100vh - var(--top-offset));
+        max-height: calc(100vh - var(--top-offset));
+      `}
+    >
       <ReceiptForm />
     </DashboardInsider>
   );

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptItemsEntriesEditor.tsx

@@ -1,8 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import { x } from '@xstyled/emotion';
 import { FastField } from 'formik';
-import { CLASSES } from '@/constants/classes';
 import ItemsEntriesTable from '@/containers/Entries/ItemsEntriesTable';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import { entriesFieldShouldUpdate } from './utils';
@@ -11,8 +10,12 @@ export default function ReceiptItemsEntriesEditor({ defaultReceipt }) {
   const { items } = useReceiptFormContext();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-      <FastField name={'entries'} items={items} shouldUpdate={entriesFieldShouldUpdate}>
+    <x.div p="18px 32px 0">
+      <FastField
+        name={'entries'}
+        items={items}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -31,6 +34,6 @@ export default function ReceiptItemsEntriesEditor({ defaultReceipt }) {
           />
         )}
       </FastField>
-    </div>
+    </x.div>
   );
 }