From b7b86bb0c52d02220274dfb998b4377dcc0293f9 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 12 Oct 2024 20:49:56 +0200 Subject: [PATCH 1/5] fix: Invoice form layout --- packages/webapp/package.json | 4 + packages/webapp/src/components/App.tsx | 60 ++- .../components/Dashboard/DashboardInsider.tsx | 4 + .../src/components/PageForm/PageForm.tsx | 90 +++++ .../webapp/src/components/PageForm/index.ts | 1 + .../webapp/src/components/Paper/Paper.tsx | 25 +- .../CreditNoteFloatingActions.tsx | 258 ++++++------ .../CreditNoteForm/CreditNoteForm.tsx | 67 +-- .../CreditNoteForm/CreditNoteFormPage.tsx | 28 +- .../CreditNoteForm/CreditNoteFormProvider.tsx | 22 +- .../EstimateForm/EstimateFloatingActions.tsx | 258 ++++++------ .../Estimates/EstimateForm/EstimateForm.tsx | 68 ++-- .../EstimateForm/EstimateFormFooter.tsx | 16 +- .../EstimateForm/EstimateFormHeader.tsx | 13 +- .../EstimateForm/EstimateFormPage.tsx | 27 +- .../EstimateForm/EstimateFormProvider.tsx | 22 +- .../InvoiceForm/InvoiceFloatingActions.tsx | 257 ++++++------ .../Invoices/InvoiceForm/InvoiceForm.tsx | 66 +-- .../InvoiceForm/InvoiceFormFooter.tsx | 18 +- .../InvoiceForm/InvoiceFormHeader.tsx | 13 +- .../InvoiceForm/InvoiceFormHeaderFields.tsx | 5 +- .../Invoices/InvoiceForm/InvoiceFormPage.tsx | 34 +- .../InvoiceForm/InvoiceFormProvider.tsx | 24 +- .../InvoiceItemsEntriesEditorField.tsx | 57 +-- .../Sales/Invoices/InvoiceForm/test.css | 25 ++ .../PaymentReceiveFloatingActions.tsx | 139 ++++--- .../PaymentReceiveForm/PaymentReceiveForm.tsx | 67 +-- .../PaymentReceiveFormFooter.tsx | 18 +- .../PaymentReceiveFormPage.tsx | 36 +- .../PaymentReceiveFormProvider.tsx | 22 +- .../Receipts/ReceiptForm/ReceiptForm.tsx | 72 ++-- .../ReceiptFormFloatingActions.tsx | 250 ++++++------ .../Receipts/ReceiptForm/ReceiptFormPage.tsx | 26 +- .../ReceiptForm/ReceiptFormProvider.tsx | 26 +- packages/webapp/src/style/App.scss | 4 + .../webapp/src/style/components/PageForm.scss | 7 +- .../src/style/pages/SaleInvoice/PageForm.scss | 2 +- pnpm-lock.yaml | 381 ++++++++++++++++++ 38 files changed, 1577 insertions(+), 935 deletions(-) create mode 100644 packages/webapp/src/components/PageForm/PageForm.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css diff --git a/packages/webapp/package.json b/packages/webapp/package.json index d7bd5702ec..effb13ba11 100644 --- a/packages/webapp/package.json +++ b/packages/webapp/package.json @@ -17,6 +17,8 @@ "@casl/ability": "^5.4.3", "@casl/react": "^2.3.0", "@craco/craco": "^5.9.0", + "@emotion/css": "^11.13.4", + "@emotion/react": "^11.13.3", "@reduxjs/toolkit": "^1.2.5", "@stripe/connect-js": "^3.3.12", "@stripe/react-connect-js": "^3.3.13", @@ -48,6 +50,7 @@ "@typescript-eslint/eslint-plugin": "^2.10.0", "@typescript-eslint/parser": "^2.10.0", "@welldone-software/why-did-you-render": "^6.0.0-rc.1", + "@xstyled/emotion": "^3.8.1", "accounting": "^0.4.1", "axios": "^1.6.0", "basscss": "^8.0.2", @@ -124,6 +127,7 @@ "style-loader": "0.23.1", "styled-components": "^5.3.1", "stylis-rtlcss": "^2.1.1", + "theme-ui": "^0.16.2", "typescript": "^4.8.3", "yup": "^0.28.1" }, diff --git a/packages/webapp/src/components/App.tsx b/packages/webapp/src/components/App.tsx index 5c62605f9a..a962d88f7b 100644 --- a/packages/webapp/src/components/App.tsx +++ b/packages/webapp/src/components/App.tsx @@ -1,4 +1,5 @@ // @ts-nocheck +import { defaultTheme, ThemeProvider } from '@xstyled/emotion'; import { lazy, Suspense } from 'react'; import { Router, Switch, Route } from 'react-router'; import { createBrowserHistory } from 'history'; @@ -35,6 +36,13 @@ const OneClickDemoPage = lazy( const PaymentPortalPage = lazy( () => import('@/containers/PaymentPortal/PaymentPortalPage'), ); + + +const theme = { + ...defaultTheme, + // Customize your theme here +} + /** * App inner. */ @@ -42,30 +50,38 @@ function AppInsider({ history }) { return (
- - - - } /> - - - - - - - + + + + + } + /> + + + + + + + - } - /> - } /> - } /> - } /> - - - + } + /> + } /> + } + /> + } /> + + + - + +
); diff --git a/packages/webapp/src/components/Dashboard/DashboardInsider.tsx b/packages/webapp/src/components/Dashboard/DashboardInsider.tsx index f46dae7bb5..3b12178169 100644 --- a/packages/webapp/src/components/Dashboard/DashboardInsider.tsx +++ b/packages/webapp/src/components/Dashboard/DashboardInsider.tsx @@ -2,6 +2,7 @@ import React from 'react'; import classnames from 'classnames'; import { LoadingIndicator } from '../Indicator'; +import { css } from '@emotion/css'; export function DashboardInsider({ loading, @@ -9,6 +10,7 @@ export function DashboardInsider({ name, mount = false, className, + style }) { return (
{children} diff --git a/packages/webapp/src/components/PageForm/PageForm.tsx b/packages/webapp/src/components/PageForm/PageForm.tsx new file mode 100644 index 0000000000..2a37e83764 --- /dev/null +++ b/packages/webapp/src/components/PageForm/PageForm.tsx @@ -0,0 +1,90 @@ +import React, { FC } from 'react'; +import clsx from 'classnames'; +import { x, SystemProps } from '@xstyled/emotion'; +import { css } from '@emotion/css'; +import { Group, GroupProps } from '@/components'; + +interface PageFormProps extends SystemProps { + children: React.ReactNode; +} + +/** + * + * @returns {React.ReactNode} + */ +export const PageForm = ({ children, ...props }: PageFormProps) => { + return ( + + {children} + + ); +}; +PageForm.displayName = 'PageFormBody'; + +/** + * + * @returns {React.ReactNode} + */ +const PageFormBody: FC<{ children: React.ReactNode } & SystemProps> = ({ + children, +}) => { + return ( + + {children}{' '} + + ); +}; +PageFormBody.displayName = 'PageFormBody'; + +/** + * + * @returns {React.ReactNode} + */ +const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ children }) => { + return {children} ; +}; + +PageFormFooter.displayName = 'PageFormFooter'; + +const footerActionsStyle = ` + width: 100%; + background: #fff; + padding: 14px 18px; + border-top: 1px solid rgb(210, 221, 226); + box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05); + + .bp4-button-group{ + .bp4-button{ + &:not(:last-child), + &.bp4-popover-wrapper:not(:last-child) { + border-right: 1px solid rgba(92, 112, 127, 0.3); + margin-right: 0; + + &.bp4-intent-primary{ + border-right: 1px solid rgba(255, 255, 255, 0.3); + } + } + } + } +`; + +const PageFormFooterActions: FC = ({ + children, + className, + ...restProps +}) => { + return ( + + {children} + + ); +}; +PageFormFooterActions.displayName = 'PageFormFooterActions'; + +PageForm.Body = PageFormBody; +PageForm.Footer = PageFormFooter; +PageForm.FooterActions = PageFormFooterActions; diff --git a/packages/webapp/src/components/PageForm/index.ts b/packages/webapp/src/components/PageForm/index.ts index 56a507b600..90dc6f8e71 100644 --- a/packages/webapp/src/components/PageForm/index.ts +++ b/packages/webapp/src/components/PageForm/index.ts @@ -2,3 +2,4 @@ export * from './FormTopbar'; export * from './FormTopbarSelectInputs'; export * from './PageFormBigNumber'; +export * from './PageForm'; \ No newline at end of file diff --git a/packages/webapp/src/components/Paper/Paper.tsx b/packages/webapp/src/components/Paper/Paper.tsx index e8fe82bc5f..91c9c7d2da 100644 --- a/packages/webapp/src/components/Paper/Paper.tsx +++ b/packages/webapp/src/components/Paper/Paper.tsx @@ -1,13 +1,20 @@ -// @ts-nocheck import React from 'react'; -import styled from 'styled-components'; +import { x, SystemProps } from '@xstyled/emotion'; -export function Paper({ children, className }) { - return {children}; +interface PaperProps extends SystemProps { + children: React.ReactNode; } -const PaperRoot = styled.div` - border: 1px solid #d2dce2; - background: #fff; - padding: 10px; -`; +export const Paper = ({ children, ...props }: PaperProps) => { + return ( + + {children} + + ); +}; +Paper.displayName = 'Paper'; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx index 85bd40d93b..9fa8baec9e 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx @@ -12,9 +12,14 @@ import { Menu, MenuItem, } from '@blueprintjs/core'; -import { If, Icon, FormattedMessage as T, Group, FSelect } from '@/components'; -import { CLASSES } from '@/constants/classes'; -import classNames from 'classnames'; +import { + If, + Icon, + FormattedMessage as T, + Group, + FSelect, + PageForm, +} from '@/components'; import { useCreditNoteFormContext } from './CreditNoteFormProvider'; import { BrandingThemeFormGroup, @@ -82,140 +87,141 @@ export default function CreditNoteFloatingActions() { const brandingTemplatesOptions = useCreditNoteFormBrandingTemplatesOptions(); return ( - - {/* ----------- Save And Open ----------- */} - - -
+ ); } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx index fd2f8e6783..9c6d8ac2e3 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx @@ -20,6 +20,7 @@ function ReceiptFormHeader({ display="flex" bg="white" p="25px 32px" + borderBottom="1px solid #d2dce2" > 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%; + } + } +`; + /** * Receipt form header fields. */ export default function ReceiptFormHeader() { + const theme = useTheme(); + const receiptFieldsClassName = getEstimateFieldsStyle(theme); const { accounts, projects } = useReceiptFormContext(); return ( -
+ {/* ----------- Customer name ----------- */} @@ -104,19 +127,13 @@ export default function ReceiptFormHeader() { {/* ----------- Reference ----------- */} - - {({ field, meta: { error, touched } }) => ( - } - inline={true} - className={classNames('form-group--reference', CLASSES.FILL)} - intent={inputIntent({ error, touched })} - helperText={} - > - - - )} - + } + inline={true} + name={'reference_no'} + > + + {/*------------ Project name -----------*/} @@ -134,7 +151,7 @@ export default function ReceiptFormHeader() { /> -
+ ); } From e873198238ec43a93e1a21cde55de2d053e0cd58 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sun, 13 Oct 2024 16:51:04 +0200 Subject: [PATCH 4/5] feat: typeing AppIntlProvider --- packages/webapp/src/components/App.tsx | 62 ++++++++----------- .../webapp/src/components/AppIntlProvider.tsx | 26 +++++++- .../Dashboard/DashboardThemeProvider.tsx | 21 ++++++- 3 files changed, 66 insertions(+), 43 deletions(-) diff --git a/packages/webapp/src/components/App.tsx b/packages/webapp/src/components/App.tsx index 8e3ace04fe..d54dcf9058 100644 --- a/packages/webapp/src/components/App.tsx +++ b/packages/webapp/src/components/App.tsx @@ -1,5 +1,4 @@ // @ts-nocheck -import { defaultTheme, ThemeProvider } from '@xstyled/emotion'; import { lazy, Suspense } from 'react'; import { Router, Switch, Route } from 'react-router'; import { createBrowserHistory } from 'history'; @@ -37,12 +36,6 @@ const PaymentPortalPage = lazy( () => import('@/containers/PaymentPortal/PaymentPortalPage'), ); - -const theme = { - ...defaultTheme, - bpPrefix: 'bp4', -} - /** * App inner. */ @@ -50,38 +43,33 @@ function AppInsider({ history }) { return (
- - - - - } - /> - - - - - - - + + + + } /> + + + + + + + - } - /> - } /> - } - /> - } /> - - - + } + /> + } /> + } + /> + } /> + + + - - +
); diff --git a/packages/webapp/src/components/AppIntlProvider.tsx b/packages/webapp/src/components/AppIntlProvider.tsx index 24dd05be0b..595a4a8394 100644 --- a/packages/webapp/src/components/AppIntlProvider.tsx +++ b/packages/webapp/src/components/AppIntlProvider.tsx @@ -1,12 +1,31 @@ // @ts-nocheck import React, { createContext } from 'react'; -const AppIntlContext = createContext(); +interface AppIntlContextValue { + currentLocale: string; + direction: 'rtl' | 'ltr'; + isRTL: boolean; + isLTR: boolean; +} + +const AppIntlContext = createContext( + {} as AppIntlContextValue, +); + +interface AppIntlProviderProps { + currentLocale: string; + isRTL: boolean; + children: React.ReactNode; +} /** * Application intl provider. */ -function AppIntlProvider({ currentLocale, isRTL, children }) { +function AppIntlProvider({ + currentLocale, + isRTL, + children, +}: AppIntlProviderProps) { const provider = { currentLocale, isRTL, @@ -21,6 +40,7 @@ function AppIntlProvider({ currentLocale, isRTL, children }) { ); } -const useAppIntlContext = () => React.useContext(AppIntlContext); +const useAppIntlContext = () => + React.useContext(AppIntlContext); export { AppIntlProvider, useAppIntlContext }; diff --git a/packages/webapp/src/components/Dashboard/DashboardThemeProvider.tsx b/packages/webapp/src/components/Dashboard/DashboardThemeProvider.tsx index 763e5e7730..fc7f657a9b 100644 --- a/packages/webapp/src/components/Dashboard/DashboardThemeProvider.tsx +++ b/packages/webapp/src/components/Dashboard/DashboardThemeProvider.tsx @@ -1,9 +1,20 @@ -// @ts-nocheck import React from 'react'; -import { ThemeProvider, StyleSheetManager } from 'styled-components'; +import { + ThemeProvider as StyleComponentsThemeProvider, + StyleSheetManager, +} from 'styled-components'; import rtlcss from 'stylis-rtlcss'; +import { + defaultTheme, + ThemeProvider as XStyledEmotionThemeProvider, +} from '@xstyled/emotion'; import { useAppIntlContext } from '../AppIntlProvider'; +const theme = { + ...defaultTheme, + bpPrefix: 'bp4', +}; + interface DashboardThemeProviderProps { children: React.ReactNode; } @@ -17,7 +28,11 @@ export function DashboardThemeProvider({ - {children} + + + {children} + + ); } From 152a22baa020944558175d2e1c1c8aaae9de4301 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sun, 13 Oct 2024 17:22:14 +0200 Subject: [PATCH 5/5] fix: Remove unused scss files --- .../src/components/PageForm/PageForm.tsx | 11 +- .../MakeJournal/MakeJournalFormFooter.tsx | 8 +- .../ExpenseForm/ExpenseFormFooter.tsx | 9 +- .../Bills/BillForm/BillFormFooter.tsx | 8 +- .../VendorCreditNoteFormFooter.tsx | 8 +- .../PaymentForm/PaymentMadeFooter.tsx | 8 +- .../Sales/Invoices/InvoiceForm/test.css | 25 ----- .../WarehouseTransferFormFooter.tsx | 8 +- .../webapp/src/style/components/PageForm.scss | 6 +- .../src/style/pages/CreditNote/PageForm.scss | 50 --------- .../style/pages/SaleEstimate/PageForm.scss | 55 --------- .../src/style/pages/SaleInvoice/PageForm.scss | 106 ------------------ .../src/style/pages/SaleReceipt/PageForm.scss | 51 --------- 13 files changed, 21 insertions(+), 332 deletions(-) delete mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css delete mode 100644 packages/webapp/src/style/pages/CreditNote/PageForm.scss delete mode 100644 packages/webapp/src/style/pages/SaleEstimate/PageForm.scss delete mode 100644 packages/webapp/src/style/pages/SaleInvoice/PageForm.scss delete mode 100644 packages/webapp/src/style/pages/SaleReceipt/PageForm.scss diff --git a/packages/webapp/src/components/PageForm/PageForm.tsx b/packages/webapp/src/components/PageForm/PageForm.tsx index 2a37e83764..7d173359db 100644 --- a/packages/webapp/src/components/PageForm/PageForm.tsx +++ b/packages/webapp/src/components/PageForm/PageForm.tsx @@ -9,7 +9,7 @@ interface PageFormProps extends SystemProps { } /** - * + * Page form layout. * @returns {React.ReactNode} */ export const PageForm = ({ children, ...props }: PageFormProps) => { @@ -22,22 +22,23 @@ export const PageForm = ({ children, ...props }: PageFormProps) => { PageForm.displayName = 'PageFormBody'; /** - * + * Page form body layout, by default the content body is scrollable. * @returns {React.ReactNode} */ const PageFormBody: FC<{ children: React.ReactNode } & SystemProps> = ({ children, + ...props }) => { return ( - - {children}{' '} + + {children} ); }; PageFormBody.displayName = 'PageFormBody'; /** - * + * Page form footer. * @returns {React.ReactNode} */ const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ children }) => { diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx index 1266dee98e..fafaad27f5 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx @@ -1,7 +1,6 @@ // @ts-nocheck import React from 'react'; import classNames from 'classnames'; -import styled from 'styled-components'; import { CLASSES } from '@/constants/classes'; import { Row, Col, Paper } from '@/components'; @@ -12,7 +11,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen export default function MakeJournalFormFooter() { return (
- + @@ -23,10 +22,7 @@ export default function MakeJournalFormFooter() { - +
); } -const MakeJournalFooterPaper = styled(Paper)` - padding: 20px; -`; diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx index 4178c27ca7..8c1c093ce4 100644 --- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx +++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx @@ -1,7 +1,6 @@ // @ts-nocheck import React from 'react'; import classNames from 'classnames'; -import styled from 'styled-components'; import { CLASSES } from '@/constants/classes'; import { Row, Col, Paper } from '@/components'; @@ -12,7 +11,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen export default function ExpenseFormFooter() { return (
- + @@ -23,11 +22,7 @@ export default function ExpenseFormFooter() { - +
); } - -const ExpensesFooterPaper = styled(Paper)` - padding: 20px; -`; diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx index da530548b8..b89c5b7d36 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx +++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx @@ -13,7 +13,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen export default function BillFormFooter() { return (
- + @@ -24,11 +24,7 @@ export default function BillFormFooter() { - +
); } - -const BillFooterPaper = styled(Paper)` - padding: 20px; -`; diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx index 7f91451f18..510d6f5564 100644 --- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx +++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx @@ -15,7 +15,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen export default function VendorCreditNoteFormFooter() { return (
- + @@ -26,11 +26,7 @@ export default function VendorCreditNoteFormFooter() { - +
); } - -const VendorCreditNoteFooterPaper = styled(Paper)` - padding: 20px; -`; diff --git a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx index 8db56462e8..9db847bf9b 100644 --- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx @@ -15,7 +15,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen export default function PaymentMadeFooter() { return (
- + @@ -26,11 +26,7 @@ export default function PaymentMadeFooter() { - +
); } - -const PaymentReceiveFooterPaper = styled(Paper)` - padding: 20px; -`; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css deleted file mode 100644 index e7a746fd10..0000000000 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css +++ /dev/null @@ -1,25 +0,0 @@ -.dashboard__page{ - overflow: hidden; - flex: 1; -} - -dashboard__insider dashboard__insider--invoice-form{ - overflow: hidden; - padding: 0; -} - -page-form page-form--strip page-form--invoice{ - overflow: hidden; - display: flex; - flex-direction: column; - padding: 0; -} - -page-form form { - overflow: auto; - flex: 1; -} - -page-form__footer { - padding-bottom: 20px; -} \ No newline at end of file diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooter.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooter.tsx index 8f67630f1a..bc5847516a 100644 --- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooter.tsx +++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooter.tsx @@ -10,17 +10,13 @@ import { WarehouseTransferFormFooterLeft } from './WarehouseTransferFormFooterLe export default function WarehouseTransferFormFooter() { return (
- + - +
); } - -const WarehousesTransferFooterPaper = styled(Paper)` - padding: 20px; -`; diff --git a/packages/webapp/src/style/components/PageForm.scss b/packages/webapp/src/style/components/PageForm.scss index 3752cf0419..f029f56541 100644 --- a/packages/webapp/src/style/components/PageForm.scss +++ b/packages/webapp/src/style/components/PageForm.scss @@ -4,11 +4,11 @@ // > .page-form__floating-actions .page-form { $self: '.page-form'; - // padding-bottom: 20px; + padding-bottom: 20px; &__floating-actions { - // position: fixed; - // bottom: 0; + position: fixed; + bottom: 0; width: 100%; background: #fff; padding: 14px 18px; diff --git a/packages/webapp/src/style/pages/CreditNote/PageForm.scss b/packages/webapp/src/style/pages/CreditNote/PageForm.scss deleted file mode 100644 index dbc9ce7283..0000000000 --- a/packages/webapp/src/style/pages/CreditNote/PageForm.scss +++ /dev/null @@ -1,50 +0,0 @@ -body.page-credit-note-new, -body.page-credit-note-edit { - .dashboard__footer { - display: none; - } -} - -.dashboard__insider--credit-note-form { - padding-bottom: 64px; -} - -.page-form--credit-note { - $self: '.page-form'; - - #{$self}__header { - display: flex; - - &-fields { - flex: 1 0 0; - } - - .bp4-label { - min-width: 150px; - } - .bp4-form-content { - width: 100%; - } - - .bp4-form-group { - &.bp4-inline { - max-width: 450px; - } - } - .col--credit-note-date { - max-width: 435px; - } - } - #{$self}__footer { - .form-group--note, - .form-group--terms_conditions { - max-width: 450px; - width: 100%; - - textarea { - width: 100%; - min-height: 60px; - } - } - } -} diff --git a/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss b/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss deleted file mode 100644 index f9d50a7455..0000000000 --- a/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss +++ /dev/null @@ -1,55 +0,0 @@ - -body.page-estimate-new, -body.page-estimate-edit{ - - .dashboard__footer{ - display: none; - } -} - -.dashboard__insider--estimate-form{ - padding-bottom: 64px; -} - -.page-form--estimate { - $self: '.page-form'; - - #{$self}__header { - display: flex; - - &-fields { - flex: 1 0 0; - } - - .bp4-label { - min-width: 140px; - } - .bp4-form-content { - width: 100%; - } - - .bp4-form-group { - margin-bottom: 18px; - - &.bp4-inline { - max-width: 440px; - } - } - .col--invoice-date { - max-width: 435px; - } - } - - #{$self}__footer { - .form-group--customer_note, - .form-group--terms_conditions { - max-width: 450px; - width: 100%; - - textarea { - width: 100%; - min-height: 60px; - } - } - } -} \ No newline at end of file diff --git a/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss b/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss deleted file mode 100644 index aa1ed8bb35..0000000000 --- a/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss +++ /dev/null @@ -1,106 +0,0 @@ -body.page-invoice-new, -body.page-invoice-edit { - .dashboard__footer { - display: none; - } -} - -.dashboard__insider--invoice-form { - // padding-bottom: 64px; -} - -.page-form--invoice { - $self: '.page-form'; - - #{$self}__header { - display: flex; - - &-fields { - flex: 1 0 0; - } - - .bp4-label { - min-width: 150px; - } - - .bp4-form-content { - width: 100%; - } - - .bp4-form-group { - &.bp4-inline { - max-width: 450px; - } - } - - .row { - display: flex; - flex-wrap: nowrap; - - .col { - max-width: 470px; - - &--due-date { - .bp4-form-group { - margin: 0px 15px 15px; - - .bp4-label { - min-width: 100px; - } - } - } - } - } - - .col--invoice-date { - max-width: 435px; - } - } - - #{$self}__footer { - - .form-group--invoice_message, - .form-group--terms_conditions { - max-width: 450px; - width: 100%; - - textarea { - width: 100%; - min-height: 60px; - } - } - } -} - -.status-accessor { - span { - font-size: 13px; - font-weight: 400; - line-height: 1.5; - } - - .fully-paid-status { - height: 19px; - width: 19px; - display: inline-block; - background: #2ba01d; - border-radius: 50%; - margin-right: 6px; - color: #ffffff; - } - - .bp4-progress-bar { - background: rgba(92, 112, 128, 0.2); - border-radius: 40px; - display: block; - height: 5px; - overflow: hidden; - position: relative; - margin-top: 5px; - width: 80%; - } - - &.overdue-status {} - - &.remaining-status {} -} \ No newline at end of file diff --git a/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss b/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss deleted file mode 100644 index f5faebc5d9..0000000000 --- a/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss +++ /dev/null @@ -1,51 +0,0 @@ - - -body.page-receipt-new, -body.page-receipt-edit{ - - .dashboard__footer{ - display: none; - } -} - -.dashboard__insider--receipt-form{ - padding-bottom: 64px; -} - -.page-form--receipt{ - $self: '.page-form'; - - #{$self}__header{ - display: flex; - - &-fields{ - flex: 1 0 0; - } - .bp4-label{ - min-width: 150px; - } - .bp4-form-content{ - width: 100%; - } - .bp4-form-group{ - margin-bottom: 18px; - - &.bp4-inline{ - max-width: 450px; - } - } - } - - #{$self}__footer{ - .form-group--receipt_message, - .form-group--statement{ - max-width: 450px; - width: 100%; - - textarea{ - width: 100%; - min-height: 50px; - } - } - } -} \ No newline at end of file