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
+          className={css({
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+          })}
+        >
+          <PageForm flex={1}>
+            <PageForm.Body>
               <MakeJournalFormTopBar />
               <MakeJournalEntriesHeader />
               <MakeJournalEntriesField />
               <MakeJournalFormFooter />
+            </PageForm.Body>
+
+            <PageForm.Footer>
               <MakeJournalFormFloatingActions />
+            </PageForm.Footer>
 
             {/* --------- Dialogs --------- */}
             <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,57 +15,73 @@ 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'} />}
         labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
+        inline
-            helperText={<ErrorMessage name="date" />}
+        fastField
-            minimal={true}
-            inline={true}
-            className={classNames(CLASSES.FILL)}
       >
-            <DateInput
+        <FDateInput
-              {...momentFormatter('YYYY/MM/DD')}
+          name={'date'}
-              onChange={handleDateChange((formattedDate) => {
+          formatDate={(date) => date.toLocaleDateString()}
-                form.setFieldValue('date', formattedDate);
+          parseDate={(str) => new Date(str)}
-              })}
-              value={tansformDateValue(value)}
           popoverProps={{
-                position: Position.BOTTOM,
+            position: Position.BOTTOM_LEFT,
             minimal: true,
+            fill: true,
           }}
           inputProps={{
             leftIcon: <Icon icon={'date-range'} />,
           }}
+          fill
+          fastField
         />
-          </FormGroup>
+      </FFormGroup>
-        )}
-      </FastField>
 
       {/*------------ Journal number -----------*/}
       <MakeJournalTransactionNoField />
 
       {/*------------ Reference -----------*/}
-      <FastField name={'reference'}>
+      <FFormGroup
-        {({ form, field, meta: { error, touched } }) => (
+        name={'reference'}
-          <FormGroup
         label={<T id={'reference'} />}
         labelInfo={
           <Hint
@@ -77,33 +89,21 @@ export default function MakeJournalEntriesHeader({}) {
             position={Position.RIGHT}
           />
         }
-            className={'form-group--reference'}
+        inline
-            intent={inputIntent({ error, touched })}
+        fastField
-            helperText={<ErrorMessage name="reference" />}
-            fill={true}
-            inline={true}
       >
-            <InputGroup fill={true} {...field} />
+        <FInputGroup name={'reference'} minimal fill />
-          </FormGroup>
+      </FFormGroup>
-        )}
-      </FastField>
 
       {/*------------ Journal type  -----------*/}
-      <FastField name={'journal_type'}>
+      <FFormGroup
-        {({ form, field, meta: { error, touched } }) => (
+        name={'journal_type'}
-          <FormGroup
         label={<T id={'journal_type'} />}
-            className={classNames('form-group--account-type', CLASSES.FILL)}
+        inline
-            inline={true}
+        fastField
       >
-            <InputGroup
+        <FInputGroup name={'journal_type'} minimal fill />
-              intent={inputIntent({ error, touched })}
+      </FFormGroup>
-              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,10 +76,8 @@ 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}>
           <ButtonGroup>
@@ -194,5 +190,6 @@ export default function ExpenseFloatingFooter() {
           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,13 +129,6 @@ function ExpenseForm({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_EXPENSE,
-      )}
-    >
     <Formik
       validationSchema={
         isNewMode ? CreateExpenseFormSchema : EditExpenseFormSchema
@@ -143,15 +136,31 @@ function ExpenseForm({
       initialValues={initialValues}
       onSubmit={handleSubmit}
     >
-        <Form>
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
+      >
+        <PageForm flex={1}>
+          <PageForm.Body>
             <ExpenseFormTopBar />
             <ExpenseFormHeader />
+
+            <Box p="18px 32px 0">
               <ExpenseFormBody />
+            </Box>
             <ExpenseFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
             <ExpenseFloatingFooter />
+          </PageForm.Footer>
+        </PageForm>
       </Form>
     </Formik>
-    </div>
   );
 }
 

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
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_BILL,
-      )}
-    >
     <Formik
       validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
       initialValues={initialValues}
       onSubmit={handleFormSubmit}
     >
-        <Form>
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
+      >
+        <PageForm flex={1}>
+          <PageForm.Body>
             <BillFormTopBar />
             <BillFormHeader />
-          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+
+            <Box p="18px 32px 0">
               <BillFormEntriesActions />
               <BillItemsEntriesEditor />
-          </div>
+            </Box>
             <BillFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
             <BillFloatingActions />
+          </PageForm.Footer>
+        </PageForm>
       </Form>
     </Formik>
-    </div>
   );
 }
 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,13 +141,6 @@ 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
@@ -153,16 +148,35 @@ function VendorCreditNoteForm({
       initialValues={initialValues}
       onSubmit={handleFormSubmit}
     >
-        <Form>
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
+      >
+        <PageForm flex={1}>
+          <PageForm.Body>
             <VendorCreditNoteFormTopBar />
             <VendorCreditNoteFormHeader />
+
+            <Box p="18px 32px 0">
               <VendorCreditNoteItemsEntriesEditor />
+            </Box>
+
             <VendorCreditNoteFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
             <VendorCreditNoteFloatingActions />
+          </PageForm.Footer>
+
+          {/* ---------- Dialogs ---------- */}
           <VendorCreditNoteFormDialogs />
+        </PageForm>
       </Form>
     </Formik>
-    </div>
   );
 }
 

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,13 +146,6 @@ function PaymentMadeForm({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_PAYMENT_MADE,
-      )}
-    >
     <Formik
       initialValues={initialValues}
       validationSchema={
@@ -158,18 +153,36 @@ function PaymentMadeForm({
       }
       onSubmit={handleSubmitForm}
     >
-        <Form>
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
+      >
+        <PageForm flex={1}>
+          <PageForm.Body>
             <PaymentMadeInnerProvider>
               <PaymentMadeFormTopBar />
               <PaymentMadeHeader />
+
+              <Box p="18px 32px 0">
                 <PaymentMadeFormBody />
+              </Box>
               <PaymentMadeFooter />
-            <PaymentMadeFloatingActions />
-            <PaymentMadeDialogs />
             </PaymentMadeInnerProvider>
+          </PageForm.Body>
+
+          <PageForm.Footer>
+            <PaymentMadeFloatingActions />
+          </PageForm.Footer>
+
+          {/* --------- Dialogs --------- */}
+          <PaymentMadeDialogs />
+        </PageForm>
       </Form>
     </Formik>
-    </div>
   );
 }
 

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 />
-
+      <PageFormBigNumber
-        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+        label={<T id={'amount_received'} />}
-          <div class="big-amount">
+        amount={<Money amount={totalAmount} currency={currency_code} />}
-            <span class="big-amount__label">
+      />
-              <T id={'amount_received'} />
+    </PageForm.Header>
-            </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>
   );
 }