-
-
{label}
-
{amount}
+
);
diff --git a/packages/webapp/src/components/Paper/Paper.module.scss b/packages/webapp/src/components/Paper/Paper.module.scss
new file mode 100644
index 000000000..a8ab860fc
--- /dev/null
+++ b/packages/webapp/src/components/Paper/Paper.module.scss
@@ -0,0 +1,14 @@
+
+
+.root{
+ --x-color-background: #fff;
+ --x-color-border: #d2dce2;
+
+ :global(.bp4-dark) & {
+ --x-color-background: var(--color-dark-gray1);
+ --x-color-border: rgba(255, 255, 255, 0.1);
+ }
+ background-color: var(--x-color-background);
+ border: 1px solid var(--x-color-border);
+ padding: 10px;
+}
\ 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 91c9c7d2d..1b5ce8188 100644
--- a/packages/webapp/src/components/Paper/Paper.tsx
+++ b/packages/webapp/src/components/Paper/Paper.tsx
@@ -1,5 +1,7 @@
import React from 'react';
import { x, SystemProps } from '@xstyled/emotion';
+import clsx from 'classnames';
+import styles from './Paper.module.scss';
interface PaperProps extends SystemProps {
children: React.ReactNode;
@@ -8,10 +10,8 @@ interface PaperProps extends SystemProps {
export const Paper = ({ children, ...props }: PaperProps) => {
return (
{children}
diff --git a/packages/webapp/src/components/Select/DisplayNameList.tsx b/packages/webapp/src/components/Select/DisplayNameList.tsx
index 922f02884..d42da993c 100644
--- a/packages/webapp/src/components/Select/DisplayNameList.tsx
+++ b/packages/webapp/src/components/Select/DisplayNameList.tsx
@@ -1,50 +1,68 @@
-// @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
import intl from 'react-intl-universal';
-import { ListSelect } from './ListSelect';
+import { FSelect } from '../Forms';
+import { useFormikContext } from 'formik';
-export function DisplayNameList({
- salutation,
- firstName,
- lastName,
- company,
- ...restProps
-}) {
- const formats = [
- {
- format: '{1} {2} {3}',
- values: [salutation, firstName, lastName],
- required: [1],
+export type DisplayNameListItem = { label: string };
+
+export interface DisplayNameListProps
+ extends Omit<
+ React.ComponentProps
,
+ 'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
+ > {}
+
+export function DisplayNameList({ ...restProps }: DisplayNameListProps) {
+ const {
+ values: {
+ first_name: firstName,
+ last_name: lastName,
+ company_name: companyName,
+ salutation,
},
- { format: '{1} {2}', values: [firstName, lastName], required: [] },
- { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
- { format: '{1}', values: [company], required: [1] },
- ];
+ } = useFormikContext();
- const formatOptions = formats
- .filter(
- (format) =>
- !format.values.some((value, index) => {
- return !value && format.required.indexOf(index + 1) !== -1;
+ const formats = useMemo(
+ () => [
+ {
+ format: '{1} {2} {3}',
+ values: [salutation, firstName, lastName],
+ required: [1],
+ },
+ { format: '{1} {2}', values: [firstName, lastName], required: [] },
+ { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
+ { format: '{1}', values: [companyName], required: [1] },
+ ],
+ [firstName, lastName, companyName, salutation],
+ );
+
+ const formatOptions: DisplayNameListItem[] = useMemo(
+ () =>
+ formats
+ .filter(
+ (format) =>
+ !format.values.some((value, index) => {
+ return !value && format.required.indexOf(index + 1) !== -1;
+ }),
+ )
+ .map((formatOption) => {
+ const { format, values } = formatOption;
+ let label = format;
+
+ values.forEach((value, index) => {
+ const replaceWith = value || '';
+ label = label.replace(`{${index + 1}}`, replaceWith).trim();
+ });
+ return { label: label.replace(/\s+/g, ' ') };
}),
- )
- .map((formatOption) => {
- const { format, values } = formatOption;
- let label = format;
-
- values.forEach((value, index) => {
- const replaceWith = value || '';
- label = label.replace(`{${index + 1}}`, replaceWith).trim();
- });
- return { label: label.replace(/\s+/g, ' ') };
- });
+ [formats],
+ );
return (
-
diff --git a/packages/webapp/src/components/Select/SalutationList.tsx b/packages/webapp/src/components/Select/SalutationList.tsx
index 0ea7a670c..a57dd1229 100644
--- a/packages/webapp/src/components/Select/SalutationList.tsx
+++ b/packages/webapp/src/components/Select/SalutationList.tsx
@@ -1,10 +1,16 @@
-// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
+import { FSelect } from '../Forms';
-import { ListSelect } from './ListSelect';
+export type SalutationItem = { key: string; label: string };
-export function SalutationList({ ...restProps }) {
+export interface SalutationListProps
+ extends Omit<
+ React.ComponentProps,
+ 'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
+ > {}
+
+export function SalutationList({ ...restProps }: SalutationListProps) {
const saluations = [
intl.get('mr'),
intl.get('mrs'),
@@ -12,17 +18,17 @@ export function SalutationList({ ...restProps }) {
intl.get('miss'),
intl.get('dr'),
];
- const items = saluations.map((saluation) => ({
+ const items: SalutationItem[] = saluations.map((saluation) => ({
key: saluation,
label: saluation,
}));
return (
-
diff --git a/packages/webapp/src/components/Stepper/Stepper.tsx b/packages/webapp/src/components/Stepper/Stepper.tsx
index 448398628..71bd0e648 100644
--- a/packages/webapp/src/components/Stepper/Stepper.tsx
+++ b/packages/webapp/src/components/Stepper/Stepper.tsx
@@ -41,8 +41,8 @@ export function Stepper({
active === index
? StepperStepState.Progress
: active > index
- ? StepperStepState.Completed
- : StepperStepState.Inactive;
+ ? StepperStepState.Completed
+ : StepperStepState.Inactive;
const shouldAllowSelect = () => {
if (typeof onStepClick !== 'function') {
@@ -105,7 +105,7 @@ const StepsContent = styled(Box)`
const StepSeparator = styled.div`
flex: 1;
display: block;
- border-color: #c5cbd3;
+ border-color: var(--color-stepper-separator);
border-top-style: solid;
border-top-width: 1px;
`;
diff --git a/packages/webapp/src/components/Stepper/StepperStep.tsx b/packages/webapp/src/components/Stepper/StepperStep.tsx
index 2103e5b81..3b281018c 100644
--- a/packages/webapp/src/components/Stepper/StepperStep.tsx
+++ b/packages/webapp/src/components/Stepper/StepperStep.tsx
@@ -74,21 +74,27 @@ const StepIcon = styled.span`
border-radius: 24px;
text-align: center;
background-color: ${(props) =>
- props.isCompleted || props.isActive ? 'rgb(0, 82, 204)' : '#9e9e9e'};
- color: #fff;
+ props.isCompleted || props.isActive
+ ? 'var(--color-stepper-step-active-background)'
+ : 'var(--color-stepper-step-background)'};
+ color: var(--color-stepper-step-text);
margin: auto;
font-size: 12px;
`;
const StepTitle = styled.div`
color: ${(props) =>
- props.isCompleted || props.isActive ? 'rgb(0, 82, 204)' : '#738091'};
+ props.isCompleted || props.isActive
+ ? 'var(--color-stepper-step-title-active-text)'
+ : 'var(--color-stepper-step-title-text)'};
`;
const StepDescription = styled.div`
font-size: 12px;
margin-top: 10px;
color: ${(props) =>
- props.isCompleted || props.isActive ? 'rgb(0, 82, 204)' : '#738091'};
+ props.isCompleted || props.isActive
+ ? 'var(--color-stepper-step-description-active-text)'
+ : 'var(--color-stepper-step-description-text)'};
`;
const StepIconWrap = styled.div`
diff --git a/packages/webapp/src/components/TagsControl/TagsControl.module.scss b/packages/webapp/src/components/TagsControl/TagsControl.module.scss
index 0e5f626d6..5e5c33b55 100644
--- a/packages/webapp/src/components/TagsControl/TagsControl.module.scss
+++ b/packages/webapp/src/components/TagsControl/TagsControl.module.scss
@@ -1,4 +1,9 @@
+
+
.root{
+ --color-minimum-border: #e1e2e8;
+ --color-minimum-border: rgba(255, 255, 255, 0.2);
+
display: flex;
flex-direction: row;
gap: 10px;
@@ -9,7 +14,7 @@
&:global(.bp4-minimal:not([class*='bp4-intent-'])) {
background: #fff;
- border: 1px solid #e1e2e8;
+ border: 1px solid var(--color-minimum-border);
&:global(.bp4-interactive:hover) {
background-color: rgba(143, 153, 168, 0.05);
diff --git a/packages/webapp/src/components/TotalLines/index.tsx b/packages/webapp/src/components/TotalLines/index.tsx
index cc9379fe1..367c420a1 100644
--- a/packages/webapp/src/components/TotalLines/index.tsx
+++ b/packages/webapp/src/components/TotalLines/index.tsx
@@ -64,32 +64,38 @@ export const TotalLinesRoot = styled.div`
`;
export const TotalLinePrimitive = styled.div`
+ --x-color-divider: #d2dde2;
+ --x-color-divider-dark: #000;
+
+ --x-color-divider: rgba(255, 255, 255, 0.1);
+ --x-color-divider-dark: rgba(255, 255, 255, 0.2);
+
display: table-row;
.amount,
.title {
display: table-cell;
padding: 8px;
- border-bottom: 1px solid #d2dde2;
+ border-bottom: 1px solid var(--x-color-divider);
${(props) =>
- props.borderStyle === TotalLineBorderStyle.DoubleDark &&
- `
- border-bottom: 3px double #000;
+ props.borderStyle === TotalLineBorderStyle.DoubleDark &&
+ `
+ border-bottom: 3px double var(--x-color-divider-dark);
`}
${(props) =>
- props.borderStyle === TotalLineBorderStyle.SingleDark &&
- `
- border-bottom: 1px double #000;
+ props.borderStyle === TotalLineBorderStyle.SingleDark &&
+ `
+ border-bottom: 1px double var(--x-color-divider-dark);
`}
${(props) =>
- props.borderStyle === TotalLineBorderStyle.None &&
- `
+ props.borderStyle === TotalLineBorderStyle.None &&
+ `
border-bottom-color: transparent;
`}
${(props) =>
- props.textStyle === TotalLineTextStyle.Bold &&
- `
+ props.textStyle === TotalLineTextStyle.Bold &&
+ `
font-weight: 600;
`}
}
diff --git a/packages/webapp/src/components/index.tsx b/packages/webapp/src/components/index.tsx
index 4a13add72..ce576ec06 100644
--- a/packages/webapp/src/components/index.tsx
+++ b/packages/webapp/src/components/index.tsx
@@ -49,7 +49,6 @@ export * from './FlexGrid';
export * from './Menu';
export * from './Icon';
export * from './Items';
-export * from './ItemsCategories';
export * from './Select';
export * from './FormattedMessage';
export * from './MaterialProgressBar';
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx
index 02a347b13..5368edca4 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx
+++ b/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}
>
-
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx
index 174c66854..2249f0496 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx
@@ -1,17 +1,20 @@
// @ts-nocheck
import React from 'react';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
-import { PageFormBigNumber, FormattedMessage as T } from '@/components';
+import {
+ Group,
+ PageForm,
+ PageFormBigNumber,
+ FormattedMessage as T,
+} from '@/components';
import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
import { useManualJournalTotalFormatted } from './utils';
export default function MakeJournalEntriesHeader() {
return (
-
+
);
}
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
index 9a1f81a30..6f3ee5cd7 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
@@ -1,139 +1,141 @@
// @ts-nocheck
import React from 'react';
-import { InputGroup, FormGroup, Position } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
+import { Position } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
import classNames from 'classnames';
+import { useTheme } from '@emotion/react';
+import { css } from '@emotion/css';
import { CLASSES } from '@/constants/classes';
-import {
- momentFormatter,
- inputIntent,
- handleDateChange,
- tansformDateValue,
-} from '@/utils';
+import {} from '@/utils';
import {
Hint,
FieldRequiredHint,
Icon,
- CurrencySelectList,
+ FSelect,
FormattedMessage as T,
+ FFormGroup,
+ FInputGroup,
+ FDateInput,
+ Stack,
} from '@/components';
import { useMakeJournalFormContext } from './MakeJournalProvider';
import { JournalExchangeRateInputField } from './components';
-import { currenciesFieldShouldUpdate } from './utils';
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 (
-
+
{/*------------ Posting date -----------*/}
-
- {({ form, field: { value }, meta: { error, touched } }) => (
- }
- labelInfo={}
- intent={inputIntent({ error, touched })}
- helperText={}
- minimal={true}
- inline={true}
- className={classNames(CLASSES.FILL)}
- >
- {
- form.setFieldValue('date', formattedDate);
- })}
- value={tansformDateValue(value)}
- popoverProps={{
- position: Position.BOTTOM,
- minimal: true,
- }}
- inputProps={{
- leftIcon: ,
- }}
- />
-
- )}
-
+ }
+ labelInfo={}
+ inline
+ fastField
+ >
+ date.toLocaleDateString()}
+ parseDate={(str) => new Date(str)}
+ popoverProps={{
+ position: Position.BOTTOM_LEFT,
+ minimal: true,
+ fill: true,
+ }}
+ inputProps={{
+ leftIcon: ,
+ }}
+ fill
+ fastField
+ />
+
{/*------------ Journal number -----------*/}
{/*------------ Reference -----------*/}
-
- {({ form, field, meta: { error, touched } }) => (
- }
- labelInfo={
- }
- position={Position.RIGHT}
- />
- }
- className={'form-group--reference'}
- intent={inputIntent({ error, touched })}
- helperText={}
- fill={true}
- inline={true}
- >
-
-
- )}
-
+ }
+ labelInfo={
+ }
+ position={Position.RIGHT}
+ />
+ }
+ inline
+ fastField
+ >
+
+
{/*------------ Journal type -----------*/}
-
- {({ form, field, meta: { error, touched } }) => (
- }
- className={classNames('form-group--account-type', CLASSES.FILL)}
- inline={true}
- >
-
-
- )}
-
+ }
+ inline
+ fastField
+ >
+
+
{/*------------ Currency -----------*/}
- }
+ inline
+ fastField
>
- {({ form, field: { value }, meta: { error, touched } }) => (
- }
- className={classNames('form-group--currency', CLASSES.FILL)}
- inline={true}
- >
- {
- form.setFieldValue('currency_code', currencyItem.currency_code);
- form.setFieldValue('exchange_rate', '');
- }}
- defaultSelectText={value}
- />
-
- )}
-
+ {
+ form.setFieldValue('currency_code', currencyItem.currency_code);
+ form.setFieldValue('exchange_rate', '');
+ }}
+ popoverProps={{
+ inline: true,
+ minimal: true,
+ captureDismiss: true,
+ }}
+ valueAccessor={'currency_code'}
+ labelAccessor={'currency_name'}
+ textAccessor={'currency_code'}
+ fastField
+ />
+
{/* ----------- Exchange rate ----------- */}
-
+
);
}
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx
index ab157d59e..1b0164e38 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx
+++ b/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 (
-
@@ -191,6 +192,6 @@ export default function MakeJournalFloatingAction() {
onClick={handleCancelBtnClick}
text={}
/>
-
+
);
}
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx
index 59c8f6e0d..b8d46a8ff 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx
@@ -34,6 +34,9 @@ export function MakeJournalFormFooterRight() {
}
const MakeJouranlTotalLines = styled(TotalLines)`
+ --x-color-text: #555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ color: var(--x-color-text);
`;
diff --git a/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss b/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss
index 1fc37bfc4..3dc031a4c 100644
--- a/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss
+++ b/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss
@@ -4,11 +4,18 @@
}
.attachmentButton:not([class*=bp4-intent-]) {
+ --x-background-color: #fff;
+ --x-border-color: rgb(206, 212, 218);
+
+ :global(.bp4-dark) & {
+ --x-border-color: rgba(255, 255, 255, 0.1);
+ }
+
&,
&:hover{
background-color: #fff;
}
- border: 1px solid rgb(206, 212, 218);
+ border: 1px solid var(--x-border-color);
}
.attachmentField :global .bp4-label{
diff --git a/packages/webapp/src/containers/Authentication/Authentication.tsx b/packages/webapp/src/containers/Authentication/Authentication.tsx
index e82856b04..ab8781190 100644
--- a/packages/webapp/src/containers/Authentication/Authentication.tsx
+++ b/packages/webapp/src/containers/Authentication/Authentication.tsx
@@ -11,14 +11,22 @@ import { Box, Icon, FormattedMessage as T } from '@/components';
import { AuthMetaBootProvider } from './AuthMetaBoot';
import '@/style/pages/Authentication/Auth.scss';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
+import { BigcapitalAlt } from '@/components/Icons/BigcapitalAlt';
export function Authentication() {
+ const isDarkMode = useIsDarkMode();
+
return (
-
+ {isDarkMode ? (
+
+ ) : (
+
+ )}
diff --git a/packages/webapp/src/containers/Authentication/_components.tsx b/packages/webapp/src/containers/Authentication/_components.tsx
index 8e2da305c..3f62794aa 100644
--- a/packages/webapp/src/containers/Authentication/_components.tsx
+++ b/packages/webapp/src/containers/Authentication/_components.tsx
@@ -27,10 +27,17 @@ export const AuthInsiderContent = styled.div`
position: relative;
`;
export const AuthInsiderCard = styled.div`
- border: 1px solid #d5d5d5;
+ --x-color-background: #fff;
+ --x-color-border: #d5d5d5;
+
+ .bp4-dark & {
+ --x-color-background: var(--color-dark-gray2);
+ --x-color-border: rgba(255, 255, 255, 0.1);
+ }
+ border: 1px solid var(--x-color-border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
padding: 26px 22px;
- background: #ffff;
+ background: var(--x-color-background);
border-radius: 3px;
`;
@@ -59,7 +66,12 @@ export const AuthFooterLinks = styled.div`
`;
export const AuthFooterLink = styled.p`
- color: #666;
+ --x-color-text: #666;
+
+ .bp4-dark & {
+ --x-color-text: rgba(255, 255, 255, 0.75);
+ }
+ color: var(--x-color-text);
margin: 0;
`;
@@ -67,11 +79,11 @@ export const AuthSubmitButton = styled(Button)`
margin-top: 20px;
&.bp4-intent-primary {
- background-color: #0052cc;
+ // background-color: #0052cc;
&:disabled,
&.bp4-disabled {
- background-color: rgba(0, 82, 204, 0.4);
+ // background-color: rgba(0, 82, 204, 0.4);
}
}
`;
diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx
index a7e5ccfbf..ca9499de2 100644
--- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx
+++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx
@@ -1,7 +1,7 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import { Button, NavbarGroup, Intent } from '@blueprintjs/core';
-import { DashboardActionsBar, Icon } from '@/components';
+import { DrawerActionsBar, Icon } from '@/components';
import withDrawerActions from '@/containers/Drawer/withDrawerActions';
import {
getButtonLabelFromResource,
@@ -26,7 +26,7 @@ function BrandingTemplateActionsBarRoot({ openDrawer }) {
const label = useMemo(() => getButtonLabelFromResource(resource), [resource]);
return (
-
+
-
+
);
}
export const BrandingTemplateActionsBar = compose(withDrawerActions)(
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
index be86c6628..1f88a82d3 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
@@ -166,7 +166,7 @@ const DashboardConstrantTable = styled(DataTable)`
.table {
.thead {
.th {
- background: #fff;
+ // background: #fff;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 13px;
@@ -182,6 +182,12 @@ const DashboardConstrantTable = styled(DataTable)`
`;
const CashflowTransactionsTable = styled(DashboardConstrantTable)`
+ --table-cell-border-color: #e6e6e6;
+
+ .bp4-dark & {
+ --table-cell-border-color: rgba(255, 255, 255, 0.15);
+ }
+
.table .tbody {
.tbody-inner .tr.no-results {
.td {
@@ -195,7 +201,7 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`
.tbody-inner {
.tr .td:not(:first-child) {
- border-left: 1px solid #e6e6e6;
+ border-left: 1px solid var(--table-cell-border-color);
}
}
}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
index 253ea3d7d..42e146c8e 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
@@ -173,13 +173,14 @@ const DetailsBarSkeletonBase = styled.div`
const AccountBalanceItemWrap = styled.div`
margin-left: 18px;
- color: #5f6d86;
+ // color: #5f6d86;
`;
const AccountTransactionDetailsWrap = styled.div`
display: flex;
- background: #fff;
- border-bottom: 1px solid #d2dce2;
+ background: var(--color-bank-transactions-details-bar-background);
+ color: var(--color-bank-transactions-details-bar-text);
+ border-bottom: 1px solid var(--color-bank-transactions-details-bar-divider);
padding: 0 22px;
height: 42px;
align-items: center;
@@ -192,7 +193,7 @@ const AccountSwitchText = styled.div`
const AccountBalanceAmount = styled.span`
font-weight: 600;
display: inline-block;
- color: rgb(31, 50, 85);
+ // color: rgb(31, 50, 85);
margin-left: 10px;
`;
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsFilterTabs.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsFilterTabs.tsx
index 1c1320b54..7b6686d0d 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsFilterTabs.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsFilterTabs.tsx
@@ -37,7 +37,7 @@ export function AccountTransactionsFilterTabs() {
id={'uncategorized'}
title={
<>
-
+
{currentAccount.uncategorized_transactions}
{' '}
Uncategorized Transactions
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountsTransactionsAll.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountsTransactionsAll.tsx
index 298ea845d..4799ce55e 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountsTransactionsAll.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountsTransactionsAll.tsx
@@ -11,10 +11,10 @@ const Box = styled.div`
`;
const CashflowTransactionsTableCard = styled.div`
- border: 2px solid #f0f0f0;
+ background: var(--color-bank-transactions-content-background);
+ border: 2px solid var(--color-bank-transactions-content-border);
border-radius: 10px;
padding: 30px 18px;
- background: #fff;
flex: 0 1;
`;
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss
index 62b5a09f4..a39a79539 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.module.scss
+++ b/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;
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx
index 47fd0b7f9..5f31e50c1 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components';
export const AccountTransactionsCard = styled.div`
- border: 2px solid #f0f0f0;
+ border: 2px solid var(--color-bank-transactions-content-border);
+ background: var(--color-bank-transactions-content-background);
border-radius: 10px;
padding: 30px 18px;
- background: #fff;
flex: 0 1;
`;
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss
index 9bbc4f8d7..bff81b191 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss
@@ -1,11 +1,24 @@
-.root{
+.root {
+ --color-background: #fff;
+ --color-border: #e1e2e8;
+ --color-text: var(--color-dark-gray1);
+
+ :global(.bp4-dark) & {
+ --color-background: #c5cbd3;
+ --color-border: rgba(255, 255, 255, 0.2);
+ }
min-height: 26px;
border-radius: 15px;
font-size: 13px;
padding: 0 10px;
- &:global(.bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal)) {
- background: #fff;
- border: 1px solid #e1e2e8;
+ &:global(.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal)) {
+ background: var(--color-background);
+ color: var(--color-text);
+ border: 1px solid var(--color-border);
+
+ & :global(.bp4-icon) {
+ color: var(--color-text);
+ }
}
-}
\ No newline at end of file
+}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss
index c7a9e0aaf..3272620ce 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss
@@ -2,7 +2,7 @@
:global .table{
.thead {
.th {
- background: #fff;
+ // background: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 13px;
@@ -22,7 +22,7 @@
.tbody-inner {
.tr .td{
- border-bottom: 1px solid #ececec;
+ border-bottom-width: 1px;
}
}
}
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx
index 780731692..431e15831 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx
@@ -45,6 +45,6 @@ export const CategorizeTransactionFormFooter = R.compose(withBankingActions)(
);
const Root = styled.div`
- border-top: 1px solid #c7d5db;
+ border-top: 1px solid var(--color-aside-divider);
padding: 14px 20px;
`;
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss
index bc6646aa5..3e8358f07 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss
@@ -5,17 +5,13 @@
padding-bottom: 60px;
}
-.transaction {
-
-}
-
.matchBar{
padding: 12px 14px;
- background: #fff;
- border-bottom: 1px solid #E1E2E9;
+ background: var(--color-bank-transaction-matching-aside-header);
+ border-bottom: 1px solid var(--color-bank-transaction-matching-divider);
&:not(:first-of-type) {
- border-top: 1px solid #E1E2E9;
+ border-top: 1px solid var(--color-bank-transaction-matching-divider);
}
}
@@ -25,16 +21,16 @@
}
.footer {
- background-color: #fff;
+ background-color: var(--color-bank-transaction-matching-aside-footer);
}
.footerActions {
padding: 14px 16px;
- border-top: 1px solid #d8d9d9;
+ border-top: 1px solid var(--color-bank-transaction-matching-divider);
}
.footerTotal {
padding: 8px 16px;
- border-top: 1px solid #d8d9d9;
+ border-top: 1px solid var(--color-bank-transaction-matching-divider);
line-height: 24px;
}
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss
index 279b58051..f8a5ab52d 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss
@@ -7,8 +7,8 @@
height: calc(100dvh - 144px);
}
.tabs :global .bp4-tab-list{
- background: #fff;
- border-bottom: 1px solid #c7d5db;
+ // background: #fff;
+ border-bottom: 1px solid var(--color-aside-divider);
padding: 0 22px;
}
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
index bdf743164..d7eef6348 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
@@ -1,52 +1,66 @@
-
-.root{
- background: #fff;
+.root {
+ --item-background: #fff;
+ --item-border: #d6dbe3;
+ --item-active-border: #88abdb;
+ --item-label-text: #252a33;
+ --item-date-text: #5c7080;
+
+ :global(.bp4-dark) & {
+ --item-background: var(--color-dark-gray4);
+ --item-border: rgba(255, 255, 255, 0.2);
+ --item-date-text: var(--color-light-gray1);
+ --item-label-text: var(--color-light-gray4);
+ }
+ background: var(--item-background);
border-radius: 5px;
- border: 1px solid #D6DBE3;
+ border: 1px solid var(--item-border);
padding: 10px 16px;
cursor: pointer;
- &.active{
- border-color: #88ABDB;
+ &.active {
+ border-color: var(--item-active-border);
box-shadow: 0 0 0 2px rgba(136, 171, 219, 0.2);
.label,
.date {
- color: rgb(21, 82, 200),
+ color: rgb(21, 82, 200);
}
}
- &:hover:not(.active){
+ &:hover:not(.active) {
border-color: #c0c0c0;
}
}
-.checkbox:global(.bp4-control.bp4-checkbox){
+.checkbox:global(.bp4-control.bp4-checkbox) {
margin: 0;
}
-.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
- box-shadow: 0 0 0 1px #CBCBCB;
+.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator {
+ box-shadow: 0 0 0 1px #cbcbcb;
}
-.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
+.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator {
margin-right: 4px;
margin-left: 0;
height: 16px;
width: 16px;
}
-.checkbox:global(.bp4-control.bp4-checkbox) :global input:checked ~ .bp4-control-indicator{
- box-shadow: 0 0 0 1px #0069ff;
+.checkbox:global(.bp4-control.bp4-checkbox)
+ :global
+ input:checked
+ ~ .bp4-control-indicator {
+ box-shadow: 0 0 0 1px #0069ff;
}
.label {
- color: #252A33;
- font-size: 15px;
+ color: var(--item-label-text);
+ font-size: 15px;
}
.label :global strong {
font-weight: 500;
- font-variant-numeric:tabular-nums;
+ font-variant-numeric: tabular-nums;
}
.date {
font-size: 12px;
- color: #5C7080;
-}
\ No newline at end of file
+ color: var(--item-date-text);
+}
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.module.scss
index 65dd9e684..672dd1a3e 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.module.scss
@@ -11,7 +11,7 @@
.footer {
padding: 11px 20px;
- border-top: 1px solid #ced4db;
+ border-top: 1px solid var(--color-aside-divider);
}
.form{
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx
index 07b61e5d3..7005804c7 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx
@@ -1,10 +1,12 @@
// @ts-nocheck
import React from 'react';
-import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
import { Row, Col } from '@/components';
-import { FormattedMessage as T } from '@/components';
-import { FastField, ErrorMessage } from 'formik';
-import { inputIntent } from '@/utils';
+import {
+ FormattedMessage as T,
+ FFormGroup,
+ FInputGroup,
+ FTextArea,
+} from '@/components';
const CustomerBillingAddress = ({}) => {
return (
@@ -15,105 +17,65 @@ const CustomerBillingAddress = ({}) => {
{/*------------ Billing Address country -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- label={}
- >
-
-
- )}
-
+ }
+ >
+
+
{/*------------ Billing Address 1 -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={'form-group--address_line_1'}
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Billing Address 2 -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={'form-group--journal-number'}
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Billing Address city -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={'form-group--journal-number'}
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Billing Address state -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={'form-group--journal-number'}
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Billing Address postcode -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Billing Address phone -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
@@ -121,107 +83,67 @@ const CustomerBillingAddress = ({}) => {
{/*------------ Shipping Address country -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={'form-group--journal-number'}
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Shipping Address 1 -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={'form-group--journal-number'}
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Shipping Address 2 -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={'form-group--journal-number'}
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Shipping Address city -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={'form-group--journal-number'}
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Shipping Address state -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={'form-group--journal-number'}
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Shipping Address postcode -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Shipping Address phone -----------*/}
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- intent={inputIntent({ error, touched })}
- inline={true}
- helperText={}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Currency -----------*/}
-
- {({ form, field: { value }, meta: { error, touched } }) => (
- }
- className={classNames(
- 'form-group--select-list',
- 'form-group--balance-currency',
- Classes.FILL,
- )}
- inline={true}
- >
- {
- form.setFieldValue('currency_code', currency.currency_code);
- }}
- disabled={customerId}
- />
-
- )}
-
+ }
+ fastField
+ inline
+ >
+
+
{/*------------ Opening balance -----------*/}
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
index ff82a3c2b..bdc547c7b 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
@@ -1,72 +1,40 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
-import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
+import { ControlGroup } from '@blueprintjs/core';
+import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
export default function CustomerFormAfterPrimarySection({}) {
return (
-
+
{/*------------ Customer email -----------*/}
-
- {({ field, meta: { error, touched } }) => (
- }
- className={'form-group--email'}
- label={}
- inline={true}
- >
-
-
- )}
-
+ }
+ inline={true}
+ >
+
+
{/*------------ Phone number -----------*/}
- }
inline={true}
>
-
- {({ field, meta: { error, touched } }) => (
-
- )}
-
-
-
- {({ field, meta: { error, touched } }) => (
-
- )}
-
+
+
-
+
{/*------------ Customer website -----------*/}
-
- {({ field, meta: { error, touched } }) => (
- }
- className={'form-group--website'}
- label={}
- inline={true}
- >
-
-
- )}
-
+ } inline={true}>
+
+
);
}
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
index 80c8c0feb..2ac41df3f 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
@@ -124,10 +124,15 @@ function CustomerFormFormik({
}
export const CustomerFormHeaderPrimary = styled.div`
+ --x-border: #e4e4e4;
+
+ .bp4-dark & {
+ --x-border: var(--color-dark-gray3);
+ }
padding: 10px 0 0;
margin: 0 0 20px;
overflow: hidden;
- border-bottom: 1px solid #e4e4e4;
+ border-bottom: 1px solid var(--x-border);
max-width: 1000px;
`;
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx
index 0e91a76c2..2f23a3a97 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx
@@ -10,6 +10,8 @@ import {
SalutationList,
DisplayNameList,
FormattedMessage as T,
+ FInputGroup,
+ FFormGroup,
} from '@/components';
import CustomerTypeRadioField from './CustomerTypeRadioField';
import { CLASSES } from '@/constants/classes';
@@ -28,100 +30,51 @@ export default function CustomerFormPrimarySection({}) {
{/**----------- Contact name -----------*/}
-
}
inline={true}
>
-
- {({ form, field: { value }, meta: { error, touched } }) => (
- {
- form.setFieldValue('salutation', salutation.label);
- }}
- selectedItem={value}
- popoverProps={{ minimal: true }}
- className={classNames(
- CLASSES.FORM_GROUP_LIST_SELECT,
- CLASSES.FILL,
- 'input-group--salutation-list',
- 'select-list--fill-button',
- )}
- />
- )}
-
-
-
- {({ field, meta: { error, touched } }) => (
- (firstNameFieldRef.current = ref)}
- {...field}
- />
- )}
-
-
-
- {({ field, meta: { error, touched } }) => (
-
- )}
-
+
+ (firstNameFieldRef.current = ref)}
+ />
+
-
+
{/*----------- Company Name -----------*/}
-
- {({ field, meta: { error, touched } }) => (
- }
- intent={inputIntent({ error, touched })}
- helperText={}
- inline={true}
- >
-
-
- )}
-
+
}
+ inline={true}
+ >
+
+
{/*----------- Display Name -----------*/}
-
- {({ form, field: { value }, meta: { error, touched } }) => (
- }
- intent={inputIntent({ error, touched })}
- label={
- <>
-
-
-
-
- }
- className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
- inline={true}
- >
- {
- form.setFieldValue('display_name', displayName.label);
- }}
- selectedItem={value}
- popoverProps={{ minimal: true }}
- />
-
- )}
-
+
+
+
+
+
+ }
+ inline={true}
+ >
+
+
-
- {({ field, field: { value }, meta: { error, touched } }) => (
- }
- className={classNames('form-group--note', Classes.FILL)}
- intent={inputIntent({ error, touched })}
- helperText={}
- >
-
-
- )}
-
+ } inline={false}>
+
+
);
}
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx
index 93a43175a..78aff5782 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx
@@ -2,43 +2,26 @@
import React from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
-import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
-import { FormattedMessage as T } from '@/components';
-import { FastField } from 'formik';
+import { Radio } from '@blueprintjs/core';
+import { FormattedMessage as T, FFormGroup, FRadioGroup } from '@/components';
import { handleStringChange, saveInvoke } from '@/utils';
/**
* Customer type radio field.
*/
-export default function RadioCustomer(props) {
- const { onChange, ...rest } = props;
-
-
+export default function RadioCustomer() {
return (
-
- {({ form, field: { value }, meta: { error, touched } }) => (
- }
- className={classNames('form-group--customer_type')}
- >
- {
- saveInvoke(onChange, value);
- form.setFieldValue('customer_type', value);
- })}
- selectedValue={value}
- >
-
-
-
-
- )}
-
+ }
+ inline
+ fastField
+ >
+
+
+
+
+
);
}
diff --git a/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx b/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
index 55cf0ab97..c1b05a5c2 100644
--- a/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
+++ b/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
@@ -1,6 +1,6 @@
// @ts-nocheck
import React from 'react';
-import { Menu } from '@blueprintjs/core';
+import { Intent, Menu } from '@blueprintjs/core';
import { MenuItem, MenuItemLabel } from '@/components';
import { ISidebarMenuItemType } from '@/containers/Dashboard/Sidebar/interfaces';
@@ -20,10 +20,9 @@ function SidebarMenuItem({ item, index }) {
text={item.text}
disabled={item.disabled}
dropdownType={item.dropdownType || 'collapse'}
- caretIconSize={16}
onClick={item.onClick}
active={isActive}
- hasSubmenu={item.hasChildren}
+ intent={Intent.NONE}
/>
);
}
@@ -43,9 +42,9 @@ function SidebarMenuItemComposer({ item, index }) {
return SidebarMenuItem.ItemTypes.indexOf(item.type) !== -1 ? (
) : // Group item type.
- item.type === ISidebarMenuItemType.Group ? (
-
- ) : null;
+ item.type === ISidebarMenuItemType.Group ? (
+
+ ) : null;
}
/**
diff --git a/packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx b/packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx
index a4867a99b..3fc3f4178 100644
--- a/packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx
@@ -1,17 +1,16 @@
// @ts-nocheck
import React from 'react';
-import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
-import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
+import { Intent, Button } from '@blueprintjs/core';
+import { Form, useFormikContext } from 'formik';
import {
- ListSelect,
+ FSelect,
FieldRequiredHint,
FormattedMessage as T,
FFormGroup,
FInputGroup,
} from '@/components';
import { CLASSES } from '@/constants/classes';
-import classNames from 'classnames';
-import { compose, inputIntent } from '@/utils';
+import { compose } from '@/utils';
import { useInviteUserFormContext } from './InviteUserFormProvider';
import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -42,30 +41,19 @@ function InviteUserFormContent({
{/* ----------- Role name ----------- */}
-
- {({ form, field: { value }, meta: { error, touched } }) => (
- }
- labelInfo={}
- helperText={}
- className={classNames(CLASSES.FILL, 'form-group--role_name')}
- intent={inputIntent({ error, touched })}
- >
- {
- form.setFieldValue('role_id', id);
- }}
- selectedItem={value}
- selectedItemProp={'id'}
- textProp={'name'}
- // labelProp={'id '}
- popoverProps={{ minimal: true }}
- intent={inputIntent({ error, touched })}
- />
-
- )}
-
+ }
+ labelInfo={}
+ >
+
+
diff --git a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
index bce3d1991..a4b356f42 100644
--- a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
+++ b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
@@ -13,10 +13,10 @@ import {
Position,
} from '@blueprintjs/core';
import {
- DashboardActionsBar,
Icon,
Can,
FormattedMessage as T,
+ DrawerActionsBar,
} from '@/components';
import { AccountAction, AbilitySubject } from '@/constants/abilityOption';
@@ -72,7 +72,7 @@ function AccountDrawerActionBar({
};
return (
-
+
)}
-
+
);
}
export default compose(
diff --git a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
index edaf98c3b..4323be445 100644
--- a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
@@ -27,6 +27,7 @@ import {
Can,
Icon,
FormattedMessage as T,
+ DrawerActionsBar,
} from '@/components';
import { CustomerMoreMenuItem } from './utils';
import {
@@ -91,7 +92,7 @@ function CustomerDetailsActionsBar({
};
return (
-
+
-
+
);
}
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
index 086df3472..30fcea77d 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
@@ -42,4 +42,6 @@ export default function InvoiceGLEntriesTable() {
const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)``;
-const InvoiceGLEntriesRoot = styled(Card)``;
+const InvoiceGLEntriesRoot = styled(Card)`
+
+`;
diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
index 6303e707c..73f870ca6 100644
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
@@ -16,10 +16,10 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
import withDrawerActions from '@/containers/Drawer/withDrawerActions';
import {
- DashboardActionsBar,
Icon,
FormattedMessage as T,
Can,
+ DrawerActionsBar,
} from '@/components';
import { ItemDetailActionsMoreBtn } from './ItemDetailActionsMoreBtn';
@@ -53,7 +53,7 @@ function ItemDetailActionsBar({
};
return (
-
+
-
+
);
}
diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.tsx
index 4fc0b4775..910ec5482 100644
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.tsx
@@ -30,7 +30,6 @@ export function ItemTransactionsHeader() {
const handleItemChange = (item) => {
setValue(item);
};
-
return (
diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx
index a2b4f546a..4d1cc39c4 100644
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx
@@ -20,11 +20,9 @@ export const ItemManuTransaction = ({ onChange }) => {
if (itemTransactionMenu.length === 0) {
return null;
}
-
const handleClickItem = (item) => {
onChange && onChange(item);
};
-
const content = itemTransactionMenu.map(({ name, label }) => (