wip darkmode

2026-02-19 14:20:31 +00:00 · 2025-08-04 12:25:27 +02:00
parent 456a9e1ad9
commit d9a716a46f
170 changed files with 2006 additions and 1018 deletions
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CompanyLogoUpload.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CompanyLogoUpload.module.scss
@@ -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{
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.module.scss
@@ -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;
+}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
@@ -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>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
@@ -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;
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss
@@ -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: "";
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
@@ -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>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
@@ -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>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
@@ -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>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx
@@ -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);
 `;
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss
@@ -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);
+}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
@@ -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 />
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
@@ -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'}>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
@@ -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>