wip

2026-02-17 05:10:31 +00:00 · 2025-09-07 23:47:07 +02:00
parent 3537de765d
commit dd941f1f45
30 changed files with 539 additions and 380 deletions
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx
+++ b/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>
  );
 }
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillForm.tsx
+++ b/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
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_BILL,
-      )}
+    <Formik
+      validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
    >
-      <Formik
-        validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
      >
-        <Form>
-          <BillFormTopBar />
-          <BillFormHeader />
-          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-            <BillFormEntriesActions />
-            <BillItemsEntriesEditor />
-          </div>
-          <BillFormFooter />
-          <BillFloatingActions />
-        </Form>
-      </Formik>
-    </div>
+        <PageForm flex={1}>
+          <PageForm.Body>
+            <BillFormTopBar />
+            <BillFormHeader />
+
+            <Box p="18px 32px 0">
+              <BillFormEntriesActions />
+              <BillItemsEntriesEditor />
+            </Box>
+            <BillFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
+            <BillFloatingActions />
+          </PageForm.Footer>
+        </PageForm>
+      </Form>
+    </Formik>
  );
 }
 export default compose(withCurrentOrganization())(BillForm);
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx
@@ -1,9 +1,6 @@
 // @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 { 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>
  );
 }
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx
+++ b/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 { CLASSES } from '@/constants/classes';
-import { PageFormBigNumber } from '@/components';
+import { PageForm, 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>
  );
 }

--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
+++ b/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>
  );
 }

--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx
+++ b/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 { CLASSES } from '@/constants/classes';
+import { If, Icon, FormattedMessage as T } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';

 /**
@@ -74,10 +73,7 @@ export default function VendorCreditNoteFloatingActions() {
    resetForm();
  };
  return (
-    <Group
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
+    <PageForm.FooterActions spacing={10}>
      {/* ----------- 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>
  );
 }
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.tsx
+++ b/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
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_VENDOR_CREDIT_NOTE,
-      )}
+    <Formik
+      validationSchema={
+        isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+      }
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
    >
-      <Formik
-        validationSchema={
-          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
-        }
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
      >
-        <Form>
-          <VendorCreditNoteFormTopBar />
-          <VendorCreditNoteFormHeader />
-          <VendorCreditNoteItemsEntriesEditor />
-          <VendorCreditNoteFormFooter />
-          <VendorCreditNoteFloatingActions />
+        <PageForm flex={1}>
+          <PageForm.Body>
+            <VendorCreditNoteFormTopBar />
+            <VendorCreditNoteFormHeader />
+
+            <Box p="18px 32px 0">
+              <VendorCreditNoteItemsEntriesEditor />
+            </Box>
+
+            <VendorCreditNoteFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
+            <VendorCreditNoteFloatingActions />
+          </PageForm.Footer>
+
+          {/* ---------- Dialogs ---------- */}
          <VendorCreditNoteFormDialogs />
-        </Form>
-      </Formik>
-    </div>
+        </PageForm>
+      </Form>
+    </Formik>
  );
 }

--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx
+++ b/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>
  );
 }
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx
+++ b/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>
  );
 }

--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
+++ b/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>
  );
 }

--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.tsx
+++ b/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';

--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFloatingActions.tsx
+++ b/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>
  );
 }
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx
+++ b/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>
  );
 }
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeForm.tsx
+++ b/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
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_PAYMENT_MADE,
-      )}
+    <Formik
+      initialValues={initialValues}
+      validationSchema={
+        isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
+      }
+      onSubmit={handleSubmitForm}
    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={
-          isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
-        }
-        onSubmit={handleSubmitForm}
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
      >
-        <Form>
-          <PaymentMadeInnerProvider>
-            <PaymentMadeFormTopBar />
-            <PaymentMadeHeader />
-            <PaymentMadeFormBody />
-            <PaymentMadeFooter />
+        <PageForm flex={1}>
+          <PageForm.Body>
+            <PaymentMadeInnerProvider>
+              <PaymentMadeFormTopBar />
+              <PaymentMadeHeader />
+
+              <Box p="18px 32px 0">
+                <PaymentMadeFormBody />
+              </Box>
+              <PaymentMadeFooter />
+            </PaymentMadeInnerProvider>
+          </PageForm.Body>
+
+          <PageForm.Footer>
            <PaymentMadeFloatingActions />
-            <PaymentMadeDialogs />
-          </PaymentMadeInnerProvider>
-        </Form>
-      </Formik>
-    </div>
+          </PageForm.Footer>
+
+          {/* --------- Dialogs --------- */}
+          <PaymentMadeDialogs />
+        </PageForm>
+      </Form>
+    </Formik>
  );
 }

--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeader.tsx
+++ b/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 { Money, FormattedMessage as T } from '@/components';
+import {
+  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)}>
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        <PaymentMadeFormHeaderFields />
-
-        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
-          <div class="big-amount">
-            <span class="big-amount__label">
-              <T id={'amount_received'} />
-            </span>
-
-            <h1 class="big-amount__number">
-              <Money amount={totalAmount} currency={currency_code} />
-            </h1>
-          </div>
-        </div>
-      </div>
-    </div>
+    <PageForm.Header>
+      <PaymentMadeFormHeaderFields />
+      <PageFormBigNumber
+        label={<T id={'amount_received'} />}
+        amount={<Money amount={totalAmount} currency={currency_code} />}
+      />
+    </PageForm.Header>
  );
 }

--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx
+++ b/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>
  );
 }