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

wip darkmode

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

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

15
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
View File

@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
import { Group, PageFormBigNumber } from '@/components';
import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
import { useReceiptTotalFormatted } from './utils';
import { useIsDarkMode } from '@/hooks/useDarkMode';
/**
* Receipt form header section.
@@ -12,14 +13,24 @@ function ReceiptFormHeader({
// #ownProps
onReceiptNumberChanged,
}) {
const isDarkMode = useIsDarkMode();
return (
<Group
position="apart"
align={'flex-start'}
display="flex"
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',
}}
>
<ReceiptFormHeaderFields
onReceiptNumberChanged={onReceiptNumberChanged}

6
packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailFormFields.tsx
View File

@@ -7,6 +7,7 @@ import { useDrawerActions } from "@/hooks/state";
import { useDrawerContext } from "@/components/Drawer/DrawerProvider";
import { useSendReceiptFormatArgsOptions } from "./_hooks";
import { useSendMailItems } from "../../Estimates/SendMailViewDrawer/hooks";
import { useIsDarkMode } from "@/hooks/useDarkMode";
export function ReceiptSendMailFormFields() {
const argsOptions = useSendReceiptFormatArgsOptions();
@@ -40,6 +41,7 @@ function ReceiptSendMailFooter() {
const { isSubmitting } = useFormikContext();
const { name } = useDrawerContext();
const { closeDrawer } = useDrawerActions();
const isDarkmode = useIsDarkMode();
const handleClose = () => {
closeDrawer(name);
@@ -49,7 +51,9 @@ function ReceiptSendMailFooter() {
<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'}>