QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 04:40:32 +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

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