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

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx

@@ -6,20 +6,21 @@ import { x } from '@xstyled/emotion';
 
 import EstimateFormHeaderFields from './EstimateFormHeaderFields';
 import { getEntriesTotal } from '@/containers/Entries/utils';
-import { PageFormBigNumber } from '@/components';
+import { Group, PageFormBigNumber } from '@/components';
 
 // Estimate form top header.
 function EstimateFormHeader() {
   return (
-    <x.div
-      display="flex"
+    <Group
+      position="apart"
+      align={'flex-start'}
       bg="white"
       p="25px 32px"
       borderBottom="1px solid #d2dce2"
     >
       <EstimateFormHeaderFields />
       <EstimateFormBigTotal />
-    </x.div>
+    </Group>
   );
 }
 

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.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 { useEstimateFormContext } from './EstimateFormProvider';
 import { entriesFieldShouldUpdate } from './utils';
@@ -14,7 +13,7 @@ export default function EstimateFormItemsEntriesField() {
   const { items } = useEstimateFormContext();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+    <x.div p="18px 32px 0">
       <FastField
         name={'entries'}
         items={items}
@@ -38,6 +37,6 @@ export default function EstimateFormItemsEntriesField() {
           />
         )}
       </FastField>
-    </div>
+    </x.div>
   );
 }