QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10: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

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

2
packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx
View File

@@ -92,5 +92,5 @@ const PaymentFeatureIcon = styled('span')`
position: absolute;
left: 12px;
top: 2px;
color: #0052cc;
color: var(--color-primary);
`;

7
packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx
View File

@@ -1,15 +1,18 @@
// @ts-nocheck
import { useIsDarkMode } from '@/hooks/useDarkMode';
import ContentLoader from 'react-content-loader';
export default function PreferencesPageLoader(props) {
const isDarkmode = useIsDarkMode();
return (
<ContentLoader
speed={2}
width={400}
height={250}
viewBox="0 0 400 250"
backgroundColor="#f3f3f3"
foregroundColor="#e6e6e6"
backgroundColor={isDarkmode ? 'rgba(255, 255, 255, 0.15)' : '#f3f3f3'}
foregroundColor={isDarkmode ? 'rgba(255, 255, 255, 0.3)' : '#e6e6e6'}
{...props}
>
<rect x="0" y="82" rx="2" ry="2" width="200" height="20" />

5
packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
View File

@@ -60,8 +60,11 @@ export function PreferencesReceiptsForm({ 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/Purchases/Bills/BillForm/BillFormFooterRight.tsx
View File

@@ -79,6 +79,9 @@ export function BillFormFooterRight() {
}
const BillTotalLines = styled(TotalLines)`
--x-color-text: #555;
--x-color-text: var(--color-light-gray4);
width: 100%;
color: #555555;
color: var(--x-color-text);
`;

5
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx
View File

@@ -46,6 +46,9 @@ export function VendorCreditNoteFormFooterRight() {
}
const VendorCreditNoteTotalLines = styled(TotalLines)`
--x-color-text: #555;
--x-color-text: var(--color-light-gray4);
width: 100%;
color: #555555;
color: var(--x-color-text);
`;

5
packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx
View File

@@ -41,6 +41,9 @@ export function PaymentMadeFormFooterRight() {
}
const PaymentMadeTotalLines = styled(TotalLines)`
--x-color-text: #555;
--x-color-text: var(--color-light-gray4);
width: 100%;
color: #555555;
color: var(--x-color-text);
`;

5
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx
View File

@@ -50,6 +50,9 @@ export function CreditNoteFormFooterRight() {
}
const CreditNoteTotalLines = styled(TotalLines)`
--x-color-text: #555555;
--x-color-text: var(--color-light-gray4);
width: 100%;
color: #555555;
color: var(--x-color-text);
`;

15
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
View File

@@ -4,19 +4,30 @@ import intl from 'react-intl-universal';
import CreditNoteFormHeaderFields from './CreditNoteFormHeaderFields';
import { Group, PageFormBigNumber } from '@/components';
import { useCreditNoteTotalFormatted } from './utils';
import { useIsDarkMode } from '@/hooks/useDarkMode';
/**
* Credit note header.
*/
function CreditNoteFormHeader() {
const isDarkMode = useIsDarkMode();
return (
<Group
position="apart"
align={'flex-start'}
display="flex"
bg="white"
p="25px 32px"
borderBottom="1px solid #d2dce2"
bg="var(--x-credit-note-form-header-background)"
borderBottom="1px solid var(--x-credit-note-form-header-border)"
style={{
'--x-credit-note-form-header-background': isDarkMode
? 'var(--color-dark-gray1)'
: 'var(--color-white)',
'--x-credit-note-form-header-border': isDarkMode
? 'rgba(255, 255, 255, 0.1)'
: '#d2dce2',
}}
>
<CreditNoteFormHeaderFields />
<CreditNoteFormBigNumber />

24
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
View File

@@ -37,7 +37,7 @@ import {
} from './utils';
import { PageForm } from '@/components/PageForm';
/**6
/**
* Estimate form.
*/
function EstimateForm({
@@ -70,18 +70,18 @@ function EstimateForm({
...(!isEmpty(estimate)
? { ...transformToEditForm(estimate) }
: {
...defaultEstimate,
// If the auto-increment mode is enabled, take the next estimate
// number from the settings.
...(estimateAutoIncrementMode && {
estimate_number: estimateNumber,
}),
entries: orderingLinesIndexes(defaultEstimate.entries),
currency_code: base_currency,
terms_conditions: defaultTo(estimateTermsConditions, ''),
note: defaultTo(estimateCustomerNotes, ''),
pdf_template_id: saleEstimateState?.defaultTemplateId,
...defaultEstimate,
// If the auto-increment mode is enabled, take the next estimate
// number from the settings.
...(estimateAutoIncrementMode && {
estimate_number: estimateNumber,
}),
entries: orderingLinesIndexes(defaultEstimate.entries),
currency_code: base_currency,
terms_conditions: defaultTo(estimateTermsConditions, ''),
note: defaultTo(estimateCustomerNotes, ''),
pdf_template_id: saleEstimateState?.defaultTemplateId,
}),
};
// Handles form submit.

5
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx
View File

@@ -42,6 +42,9 @@ export function EstimateFormFooterRight() {
}
const EstimateTotalLines = styled(TotalLines)`
--x-color-text: #555;
--x-color-text: var(--color-light-gray4);
width: 100%;
color: #555555;
color: var(--x-color-text);
`;

15
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
View File

@@ -5,16 +5,27 @@ import intl from 'react-intl-universal';
import EstimateFormHeaderFields from './EstimateFormHeaderFields';
import { Group, PageFormBigNumber } from '@/components';
import { useEstimateTotalFormatted } from './utils';
import { useIsDarkMode } from '@/hooks/useDarkMode';
// Estimate form top header.
function EstimateFormHeader() {
const isDarkMode = useIsDarkMode();
return (
<Group
position="apart"
align={'flex-start'}
bg="white"
p="25px 32px"
borderBottom="1px solid #d2dce2"
bg="var(--x-estimate-form-header-background)"
borderBottom="1px solid var(--x-estimate-form-header-border)"
style={{
'--x-estimate-form-header-background': isDarkMode
? 'var(--color-dark-gray1)'
: 'var(--color-white)',
'--x-estimate-form-header-border': isDarkMode
? 'rgba(255, 255, 255, 0.1)'
: '#d2dce2',
}}
>
<EstimateFormHeaderFields />
<EstimateFormBigTotal />

6
packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx
View File

@@ -7,6 +7,7 @@ import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
import { useDrawerActions } from '@/hooks/state';
import { useSendEstimateFormatArgsOptions } from './hooks';
import { useSendMailItems } from '../SendMailViewDrawer/hooks';
import { useIsDarkMode } from '@/hooks/useDarkMode';
export function EstimateSendMailFields() {
@@ -41,6 +42,7 @@ function EstimateSendMailFooter() {
const { isSubmitting } = useFormikContext();
const { name } = useDrawerContext();
const { closeDrawer } = useDrawerActions();
const isDarkmode = useIsDarkMode();
const handleClose = () => {
closeDrawer(name);
@@ -50,7 +52,9 @@ function EstimateSendMailFooter() {
<Group
py={'12px'}
px={'16px'}
borderTop="1px solid #d8d8d9"
borderTopWidth={'1px'}
borderTopColor={isDarkmode ? 'rgba(255, 255, 255, 0.2)' : '#d8d8d9'}
borderTopStyle={'solid'}
position={'apart'}
>
<Group spacing={10} ml={'auto'}>

15
packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewHeader.tsx
View File

@@ -3,6 +3,7 @@ import { x } from '@xstyled/emotion';
import { Group, Icon } from '@/components';
import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
import { useDrawerActions } from '@/hooks/state';
import { useIsDarkMode } from '@/hooks/useDarkMode';
interface SendMailViewHeaderProps {
label?: string;
@@ -16,6 +17,7 @@ export function SendMailViewHeader({
}: SendMailViewHeaderProps) {
const { name } = useDrawerContext();
const { closeDrawer } = useDrawerActions();
const isDarkmode = useIsDarkMode();
const handleClose = () => {
closeDrawer(name);
@@ -24,14 +26,19 @@ export function SendMailViewHeader({
<Group
p={'10px'}
pl={'30px'}
bg="white"
bg={isDarkmode ? "var(--color-dark-gray2)" : "white"}
alignItems={'center'}
boxShadow={'0 1px 0 rgba(17, 20, 24, .15)'}
boxShadow={`0 1px 0 ${isDarkmode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(17, 20, 24, .15)'}`}
zIndex={1}
style={{ position: 'relative' }}
>
{label && (
<x.h1 margin={0} fontSize={20} fontWeight={500} color={'#666'}>
<x.h1
margin={0}
fontSize={20}
fontWeight={500}
color={isDarkmode ? 'rgba(255, 255, 255, 0.75)' : '#666'}
>
{label}
</x.h1>
)}
@@ -39,7 +46,7 @@ export function SendMailViewHeader({
<Button
aria-label="Close"
className={Classes.DIALOG_CLOSE_BUTTON}
icon={<Icon icon={'smallCross'} color={'#000'} />}
icon={<Icon icon={'smallCross'} color={isDarkmode ? 'rgba(255, 255, 255, 0.85)' : '#000'} />}
minimal={true}
onClick={handleClose}
style={{ marginLeft: 'auto' }}

16
packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewLayout.tsx
View File

@@ -1,4 +1,5 @@
import { Group, Stack } from '@/components';
import { useIsDarkMode } from '@/hooks/useDarkMode';
import React from 'react';
interface SendMailViewLayoutProps {
@@ -12,23 +13,32 @@ export function SendMailViewLayout({
fields,
preview,
}: SendMailViewLayoutProps) {
const isDarkMode = useIsDarkMode();
return (
<Stack spacing={0} flex={1} overflow="hidden">
{header}
<Group flex={1} overflow="auto" spacing={0} alignItems={'stretch'}>
<Stack
bg="white"
bg={isDarkMode ? "var(--color-dark-gray2)" : "white"}
flex={'1'}
maxWidth="720px"
maxHeight="100%"
spacing={0}
borderRight="1px solid #dcdcdd"
borderRightWidth={1}
borderRightStyle="solid"
borderRightColor={isDarkMode ? "rgba(255, 255, 255, 0.2)" : "#dcdcdd"}
>
{fields}
</Stack>
<Stack bg="#F5F5F5" flex={'1'} maxHeight={'100%'} minWidth="850px">
<Stack
bg={isDarkMode ? "var(--color-dark-gray2)" : "#F5F5F5"}
flex={'1'}
maxHeight={'100%'}
minWidth="850px"
>
{preview}
</Stack>
</Group>

4
packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewMessageField.tsx
View File

@@ -7,6 +7,7 @@ import { FormGroupProps, TextAreaProps } from '@blueprintjs-formik/core';
import { css } from '@emotion/css';
import { FFormGroup, FSelect, FTextArea, Group, Stack } from '@/components';
import { InvoiceSendMailFormValues } from '../../Invoices/InvoiceSendMailDrawer/_types';
import { useIsDarkMode } from '@/hooks/useDarkMode';
interface SendMailViewMessageFieldProps {
argsOptions?: Array<SelectOptionProps>;
@@ -22,6 +23,7 @@ export function SendMailViewMessageField({
}: SendMailViewMessageFieldProps) {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const { setFieldValue } = useFormikContext<InvoiceSendMailFormValues>();
const isDarkmode = useIsDarkMode();
const handleTextareaChange = useCallback(
(item: SelectOptionProps) => {
@@ -58,7 +60,7 @@ export function SendMailViewMessageField({
<FFormGroup label={'Message'} name={'message'} {...formGroupProps}>
<Stack spacing={0}>
<Group
border={'1px solid #ced4da'}
border={`1px solid ${isDarkmode ? 'rgba(255, 255, 255, 0.2)' : '#ced4da'}`}
borderBottom={0}
borderRadius={'3px 3px 0 0'}
>

8
packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewHeader.tsx
View File

@@ -1,6 +1,7 @@
import { useMemo } from 'react';
import { x } from '@xstyled/emotion';
import { Box, Group, Stack } from '@/components';
import { useIsDarkMode } from '@/hooks/useDarkMode';
interface SendViewPreviewHeaderProps {
companyName?: string;
@@ -22,11 +23,14 @@ export function SendViewPreviewHeader({
[from],
);
const formattedToAddresses = useMemo(() => formatAddresses(to || []), [to]);
const isDarkmode = useIsDarkMode();
return (
<Stack
bg={'white'}
borderBottom={'1px solid #dcdcdd'}
bg={isDarkmode ? 'var(--color-dark-gray2)' : 'white'}
borderBottomWidth={'1px'}
borderBottomStyle={'solid'}
borderBottomColor={isDarkmode ? 'rgba(255, 255, 255, 0.2)' : '#dcdcdd'}
padding={'22px 30px'}
spacing={8}
position={'sticky'}

15
packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewTabs.tsx
View File

@@ -13,6 +13,15 @@ export function SendMailViewPreviewTabs({
id={'preview'}
defaultSelectedTabId={'payment-page'}
className={css`
--x-color-background: var(--color-white);
--x-color-background: var(--color-dark-gray2);
--x-color-border: #dcdcdd;
--x-color-border: rgba(255, 255, 255, 0.2);
--x-color-tab-text: #5f6b7c;
--x-color-tab-text: rgba(255, 255,255, 0.6);
overflow: hidden;
flex: 1 1;
display: flex;
@@ -20,14 +29,14 @@ export function SendMailViewPreviewTabs({
.bp4-tab-list {
padding: 0 20px;
background: #fff;
border-bottom: 1px solid #dcdcdd;
background: var(--x-color-background);
border-bottom: 1px solid var(--x-color-border);
}
.bp4-tab {
line-height: 40px;
}
.bp4-tab:not([aria-selected='true']) {
color: #5f6b7c;
color: var(--x-color-tab-text);
}
.bp4-tab-indicator-wrapper .bp4-tab-indicator {
height: 2px;

4
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CompanyLogoUpload.module.scss
View File

@@ -1,5 +1,5 @@
.root {
border: 1px solid #e1e1e1;
// border: 1px solid #e1e1e1;
border-radius: 8px;
min-height: 120px;
padding: 10px;
@@ -17,7 +17,7 @@
.title{
font-size: 13px;
color: #738091;
// color: #738091;
}
.removeButton{

17
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.module.scss
View File

@@ -1,3 +1,16 @@
.showCompanyLogoField{
.showCompanyLogoField {
font-size: 14px;
}
}
.customizePayment {
--color-background: #fbfbfb;
--color-divider: #e1e1e1;
--color-background: transparent;
--color-divider: rgba(255, 255, 255, 0.2);
background-color: var(--background);
border: 1px solid var(--color-divider);
padding: 10px;
border-radius: 5px;
}

14
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
View File

@@ -17,6 +17,7 @@ import { BrandingCompanyLogoUploadField } from '@/containers/ElementCustomize/co
import { MANAGE_LINK_URL } from './constants';
import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
import { useDrawerActions } from '@/hooks/state';
import styles from './InvoiceCustomizeGeneralFields.module.scss';
export function InvoiceCustomizeGeneralField() {
const isTemplateNameFilled = useIsTemplateNamedFilled();
@@ -28,7 +29,8 @@ export function InvoiceCustomizeGeneralField() {
General Branding
</h2>
<p className={Classes.TEXT_MUTED}>
Set your company logo and branding colors to be automatically applied to your invoices.
Set your company logo and branding colors to be automatically applied
to your invoices.
</p>
</Stack>
@@ -106,15 +108,7 @@ function InvoiceCustomizePaymentManage() {
};
return (
<Group
style={{
backgroundColor: '#FBFBFB',
border: '1px solid #E1E1E1',
padding: 10,
borderRadius: 5,
}}
position={'apart'}
>
<Group className={styles.customizePayment} position={'apart'}>
<Group spacing={10}>
<CreditCardIcon fill={'#7D8897'} height={16} width={16} />
<Text>Accept payment methods</Text>

8
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
View File

@@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import { Tabs, TabsProps } from '@blueprintjs/core';
interface InvoiceCustomizeTabsProps extends TabsProps {}
interface InvoiceCustomizeTabsProps extends TabsProps { }
export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) {
return (
@@ -14,14 +14,14 @@ export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) {
.bp4-tab-list {
padding: 0 20px;
background: #fff;
border-bottom: 1px solid #dcdcdd;
background: var(--color-element-customize-header-tabs-background);
border-bottom: 1px solid var(--color-element-customize-divider);
}
.bp4-tab {
line-height: 40px;
}
.bp4-tab:not([aria-selected='true']) {
color: #5f6b7c;
color: var(--color-ekement-customize-header-tabs-text);
}
.bp4-tab-indicator-wrapper .bp4-tab-indicator {
height: 2px;

10
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss
View File

@@ -2,10 +2,14 @@
.root {
position: relative;
&.visible {
opacity: 0.4;
&.visible::before{
background: rgba(255, 255, 255, 0.75);
z-index: 2;
&::before {
background: transparent;
z-index: 2;
}
}
&::before{
content: "";

17
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
View File

@@ -7,6 +7,7 @@ import {
FInputGroup,
TotalLinePrimitive,
} from '@/components';
import { useIsDarkMode } from '@/hooks/useDarkMode';
const inputGroupCss = css`
& .bp4-input {
@@ -26,12 +27,19 @@ interface AdjustmentTotalLineProps {
export function AdjustmentTotalLine({
adjustmentAmount,
}: AdjustmentTotalLineProps) {
const isDarkMode = useIsDarkMode();
return (
<TotalLinePrimitive>
<x.div
display={'table-cell'}
padding={'8px'}
borderBottom={'1px solid rgb(210, 221, 226)'}
borderBottom={'1px solid var(--x-border-bottom-color)'}
style={{
'--x-border-bottom-color': isDarkMode
? 'rgba(255, 255, 255, 0.1)'
: 'rgb(210, 221, 226)',
}}
>
<x.div
display={'flex'}
@@ -64,9 +72,14 @@ export function AdjustmentTotalLine({
<x.div
display={'table-cell'}
borderBottom={'1px solid rgb(210, 221, 226)'}
textAlign={'right'}
padding={'8px'}
borderBottom={'1px solid var(--x-border-bottom-color)'}
style={{
'--x-border-bottom-color': isDarkMode
? 'rgba(255, 255, 255, 0.1)'
: 'rgb(210, 221, 226)',
}}
>
{adjustmentAmount}
</x.div>

19
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
View File

@@ -8,6 +8,7 @@ import {
TotalLinePrimitive,
} from '@/components';
import { Button } from '@blueprintjs/core';
import { useIsDarkMode } from '@/hooks/useDarkMode';
const inputGroupCss = css`
& .bp4-input {
@@ -48,9 +49,18 @@ export function DiscountTotalLine({
{ text: '%', value: 'percentage', label: 'Percentage' },
];
const isDarkMode = useIsDarkMode();
return (
<TotalLinePrimitive>
<TotalLinePrimitive.Title borderBottom={'1px solid rgb(210, 221, 226)'}>
<TotalLinePrimitive.Title
borderBottom={'1px solid var(--x-border-bottom-color)'}
style={{
'--x-border-bottom-color': isDarkMode
? 'rgba(255, 255, 255, 0.1)'
: 'rgb(210, 221, 226)',
}}
>
<x.div
display={'flex'}
alignItems={'center'}
@@ -82,7 +92,12 @@ export function DiscountTotalLine({
<TotalLinePrimitive.Amount
textAlign={'right'}
borderBottom={'1px solid rgb(210, 221, 226)'}
borderBottom={'1px solid var(--x-border-bottom-color)'}
style={{
'--x-border-bottom-color': isDarkMode
? 'rgba(255, 255, 255, 0.1)'
: 'rgb(210, 221, 226)',
}}
>
{discountAmount}
</TotalLinePrimitive.Amount>

4
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
View File

@@ -23,12 +23,14 @@ import {
import { PageForm } from '@/components/PageForm';
import { MoreIcon } from '@/icons/More';
import { DRAWERS } from '@/constants/drawers';
import { useIsDarkMode } from '@/hooks/useDarkMode';
/**
* Invoice floating actions bar.
*/
export default function InvoiceFloatingActions() {
const history = useHistory();
const isDarkMode = useIsDarkMode();
const { openDrawer } = useDrawerActions();
// Formik context.
@@ -245,7 +247,7 @@ export default function InvoiceFloatingActions() {
</Menu>
}
>
<Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
<Button minimal icon={<MoreIcon fill={isDarkMode ? "#fff" : "#000"} height={'14px'} width={'14px'} />} />
</Popover>
</Group>
</PageForm.FooterActions>

5
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx
View File

@@ -82,6 +82,9 @@ export function InvoiceFormFooterRight() {
}
const InvoiceTotalLines = styled(TotalLines)`
--x-color-text: #555;
--x-color-text: var(--color-light-gray4);
width: 100%;
color: #555555;
color: var(--x-color-text);
`;

10
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss Normal file
View File

@@ -0,0 +1,10 @@
.root {
--color-invoice-form-header-background: #fff;
--color-invoice-form-header-border: #d2dce2;
--color-invoice-form-header-background: var(--color-dark-gray1);
--color-invoice-form-header-border: rgba(255, 255, 255, 0.1);
border-bottom: 1px solid var(--color-invoice-form-header-border);
background-color: var(--color-invoice-form-header-background);
}

4
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
View File

@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
import { Group, PageFormBigNumber } from '@/components';
import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
import { useInvoiceTotalFormatted } from './utils';
import styles from './InvoiceFormHeader.module.scss';
/**
* Invoice form header section.
@@ -13,9 +14,8 @@ function InvoiceFormHeader() {
<Group
position="apart"
align={'flex-start'}
bg="white"
p="25px 32px"
borderBottom="1px solid #d2dce2"
className={styles.root}
>
<InvoiceFormHeaderFields />
<InvoiceFormBigTotal />

6
packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
View File

@@ -6,6 +6,7 @@ import { useDrawerActions } from '@/hooks/state';
import { useInvoiceMailItems, useSendInvoiceFormatArgsOptions } from './_hooks';
import { SendMailViewToAddressField } from '../../Estimates/SendMailViewDrawer/SendMailViewToAddressField';
import { SendMailViewMessageField } from '../../Estimates/SendMailViewDrawer/SendMailViewMessageField';
import { useIsDarkMode } from '@/hooks/useDarkMode';
export function InvoiceSendMailFields() {
const items = useInvoiceMailItems();
@@ -39,6 +40,7 @@ function InvoiceSendMailFooter() {
const { isSubmitting } = useFormikContext();
const { name } = useDrawerContext();
const { closeDrawer } = useDrawerActions();
const isDarkMode = useIsDarkMode();
const handleClose = () => {
closeDrawer(name);
@@ -48,7 +50,9 @@ function InvoiceSendMailFooter() {
<Group
py={'12px'}
px={'16px'}
borderTop="1px solid #d8d8d9"
borderTopWidth={1}
borderTopStyle="solid"
borderTopColor={isDarkMode ? 'rgba(255, 255, 255, 0.2)' : "#d8d8d9"}
position={'apart'}
>
<Group spacing={10} ml={'auto'}>

10
packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
View File

@@ -3,17 +3,19 @@ import { x } from '@xstyled/emotion';
import { Box, Group, Stack } from '@/components';
import { useSendInvoiceMailForm, useSendInvoiceMailSubject } from './_hooks';
import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
import { useIsDarkMode } from '@/hooks/useDarkMode';
export function InvoiceSendMailHeaderPreview() {
const mailSubject = useSendInvoiceMailSubject();
const { invoiceMailState } = useInvoiceSendMailBoot();
const toAddresses = useMailHeaderToAddresses();
const fromAddresses = useMailHeaderFromAddresses();
const isDarkmode = useIsDarkMode();
return (
<Stack
bg={'white'}
borderBottom={'1px solid #dcdcdd'}
bg={isDarkmode ? 'var(--color-dark-gray2)' : 'white'}
borderBottom={'1px solid var(--color-element-customize-divider)'}
padding={'22px 30px'}
spacing={8}
position={'sticky'}
@@ -46,10 +48,10 @@ export function InvoiceSendMailHeaderPreview() {
<Stack spacing={2}>
<Group spacing={2}>
<Box fontWeight={600}>{invoiceMailState?.companyName} </Box>
<Box color={'#738091'}>{fromAddresses}</Box>
<Box color={isDarkmode ? 'rgba(255, 255, 255, 0.6)' : '#738091'}>{fromAddresses}</Box>
</Group>
<Box fontSize={'sm'} color={'#738091'}>
<Box fontSize={'sm'} color={isDarkmode ? 'rgba(255, 255, 255, 0.6)' : '#738091'}>
Send to: {invoiceMailState?.customerName} {toAddresses};
</Box>
</Stack>

5
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx
View File

@@ -40,6 +40,9 @@ export function PaymentReceiveFormFootetRight() {
}
const PaymentReceiveTotalLines = styled(TotalLines)`
--x-color-text: #555;
--x-color-text: var(--color-light-gray4);
width: 100%;
color: #555555;
color: var(--x-color-text);
`;

15
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
View File

@@ -7,18 +7,29 @@ import { FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes';
import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
import { useIsDarkMode } from '@/hooks/useDarkMode';
/**
* Payment receive form header.
*/
function PaymentReceiveFormHeader() {
const isDarkMode = useIsDarkMode();
return (
<Group
position="apart"
align={'flex-start'}
bg="white"
p="25px 32px"
borderBottom="1px solid #d2dce2"
bg="var(--x-header-background)"
borderBottom="1px solid var(--x-header-border)"
style={{
'--x-header-background': isDarkMode
? 'var(--color-dark-gray1)'
: 'var(--color-white)',
'--x-header-border': isDarkMode
? 'rgba(255, 255, 255, 0.1)'
: '#d2dce2',
}}
>
<PaymentReceiveHeaderFields />
<PaymentReceiveFormBigTotal />

135
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx
View File

@@ -1,5 +1,5 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import React from 'react';
import { Position, ControlGroup } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import * as R from 'ramda';
@@ -23,77 +23,72 @@ export const PaymentReceivePaymentNoField = R.compose(
paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
})),
withDialogActions,
)(
({
// #withDialogActions
openDialog,
)(({
// #withDialogActions
openDialog,
// #withSettings
paymentReceiveAutoIncrement,
}) => {
const { values, setFieldValue } = useFormikContext();
// #withSettings
paymentReceiveAutoIncrement,
}) => {
const { values, setFieldValue } = useFormikContext();
// Handle click open payment receive number dialog.
const handleClickOpenDialog = () => {
openDialog('payment-receive-number-form');
};
// Handle payment number field blur.
const handlePaymentNoBlur = (event) => {
const newValue = event.target.value;
// Handle click open payment receive number dialog.
const handleClickOpenDialog = () => {
openDialog('payment-receive-number-form');
};
// Handle payment number field blur.
const handlePaymentNoBlur = (event) => {
const newValue = event.target.value;
// Show the confirmation dialog if the value has changed and auto-increment
// mode is enabled.
if (
values.payment_receive_no !== newValue &&
paymentReceiveAutoIncrement
) {
openDialog('payment-receive-number-form', {
initialFormValues: {
onceManualNumber: newValue,
incrementMode: 'manual-transaction',
},
});
}
// Setting the payment number to the form will be manually in case
// auto-increment is disable.
if (!paymentReceiveAutoIncrement) {
setFieldValue('payment_receive_no', newValue);
setFieldValue('payment_receive_no_manually', newValue);
}
};
return (
<FFormGroup
name={'payment_receive_no'}
label={<T id={'payment_received_no'} />}
inline={true}
labelInfo={<FieldRequiredHint />}
>
<ControlGroup fill={true}>
<FInputGroup
name={'payment_receive_no'}
minimal={true}
value={values.payment_receive_no}
asyncControl={true}
onBlur={handlePaymentNoBlur}
onChange={() => {}}
/>
<InputPrependButton
buttonProps={{
onClick: handleClickOpenDialog,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: (
<T id={'setting_your_auto_generated_payment_receive_number'} />
),
position: Position.BOTTOM_LEFT,
}}
/>
</ControlGroup>
</FFormGroup>
);
},
);
// Show the confirmation dialog if the value has changed and auto-increment
// mode is enabled.
if (values.payment_receive_no !== newValue && paymentReceiveAutoIncrement) {
openDialog('payment-receive-number-form', {
initialFormValues: {
onceManualNumber: newValue,
incrementMode: 'manual-transaction',
},
});
}
// Setting the payment number to the form will be manually in case
// auto-increment is disable.
if (!paymentReceiveAutoIncrement) {
setFieldValue('payment_receive_no', newValue);
setFieldValue('payment_receive_no_manually', newValue);
}
};
return (
<FFormGroup
name={'payment_receive_no'}
label={<T id={'payment_received_no'} />}
inline={true}
labelInfo={<FieldRequiredHint />}
>
<ControlGroup fill={true}>
<FInputGroup
name={'payment_receive_no'}
minimal={true}
value={values.payment_receive_no}
asyncControl={true}
onBlur={handlePaymentNoBlur}
onChange={() => {}}
/>
<InputPrependButton
buttonProps={{
onClick: handleClickOpenDialog,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: (
<T id={'setting_your_auto_generated_payment_receive_number'} />
),
position: Position.BOTTOM_LEFT,
}}
/>
</ControlGroup>
</FFormGroup>
);
});
PaymentReceivePaymentNoField.displayName = 'PaymentReceivePaymentNoField';

6
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx
View File

@@ -8,6 +8,7 @@ import { SendMailViewToAddressField } from '../../Estimates/SendMailViewDrawer/S
import { SendMailViewMessageField } from '../../Estimates/SendMailViewDrawer/SendMailViewMessageField';
import { usePaymentReceivedFormatArgsOptions, } from './_hooks';
import { useSendMailItems } from '../../Estimates/SendMailViewDrawer/hooks';
import { useIsDarkMode } from '@/hooks/useDarkMode';
export function PaymentReceivedSendMailFields() {
const argsOptions = usePaymentReceivedFormatArgsOptions();
@@ -41,6 +42,7 @@ function PaymentReceivedSendMailFooter() {
const { isSubmitting } = useFormikContext();
const { name } = useDrawerContext();
const { closeDrawer } = useDrawerActions();
const isDarkMode = useIsDarkMode();
const handleClose = () => {
closeDrawer(name);
@@ -50,7 +52,9 @@ function PaymentReceivedSendMailFooter() {
<Group
py={'12px'}
px={'16px'}
borderTop="1px solid #d8d8d9"
borderTopWidth={1}
borderTopStyle={'solid'}
borderTopColor={isDarkMode ? 'rgba(255, 255, 255, 0.2)' : '#d8d8d9'}
position={'apart'}
>
<Group spacing={10} ml={'auto'}>

5
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx
View File

@@ -66,6 +66,9 @@ export function ReceiptFormFooterRight() {
}
const ReceiptTotalLines = styled(TotalLines)`
--x-color-text: #555;
--x-color-text: var(--color-light-gray4);
width: 100%;
color: #555555;
color: var(--x-color-text);
`;

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