QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 22:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip darkmode

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-08-04 12:25:27 +02:00
parent 456a9e1ad9
commit d9a716a46f
170 changed files with 2006 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webapp/public/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
@@ -31,7 +31,7 @@
-->
<title>Bigcapital</title>
</head>
<body>
<body class="bp4-dark">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="nprogress"></div>

8
packages/webapp/src/components/AdvancedFilter/AdvancedFilterCompatatorField.tsx
View File

@@ -1,7 +1,7 @@
// @ts-nocheck
import React from 'react';
import { Classes } from '@blueprintjs/core';
import { ListSelect } from '../Select';
import { FSelect } from '../Forms';
import { getConditionTypeCompatators } from './utils';
export default function DynamicFilterCompatatorField({
@@ -11,9 +11,9 @@ export default function DynamicFilterCompatatorField({
const options = getConditionTypeCompatators(dataType);
return (
<ListSelect
textProp={'label'}
selectedItemProp={'value'}
<FSelect
textAccessor={'label'}
valueAccessor={'value'}
items={options}
className={Classes.FILL}
filterable={false}

111
packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx
View File

@@ -1,16 +1,16 @@
// @ts-nocheck
import React from 'react';
import { Formik, FastField, FieldArray } from 'formik';
import {
Button,
FormGroup,
Classes,
InputGroup,
MenuItem,
} from '@blueprintjs/core';
import { Button, Classes, InputGroup, MenuItem } from '@blueprintjs/core';
import { get, first, defaultTo, isEqual, isEmpty } from 'lodash';
import intl from 'react-intl-universal';
import { Choose, Icon, FormattedMessage as T, ListSelect } from '@/components';
import {
Choose,
Icon,
FormattedMessage as T,
FSelect,
FFormGroup,
} from '@/components';
import { useUpdateEffect } from '@/hooks';
import {
AdvancedFilterDropdownProvider,
@@ -58,38 +58,31 @@ function FilterConditionField() {
const conditionFieldPath = getConditionFieldPath('condition');
return (
<FastField name={conditionFieldPath}>
{({ form, field }) => (
<FormGroup className={'form-group--condition'}>
<Choose>
<Choose.When condition={conditionIndex === 0}>
<InputGroup disabled value={intl.get('filter.when')} />
</Choose.When>
<FFormGroup className={'form-group--condition'} name={conditionFieldPath}>
<Choose>
<Choose.When condition={conditionIndex === 0}>
<InputGroup disabled value={intl.get('filter.when')} />
</Choose.When>
<Choose.Otherwise>
<ListSelect
selectedItem={field.value}
textProp={'label'}
selectedItemProp={'value'}
labelProp={'text'}
items={conditionalsOptions}
className={Classes.FILL}
filterable={false}
onItemSelect={(option) => {
form.setFieldValue(conditionFieldPath, option.value);
}}
popoverProps={{
inline: true,
minimal: true,
captureDismiss: true,
}}
itemRenderer={ConditionItemRenderer}
/>
</Choose.Otherwise>
</Choose>
</FormGroup>
)}
</FastField>
<Choose.Otherwise>
<FSelect
name={conditionFieldPath}
textAccessor={'label'}
valueAccessor={'value'}
labelAccessor={'text'}
items={conditionalsOptions}
filterable={false}
popoverProps={{
inline: true,
minimal: true,
captureDismiss: true,
}}
itemRenderer={ConditionItemRenderer}
className={Classes.FILL}
/>
</Choose.Otherwise>
</Choose>
</FFormGroup>
);
}
@@ -103,20 +96,18 @@ function FilterCompatatorFilter() {
const fieldType = get(fieldMeta, 'fieldType');
return (
<FastField name={comparatorFieldPath}>
{({ form, field }) => (
<FormGroup className={'form-group--comparator'}>
<AdvancedFilterCompatatorField
dataType={fieldType}
className={Classes.FILL}
selectedItem={field.value}
onItemSelect={(option) => {
form.setFieldValue(comparatorFieldPath, option.value);
}}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={comparatorFieldPath}
className={'form-group--comparator'}
fastField
>
<AdvancedFilterCompatatorField
name={comparatorFieldPath}
dataType={fieldType}
className={Classes.FILL}
fastField
/>
</FFormGroup>
);
}
@@ -169,11 +160,11 @@ function FilterFieldsField() {
return (
<FastField name={fieldPath}>
{({ field, form }) => (
<FormGroup className={'form-group--fieldKey'}>
<ListSelect
<FFormGroup className={'form-group--fieldKey'} name={fieldPath}>
<FSelect
selectedItem={field.value}
textProp={'label'}
selectedItemProp={'value'}
textAccessor={'label'}
valueAccessor={'value'}
items={transformFieldsToOptions(fields)}
className={Classes.FILL}
onItemSelect={(option) => {
@@ -188,7 +179,7 @@ function FilterFieldsField() {
captureDismiss: true,
}}
/>
</FormGroup>
</FFormGroup>
)}
</FastField>
);
@@ -219,7 +210,7 @@ function FilterValueField() {
shouldUpdate={shouldFilterValueFieldUpdate}
>
{({ form: { setFieldValue }, field }) => (
<FormGroup className={'form-group--value'}>
<FFormGroup className={'form-group--value'} name={valueFieldPath}>
<AdvancedFilterValueField
isFocus={conditionIndex === 0}
value={field.value}
@@ -231,7 +222,7 @@ function FilterValueField() {
setFieldValue(valueFieldPath, value);
}}
/>
</FormGroup>
</FFormGroup>
)}
</FastField>
);

21
packages/webapp/src/components/Alert/index.tsx
View File

@@ -15,6 +15,7 @@ export function Alert({ title, description, children, intent, className }) {
const AlertRoot = styled.div`
border: 1px solid rgb(223, 227, 230);
background: var(--color-alert-default-background);
padding: 12px;
border-radius: 6px;
margin-bottom: 20px;
@@ -22,40 +23,40 @@ const AlertRoot = styled.div`
${(props) =>
props.intent === 'danger' &&
`
border-color: rgb(249, 198, 198);
background: rgb(255, 248, 248);
border-color: var(--color-alert-danger-border);
background: var(--color-alert-danger-background);
${AlertDesc} {
color: #d95759;
color: var(--color-alert-danger-description-text);
}
${AlertTitle} {
color: rgb(205, 43, 49);
color: var(--color-alert-danger-title-text);
}
`}
${(props) =>
props.intent === 'primary' &&
`
background: #fff;
border-color: #98a8ee;
background: var(--color-alert-primary-background);
border-color: var(--color-alert-primary-border);
${AlertTitle} {
color: #1a3bd4;
color: var(--color-alert-primary-title-text);
}
${AlertDesc} {
color: #455883;
color: var(--color-alert-primary-description-text);
}
`}
`;
export const AlertTitle = styled.h3`
color: rgb(17, 24, 28);
color: var(--color-alert-default-title-text);
margin-bottom: 4px;
font-size: 14px;
font-weight: 600;
`;
export const AlertDesc = styled.p`
color: rgb(104, 112, 118);
color: var(--color-alert-default-description-text);
margin: 0;
`;

2
packages/webapp/src/components/AppShell/AppContentShell/AppContentShell.module.scss
View File

@@ -14,7 +14,7 @@
width: var(--aside-width);
min-width: var(--aside-min-width);
height: 100dvh;
border-left: 1px solid rgba(17, 20, 24, 0.15);
border-left: 1px solid var(--color-app-shell-divider);
height: inherit;
overflow: auto;
display: flex;

6
packages/webapp/src/components/Aside/Aside.module.scss
View File

@@ -6,8 +6,8 @@
.title{
align-items: center;
background: #fff;
border-bottom: 1px solid #E1E2E9;
background: var(--color-aside-background);
border-bottom: 1px solid var(--color-aside-divider);
display: flex;
flex: 0 0 auto;
min-height: 40px;
@@ -20,6 +20,6 @@
display: flex;
flex-direction: column;
flex: 1 1 auto;
background-color: #fff;
background-color: var(--color-aside-title-background);
overflow-y: auto;
}

5
packages/webapp/src/components/Aside/Aside.tsx
View File

@@ -28,7 +28,6 @@ export function Aside({
<Box className={clsx(styles.root, className, classNames?.root)}>
<Group position="apart" className={clsx(styles.title, classNames?.title)}>
{title}
{hideCloseButton !== true && (
<Button
aria-label="Close"
@@ -45,13 +44,13 @@ export function Aside({
);
}
interface AsideContentProps extends BoxProps {}
interface AsideContentProps extends BoxProps { }
function AsideContent({ ...props }: AsideContentProps) {
return <Box {...props} className={clsx(styles.content, props?.className)} />;
}
interface AsideFooterProps extends BoxProps {}
interface AsideFooterProps extends BoxProps { }
function AsideFooter({ ...props }: AsideFooterProps) {
return <Box {...props} />;

21
packages/webapp/src/components/BankAccounts/index.tsx
View File

@@ -104,13 +104,14 @@ const BankAccountWrap = styled.div`
display: flex;
flex-direction: column;
border-radius: 3px;
background: #fff;
background: var(--color-bank-account-card-background);
margin: 8px;
border: 1px solid #c8cad0;
border: 1px solid var(--color-bank-account-card-border);
transition: all 0.1s ease-in-out;
color: var(--color-bank-account-card-text);
&:hover {
border-color: #0153cc;
border-color: var(--color-bank-account-card-hover-border);
}
`;
@@ -124,7 +125,7 @@ const BankAccountTitle = styled.div`
font-size: 15px;
font-style: inherit;
letter-spacing: -0.003em;
color: rgb(23, 43, 77);
// color: rgb(23, 43, 77);
white-space: nowrap;
font-weight: 600;
line-height: 1;
@@ -137,7 +138,7 @@ const BankAccountTitle = styled.div`
const BnakAccountCode = styled.div`
font-size: 11px;
margin-top: 4px;
color: rgb(23, 43, 77);
color: var(--color-bank-account-code-text);
display: inline-block;
`;
@@ -145,7 +146,7 @@ const BankAccountBalanceWrap = styled.div`
display: flex;
flex-direction: column;
margin-top: auto;
border-top: 1px solid #dfdfdf;
border-top: 1px solid var(--color-bank-account-card-border);
padding: 10px 12px;
`;
@@ -153,7 +154,7 @@ const BankAccountBalanceAmount = styled.div`
font-size: 16px;
font-weight: 600;
line-height: 1;
color: #57657e;
// color: #57657e;
`;
const BankAccountBalanceLabel = styled.div`
@@ -167,7 +168,7 @@ const BankAccountBalanceLabel = styled.div`
const MetaLineWrap = styled.div`
font-size: 11px;
display: flex;
color: #2f3c58;
// color: #2f3c58;
&:not(:first-of-type) {
margin-top: 6px;
@@ -178,7 +179,7 @@ const MetaLineTitle = styled.div``;
const MetaLineValue = styled.div`
box-sizing: border-box;
font-style: inherit;
background: rgb(223, 225, 230);
background: var(--color-bank-account-card-tag-background);
line-height: initial;
align-content: center;
padding: 0px 2px;
@@ -187,9 +188,9 @@ const MetaLineValue = styled.div`
text-transform: none;
width: 30px;
min-width: 30px;
// color: rgb(23, 43, 77);
height: 16px;
text-align: center;
color: rgb(23, 43, 77);
font-size: 11px;
margin-left: auto;
`;

2
packages/webapp/src/components/Button/ButtonLink.tsx
View File

@@ -2,7 +2,7 @@
import styled from 'styled-components';
export const ButtonLink = styled.button`
color: #0052cc;
color: var(--color-primary);
border: 0;
background: transparent;
cursor: pointer;

9
packages/webapp/src/components/Card/index.tsx
View File

@@ -13,13 +13,16 @@ export function Card({ className, style, children }) {
const CardRoot = styled.div`
padding: 15px;
margin: 15px;
background: #fff;
border: 1px solid #d2dce2;
background: var(--color-card-background);
border: 1px solid var(--color-card-border);
`;
export const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.25);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {

6
packages/webapp/src/components/CommercialDoc/index.tsx
View File

@@ -3,6 +3,10 @@ import { Card } from '../Card';
import { DataTable } from '../Datatable';
export const CommercialDocBox = styled(Card)`
--x-background-color: var(--x-white);
--x-background-color: var(--color-dark-gray2);
background-color: var(--x-background-color);
padding: 22px 20px;
`;
@@ -16,7 +20,7 @@ export const CommercialDocTopHeader = styled.div`
export const CommercialDocEntriesTable = styled(DataTable)`
.tbody .tr:last-child .td {
border-bottom: 1px solid #d2dce2;
border-bottom-width: 1px;
}
`;

15
packages/webapp/src/components/ContentTabs/ContentTabs.tsx
View File

@@ -12,8 +12,9 @@ interface ContentTabItemRootProps {
}
const ContentTabItemRoot = styled.button<ContentTabItemRootProps>`
flex: 1 0;
background: #fff;
border: 1px solid #e1e2e8;
background: var(--color-card-background);
border: 1px solid var(--color-content-tab-border);
color: var(--color-content-tab-text);
border-radius: 5px;
padding: 11px;
text-align: left;
@@ -28,32 +29,30 @@ const ContentTabItemRoot = styled.button<ContentTabItemRootProps>`
${(props) =>
props.active &&
`
border-color: #1552c8;
border-color: var(--color-content-tab-active-border);
color: var(--color-content-tab-active-text);
box-shadow: 0 0 0 0.25px #1552c8;
${ContentTabTitle} {
color: #1552c8;
font-weight: 500;
}
${ContentTabDesc} {
color: #1552c8;
}
`}
&:hover,
&:active {
border-color: #1552c8;
border-color: var(--color-content-tab-hover-border);
}
`;
const ContentTabTitle = styled('h3')`
font-size: 14px;
font-weight: 400;
color: #2f343c;
`;
const ContentTabDesc = styled('p')`
margin: 0;
color: #5f6b7c;
margin-top: 4px;
font-size: 12px;
opacity: 0.7;
`;
interface ContentTabsItemProps {

15
packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx
View File

@@ -4,15 +4,28 @@ import classNames from 'classnames';
import { Icon } from '@/components';
import '@/style/components/BigcapitalLoading.scss';
import { useIsDarkMode } from '@/hooks/useDarkMode';
/**
* Bigcapital logo loading.
*/
export default function BigcapitalLoading({ className }) {
const isDarkmode = useIsDarkMode();
return (
<div className={classNames('bigcapital-loading', className)}>
<div class="center">
<Icon icon="bigcapital" height={37} width={228} />
{isDarkmode ? (
<Icon
icon="bigcapital-alt"
height={37}
width={228}
color="#fff"
className="bigcapital-logo"
/>
) : (
<Icon icon="bigcapital" height={37} width={228} />
)}
</div>
</div>
);

14
packages/webapp/src/components/Dashboard/GlobalHotkeys.tsx
View File

@@ -9,6 +9,17 @@ import withUniversalSearchActions from '@/containers/UniversalSearch/withUnivers
import { compose } from '@/utils';
// Toggle dark/light mode by toggling 'bp4-dark' class on body
const handleToggleDarkMode = () => {
const body = document.body;
if (body.classList.contains('bp4-dark')) {
body.classList.remove('bp4-dark');
} else {
body.classList.add('bp4-dark');
}
};
function GlobalHotkeys({
// #withDashboardActions
toggleSidebarExpand,
@@ -55,6 +66,9 @@ function GlobalHotkeys({
openGlobalSearch();
}, 0);
});
useHotkeys('shift+h', () => {
handleToggleDarkMode();
});
return <div></div>;
}

43
packages/webapp/src/components/Datatable/DatatableEditable.tsx
View File

@@ -21,30 +21,52 @@ export function DataTableEditable({
}
const DatatableEditableRoot = styled.div`
--x-table-background: #fff;
--x-table-border: #d2dce2;
--x-table-background: var(--color-dark-gray1);
--x-table-border: rgba(255, 255, 255, 0.1);
--x-table-head-border: #d2dce2;
--x-table-head-background: #f2f3fb;
--x-table-head-background: var(--color-dark-gray2);
--x-table-head-border: rgba(255, 255, 255, 0.1);
--x-table-head-text: #415060;
--x-table-head-text: rgba(--color-light-gray1);
--x-color-table-body-input-text: #222;
--x-color-table-body-input-text: var(--color-light-gray2);
--x-color-table-cell-border: #d8d8d8;
--x-color-table-cell-border: rgba(255, 255, 255, 0.1);
.bp4-form-group {
margin-bottom: 0;
}
.table {
border: 1px solid #d2dce2;
border: 1px solid var(--x-table-border);
background-color: var(--x-table-background);
border-radius: 5px;
background-color: #fff;
.th,
.td {
border-left: 1px solid #e2e2e2;
border-left: 1px solid var(--x-table-border);
&:first-of-type {
border-left: 0;
}
}
.thead {
.tr .th {
padding: 9px 14px;
background-color: #f2f3fb;
background-color: var(--x-table-head-background);
font-size: 13px;
color: #415060;
border-bottom: 1px solid #d2dce2;
color: var(--x-table-head-text);
border-bottom: 1px solid var(--x-table-head-border);
&,
.inner-resizer {
@@ -55,7 +77,7 @@ const DatatableEditableRoot = styled.div`
.tbody {
.tr .td {
border-bottom: 0;
border-bottom: 1px solid #d8d8d8;
border-bottom: 1px solid var(--x-color-table-cell-border);
min-height: 38px;
padding: 4px 14px;
@@ -74,8 +96,9 @@ const DatatableEditableRoot = styled.div`
}
.bp4-form-group:not(.bp4-intent-danger) .bp4-input,
.form-group--select-list .bp4-button {
border-color: #ffffff;
color: #222;
border-color: transparent;
box-shadow: 0 0 0;
color: var(--x-color-table-body-input-text);
border-radius: 3px;
text-align: inherit;
}

22
packages/webapp/src/components/Drawer/DrawerActionBar.module.scss Normal file
View File

@@ -0,0 +1,22 @@
.root {
--x-color-background: var(--color-white);
--x-color-background: transparent;
--x-color-border: var(--color-dark-gray1);
--x-color-border: rgba(255, 255, 255, 0.2);
&:global(.bp4-navbar){
background-color: var(--x-color-background);
box-shadow: 0 1px 0 var(--x-color-border);
}
&:global(.bp4-navbar),
:global(.bp4-navbar-group){
height: 45px;
}
:global(.bp4-navbar-divider){
margin-left: 4px;
margin-right: 4px;
}
}

13
packages/webapp/src/components/Drawer/DrawerActionsBar.tsx
View File

@@ -1,13 +1,8 @@
// @ts-nocheck
import React from 'react';
import styled from 'styled-components';
import { Navbar } from '@blueprintjs/core';
import styles from './DrawerActionBar.module.scss';
import { DashboardActionsBar } from '../Dashboard';
export function DrawerActionsBar({ ...props }) {
return <DrawerActionsBarRoot {...props} />;
export function DrawerActionsBar({ children, ...props }) {
return <Navbar className={styles.root}>{children}</Navbar>;
}
const DrawerActionsBarRoot = styled(DashboardActionsBar)`
border-bottom: 1px solid #d9d9da;
`;

5
packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx
View File

@@ -64,7 +64,10 @@ function SubTitle({ children }) {
}
const SubTitleHead = styled.div`
color: #666;
--x-color-text: #666;
--x-color-text: rgba(255, 255, 255, 0.6);
color: var(--x-color-text);
font-size: 12px;
font-weight: 400;
line-height: 1;

22
packages/webapp/src/components/Drawer/DrawerMainTabs.tsx
View File

@@ -18,24 +18,36 @@ export function DrawerMainTabs({ children, ...restProps }) {
const DrawerMainTabsRoot = styled.div`
.bp4-tabs {
--x-tab-list-background: #fff;
--x-tab-list-border: #e1e2e8;
--x-tab-item-text: #7f8596;
--x-tab-list-background: transparent;
--x-tab-list-border: rgba(255, 255, 255, 0.2);
--x-tab-item-text: var(--color-light-gray1);
--x-tab-item-height: 36px;
.bp4-tab-list {
position: relative;
background-color: #fff;
background-color: var(--x-tab-list-background);
padding: 0 15px;
border-bottom: 2px solid #e1e2e8;
border-bottom: 2px solid var(--x-tab-list-border);
> *:not(:last-child) {
margin-right: 25px;
}
.bp4-tab {
color: var(--x-tab-item-text);
line-height: var(--x-tab-item-height);
}
&.bp4-large > .bp4-tab {
font-size: 15px;
color: #7f8596;
margin: 0 1rem;
&[aria-selected='true'],
&:not([aria-disabled='true']):hover {
color: #0052cc;
color: var(--color-primary);
}
}
.bp4-tab-indicator-wrapper .bp4-tab-indicator {

1
packages/webapp/src/components/DrawersContainer.tsx
View File

@@ -29,7 +29,6 @@ import { ReceiptCustomizeDrawer } from '@/containers/Sales/Receipts/ReceiptCusto
import { CreditNoteCustomizeDrawer } from '@/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer';
import { PaymentReceivedCustomizeDrawer } from '@/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer';
import { BrandingTemplatesDrawer } from '@/containers/BrandingTemplates/BrandingTemplatesDrawer';
import { DRAWERS } from '@/constants/drawers';
import { InvoiceSendMailDrawer } from '@/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer';
import { EstimateSendMailDrawer } from '@/containers/Sales/Estimates/EstimateSendMailDrawer';

13
packages/webapp/src/components/Dropzone/Dropzone.module.css
View File

@@ -1,11 +1,19 @@
.root {
--color-dropzone-background: #fff;
--color-dropzone-border: #c5cbd3;
--color-dropzone-background: rgba(255, 255, 255, 0.05);
--color-dropzone-border: rgba(255, 255, 255, 0.1);
padding: 20px;
border: 2px dotted #c5cbd3;
border-radius: 6px;
min-height: 200px;
display: flex;
flex-direction: column;
background: #fff;
border-style: dotted;
border-width: 2px;
border-color: var(--color-dropzone-border);
background: var(--color-dropzone-background);
position: relative;
transition: background-color 0.3s ease, border-color 0.3s ease;
@@ -13,6 +21,7 @@
border-color: rgb(0, 82, 204);
background: rgba(0, 82, 204, 0.05);
}
&.dropzoneReject {
border-color: #AC2F33;
background: rgba(172, 47, 51, 0.05)

12
packages/webapp/src/components/Dropzone/Dropzone.tsx
View File

@@ -13,18 +13,18 @@ import {
import { DropzoneProvider } from './DropzoneProvider';
import { DropzoneAccept, DropzoneIdle, DropzoneReject } from './DropzoneStatus';
import { Box } from '../Layout';
import styles from './Dropzone.module.css';
import { CloudLoadingIndicator } from '../Indicator';
import styles from './Dropzone.module.css';
export type DropzoneStylesNames = 'root' | 'inner';
export type DropzoneVariant = 'filled' | 'light';
export type DropzoneCssVariables = {
root:
| '--dropzone-radius'
| '--dropzone-accept-color'
| '--dropzone-accept-bg'
| '--dropzone-reject-color'
| '--dropzone-reject-bg';
| '--dropzone-radius'
| '--dropzone-accept-color'
| '--dropzone-accept-bg'
| '--dropzone-reject-color'
| '--dropzone-reject-bg';
};
export interface DropzoneProps {

13
packages/webapp/src/components/FinancialSheet/StyledFinancialSheet.tsx
View File

@@ -2,7 +2,7 @@
import styled from 'styled-components';
export const FinancialSheetRoot = styled.div`
border: 2px solid #f0f0f0;
border: 2px solid var(--color-financial-sheet-card-border);
border-radius: 10px;
min-width: 640px;
width: auto;
@@ -12,7 +12,6 @@ export const FinancialSheetRoot = styled.div`
min-height: 400px;
display: flex;
flex-direction: column;
background: #fff;
${(props) =>
props.fullWidth &&
@@ -29,7 +28,7 @@ export const FinancialSheetRoot = styled.div`
${FinancialSheetTitle} {
font-size: 18px;
color: #333;
color: var(--color-financial-sheet-minimal-title-text);
}
${FinancialSheetTitle} + ${FinancialSheetDate} {
margin-top: 8px;
@@ -44,7 +43,7 @@ export const FinancialSheetTitle = styled.h1`
margin: 0;
font-weight: 400;
font-size: 20px;
color: #464646;
color: var(--color-financial-sheet-title-text);
text-align: center;
`;
@@ -53,18 +52,18 @@ export const FinancialSheetType = styled.h6`
margin: 0;
font-size: 16px;
font-weight: 400;
color: #666;
color: var(--color-financial-sheet-type-text);
margin-top: 6px;
`;
export const FinancialSheetDate = styled.div`
text-align: center;
color: #666;
color: var(--color-financial-sheet-date-text);
margin-top: 6px;
`;
export const FinancialSheetFooter = styled.div`
color: #888;
color: var(--color-financial-sheet-footer-text);
text-align: center;
margin-top: auto;
padding-top: 18px;

2
packages/webapp/src/components/Forms/BlueprintFormik.tsx
View File

@@ -9,6 +9,7 @@ import {
Switch,
EditableText,
TextArea,
HTMLSelect,
} from '@blueprintjs-formik/core';
import { MultiSelect, SuggestField } from '@blueprintjs-formik/select';
import { DateInput } from '@blueprintjs-formik/datetime';
@@ -27,4 +28,5 @@ export {
SuggestField as FSuggest,
TextArea as FTextArea,
DateInput as FDateInput,
HTMLSelect as FHTMLSelect,
};

16
packages/webapp/src/components/Forms/Select.tsx
View File

@@ -18,16 +18,23 @@ export function FSelect({ ...props }) {
}
const SelectButton = styled(Button)`
--x-color-select-background: #fff;
--x-color-select-border: #ced4da;
--x-color-select-caret: #8d8d8d;
--x-color-select-background: rgba(17, 20, 24, 0.3);
--x-color-select-border: rgba(255, 255, 255, 0.15);
--x-color-select-caret: rgba(255, 255, 255, 0.25);
outline: none;
box-shadow: 0 0 0 transparent;
border: 1px solid #ced4da;
border: 1px solid var(--x-color-select-border);
position: relative;
padding-right: 30px;
&.bp4-small {
padding-right: 24px;
}
&:not(.is-selected):not([class*='bp4-intent-']):not(.bp4-minimal) {
color: #8f99a8;
}
@@ -36,10 +43,9 @@ const SelectButton = styled(Button)`
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid #8d8d8d;
border-top: 5px solid var(--x-color-select-caret);
position: absolute;
right: 0;
@@ -51,7 +57,7 @@ const SelectButton = styled(Button)`
&:not([class*='bp4-intent-']):not(.bp4-disabled) {
&,
&:hover {
background: #fff;
background: var(--x-color-select-background);
}
}
.bp4-intent-danger & {

23
packages/webapp/src/components/Icons/BigcapitalAlt.tsx Normal file
View File

@@ -0,0 +1,23 @@
interface BigcapitalAltProps extends React.SVGProps<SVGSVGElement> {
}
export function BigcapitalAlt(props: BigcapitalAltProps) {
return (
<svg data-icon="bigcapital-alt" width="214" height="37" viewBox="0 0 309.09 42.89" {...props}>
<desc>bigcapital</desc>
<path fill="currentColor" d="M56,3.16,61.33,8.5,31.94,37.9l-5.35-5.35Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M29.53,6.94l5.35,5.34L5.49,41.67.14,36.33l15.8-15.8Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M94.36,38.87H79.62v-31H94c6.33,0,10.22,3.15,10.22,8V16a7.22,7.22,0,0,1-4.07,6.69c3.58,1.37,5.8,3.45,5.8,7.61v.09C106,36,101.35,38.87,94.36,38.87Zm3.1-21.81c0-2-1.59-3.19-4.47-3.19H86.26v6.55h6.29c3,0,4.91-1,4.91-3.28Zm1.72,12.39c0-2.08-1.54-3.37-5-3.37H86.26V32.9h8.1c3,0,4.82-1.06,4.82-3.36Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M110.56,12.54v-6h7.08v6Zm.18,26.33V15.15h6.72V38.87Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M134,46a22.55,22.55,0,0,1-10.49-2.47l2.3-5a15.52,15.52,0,0,0,8,2.17c4.61,0,6.78-2.21,6.78-6.46V33.08c-2,2.39-4.16,3.85-7.75,3.85-5.53,0-10.53-4-10.53-11.07v-.09c0-7.08,5.09-11.06,10.53-11.06a9.63,9.63,0,0,1,7.66,3.54v-3.1h6.72V33.52C147.2,42.46,142.78,46,134,46Zm6.6-20.27a5.79,5.79,0,0,0-11.56,0v.09a5.42,5.42,0,0,0,5.76,5.49,5.49,5.49,0,0,0,5.8-5.49Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M164,39.41a12.11,12.11,0,0,1-12.35-12.26v-.09a12.18,12.18,0,0,1,12.44-12.35c4.47,0,7.25,1.5,9.47,4l-4.12,4.43a6.93,6.93,0,0,0-5.4-2.61c-3.36,0-5.75,3-5.75,6.46v.09c0,3.63,2.34,6.55,6,6.55,2.26,0,3.8-1,5.44-2.53l3.94,4A12,12,0,0,1,164,39.41Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M191.51,38.87V36.31a9.15,9.15,0,0,1-7.17,3c-4.47,0-8.15-2.57-8.15-7.26V32c0-5.18,3.94-7.57,9.56-7.57a16.74,16.74,0,0,1,5.8,1V25c0-2.79-1.72-4.34-5.09-4.34a17.57,17.57,0,0,0-6.55,1.28l-1.68-5.13a21,21,0,0,1,9.21-1.9c7.34,0,10.57,3.8,10.57,10.22V38.87Zm.13-9.55a10.3,10.3,0,0,0-4.29-.89c-2.88,0-4.65,1.15-4.65,3.27v.09c0,1.82,1.5,2.88,3.67,2.88,3.15,0,5.27-1.73,5.27-4.16Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M217.49,39.32a9.1,9.1,0,0,1-7.39-3.54V46h-6.73V15.15h6.73v3.41a8.7,8.7,0,0,1,7.39-3.85c5.53,0,10.8,4.34,10.8,12.26v.09C228.29,35,223.11,39.32,217.49,39.32ZM221.56,27c0-3.94-2.66-6.55-5.8-6.55S210,23,210,27v.09c0,3.94,2.61,6.55,5.75,6.55s5.8-2.57,5.8-6.55Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M232.93,12.54v-6H240v6Zm.18,26.33V15.15h6.73V38.87Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M253.73,39.27c-4.11,0-6.9-1.63-6.9-7.12V20.91H244V15.15h2.83V9.09h6.73v6.06h5.57v5.76h-5.57V31c0,1.55.66,2.3,2.16,2.3A6.84,6.84,0,0,0,259,32.5v5.4A9.9,9.9,0,0,1,253.73,39.27Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M277.55,38.87V36.31a9.15,9.15,0,0,1-7.18,3c-4.46,0-8.14-2.57-8.14-7.26V32c0-5.18,3.94-7.57,9.56-7.57a16.74,16.74,0,0,1,5.8,1V25c0-2.79-1.73-4.34-5.09-4.34A17.57,17.57,0,0,0,266,21.92l-1.68-5.13a20.94,20.94,0,0,1,9.2-1.9c7.35,0,10.58,3.8,10.58,10.22V38.87Zm.13-9.55a10.31,10.31,0,0,0-4.3-.89c-2.87,0-4.64,1.15-4.64,3.27v.09c0,1.82,1.5,2.88,3.67,2.88,3.14,0,5.27-1.73,5.27-4.16Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M289.72,38.87V6.57h6.72v32.3Z" fill-rule="evenodd"></path>
<path fill="currentColor" d="M302.06,38.87V31.79h7.17v7.08Z" fill-rule="evenodd"></path></svg>
);
}

164
packages/webapp/src/components/NumberFormatDropdown/NumberFormatFields.tsx
View File

@@ -1,139 +1,83 @@
// @ts-nocheck
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup, Checkbox, Switch } from '@blueprintjs/core';
import { CLASSES } from '@/constants/classes';
import { ListSelect } from '@/components';
import { FSelect, FFormGroup, FSwitch } from '@/components';
import { FormattedMessage as T } from '@/components';
import { inputIntent } from '@/utils';
import {
moneyFormat,
negativeFormat,
decimalPlaces,
} from '@/constants/numberFormatsOptions';
import classNames from 'classnames';
/**
* Number Formats Fields.
*/
export default function NumberFormatFields({}) {
export default function NumberFormatFields() {
return (
<div className={'number-format-dropdown__content'}>
{/*------------ Negative formats -----------*/}
<FastField name={'negativeFormat'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'negative_format'} />}
helperText={<ErrorMessage name="negativeFormat" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL)}
>
<ListSelect
items={negativeFormat}
onItemSelect={(format) => {
form.setFieldValue('negativeFormat', format.key);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'key'}
textProp={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FormGroup>
)}
</FastField>
<FFormGroup name={'negativeFormat'} label={<T id={'negative_format'} />}>
<FSelect
name={'negativeFormat'}
items={negativeFormat}
valueAccessor={'key'}
textAccessor={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
filterable
/>
</FFormGroup>
{/*------------ Decimal places -----------*/}
<FastField name={'precision'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'decimal_places'} />}
helperText={<ErrorMessage name="format_money" />}
intent={inputIntent({ error, touched })}
className={classNames(CLASSES.FILL)}
>
<ListSelect
items={decimalPlaces}
onItemSelect={(format) => {
form.setFieldValue('precision', format.key);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'key'}
textProp={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FormGroup>
)}
</FastField>
<FFormGroup name={'precision'} label={<T id={'decimal_places'} />}>
<FSelect
name={'precision'}
items={decimalPlaces}
filterable={false}
valueAccessor={'key'}
textAccessor={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FFormGroup>
{/*------------ Money formats -----------*/}
<FastField name={'formatMoney'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'money_format'} />}
helperText={<ErrorMessage name="formatMoney" />}
intent={inputIntent({ error, touched })}
className={classNames('form-group--money-format', CLASSES.FILL)}
>
<ListSelect
items={moneyFormat}
onItemSelect={(format) => {
form.setFieldValue('formatMoney', format.key);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'key'}
textProp={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FormGroup>
)}
</FastField>
<FFormGroup name={'formatMoney'} label={<T id={'money_format'} />}>
<FSelect
name={'formatMoney'}
items={moneyFormat}
filterable={false}
valueAccessor={'key'}
textAccessor={'text'}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FFormGroup>
<div className="toggles-fields">
{/*------------ show zero -----------*/}
<FastField name={'showZero'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
<Switch
inline={true}
small={true}
label={<T id={'show_zero'} />}
name={'showZero'}
{...field}
/>
</FormGroup>
)}
</FastField>
<FFormGroup name={'showZero'} inline={true}>
<FSwitch
name={'showZero'}
inline={true}
small={true}
label={<T id={'show_zero'} />}
/>
</FFormGroup>
{/*------------ show negative in red-----------*/}
<FastField name={'showInRed'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
<Switch
inline={true}
label={<T id={'show_negative_in_red'} />}
name={'showInRed'}
{...field}
/>
</FormGroup>
)}
</FastField>
<FFormGroup name={'showInRed'} inline={true}>
<FSwitch
name={'showInRed'}
inline={true}
label={<T id={'show_negative_in_red'} />}
/>
</FFormGroup>
{/*------------ Divide on 1000 -----------*/}
<FastField name={'divideOn1000'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
<Switch
inline={true}
label={<T id={'divide_on_1000'} />}
name={'divideOn1000'}
{...field}
/>
</FormGroup>
)}
</FastField>
<FFormGroup name={'divideOn1000'} inline={true}>
<FSwitch
name={'divideOn1000'}
inline={true}
label={<T id={'divide_on_1000'} />}
/>
</FFormGroup>
</div>
</div>
);

15
packages/webapp/src/components/PageForm/FormTopbar.tsx
View File

@@ -13,11 +13,22 @@ export function FormTopbar({ className, children }) {
}
const FormTopBarRoot = styled(Navbar)`
box-shadow: 0 0 0;
border-bottom: 1px solid #c7d5db;
--color-form-topbar-background: #fff;
--color-form-topbar-border: #c7d5db;
--color-form-topbar-background: var(--color-dark-gray1);
--color-form-topbar-border: rgba(255, 255, 255, 0.15);
height: 35px;
padding: 0 20px;
&,
.bp4-dark & {
border-bottom: 1px solid var(--color-form-topbar-border);
background-color: var(--color-form-topbar-background);
box-shadow: 0 0 0;
}
.bp4-navbar-group {
height: 35px;
}

10
packages/webapp/src/components/PageForm/PageForm.tsx
View File

@@ -48,10 +48,16 @@ const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ child
PageFormFooter.displayName = 'PageFormFooter';
const footerActionsStyle = `
--x-color-background: #fff;
--x-color-border: rgb(210, 221, 226);
--x-color-background: var(--color-dark-gray1);
--x-color-border: rgba(255, 255, 255, 0.1);
width: 100%;
background: #fff;
background: var(--x-color-background);
padding: 14px 20px;
border-top: 1px solid rgb(210, 221, 226);
border-top: 1px solid var(--x-color-border);
box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
.bp4-button-group{

14
packages/webapp/src/components/Paper/Paper.module.scss Normal file
View File

@@ -0,0 +1,14 @@
.root{
--x-color-background: #fff;
--x-color-border: #d2dce2;
--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;
}

6
packages/webapp/src/components/Paper/Paper.tsx
View File

@@ -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 (
<x.div
background={'white'}
p={'10px'}
border={'1px solid #d2dce2'}
{...props}
className={clsx(styles.root)}
>
{children}
</x.div>

6
packages/webapp/src/components/Stepper/Stepper.tsx
View File

@@ -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;
`;

14
packages/webapp/src/components/Stepper/StepperStep.tsx
View File

@@ -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`

7
packages/webapp/src/components/TagsControl/TagsControl.module.scss
View File

@@ -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);

28
packages/webapp/src/components/TotalLines/index.tsx
View File

@@ -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;
`}
}

50
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
View File

@@ -1,7 +1,7 @@
// @ts-nocheck
import React from 'react';
import { InputGroup, FormGroup, Position } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import classNames from 'classnames';
@@ -16,12 +16,12 @@ import {
Hint,
FieldRequiredHint,
Icon,
CurrencySelectList,
FSelect,
FormattedMessage as T,
FFormGroup,
} from '@/components';
import { useMakeJournalFormContext } from './MakeJournalProvider';
import { JournalExchangeRateInputField } from './components';
import { currenciesFieldShouldUpdate } from './utils';
import { MakeJournalTransactionNoField } from './MakeJournalTransactionNoField';
/**
@@ -29,6 +29,7 @@ import { MakeJournalTransactionNoField } from './MakeJournalTransactionNoField';
*/
export default function MakeJournalEntriesHeader({}) {
const { currencies } = useMakeJournalFormContext();
const form = useFormikContext();
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
@@ -105,29 +106,30 @@ export default function MakeJournalEntriesHeader({}) {
</FastField>
{/*------------ Currency -----------*/}
<FastField
<FFormGroup
name={'currency_code'}
currencies={currencies}
shouldUpdate={currenciesFieldShouldUpdate}
label={<T id={'currency'} />}
inline
fastField
>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'currency'} />}
className={classNames('form-group--currency', CLASSES.FILL)}
inline={true}
>
<CurrencySelectList
currenciesList={currencies}
selectedCurrencyCode={value}
onCurrencySelected={(currencyItem) => {
form.setFieldValue('currency_code', currencyItem.currency_code);
form.setFieldValue('exchange_rate', '');
}}
defaultSelectText={value}
/>
</FormGroup>
)}
</FastField>
<FSelect
name={'currency_code'}
items={currencies}
onItemChange={(currencyItem) => {
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
/>
</FFormGroup>
{/* ----------- Exchange rate ----------- */}
<JournalExchangeRateInputField

5
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx
View File

@@ -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);
`;

7
packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss
View File

@@ -4,11 +4,16 @@
}
.attachmentButton:not([class*=bp4-intent-]) {
--x-background-color: #fff;
--x-border-color: rgb(206, 212, 218);
--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{

10
packages/webapp/src/containers/Authentication/Authentication.tsx
View File

@@ -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 (
<BodyClassName className={'authentication'}>
<AuthPage>
<AuthInsider>
<AuthLogo>
<Icon icon="bigcapital" height={37} width={214} />
{isDarkMode ? (
<BigcapitalAlt color={"rgba(255, 255, 255, 0.6)"} height={37} width={214} />
) : (
<Icon icon="bigcapital" height={37} width={214} />
)}
</AuthLogo>
<AuthMetaBootProvider>

19
packages/webapp/src/containers/Authentication/_components.tsx
View File

@@ -27,10 +27,16 @@ export const AuthInsiderContent = styled.div`
position: relative;
`;
export const AuthInsiderCard = styled.div`
border: 1px solid #d5d5d5;
--x-color-background: #fff;
--x-color-background: var(--color-dark-gray2);
--x-color-border: #d5d5d5;
--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 +65,10 @@ export const AuthFooterLinks = styled.div`
`;
export const AuthFooterLink = styled.p`
color: #666;
--x-color-text: #666;
--x-color-text: rgba(255, 255, 255, 0.75);
color: var(--x-color-text);
margin: 0;
`;
@@ -67,11 +76,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);
}
}
`;

6
packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx
View File

@@ -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 (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Button
intent={Intent.PRIMARY}
@@ -37,7 +37,7 @@ function BrandingTemplateActionsBarRoot({ openDrawer }) {
{label}
</Button>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}
export const BrandingTemplateActionsBar = compose(withDrawerActions)(

2
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
View File

@@ -166,7 +166,7 @@ const DashboardConstrantTable = styled(DataTable)`
.table {
.thead {
.th {
background: #fff;
// background: #fff;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 13px;

9
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
View File

@@ -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;
`;

4
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountsTransactionsAll.tsx
View File

@@ -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;
`;

4
packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx
View File

@@ -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;
`;

23
packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss
View File

@@ -1,11 +1,24 @@
.root{
.root {
--color-background: #fff;
--color-background: #c5cbd3;
--color-border: #e1e2e8;
--color-border: rgba(255, 255, 255, 0.2);
--color-text: var(--color-dark-gray1);
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);
}
}
}
}

4
packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss
View File

@@ -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;
}
}
}

2
packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx
View File

@@ -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;
`;

16
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss
View File

@@ -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;
}

4
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss
View File

@@ -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;
}

52
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
View File

@@ -1,52 +1,68 @@
.root {
--item-background: #fff;
--item-background: var(--color-dark-gray4);
.root{
background: #fff;
--item-border: #d6dbe3;
--item-border: rgba(255, 255, 255, 0.2);
--item-active-border: #88abdb;
--item-label-text: #252a33;
--item-label-text: var(--color-light-gray4);
--item-date-text: #5c7080;
--item-date-text: var(--color-light-gray1);
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;
}
color: var(--item-date-text);
}

2
packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.module.scss
View File

@@ -11,7 +11,7 @@
.footer {
padding: 11px 20px;
border-top: 1px solid #ced4db;
border-top: 1px solid var(--color-aside-divider);
}
.form{

11
packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
View File

@@ -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 ? (
<SidebarMenuItem item={item} index={index} />
) : // Group item type.
item.type === ISidebarMenuItemType.Group ? (
<MenuItemLabel text={item.text} />
) : null;
item.type === ISidebarMenuItemType.Group ? (
<MenuItemLabel text={item.text} />
) : null;
}
/**

46
packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx
View File

@@ -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({
<FInputGroup name={'email'} />
</FFormGroup>
{/* ----------- Role name ----------- */}
<FastField name={'role_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'invite_user.label.role_name'} />}
labelInfo={<FieldRequiredHint />}
helperText={<ErrorMessage name="role_id" />}
className={classNames(CLASSES.FILL, 'form-group--role_name')}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={roles}
onItemSelect={({ id }) => {
form.setFieldValue('role_id', id);
}}
selectedItem={value}
selectedItemProp={'id'}
textProp={'name'}
// labelProp={'id '}
popoverProps={{ minimal: true }}
intent={inputIntent({ error, touched })}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'role_id'}
label={<T id={'invite_user.label.role_name'} />}
labelInfo={<FieldRequiredHint />}
>
<FSelect
name={'role_id'}
items={roles}
valueAccessor={'id'}
textAccessor={'name'}
popoverProps={{ minimal: true }}
/>
</FFormGroup>
</div>
<div className={CLASSES.DIALOG_FOOTER}>

6
packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
View File

@@ -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 (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Can I={AccountAction.Edit} a={AbilitySubject.Account}>
<Button
@@ -137,7 +137,7 @@ function AccountDrawerActionBar({
</>
)}
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}
export default compose(

5
packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
View File

@@ -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 (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Popover
content={
@@ -163,7 +164,7 @@ function CustomerDetailsActionsBar({
}}
/>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}

4
packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
View File

@@ -42,4 +42,6 @@ export default function InvoiceGLEntriesTable() {
const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)``;
const InvoiceGLEntriesRoot = styled(Card)``;
const InvoiceGLEntriesRoot = styled(Card)`
`;

6
packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
View File

@@ -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 (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Can I={ItemAction.Edit} a={AbilitySubject.Item}>
<Button
@@ -75,7 +75,7 @@ function ItemDetailActionsBar({
</Can>
<ItemDetailActionsMoreBtn />
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}

7
packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx
View File

@@ -17,10 +17,10 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
import withDrawerActions from '@/containers/Drawer/withDrawerActions';
import {
DashboardActionsBar,
Can,
Icon,
FormattedMessage as T,
DrawerActionsBar,
} from '@/components';
import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
import { compose } from '@/utils';
@@ -52,7 +52,7 @@ function PaymentMadeDetailActionsBar({
};
return (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
<Button
@@ -62,6 +62,7 @@ function PaymentMadeDetailActionsBar({
onClick={handleEditPaymentMade}
/>
</Can>
<Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
<NavbarDivider />
<Button
@@ -73,7 +74,7 @@ function PaymentMadeDetailActionsBar({
/>
</Can>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}

6
packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx
View File

@@ -24,8 +24,8 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
import {
Can,
Icon,
DashboardActionsBar,
FormattedMessage as T,
DrawerActionsBar,
} from '@/components';
import { VendorMoreMenuItem } from './utils';
import {
@@ -80,7 +80,7 @@ function VendorDetailsActionsBar({
};
return (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Popover
content={
@@ -135,7 +135,7 @@ function VendorDetailsActionsBar({
}}
/>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}

4
packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss
View File

@@ -1,5 +1,5 @@
.root {
background: #fff;
background: var(--color-element-customize-background);
}
.mainFields{
@@ -15,7 +15,7 @@
.footerActions{
padding: 10px 16px;
border-top: 1px solid #d9d9d9;
border-top: 1px solid var(--color-element-customize-divider);
flex-flow: row-reverse;
}

6
packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss
View File

@@ -2,13 +2,13 @@
.root {
align-items: center;
border-radius: 0;
box-shadow: 0 1px 0 rgba(17, 20, 24, .15);
box-shadow: 0 1px 0 var(--color-element-customize-divider);
display: flex;
flex: 0 0 auto;
min-height: 55px;
padding: 5px 5px 5px 20px;
position: relative;
background-color: #fff;
background-color: var(--color-element-customize-header-background);
z-index: 1;
}
@@ -16,5 +16,5 @@
margin: 0;
font-size: 20px;
font-weight: 500;
color: #666;
color: var(--color-element-customize-header-title-text);
}

5
packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx
View File

@@ -1,6 +1,7 @@
import { Button, Classes } from '@blueprintjs/core';
import { Group, Icon } from '@/components';
import styles from './ElementCustomizeHeader.module.scss';
import { useIsDarkMode } from '@/hooks/useDarkMode';
interface ElementCustomizeHeaderProps {
label?: string;
@@ -15,6 +16,8 @@ export function ElementCustomizeHeader({
onClose,
children,
}: ElementCustomizeHeaderProps) {
const isDarkmode = useIsDarkMode();
const handleClose = () => {
onClose && onClose();
};
@@ -25,7 +28,7 @@ export function ElementCustomizeHeader({
<Button
aria-label="Close"
className={Classes.DIALOG_CLOSE_BUTTON}
icon={<Icon icon={'smallCross'} color={'#000'} />}
icon={<Icon icon={'smallCross'} color={isDarkmode ? '#fff' : '#000'} />}
minimal={true}
onClick={handleClose}
style={{ marginLeft: 'auto' }}

6
packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx
View File

@@ -15,7 +15,11 @@ function ElementCustomizePreviewRoot({ closeDrawer }) {
return (
<Stack
spacing={0}
style={{ borderLeft: '1px solid #D9D9D9', height: '100vh', flex: '1 1' }}
style={{
borderLeft: '1px solid var(--color-element-customize-divider)',
height: '100vh',
flex: '1 1',
}}
>
<ElementCustomizeHeader
label={'Preview'}

7
packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx
View File

@@ -5,7 +5,12 @@ export function ElementCustomizePreviewContent() {
const { PaperTemplate } = useElementCustomizeContext();
return (
<Stack backgroundColor="#F5F5F5" overflow="auto" flex="1 1 0%" spacing={0}>
<Stack
backgroundColor="var(--color-element-customize-preview-background)"
overflow="auto"
flex="1 1 0%"
spacing={0}
>
{PaperTemplate}
</Stack>
);

2
packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss
View File

@@ -8,7 +8,7 @@
.content{
padding: 5px;
flex: 1;
border-right: 1px solid #E1E1E1;
border-right: 1px solid var(--color-element-customize-divider);
}
.tabsList{

12
packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss
View File

@@ -1,10 +1,16 @@
.root {
--x-border-color: #E1E1E1;
--x-border-color: rgba(225, 225, 225, 0.15);
--x-color-placeholder-text: #738091;
--x-color-placeholder-text: rgba(225, 225, 225, 0.65);
min-height: 120px;
height: 120px;
padding: 10px;
border: 1px solid;
display: flex;
border: 1px solid #E1E1E1;
border-style: solid;
border-color: var(--x-border-color);
border-width: 1px;;
position: relative;
display: flex;
justify-content: center;
@@ -25,7 +31,7 @@
}
.contentPrePreview {
color: #738091;
color: var(--x-color-placeholder-text);
font-size: 13px;
height: 100%;
justify-content: center;

10
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx
View File

@@ -8,10 +8,7 @@ import {
TotalLineBorderStyle,
TotalLineTextStyle,
} from '@/components';
import {
useExpenseSubtotalFormatted,
useExpenseTotalFormatted,
} from './utils';
import { useExpenseSubtotalFormatted, useExpenseTotalFormatted } from './utils';
export function ExpenseFormFooterRight() {
const totalFormatted = useExpenseTotalFormatted();
@@ -34,6 +31,9 @@ export function ExpenseFormFooterRight() {
}
const ExpensesTotalLines = styled(TotalLines)`
--x-color-text: #555555;
--x-color-text: var(--color-light-gray4);
width: 100%;
color: #555555;
color: var(--x-color-text);
`;

50
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
View File

@@ -3,7 +3,11 @@ import React from 'react';
import { FormGroup, Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FastField, ErrorMessage } from 'formik';
import { CustomersSelect, FInputGroup, FormattedMessage as T } from '@/components';
import {
CustomersSelect,
FInputGroup,
FormattedMessage as T,
} from '@/components';
import classNames from 'classnames';
import { CLASSES } from '@/constants/classes';
import {
@@ -14,8 +18,8 @@ import {
} from '@/utils';
import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
import {
CurrencySelectList,
FFormGroup,
FSelect,
AccountsSelect,
FieldRequiredHint,
Hint,
@@ -75,30 +79,24 @@ export default function ExpenseFormHeader() {
/>
</FFormGroup>
<FastField name={'currency_code'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'currency'} />}
className={classNames(
'form-group--select-list',
'form-group--currency',
Classes.FILL,
)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="currency_code" />}
inline={true}
>
<CurrencySelectList
currenciesList={currencies}
selectedCurrencyCode={value}
onCurrencySelected={(currencyItem) => {
form.setFieldValue('currency_code', currencyItem.currency_code);
}}
defaultSelectText={value}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'currency_code'}
label={<T id={'currency'} />}
className={classNames(Classes.FILL)}
inline={true}
fastField={true}
>
<FSelect
name={'currency_code'}
items={currencies}
valueAccessor={'currency_code'}
textAccessor={'currency_code'}
labelAccessor={'currency_code'}
popoverProps={{ minimal: true }}
fill={true}
fastField={true}
/>
</FFormGroup>
{/* ----------- Exchange rate ----------- */}
<ExpensesExchangeRateInputField

14
packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx
View File

@@ -47,16 +47,21 @@ export default function APAgingSummaryTable({
}
const APAgingSummaryDataTable = styled(ReportDataTable)`
--color-table-text-color: var(--color-light-gray1);
--color-table-total-text-color: var(--color-light-gray4);
--color-table-total-border-top: #bbb;
--color-table-total-border-top: var(--color-dark-gray5);
.table {
.tbody .tr {
.td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.32rem;
padding-bottom: 0.32rem;
}
&:not(.no-results) {
.td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
@@ -67,8 +72,9 @@ const APAgingSummaryDataTable = styled(ReportDataTable)`
font-weight: 500;
.td {
border-top: 1px solid #bbb;
border-bottom: 3px double #333;
border-top: 1px solid var(--color-table-total-border-top);
border-bottom-width: 3px;
border-bottom-style: double;
}
}
}

15
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx
View File

@@ -47,17 +47,21 @@ export default function ReceivableAgingSummaryTable({
}
const ARAgingSummaryDataTable = styled(ReportDataTable)`
--color-table-text-color: var(--color-light-gray1);
--color-table-total-text-color: var(--color-light-gray4);
--color-table-total-border-top: #bbb;
--color-table-total-border-top: var(--color-dark-gray5);
.table {
.tbody .tr {
.td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.32rem;
padding-bottom: 0.32rem;
}
&:not(.no-results) {
.td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
@@ -68,8 +72,9 @@ const ARAgingSummaryDataTable = styled(ReportDataTable)`
font-weight: 500;
.td {
border-top: 1px solid #bbb;
border-bottom: 3px double #333;
border-top: 1px solid var(--color-table-total-border-top);
border-bottom-width: 3px;
border-bottom-style: double;
}
}
}

20
packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
View File

@@ -55,13 +55,16 @@ export default function BalanceSheetTable({
}
const BalanceSheetDataTable = styled(ReportDataTable)`
--color-table-text-color: var(--color-light-gray1);
--color-table-total-text-color: var(--color-light-gray4);
.table {
.tbody .tr {
.td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.32rem;
padding-bottom: 0.32rem;
color: #252A31;
color: var(--color-table-text-color);
}
&.is-expanded {
.td:not(.name) .cell-inner {
@@ -70,19 +73,22 @@ const BalanceSheetDataTable = styled(ReportDataTable)`
}
&.row_type--TOTAL {
.td {
color: var(--color-table-total-text-color);
font-weight: 500;
border-top: 1px solid #bbb;
color: #000;
border-top-width: 1px;
border-top-style: solid;
}
}
&:last-of-type .td {
border-bottom: 1px solid #bbb;
border-bottom-width: 1px;
border-bottom-style: solid;
}
&.row_type--TOTAL.row-id--ASSETS,
&.row_type--TOTAL.row-id--LIABILITY_EQUITY {
.td {
border-bottom: 3px double #000;
color: var(--color-table-total-text-color);
border-bottom-width: 3px;
border-bottom-style: double;
}
}
}

19
packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx
View File

@@ -57,25 +57,28 @@ const CashflowStatementDataTable = styled(DataTable)`
.tbody {
.tr:not(.no-results) {
.td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.32rem;
padding-bottom: 0.32rem;
color: #252a31;
}
&.row_type--ACCOUNTS {
border-top: 1px solid #bbb;
.td {
border-top-width: 1px;
border-top-style: solid;
}
}
&.row-id--CASH_END_PERIOD {
border-bottom: 3px double #333;
.td {
border-bottom-width: 3px;
border-bottom-style: double;
}
}
&.row_type--TOTAL {
font-weight: 500;
.td {
color: #000;
}
&:not(:first-child) .td {
border-top: 1px solid #bbb;
border-top-width: 1px;
border-top-style: solid;
}
}
}

25
packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx
View File

@@ -43,21 +43,34 @@ export default function CustomersBalanceSummaryTable({
}
const CustomerBalanceDataTable = styled(ReportDataTable)`
--x-table-total-border-bottom-color: #000;
--x-table-total-border-top-color: #bbb;
--x-table-total-border-bottom-color: var(
--color-datatable-constrant-cell-border
);
--x-table-total-border-top-color: var(
--color-datatable-constrant-cell-border
);
.table {
.tbody {
.tr:not(.no-results) {
.td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
&.row_type--TOTAL {
font-weight: 500;
.td {
border-top: 1px solid #bbb;
border-bottom: 3px double #333;
font-weight: 500;
border-top-width: 1px;
font-weight: 500;
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--x-table-total-border-top-color);
border-bottom-style: double;
border-bottom-width: 3px;
border-bottom-color: var(--x-table-total-border-bottom-color);
}
}
}

15
packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx
View File

@@ -57,6 +57,11 @@ export default function CustomersTransactionsTable({
}
const CustomersTransactionsDataTable = styled(DataTable)`
--color-table-border-left-color: #ececec;
--color-table-customer-border-color: #ddd;
--color-table-border-left-color: var(--color-dark-gray4);
--color-table-customer-border-color: var(--color-dark-gray4);
.table {
.tbody {
.tr .td {
@@ -64,10 +69,10 @@ const CustomersTransactionsDataTable = styled(DataTable)`
padding-bottom: 0.36rem;
}
.tr:not(.no-results) .td:not(:first-of-type) {
border-left: 1px solid #ececec;
border-left: 1px solid var(--color-table-border-left-color);
}
.tr:last-child .td {
border-bottom: 1px solid #e0e0e0;
border-bottom-width: 1px;
}
.tr.row_type {
@@ -83,7 +88,7 @@ const CustomersTransactionsDataTable = styled(DataTable)`
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
border-top: 1px solid var(--color-table-customer-border-color);
}
}
&--OPENING_BALANCE,
@@ -97,12 +102,12 @@ const CustomersTransactionsDataTable = styled(DataTable)`
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
border-top: 1px solid var(--color-table-customer-border-color);
}
}
&--CUSTOMER:last-child {
.td {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--color-table-customer-border-color);
}
}
}

2
packages/webapp/src/containers/FinancialStatements/FinancialReportPage.tsx
View File

@@ -21,9 +21,9 @@ export const FinancialComputeAlert = styled.div`
position: relative;
padding: 8px 20px;
border-radius: 2px;
background-color: #fdecda;
color: #342515;
font-size: 13px;
background-color: var(--color-financial-report-background);
button {
font-size: 12px;

49
packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
View File

@@ -1,15 +1,18 @@
// @ts-nocheck
import React from 'react';
import { FastField } from 'formik';
import {
PopoverInteractionKind,
Tooltip,
MenuItem,
Position,
FormGroup,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { ListSelect, MODIFIER, FormattedMessage as T } from '@/components';
import {
FFormGroup,
FSelect,
MODIFIER,
FormattedMessage as T,
} from '@/components';
import { CLASSES } from '@/constants/classes';
import { filterAccountsOptions } from './constants';
@@ -19,13 +22,11 @@ const SUBMENU_POPOVER_MODIFIERS = {
preventOverflow: { boundariesElement: 'viewport', padding: 40 },
};
export default function FinancialStatementsFilter({
items = filterAccountsOptions,
label = <T id={'filter_accounts'} />,
...restProps
}) {
const filterRenderer = (item, { handleClick, modifiers, query }) => {
return (
<Tooltip
@@ -43,29 +44,19 @@ export default function FinancialStatementsFilter({
};
return (
<FastField name={'filterByOption'}>
{({ form: { setFieldValue }, field: { value } }) => (
<FormGroup
label={label}
className="form-group--select-list bp4-fill"
inline={false}
>
<ListSelect
items={items}
itemRenderer={filterRenderer}
popoverProps={{ minimal: true }}
filterable={false}
selectedItem={value}
selectedItemProp={'key'}
textProp={'name'}
onItemSelect={(item) => {
setFieldValue('filterByOption', item.key);
}}
className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
{...restProps}
/>
</FormGroup>
)}
</FastField>
<FFormGroup name={'filterByOption'} label={label} inline={false}>
<FSelect
name={'filterByOption'}
items={items}
itemRenderer={filterRenderer}
popoverProps={{ minimal: true }}
filterable={false}
textAccessor={'name'}
labelAccessor={'name'}
valueAccessor={'key'}
className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
{...restProps}
/>
</FFormGroup>
);
}

16
packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx
View File

@@ -69,6 +69,14 @@ export default function GeneralLedgerTable({ companyName }) {
}
const GeneralLedgerDataTable = styled(ReportDataTable)`
--color-table-text-color: var(--color-light-gray1);
--color-table-total-text-color: #000;
--color-table-total-text-color: var(--color-light-gray4);
--color-table-border-color: #ececec;
--color-table-border-color: var(--color-dark-gray4);
--color-table-total-border-color: #ddd;
--color-table-total-border-color: var(--color-dark-gray4);
.tbody {
.tr .td {
padding-top: 0.2rem;
@@ -80,10 +88,10 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
}
}
.tr:not(.no-results) .td:not(:first-of-type) {
border-left: 1px solid #ececec;
border-left: 1px solid var(--color-table-border-color);
}
.tr:last-child .td {
border-bottom: 1px solid #ececec;
border-bottom: 1px solid var(--color-table-border-color);
}
.tr.row_type {
&--ACCOUNT {
@@ -100,7 +108,7 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
&--OPENING_BALANCE,
&--CLOSING_BALANCE {
.td {
color: #000;
color: var(--color-table-total-text-color);
}
.date {
font-weight: 500;
@@ -118,7 +126,7 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
font-weight: 500;
}
.td {
border-top: 1px solid #ddd;
border-top: 1px solid var(--color-table-total-border-color);
}
}
}

20
packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx
View File

@@ -56,6 +56,13 @@ export function InventoryItemDetailsTable({
}
const InventoryItemDetailsDataTable = styled(ReportDataTable)`
--color-table-text: var(--color-light-gray1);
--color-table-total-text: var(--color-light-gray4);
--color-table-border: #ececec;
--color-report-table-border: var(--color-dark-gray4);
--color-table-total-border: #ddd;
--color-table-total-border: var(--color-dark-gray4);;
.table {
.tbody {
.tr .td {
@@ -64,20 +71,17 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
}
.tr:not(.no-results) .td:not(:first-of-type) {
border-left: 1px solid #ececec;
border-left: 1px solid var(--color-report-table-border);
}
.tr:last-child .td {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--color-table-total-border);
}
.tr.row_type {
&--ITEM {
.td {
&.transaction_type {
border-left-color: transparent;
}
&.date {
.cell-inner {
white-space: nowrap;
@@ -86,7 +90,7 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
border-top: 1px solid var(--color-table-total-border);
}
}
@@ -94,6 +98,10 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
&--OPENING_ENTRY,
&--CLOSING_ENTRY {
font-weight: 500;
.td {
color: var(--color-table-total-text);
}
}
&--ITEM {

13
packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx
View File

@@ -65,14 +65,20 @@ export function JournalTable({ companyName }) {
}
const JournalDataTable = styled(ReportDataTable)`
--color-table-text-color: var(--color-light-gray1);
--color-table-total-text-color: var(--color-light-gray4);
--color-table-border-color: var(--color-dark-gray4);
--color-table-total-border-color: #dbdbdb;
--color-table-total-border-color: var(--color-table-border-color);
.table {
.tbody {
.tr:not(.no-results) .td {
padding: 0.3rem 0.4rem;
color: #000;
color: var(--color-table-text-color);
border-bottom-color: transparent;
border-left: 1px solid var(--color-table-border-color);
min-height: 28px;
border-left: 1px solid #ececec;
&:first-of-type {
border-left: 0;
@@ -80,11 +86,12 @@ const JournalDataTable = styled(ReportDataTable)`
}
.tr:not(.no-results):last-child {
.td {
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid var(--color-table-total-border-color);
}
}
.tr.row_type--TOTAL{
font-weight: 600;
color: var(--color-table-total-text-color);
}
.tr:not(.no-results) {
height: 28px;

15
packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx
View File

@@ -55,13 +55,16 @@ export default function ProfitLossSheetTable({
}
const ProfitLossDataTable = styled(ReportDataTable)`
--color-table-text-color: var(--color-light-gray1);
--color-table-total-text-color: var(--color-light-gray4);
.table {
.tbody .tr {
.td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.32rem;
padding-bottom: 0.32rem;
color: #252A31;
color: var(--color-table-text-color);
}
&.is-expanded {
.td:not(.name) .cell-inner {
@@ -71,12 +74,14 @@ const ProfitLossDataTable = styled(ReportDataTable)`
&.row_type--TOTAL {
.td {
font-weight: 500;
border-top: 1px solid #bbb;
color: #000;
border-top-width: 1px;
border-top-style: solid;
color: var(--color-table-total-text-color);
}
}
&:last-of-type .td {
border-bottom: 3px double #000;
border-bottom-width: 3px;
border-bottom-style: double;
}
}
}

19
packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx
View File

@@ -52,16 +52,31 @@ const PurchasesByItemsSheet = styled(FinancialSheet)`
`;
const PurchasesByItemsDataTable = styled(ReportDataTable)`
--x-table-total-border-bottom-color: #000;
--x-table-total-border-top-color: #bbb;
--x-table-total-border-bottom-color: var(
--color-datatable-constrant-cell-border
);
--x-table-total-border-top-color: var(
--color-datatable-constrant-cell-border
);
.table {
.tbody {
.tr .td {
border-bottom-width: 0;
padding-top: 0.36rem;
padding-bottom: 0.36rem;
}
.tr.row_type--TOTAL .td {
border-top: 1px solid #bbb;
border-top-width: 1px;
font-weight: 500;
border-bottom: 3px double #000;
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--x-table-total-border-top-color);
border-bottom-style: double;
border-bottom-width: 3px;
border-bottom-color: var(--x-table-total-border-bottom-color);
}
}
}

20
packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
View File

@@ -52,17 +52,31 @@ const SalesByItemsSheet = styled(FinancialSheet)`
`;
const SalesByItemsDataTable = styled(ReportDataTable)`
--x-table-total-border-bottom-color: #000;
--x-table-total-border-top-color: #bbb;
--x-table-total-border-bottom-color: var(
--color-datatable-constrant-cell-border
);
--x-table-total-border-top-color: var(
--color-datatable-constrant-cell-border
);
.table {
.tbody {
.tr .td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.tr.row_type--TOTAL .td {
border-top: 1px solid #bbb;
border-top-width: 1px;
font-weight: 500;
border-bottom: 3px double #000;
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--x-table-total-border-top-color);
border-bottom-style: double;
border-bottom-width: 3px;
border-bottom-color: var(--x-table-total-border-bottom-color);
}
}
}

49
packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
View File

@@ -1,8 +1,12 @@
// @ts-nocheck
import React from 'react';
import { FormGroup } from '@blueprintjs/core';
import { FastField } from 'formik';
import { Row, Col, ListSelect, FormattedMessage as T } from '@/components';
import {
Row,
Col,
FSelect,
FormattedMessage as T,
FFormGroup,
} from '@/components';
import { displayColumnsByOptions } from './constants';
/**
@@ -14,29 +18,22 @@ export default function SelectsListColumnsBy(props) {
return (
<Row>
<Col xs={4}>
<FastField name={'displayColumnsType'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'display_report_columns'} />}
className="form-group-display-columns-by form-group--select-list bp4-fill"
inline={false}
{...formGroupProps}
>
<ListSelect
items={displayColumnsByOptions}
filterable={false}
selectedItem={value}
selectedItemProp={'key'}
textProp={'name'}
onItemSelect={(item) => {
form.setFieldValue('displayColumnsType', item.key);
}}
popoverProps={{ minimal: true }}
{...selectListProps}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'displayColumnsType'}
label={<T id={'display_report_columns'} />}
inline={false}
{...formGroupProps}
>
<FSelect
name={'displayColumnsType'}
items={displayColumnsByOptions}
valueAccessor={'key'}
textAccessor={'name'}
filterable={false}
popoverProps={{ minimal: true }}
{...selectListProps}
/>
</FFormGroup>
</Col>
</Row>
);

16
packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx
View File

@@ -48,20 +48,24 @@ export default function TrialBalanceSheetTable({ companyName }) {
}
const TrialBalanceDataTable = styled(ReportDataTable)`
--color-table-text-color: var(--color-light-gray1);
--color-table-total-text-color: var(--color-light-gray4);
.table {
.tbody {
.tr .td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.36rem;
padding-bottom: 0.36rem;
}
.balance.td {
border-top-color: #000;
color: var(--color-table-text-color);
}
.tr.row_type--TOTAL .td {
border-top: 1px solid #bbb;
font-weight: 500;
border-bottom: 3px double #000;
color: var(--color-table-total-text-color);
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 3px;
border-bottom-style: double;
}
}
}

25
packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
View File

@@ -44,21 +44,34 @@ export default function VendorsBalanceSummaryTable({
const VendorBalanceFinancialSheet = styled(FinancialSheet)``;
const VendorBalanceDataTable = styled(ReportDataTable)`
--x-table-total-border-bottom-color: #333;
--x-table-total-border-top-color: #bbb;
--x-table-total-border-bottom-color: var(
--color-datatable-constrant-cell-border
);
--x-table-total-border-top-color: var(
--color-datatable-constrant-cell-border
);
.table {
.tbody {
.tr:not(.no-results) {
.td {
border-bottom: 0;
border-bottom-width: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
&.row_type--TOTAL {
font-weight: 500;
.td {
border-top: 1px solid #bbb;
border-bottom: 3px double #333;
font-weight: 500;
border-top-width: 1px;
font-weight: 500;
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--x-table-total-border-top-color);
border-bottom-style: double;
border-bottom-width: 3px;
border-bottom-color: var(--x-table-total-border-bottom-color);
}
}
}

18
packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx
View File

@@ -60,19 +60,23 @@ export default function VendorsTransactionsTable({
}
const VendorsTransactionsDataTable = styled(DataTable)`
--color-table-border-left-color: #ececec;
--color-table-customer-border-color: #ddd;
--color-table-border-left-color: var(--color-dark-gray4);
--color-table-customer-border-color: var(--color-dark-gray4);
.table {
.tbody {
.tr .td {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.tr:not(.no-results) .td {
border-left: 1px solid #ececec;
.tr:not(.no-results) .td:not(:first-of-type) {
border-left: 1px solid var(--color-table-border-left-color);
}
.tr:last-child .td {
border-bottom: 1px solid #e0e0e0;
border-bottom-width: 1px;
}
.tr.row_type {
&--VENDOR {
.td {
@@ -81,7 +85,7 @@ const VendorsTransactionsDataTable = styled(DataTable)`
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
border-top: 1px solid var(--color-table-customer-border-color);
}
}
&--OPENING_BALANCE,
@@ -95,12 +99,12 @@ const VendorsTransactionsDataTable = styled(DataTable)`
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
border-top: 1px solid var(--color-table-customer-border-color);
}
}
&--VENDOR:last-child {
.td {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--color-table-customer-border-color);
}
}
}

17
packages/webapp/src/containers/Import/ImportDropzone.module.css
View File

@@ -1,32 +1,35 @@
.root {
--color-import-dropzone-title-text: #5F6B7C;
--color-import-dropzone-subtitle-text: #8F99A8;
--color-import-dropzone-hint-text: #8F99A8;
--color-import-dropzone-title-text: var(--color-light-gray2);
--color-import-dropzone-subtitle-text: var(--color-light-gray1);
--color-import-dropzone-hint-text: rgba(255, 255, 255, 0.4);
}
.title{
color: #5F6B7C;
color: var(--color-import-dropzone-title-text);
font-weight: 600;
}
.iconWrap{
color: #8F99A8;
}
.subtitle {
color: #8F99A8;
color: var(--color-import-dropzone-subtitle-text);
}
.dropzoneContent{
text-align: center;
margin: auto;
}
.buttons-wrap {
margin-top: 12px;
}
.dropzoneHint{
display: flex;
font-size: 12px;
margin-top: 6px;
color: #8F99A8;
color: var(--color-import-dropzone-hint-text);
justify-content: space-between;
}

2
packages/webapp/src/containers/Import/ImportDropzone.tsx
View File

@@ -9,7 +9,7 @@ export function ImportDropzone() {
const { hideAlerts } = useAlertsManager();
return (
<Stack spacing={0}>
<Stack spacing={0} className={styles.root}>
<Field id={'file'} name={'file'} type="file">
{({ form }) => (
<ImportDropzoneField

2
packages/webapp/src/containers/Import/ImportFileFooterActions.tsx
View File

@@ -4,8 +4,8 @@ import { Group } from '@/components';
import { CLASSES } from '@/constants';
import { Button, Intent } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import styles from './ImportFileActions.module.scss';
import { useImportFileContext } from './ImportFileProvider';
import styles from './ImportFileActions.module.scss';
export function ImportFileUploadFooterActions() {
const { isSubmitting } = useFormikContext();

28
packages/webapp/src/containers/Import/ImportSampleDownload.module.scss
View File

@@ -1,23 +1,31 @@
.root {
--color-sample-download-background: #fff;
--color-sample-download-border: #d3d8de;
--color-sample-download-title-text: #5f6b7c;
--color-sample-download-desc-text: #8f99a8;
--color-sample-download-background: var(--color-dark-gray3);
--color-sample-download-border: var(--color-dark-gray5);
--color-sample-download-title-text: var(--color-light-gray1);
--color-sample-download-desc-text: var(--color-light-gray1);
.root{
background: #fff;
border: 1px solid #D3D8DE;
background: var(--color-sample-download-background);
border: 1px solid var(--color-sample-download-border);
border-radius: 5px;
padding: 16px;
padding: 16px;
}
.description{
.description {
margin: 0;
margin-top: 6px;
color: #8F99A8;
color: var(--color-sample-download-desc-text);
}
.title{
color: #5F6B7C;
.title {
color: var(--color-sample-download-title-text);
font-weight: 600;
font-size: 14px;
}
.buttonWrap{
.buttonWrap {
flex: 25% 0;
text-align: right;
}
}

5
packages/webapp/src/containers/Import/ImportStepper.module.scss
View File

@@ -1,7 +1,10 @@
.content {
--border-color: #DCE0E5;
--border-color: var(--color-dark-gray5);
margin-top: 0;
margin-bottom: 0;
border-top: 1px solid #DCE0E5;
border-top: 1px solid var(--border-color);
}
.root {

2
packages/webapp/src/containers/ItemsCategories/ItemCategoriesImport.tsx
View File

@@ -19,7 +19,7 @@ export default function ItemCategoriesImport() {
onImportSuccess={handleImportSuccess}
onCancelClick={handleCancelBtnClick}
exampleTitle="Item Categories Example"
/>
/>
</DashboardInsider>
);
}

2
packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
View File

@@ -1,4 +1,4 @@
import { FCheckbox, Group } from '@/components';
import { Group } from '@/components';
import { useUncontrolled } from '@/hooks/useUncontrolled';
import { Checkbox, Text } from '@blueprintjs/core';
import { useFormikContext } from 'formik';

10
packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx
View File

@@ -1,3 +1,4 @@
// @ts-nocheck
import { Button, Classes, Intent, Text } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FFormGroup, Group, Stack } from '@/components';
@@ -5,6 +6,7 @@ import { FColorInput } from '@/components/Forms/FColorInput';
import { CompanyLogoUpload } from '@/containers/ElementCustomize/components/CompanyLogoUpload';
import { PreferencesBrandingFormValues } from './_types';
import styles from './PreferencesBranding.module.scss';
import { useIsDarkMode } from '@/hooks/useDarkMode';
export function PreferencesBrandingFormContent() {
return (
@@ -31,9 +33,15 @@ export function PreferencesBrandingFormContent() {
export function PreferencesBrandingFormFooter() {
const { isSubmitting } = useFormikContext();
const isDarkMode = useIsDarkMode();
return (
<Group style={{ padding: '12px 0', borderTop: '1px solid #e1e1e1' }}>
<Group
style={{
padding: '12px 0',
borderTop: `1px solid ${isDarkMode ? 'rgba(255, 255, 255, 0.25)' : '#e1e1e1'}`,
}}
>
<Button intent={Intent.PRIMARY} type={'submit'} loading={isSubmitting}>
Submit
</Button>

5
packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
View File

@@ -60,8 +60,11 @@ export function PreferencesCreditNotesForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.25);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {

5
packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
View File

@@ -60,8 +60,11 @@ export function PreferencesEstimatesForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.25);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {

5
packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
View File

@@ -271,8 +271,11 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.15);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {

5
packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
View File

@@ -60,8 +60,11 @@ export function PreferencesInvoicesForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.25);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {

7
packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx
View File

@@ -24,11 +24,13 @@ import {
import { DRAWERS } from '@/constants/drawers';
import { MoreIcon } from '@/icons/More';
import { STRIPE_PRICING_LINK } from './constants';
import { useIsDarkMode } from '@/hooks/useDarkMode';
export function StripePaymentMethod() {
const { openDialog } = useDialogActions();
const { openDrawer } = useDrawerActions();
const { openAlert } = useAlertActions();
const isDarkMode = useIsDarkMode();
const { paymentMethodsState } = usePaymentMethodsBoot();
const stripeState = paymentMethodsState?.stripe;
@@ -63,8 +65,9 @@ export function StripePaymentMethod() {
<Card style={{ margin: 0 }}>
<Group position="apart">
<Group>
<StripeLogo />
<StripeLogo
color={isDarkMode ? 'rgba(255, 255, 255, 0.85)' : '#0A2540'}
/>
<Group spacing={10}>
{isStripeEnabled && (
<Tag minimal intent={Intent.SUCCESS}>

Some files were not shown because too many files have changed in this diff Show More