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

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;