wip

packages/webapp/src/components/PageForm/PageForm.tsx

@@ -37,6 +37,30 @@ const PageFormBody: FC<{ children: React.ReactNode } & SystemProps> = ({
 };
 PageFormBody.displayName = 'PageFormBody';
 
+const PageFormHeader: FC<GroupProps> = ({ className, ...props }) => {
+  return (
+    <Group
+      position="apart"
+      align={'flex-start'}
+      p="25px 32px"
+      {...props}
+      className={clsx(css(pageFormHeaderStyle), className)}
+    />
+  );
+};
+
+const pageFormHeaderStyle = `
+  --color-invoice-form-header-background: #fff;
+  --color-invoice-form-header-border: #d2dce2;
+
+  .bp4-dark & {
+    --color-invoice-form-header-background: var(--color-dark-gray1);
+    --color-invoice-form-header-border: rgba(255, 255, 255, 0.1);
+  }    
+  border-bottom: 1px solid var(--color-invoice-form-header-border);
+  background-color: var(--color-invoice-form-header-background);
+`;
+
 /**
  * Page form footer.
  * @returns {React.ReactNode}
@@ -98,3 +122,4 @@ PageFormFooterActions.displayName = 'PageFormFooterActions';
 PageForm.Body = PageFormBody;
 PageForm.Footer = PageFormFooter;
 PageForm.FooterActions = PageFormFooterActions;
+PageForm.Header = PageFormHeader;

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx

@@ -6,6 +6,7 @@ import intl from 'react-intl-universal';
 import * as R from 'ramda';
 import { sumBy, round, isEmpty, omit } from 'lodash';
 import classNames from 'classnames';
+import { css } from '@emotion/css';
 import { useHistory } from 'react-router-dom';
 
 import { CLASSES } from '@/constants/classes';
@@ -25,6 +26,7 @@ import withSettings from '@/containers/Settings/withSettings';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
 import { AppToaster } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { compose, orderingLinesIndexes, transactionNumber } from '@/utils';
 import {
   transformErrors,
@@ -175,18 +177,32 @@ function MakeJournalEntriesForm({
         validationSchema={isNewMode ? CreateJournalSchema : EditJournalSchema}
         onSubmit={handleSubmit}
       >
-        <Form>
+        <Form
-          <MakeJournalFormTopBar />
+          className={css({
-          <MakeJournalEntriesHeader />
+            overflow: 'hidden',
-          <MakeJournalEntriesField />
+            display: 'flex',
-          <MakeJournalFormFooter />
+            flexDirection: 'column',
-          <MakeJournalFormFloatingActions />
+            flex: 1,
+          })}
+        >
+          <PageForm flex={1}>
+            <PageForm.Body>
+              <MakeJournalFormTopBar />
+              <MakeJournalEntriesHeader />
+              <MakeJournalEntriesField />
+              <MakeJournalFormFooter />
+            </PageForm.Body>
 
-          {/* --------- Dialogs --------- */}
+            <PageForm.Footer>
-          <MakeJournalFormDialogs />
+              <MakeJournalFormFloatingActions />
+            </PageForm.Footer>
 
-          {/* --------- Effects --------- */}
+            {/* --------- Dialogs --------- */}
-          <JournalSyncIncrementSettingsToForm />
+            <MakeJournalFormDialogs />
+
+            {/* --------- Effects --------- */}
+            <JournalSyncIncrementSettingsToForm />
+          </PageForm>
         </Form>
       </Formik>
     </div>

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx

@@ -1,17 +1,20 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import {
-import { CLASSES } from '@/constants/classes';
+  Group,
-import { PageFormBigNumber, FormattedMessage as T } from '@/components';
+  PageForm,
+  PageFormBigNumber,
+  FormattedMessage as T,
+} from '@/components';
 import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
 import { useManualJournalTotalFormatted } from './utils';
 
 export default function MakeJournalEntriesHeader() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <PageForm.Header>
       <MakeJournalEntriesHeaderFields />
       <MakeJournalHeaderBigNumber />
-    </div>
+    </PageForm.Header>
   );
 }
 

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx

@@ -1,17 +1,13 @@
 // @ts-nocheck
 import React from 'react';
-import { InputGroup, FormGroup, Position } from '@blueprintjs/core';
+import { Position } from '@blueprintjs/core';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { useFormikContext } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
 import classNames from 'classnames';
+import { useTheme } from '@emotion/react';
+import { css } from '@emotion/css';
 
 import { CLASSES } from '@/constants/classes';
-import {
+import {} from '@/utils';
-  momentFormatter,
-  inputIntent,
-  handleDateChange,
-  tansformDateValue,
-} from '@/utils';
 import {
   Hint,
   FieldRequiredHint,
@@ -19,91 +15,95 @@ import {
   FSelect,
   FormattedMessage as T,
   FFormGroup,
+  FInputGroup,
+  FDateInput,
+  Stack,
 } from '@/components';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import { JournalExchangeRateInputField } from './components';
 import { MakeJournalTransactionNoField } from './MakeJournalTransactionNoField';
 
+const getFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Make journal entries header.
  */
 export default function MakeJournalEntriesHeader({}) {
   const { currencies } = useMakeJournalFormContext();
   const form = useFormikContext();
+  const theme = useTheme();
+  const fieldsClassName = getFieldsStyle(theme);
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={fieldsClassName}>
       {/*------------ Posting date -----------*/}
-      <FastField name={'date'}>
+      <FFormGroup
-        {({ form, field: { value }, meta: { error, touched } }) => (
+        name={'date'}
-          <FormGroup
+        label={<T id={'posting_date'} />}
-            label={<T id={'posting_date'} />}
+        labelInfo={<FieldRequiredHint />}
-            labelInfo={<FieldRequiredHint />}
+        inline
-            intent={inputIntent({ error, touched })}
+        fastField
-            helperText={<ErrorMessage name="date" />}
+      >
-            minimal={true}
+        <FDateInput
-            inline={true}
+          name={'date'}
-            className={classNames(CLASSES.FILL)}
+          formatDate={(date) => date.toLocaleDateString()}
-          >
+          parseDate={(str) => new Date(str)}
-            <DateInput
+          popoverProps={{
-              {...momentFormatter('YYYY/MM/DD')}
+            position: Position.BOTTOM_LEFT,
-              onChange={handleDateChange((formattedDate) => {
+            minimal: true,
-                form.setFieldValue('date', formattedDate);
+            fill: true,
-              })}
+          }}
-              value={tansformDateValue(value)}
+          inputProps={{
-              popoverProps={{
+            leftIcon: <Icon icon={'date-range'} />,
-                position: Position.BOTTOM,
+          }}
-                minimal: true,
+          fill
-              }}
+          fastField
-              inputProps={{
+        />
-                leftIcon: <Icon icon={'date-range'} />,
+      </FFormGroup>
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
 
       {/*------------ Journal number -----------*/}
       <MakeJournalTransactionNoField />
 
       {/*------------ Reference -----------*/}
-      <FastField name={'reference'}>
+      <FFormGroup
-        {({ form, field, meta: { error, touched } }) => (
+        name={'reference'}
-          <FormGroup
+        label={<T id={'reference'} />}
-            label={<T id={'reference'} />}
+        labelInfo={
-            labelInfo={
+          <Hint
-              <Hint
+            content={<T id={'journal_reference_hint'} />}
-                content={<T id={'journal_reference_hint'} />}
+            position={Position.RIGHT}
-                position={Position.RIGHT}
+          />
-              />
+        }
-            }
+        inline
-            className={'form-group--reference'}
+        fastField
-            intent={inputIntent({ error, touched })}
+      >
-            helperText={<ErrorMessage name="reference" />}
+        <FInputGroup name={'reference'} minimal fill />
-            fill={true}
+      </FFormGroup>
-            inline={true}
-          >
-            <InputGroup fill={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
 
       {/*------------ Journal type  -----------*/}
-      <FastField name={'journal_type'}>
+      <FFormGroup
-        {({ form, field, meta: { error, touched } }) => (
+        name={'journal_type'}
-          <FormGroup
+        label={<T id={'journal_type'} />}
-            label={<T id={'journal_type'} />}
+        inline
-            className={classNames('form-group--account-type', CLASSES.FILL)}
+        fastField
-            inline={true}
+      >
-          >
+        <FInputGroup name={'journal_type'} minimal fill />
-            <InputGroup
+      </FFormGroup>
-              intent={inputIntent({ error, touched })}
-              fill={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
 
       {/*------------ Currency  -----------*/}
       <FFormGroup
@@ -136,6 +136,6 @@ export default function MakeJournalEntriesHeader({}) {
         name={'exchange_rate'}
         formGroupProps={{ label: ' ', inline: true }}
       />
-    </div>
+    </Stack>
   );
 }

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx

@@ -14,6 +14,7 @@ import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import classNames from 'classnames';
 import { Group, Icon, If, FormattedMessage as T } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { CLASSES } from '@/constants/classes';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 
@@ -76,7 +77,7 @@ export default function MakeJournalFloatingAction() {
   };
 
   return (
-    <Group
+    <PageForm.FooterActions
       spacing={10}
       className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
     >
@@ -191,6 +192,6 @@ export default function MakeJournalFloatingAction() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </Group>
+    </PageForm.FooterActions>
   );
 }

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss

@@ -1,9 +1,12 @@
-
-
 .emptyState{
+  --x-color-text: #738091;
+
+  :global(.bp4-dark) & {
+      --x-color-text: rgba(255, 255, 255, 0.6);
+  }
   text-align: center;
   font-size: 15px;
-  color: #738091;
+  color: var(--x-color-text);
 
   :global ul{
     list-style: inside;

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx

@@ -11,11 +11,9 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import { Group, FormattedMessage as T } from '@/components';
+import { FormattedMessage as T, PageForm, Group } from '@/components';
 import { useHistory } from 'react-router-dom';
 
-import { CLASSES } from '@/constants/classes';
-import classNames from 'classnames';
 import { Icon, If } from '@/components';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
 
@@ -78,121 +76,120 @@ export default function ExpenseFloatingFooter() {
   };
 
   return (
-    <Group
+    <PageForm.FooterActions spacing={10} position="apart">
-      spacing={10}
+      <Group spacing={10}>
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+        {/* ----------- Save And Publish ----------- */}
-    >
+        <If condition={isNewMode}>
-      {/* ----------- Save And Publish ----------- */}
+          <ButtonGroup>
-      <If condition={isNewMode}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            loading={isSubmitting}
-            intent={Intent.PRIMARY}
-            onClick={handleSubmitPublishBtnClick}
-            text={<T id={'save_publish'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'publish_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'publish_continue_editing'} />}
-                  onClick={handleSubmitPublishContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
             <Button
               disabled={isSubmitting}
+              loading={isSubmitting}
               intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              onClick={handleSubmitPublishBtnClick}
+              text={<T id={'save_publish'} />}
             />
-          </Popover>
+            <Popover
-        </ButtonGroup>
+              content={
-        {/* ----------- Save As Draft ----------- */}
+                <Menu>
-        <ButtonGroup>
+                  <MenuItem
-          <Button
+                    text={<T id={'publish_and_new'} />}
-            disabled={isSubmitting}
+                    onClick={handleSubmitPublishAndNewBtnClick}
-            className={'ml1'}
+                  />
-            onClick={handleSubmitDraftBtnClick}
+                  <MenuItem
-            text={<T id={'save_as_draft'} />}
+                    text={<T id={'publish_continue_editing'} />}
-          />
+                    onClick={handleSubmitPublishContinueEditingBtnClick}
-          <Popover
+                  />
-            content={
+                </Menu>
-              <Menu>
+              }
-                <MenuItem
+              minimal={true}
-                  text={<T id={'save_and_new'} />}
+              interactionKind={PopoverInteractionKind.CLICK}
-                  onClick={handleSubmitDraftAndNewBtnClick}
+              position={Position.BOTTOM_LEFT}
-                />
+            >
-                <MenuItem
+              <Button
-                  text={<T id={'save_continue_editing'} />}
+                disabled={isSubmitting}
-                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                intent={Intent.PRIMARY}
-                />
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-              </Menu>
+              />
-            }
+            </Popover>
-            minimal={true}
+          </ButtonGroup>
-            interactionKind={PopoverInteractionKind.CLICK}
+          {/* ----------- Save As Draft ----------- */}
-            position={Position.BOTTOM_LEFT}
+          <ButtonGroup>
-          >
             <Button
               disabled={isSubmitting}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              className={'ml1'}
+              onClick={handleSubmitDraftBtnClick}
+              text={<T id={'save_as_draft'} />}
             />
-          </Popover>
+            <Popover
-        </ButtonGroup>
+              content={
-      </If>
+                <Menu>
-      {/* ----------- Save and New ----------- */}
+                  <MenuItem
-      <If condition={!isNewMode}>
+                    text={<T id={'save_and_new'} />}
-        <ButtonGroup>
+                    onClick={handleSubmitDraftAndNewBtnClick}
-          <Button
+                  />
-            disabled={isSubmitting}
+                  <MenuItem
-            loading={isSubmitting}
+                    text={<T id={'save_continue_editing'} />}
-            intent={Intent.PRIMARY}
+                    onClick={handleSubmitDraftContinueEditingBtnClick}
-            onClick={handleSubmitPublishBtnClick}
+                  />
-            style={{ minWidth: '85px' }}
+                </Menu>
-            text={<T id={'save'} />}
+              }
-          />
+              minimal={true}
-          <Popover
+              interactionKind={PopoverInteractionKind.CLICK}
-            content={
+              position={Position.BOTTOM_LEFT}
-              <Menu>
+            >
-                <MenuItem
+              <Button
-                  text={<T id={'save_and_new'} />}
+                disabled={isSubmitting}
-                  onClick={handleSubmitPublishAndNewBtnClick}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-                />
+              />
-              </Menu>
+            </Popover>
-            }
+          </ButtonGroup>
-            minimal={true}
+        </If>
-            interactionKind={PopoverInteractionKind.CLICK}
+        {/* ----------- Save and New ----------- */}
-            position={Position.BOTTOM_LEFT}
+        <If condition={!isNewMode}>
-          >
+          <ButtonGroup>
             <Button
               disabled={isSubmitting}
+              loading={isSubmitting}
               intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              onClick={handleSubmitPublishBtnClick}
+              style={{ minWidth: '85px' }}
+              text={<T id={'save'} />}
             />
-          </Popover>
+            <Popover
-        </ButtonGroup>
+              content={
-      </If>
+                <Menu>
-      {/* ----------- Clear & Reset----------- */}
+                  <MenuItem
-      <Button
+                    text={<T id={'save_and_new'} />}
-        className={'ml1'}
+                    onClick={handleSubmitPublishAndNewBtnClick}
-        disabled={isSubmitting}
+                  />
-        onClick={handleClearBtnClick}
+                </Menu>
-        text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
+              }
-      />
+              minimal={true}
-      {/* ----------- Cancel ----------- */}
+              interactionKind={PopoverInteractionKind.CLICK}
-      <Button
+              position={Position.BOTTOM_LEFT}
-        className={'ml1'}
+            >
-        onClick={handleCancelBtnClick}
+              <Button
-        text={<T id={'cancel'} />}
+                disabled={isSubmitting}
-      />
+                intent={Intent.PRIMARY}
-    </Group>
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+        </If>
+        {/* ----------- Clear & Reset----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleClearBtnClick}
+          text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
+        />
+        {/* ----------- Cancel ----------- */}
+        <Button
+          className={'ml1'}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </Group>
+    </PageForm.FooterActions>
   );
 }

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseForm.tsx

@@ -1,12 +1,11 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { Intent } from '@blueprintjs/core';
 import { defaultTo, sumBy, isEmpty } from 'lodash';
 import { Formik, Form } from 'formik';
 import { useHistory } from 'react-router-dom';
-import { CLASSES } from '@/constants/classes';
+import { css } from '@emotion/css';
 
 import ExpenseFormBody from './ExpenseFormBody';
 import ExpenseFormHeader from './ExpenseFormHeader';
@@ -20,7 +19,8 @@ import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
-import { AppToaster } from '@/components';
+import { AppToaster, Box } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import {
   CreateExpenseFormSchema,
   EditExpenseFormSchema,
@@ -129,29 +129,38 @@ function ExpenseForm({
   };
 
   return (
-    <div
+    <Formik
-      className={classNames(
+      validationSchema={
-        CLASSES.PAGE_FORM,
+        isNewMode ? CreateExpenseFormSchema : EditExpenseFormSchema
-        CLASSES.PAGE_FORM_STRIP_STYLE,
+      }
-        CLASSES.PAGE_FORM_EXPENSE,
+      initialValues={initialValues}
-      )}
+      onSubmit={handleSubmit}
     >
-      <Formik
+      <Form
-        validationSchema={
+        className={css({
-          isNewMode ? CreateExpenseFormSchema : EditExpenseFormSchema
+          overflow: 'hidden',
-        }
+          display: 'flex',
-        initialValues={initialValues}
+          flexDirection: 'column',
-        onSubmit={handleSubmit}
+          flex: 1,
+        })}
       >
-        <Form>
+        <PageForm flex={1}>
-          <ExpenseFormTopBar />
+          <PageForm.Body>
-          <ExpenseFormHeader />
+            <ExpenseFormTopBar />
-          <ExpenseFormBody />
+            <ExpenseFormHeader />
-          <ExpenseFormFooter />
+
-          <ExpenseFloatingFooter />
+            <Box p="18px 32px 0">
-        </Form>
+              <ExpenseFormBody />
-      </Formik>
+            </Box>
-    </div>
+            <ExpenseFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
+            <ExpenseFloatingFooter />
+          </PageForm.Footer>
+        </PageForm>
+      </Form>
+    </Formik>
   );
 }
 

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormBody.tsx

@@ -1,13 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
 import ExpenseFormEntriesField from './ExpenseFormEntriesField';
 
 export default function ExpenseFormBody() {
-  return (
+  return <ExpenseFormEntriesField />;
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-      <ExpenseFormEntriesField />
-    </div>
-  );
 }

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import { x } from '@xstyled/emotion';
-
-import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { ExpenseFormFooterLeft } from './ExpenseFormFooterLeft';
 import { ExpenseFormFooterRight } from './ExpenseFormFooterRight';
@@ -10,7 +8,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
 
 export default function ExpenseFormFooter() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
       <Paper p={'20px'}>
         <Row>
           <Col md={8}>
@@ -23,6 +21,6 @@ export default function ExpenseFormFooter() {
           </Col>
         </Row>
       </Paper>
-    </div>
+    </x.div>
   );
 }

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.tsx

@@ -1,11 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
 import { FormattedMessage as T } from '@/components';
-import { CLASSES } from '@/constants/classes';
 
 import ExpenseFormHeaderFields from './ExpenseFormHeaderFields';
-import { PageFormBigNumber } from '@/components';
+import { PageForm, PageFormBigNumber } from '@/components';
 import { useExpenseTotalFormatted } from './utils';
 
 // Expense form header.
@@ -13,12 +11,12 @@ export default function ExpenseFormHeader() {
   const totalFormatted = useExpenseTotalFormatted();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <PageForm.Header>
       <ExpenseFormHeaderFields />
       <PageFormBigNumber
         label={<T id={'expense_amount'} />}
         amount={totalFormatted}
       />
-    </div>
+    </PageForm.Header>
   );
 }

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx

@@ -3,12 +3,16 @@ import React from 'react';
 import { FormGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
+import { css } from '@emotion/css';
+import classNames from 'classnames';
+import { useTheme } from '@emotion/react';
+
 import {
   CustomersSelect,
   FInputGroup,
+  Stack,
   FormattedMessage as T,
 } from '@/components';
-import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
 import {
   momentFormatter,
@@ -28,14 +32,33 @@ import { ExpensesExchangeRateInputField } from './components';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
 import { SUPPORTED_EXPENSE_PAYMENT_ACCOUNT_TYPES } from './constants';
 
+const getFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Expense form header.
  */
 export default function ExpenseFormHeader() {
   const { currencies, accounts, customers } = useExpenseFormContext();
+  const theme = useTheme();
+  const fieldsClassName = getFieldsStyle(theme);
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={fieldsClassName}>
       <FastField name={'payment_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
@@ -116,7 +139,7 @@ export default function ExpenseFormHeader() {
 
       {/* ----------- Customer ----------- */}
       <ExpenseFormCustomerSelect />
-    </div>
+    </Stack>
   );
 }
 

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormPage.tsx

@@ -1,9 +1,6 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
-
-import '@/style/pages/Expense/PageForm.scss';
-
 import ExpenseForm from './ExpenseForm';
 import { ExpenseFormPageProvider } from './ExpenseFormPageProvider';
 

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormPageProvider.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React, { createContext } from 'react';
+import { css } from '@emotion/css';
 import { DashboardInsider } from '@/components/Dashboard';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
@@ -98,6 +99,10 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
         isProjectsLoading
       }
       name={'expense-form'}
+      className={css`
+        min-height: calc(100vh - var(--top-offset));
+        max-height: calc(100vh - var(--top-offset));
+      `}
     >
       <ExpenseFormPageContext.Provider value={provider} {...props} />
     </DashboardInsider>

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx

@@ -11,6 +11,7 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { Group, FormattedMessage as T } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { useHistory } from 'react-router-dom';
 import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
@@ -76,7 +77,7 @@ export default function BillFloatingActions() {
   };
 
   return (
-    <Group
+    <PageForm.FooterActions
       spacing={10}
       className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
     >
@@ -192,6 +193,6 @@ export default function BillFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </Group>
+    </PageForm.FooterActions>
   );
 }

packages/webapp/src/containers/Purchases/Bills/BillForm/BillForm.tsx

@@ -7,6 +7,7 @@ import { Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { isEmpty } from 'lodash';
 import { CLASSES } from '@/constants/classes';
+import { css } from '@emotion/css';
 
 import { EditBillFormSchema, CreateBillFormSchema } from './BillForm.schema';
 import BillFormHeader from './BillFormHeader';
@@ -15,7 +16,8 @@ import BillFormFooter from './BillFormFooter';
 import BillItemsEntriesEditor from './BillItemsEntriesEditor';
 import BillFormTopBar from './BillFormTopBar';
 
-import { AppToaster } from '@/components';
+import { AppToaster, Box } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { useBillFormContext } from './BillFormProvider';
 import { compose, safeSumBy } from '@/utils';
 import {
@@ -112,30 +114,37 @@ function BillForm({
   };
 
   return (
-    <div
+    <Formik
-      className={classNames(
+      validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
-        CLASSES.PAGE_FORM,
+      initialValues={initialValues}
-        CLASSES.PAGE_FORM_STRIP_STYLE,
+      onSubmit={handleFormSubmit}
-        CLASSES.PAGE_FORM_BILL,
-      )}
     >
-      <Formik
+      <Form
-        validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
+        className={css({
-        initialValues={initialValues}
+          overflow: 'hidden',
-        onSubmit={handleFormSubmit}
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
       >
-        <Form>
+        <PageForm flex={1}>
-          <BillFormTopBar />
+          <PageForm.Body>
-          <BillFormHeader />
+            <BillFormTopBar />
-          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+            <BillFormHeader />
-            <BillFormEntriesActions />
+
-            <BillItemsEntriesEditor />
+            <Box p="18px 32px 0">
-          </div>
+              <BillFormEntriesActions />
-          <BillFormFooter />
+              <BillItemsEntriesEditor />
-          <BillFloatingActions />
+            </Box>
-        </Form>
+            <BillFormFooter />
-      </Formik>
+          </PageForm.Body>
-    </div>
+
+          <PageForm.Footer>
+            <BillFloatingActions />
+          </PageForm.Footer>
+        </PageForm>
+      </Form>
+    </Formik>
   );
 }
 export default compose(withCurrentOrganization())(BillForm);

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx

@@ -1,9 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import { x } from '@xstyled/emotion';
-import styled from 'styled-components';
-
-import { CLASSES } from '@/constants/classes';
 import { Paper, Row, Col } from '@/components';
 import { BillFormFooterLeft } from './BillFormFooterLeft';
 import { BillFormFooterRight } from './BillFormFooterRight';
@@ -12,7 +9,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
 // Bill form floating actions.
 export default function BillFormFooter() {
   return (
-    <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
       <Paper p={'20px'}>
         <Row>
           <Col md={8}>
@@ -25,6 +22,6 @@ export default function BillFormFooter() {
           </Col>
         </Row>
       </Paper>
-    </div>
+    </x.div>
   );
 }

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx

@@ -1,9 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
+import { PageForm, PageFormBigNumber } from '@/components';
-import { CLASSES } from '@/constants/classes';
-import { PageFormBigNumber } from '@/components';
 
 import BillFormHeaderFields from './BillFormHeaderFields';
 import { useBillTotalFormatted } from './utils';
@@ -13,10 +11,10 @@ import { useBillTotalFormatted } from './utils';
  */
 function BillFormHeader() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <PageForm.Header>
       <BillFormHeaderFields />
       <BillFormBigTotal />
-    </div>
+    </PageForm.Header>
   );
 }
 

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx

@@ -5,8 +5,9 @@ import classNames from 'classnames';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
+import { css } from '@emotion/css';
 
-import { FeatureCan, FormattedMessage as T } from '@/components';
+import { FeatureCan, Stack, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import {
   FFormGroup,
@@ -32,6 +33,24 @@ import {
   inputIntent,
 } from '@/utils';
 import { Features } from '@/constants';
+import { useTheme } from '@emotion/react';
+
+const getBillFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
 
 /**
  * Fill form header.
@@ -40,8 +59,11 @@ function BillFormHeader() {
   // Bill form context.
   const { vendors, projects } = useBillFormContext();
 
+  const theme = useTheme();
+  const billFieldsClassName = getBillFieldsStyle(theme);
+
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={billFieldsClassName}>
       {/* ------- Vendor name ------ */}
       <BillFormVendorField />
 
@@ -150,7 +172,7 @@ function BillFormHeader() {
           />
         </FFormGroup>
       </FeatureCan>
-    </div>
+    </Stack>
   );
 }
 

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import {
@@ -13,8 +12,8 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T, Group } from '@/components';
+import { If, Icon, FormattedMessage as T } from '@/components';
-import { CLASSES } from '@/constants/classes';
+import { PageForm } from '@/components/PageForm';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 
 /**
@@ -74,10 +73,7 @@ export default function VendorCreditNoteFloatingActions() {
     resetForm();
   };
   return (
-    <Group
+    <PageForm.FooterActions spacing={10}>
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
       {/* ----------- Save And Open  ----------- */}
       <If condition={!vendorCredit || !vendorCredit?.is_open}>
         <ButtonGroup>
@@ -189,6 +185,6 @@ export default function VendorCreditNoteFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </Group>
+    </PageForm.FooterActions>
   );
 }

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.tsx

@@ -7,6 +7,8 @@ import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { isEmpty } from 'lodash';
 import { CLASSES } from '@/constants/classes';
+import { css } from '@emotion/css';
+import { PageForm } from '@/components/PageForm';
 import {
   CreateCreditNoteFormSchema,
   EditCreditNoteFormSchema,
@@ -21,7 +23,7 @@ import VendorCreditNoteFormTopBar from './VendorCreditNoteFormTopBar';
 
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 
-import { AppToaster } from '@/components';
+import { AppToaster, Box } from '@/components';
 import { compose, safeSumBy, transactionNumber } from '@/utils';
 import {
   defaultVendorsCreditNote,
@@ -139,30 +141,42 @@ function VendorCreditNoteForm({
   };
 
   return (
-    <div
+    <Formik
-      className={classNames(
+      validationSchema={
-        CLASSES.PAGE_FORM,
+        isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
-        CLASSES.PAGE_FORM_STRIP_STYLE,
+      }
-        CLASSES.PAGE_FORM_VENDOR_CREDIT_NOTE,
+      initialValues={initialValues}
-      )}
+      onSubmit={handleFormSubmit}
     >
-      <Formik
+      <Form
-        validationSchema={
+        className={css({
-          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+          overflow: 'hidden',
-        }
+          display: 'flex',
-        initialValues={initialValues}
+          flexDirection: 'column',
-        onSubmit={handleFormSubmit}
+          flex: 1,
+        })}
       >
-        <Form>
+        <PageForm flex={1}>
-          <VendorCreditNoteFormTopBar />
+          <PageForm.Body>
-          <VendorCreditNoteFormHeader />
+            <VendorCreditNoteFormTopBar />
-          <VendorCreditNoteItemsEntriesEditor />
+            <VendorCreditNoteFormHeader />
-          <VendorCreditNoteFormFooter />
+
-          <VendorCreditNoteFloatingActions />
+            <Box p="18px 32px 0">
+              <VendorCreditNoteItemsEntriesEditor />
+            </Box>
+
+            <VendorCreditNoteFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
+            <VendorCreditNoteFloatingActions />
+          </PageForm.Footer>
+
+          {/* ---------- Dialogs ---------- */}
           <VendorCreditNoteFormDialogs />
-        </Form>
+        </PageForm>
-      </Formik>
+      </Form>
-    </div>
+    </Formik>
   );
 }
 

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
+import { x } from '@xstyled/emotion';
 
 import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
@@ -14,7 +15,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
  */
 export default function VendorCreditNoteFormFooter() {
   return (
-    <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
       <Paper p={'20px'}>
         <Row>
           <Col md={8}>
@@ -27,6 +28,6 @@ export default function VendorCreditNoteFormFooter() {
           </Col>
         </Row>
       </Paper>
-    </div>
+    </x.div>
   );
 }

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx

@@ -1,9 +1,8 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
 import VendorCreditNoteFormHeaderFields from './VendorCreditNoteFormHeaderFields';
+import { PageForm } from '@/components/PageForm';
 import { PageFormBigNumber } from '@/components';
 import { useVendorCreditTotalFormatted } from './utils';
 
@@ -14,13 +13,13 @@ function VendorCreditNoteFormHeader() {
   const totalFormatted = useVendorCreditTotalFormatted();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <PageForm.Header>
       <VendorCreditNoteFormHeaderFields />
       <PageFormBigNumber
         label={intl.get('vendor_credits.label.amount_to_credit')}
         amount={totalFormatted}
       />
-    </div>
+    </PageForm.Header>
   );
 }
 

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx

@@ -10,8 +10,10 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
+import { useTheme } from '@emotion/react';
+import { css } from '@emotion/css';
 
+import { CLASSES } from '@/constants/classes';
 import {
   FFormGroup,
   FieldRequiredHint,
@@ -20,6 +22,7 @@ import {
   FormattedMessage as T,
   VendorDrawerLink,
   VendorsSelect,
+  Stack,
 } from '@/components';
 import {
   vendorsFieldShouldUpdate,
@@ -39,6 +42,23 @@ import {
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
+const getFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 500px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Vendor Credit note form header fields.
  */
@@ -51,6 +71,9 @@ function VendorCreditNoteFormHeaderFields({
   vendorcreditNumberPrefix,
   vendorcreditNextNumber,
 }) {
+  const theme = useTheme();
+  const fieldsClassName = getFieldsStyle(theme);
+
   // Handle vendor credit number changing.
   const handleVendorCreditNumberChange = () => {
     openDialog('vendor-credit-form');
@@ -76,7 +99,7 @@ function VendorCreditNoteFormHeaderFields({
   );
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={fieldsClassName}>
       {/* ----------- Vendor name ----------- */}
       <VendorCreditFormVendorSelect />
 
@@ -165,7 +188,7 @@ function VendorCreditNoteFormHeaderFields({
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </Stack>
   );
 }
 

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.tsx

@@ -2,8 +2,6 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-import '@/style/pages/VendorsCreditNote/PageForm.scss';
-
 import VendorCreditNoteForm from './VendorCreditNoteForm';
 import { VendorCreditNoteFormProvider } from './VendorCreditNoteFormProvider';
 

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFloatingActions.tsx

@@ -12,6 +12,7 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { Group, Icon, FormattedMessage as T } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
@@ -58,7 +59,7 @@ export default function PaymentMadeFloatingActions() {
   };
 
   return (
-    <Group
+    <PageForm.FooterActions
       spacing={10}
       className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
     >
@@ -110,6 +111,6 @@ export default function PaymentMadeFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </Group>
+    </PageForm.FooterActions>
   );
 }

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
+import { x } from '@xstyled/emotion';
 
 import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
@@ -14,7 +15,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
  */
 export default function PaymentMadeFooter() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
       <Paper p={'20px'}>
         <Row>
           <Col md={8}>
@@ -27,6 +28,6 @@ export default function PaymentMadeFooter() {
           </Col>
         </Row>
       </Paper>
-    </div>
+    </x.div>
   );
 }

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeForm.tsx

@@ -4,11 +4,12 @@ import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { Formik, Form, FormikHelpers } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { sumBy, defaultTo } from 'lodash';
+import { defaultTo } from 'lodash';
 import { useHistory } from 'react-router-dom';
+import { css } from '@emotion/css';
 
 import { CLASSES } from '@/constants/classes';
-import { AppToaster } from '@/components';
+import { AppToaster, Box } from '@/components';
 import PaymentMadeHeader from './PaymentMadeFormHeader';
 import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
 import PaymentMadeFooter from './PaymentMadeFooter';
@@ -23,6 +24,7 @@ import { compose, orderingLinesIndexes } from '@/utils';
 import withSettings from '@/containers/Settings/withSettings';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { PageForm } from '@/components/PageForm';
 
 import {
   EditPaymentMadeFormSchema,
@@ -144,32 +146,43 @@ function PaymentMadeForm({
   };
 
   return (
-    <div
+    <Formik
-      className={classNames(
+      initialValues={initialValues}
-        CLASSES.PAGE_FORM,
+      validationSchema={
-        CLASSES.PAGE_FORM_STRIP_STYLE,
+        isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
-        CLASSES.PAGE_FORM_PAYMENT_MADE,
+      }
-      )}
+      onSubmit={handleSubmitForm}
     >
-      <Formik
+      <Form
-        initialValues={initialValues}
+        className={css({
-        validationSchema={
+          overflow: 'hidden',
-          isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
+          display: 'flex',
-        }
+          flexDirection: 'column',
-        onSubmit={handleSubmitForm}
+          flex: 1,
+        })}
       >
-        <Form>
+        <PageForm flex={1}>
-          <PaymentMadeInnerProvider>
+          <PageForm.Body>
-            <PaymentMadeFormTopBar />
+            <PaymentMadeInnerProvider>
-            <PaymentMadeHeader />
+              <PaymentMadeFormTopBar />
-            <PaymentMadeFormBody />
+              <PaymentMadeHeader />
-            <PaymentMadeFooter />
+
+              <Box p="18px 32px 0">
+                <PaymentMadeFormBody />
+              </Box>
+              <PaymentMadeFooter />
+            </PaymentMadeInnerProvider>
+          </PageForm.Body>
+
+          <PageForm.Footer>
             <PaymentMadeFloatingActions />
-            <PaymentMadeDialogs />
+          </PageForm.Footer>
-          </PaymentMadeInnerProvider>
+
-        </Form>
+          {/* --------- Dialogs --------- */}
-      </Formik>
+          <PaymentMadeDialogs />
-    </div>
+        </PageForm>
+      </Form>
+    </Formik>
   );
 }
 

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeader.tsx

@@ -1,9 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
+import {
-import { Money, FormattedMessage as T } from '@/components';
+  Money,
+  FormattedMessage as T,
+  PageForm,
+  PageFormBigNumber,
+} from '@/components';
 
 import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields';
 import { usePaymentmadeTotalAmount } from './utils';
@@ -20,23 +23,13 @@ function PaymentMadeFormHeader() {
   const totalAmount = usePaymentmadeTotalAmount();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <PageForm.Header>
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+      <PaymentMadeFormHeaderFields />
-        <PaymentMadeFormHeaderFields />
+      <PageFormBigNumber
-
+        label={<T id={'amount_received'} />}
-        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+        amount={<Money amount={totalAmount} currency={currency_code} />}
-          <div class="big-amount">
+      />
-            <span class="big-amount__label">
+    </PageForm.Header>
-              <T id={'amount_received'} />
-            </span>
-
-            <h1 class="big-amount__number">
-              <Money amount={totalAmount} currency={currency_code} />
-            </h1>
-          </div>
-        </div>
-      </div>
-    </div>
   );
 }
 

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx

@@ -13,9 +13,13 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, useFormikContext, ErrorMessage } from 'formik';
+import { css } from '@emotion/css';
+import { Theme, useTheme } from '@emotion/react';
+
 import {
   FInputGroup,
   FMoneyInputGroup,
+  Stack,
   FormattedMessage as T,
   VendorsSelect,
 } from '@/components';
@@ -47,6 +51,23 @@ import {
 } from '@/utils';
 import { accountsFieldShouldUpdate, vendorsFieldShouldUpdate } from './utils';
 
+const getFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Payment made form header fields.
  */
@@ -57,6 +78,9 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
     setFieldValue,
   } = useFormikContext();
 
+  const theme = useTheme();
+  const fieldsClassName = getFieldsStyle(theme);
+
   // Payment made form context.
   const { accounts } = usePaymentMadeFormContext();
 
@@ -82,7 +106,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={fieldsClassName}>
       {/* ------------ Vendor name ------------ */}
       <PaymentFormVendorSelect />
 
@@ -202,7 +226,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       >
         <FInputGroup name={'reference'} minimal={true} fastField />
       </FFormGroup>
-    </div>
+    </Stack>
   );
 }