wip

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
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
-      {/* ----------- Save And Publish ----------- */}
-      <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}
-          >
+    <PageForm.FooterActions spacing={10} position="apart">
+      <Group spacing={10}>
+        {/* ----------- Save And Publish ----------- */}
+        <If condition={isNewMode}>
+          <ButtonGroup>
             <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>
-        </ButtonGroup>
-        {/* ----------- Save As Draft ----------- */}
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            className={'ml1'}
-            onClick={handleSubmitDraftBtnClick}
-            text={<T id={'save_as_draft'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitDraftAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'save_continue_editing'} />}
-                  onClick={handleSubmitDraftContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
+            <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}
+                intent={Intent.PRIMARY}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+          {/* ----------- Save As Draft ----------- */}
+          <ButtonGroup>
             <Button
               disabled={isSubmitting}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              className={'ml1'}
+              onClick={handleSubmitDraftBtnClick}
+              text={<T id={'save_as_draft'} />}
             />
-          </Popover>
-        </ButtonGroup>
-      </If>
-      {/* ----------- Save and New ----------- */}
-      <If condition={!isNewMode}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            loading={isSubmitting}
-            intent={Intent.PRIMARY}
-            onClick={handleSubmitPublishBtnClick}
-            style={{ minWidth: '85px' }}
-            text={<T id={'save'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={<T id={'save_and_new'} />}
+                    onClick={handleSubmitDraftAndNewBtnClick}
+                  />
+                  <MenuItem
+                    text={<T id={'save_continue_editing'} />}
+                    onClick={handleSubmitDraftContinueEditingBtnClick}
+                  />
+                </Menu>
+              }
+              minimal={true}
+              interactionKind={PopoverInteractionKind.CLICK}
+              position={Position.BOTTOM_LEFT}
+            >
+              <Button
+                disabled={isSubmitting}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+        </If>
+        {/* ----------- Save and New ----------- */}
+        <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>
-        </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>
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={<T id={'save_and_new'} />}
+                    onClick={handleSubmitPublishAndNewBtnClick}
+                  />
+                </Menu>
+              }
+              minimal={true}
+              interactionKind={PopoverInteractionKind.CLICK}
+              position={Position.BOTTOM_LEFT}
+            >
+              <Button
+                disabled={isSubmitting}
+                intent={Intent.PRIMARY}
+                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
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_EXPENSE,
-      )}
+    <Formik
+      validationSchema={
+        isNewMode ? CreateExpenseFormSchema : EditExpenseFormSchema
+      }
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
     >
-      <Formik
-        validationSchema={
-          isNewMode ? CreateExpenseFormSchema : EditExpenseFormSchema
-        }
-        initialValues={initialValues}
-        onSubmit={handleSubmit}
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
       >
-        <Form>
-          <ExpenseFormTopBar />
-          <ExpenseFormHeader />
-          <ExpenseFormBody />
-          <ExpenseFormFooter />
-          <ExpenseFloatingFooter />
-        </Form>
-      </Formik>
-    </div>
+        <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>
   );
 }
 

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 (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-      <ExpenseFormEntriesField />
-    </div>
-  );
+  return <ExpenseFormEntriesField />;
 }

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

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
-
-import { CLASSES } from '@/constants/classes';
+import { x } from '@xstyled/emotion';
 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>