feat: darkmode preferences screens

2026-02-17 21:30:31 +00:00 · 2025-11-02 16:43:47 +02:00
parent a76445a6eb
commit 77dc0778a3
12 changed files with 78 additions and 102 deletions
--- a/packages/server/src/modules/Currencies/Currencies.constants.ts
+++ b/packages/server/src/modules/Currencies/Currencies.constants.ts
@@ -10,8 +10,8 @@ export const InitialCurrencies = [
 ];

 export const ERRORS = {
-  CURRENCY_NOT_FOUND: 'currency_not_found',
-  CURRENCY_CODE_EXISTS: 'currency_code_exists',
+  CURRENCY_NOT_FOUND: 'CURRENCY_NOT_FOUND',
+  CURRENCY_CODE_EXISTS: 'CURRENCY_CODE_EXISTS',
  BASE_CURRENCY_INVALID: 'BASE_CURRENCY_INVALID',
  CANNOT_DELETE_BASE_CURRENCY: 'CANNOT_DELETE_BASE_CURRENCY',
 };
--- a/packages/webapp/src/components/Card/index.tsx
+++ b/packages/webapp/src/components/Card/index.tsx
@@ -26,7 +26,7 @@ export const CardFooterActions = styled.div`
  --x-color-border: #e0e7ea;

  .bp4-dark & {
-    --x-color-border: rgba(255, 255, 255, 0.25);
+    --x-color-border: rgba(255, 255, 255, 0.15);
  }
  padding-top: 16px;
  border-top: 1px solid var(--x-color-border);
--- a/packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.tsx
@@ -1,24 +1,24 @@
 // @ts-nocheck
 import React from 'react';
-import { Classes, FormGroup, InputGroup } from '@blueprintjs/core';
-import { FastField } from 'formik';
+import { Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
 import { FormattedMessage as T } from '@/components';
 import classNames from 'classnames';

 import { CLASSES } from '@/constants/classes';
 import { useCurrencyFormContext } from './CurrencyFormProvider';
-import { ErrorMessage, FieldRequiredHint, ListSelect } from '@/components';
+import { FieldRequiredHint, FFormGroup, FInputGroup, FSelect } from '@/components';

 import { useAutofocus } from '@/hooks';
-import { inputIntent, currenciesOptions } from '@/utils';
+import { currenciesOptions } from '@/utils';

 /**
 * Currency form fields.
 */
 export default function CurrencyFormFields() {
  const currencyNameFieldRef = useAutofocus();
-
  const { isEditMode } = useCurrencyFormContext();
+  const { setFieldValue } = useFormikContext();

  // Filter currency code
  const filterCurrencyCode = (query, currency, _index, exactMatch) => {
@@ -33,66 +33,47 @@ export default function CurrencyFormFields() {

  return (
    <div className={Classes.DIALOG_BODY}>
-      <FastField name={'currency_code'}>
-        {({
-          form: { setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'currency_code'} />}
-            className={classNames(CLASSES.FILL, 'form-group--type')}
-          >
-            <ListSelect
-              items={currenciesOptions}
-              selectedItemProp={'currency_code'}
-              selectedItem={value}
-              textProp={'formatted_name'}
-              defaultText={<T id={'select_currency_code'} />}
-              onItemSelect={(currency) => {
-                setFieldValue('currency_code', currency.currency_code);
-                setFieldValue('currency_name', currency.name);
-                setFieldValue('currency_sign', currency.symbol);
-              }}
-              itemPredicate={filterCurrencyCode}
-              disabled={isEditMode}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'currency_code'}
+        label={<T id={'currency_code'} />}
+      >
+        <FSelect
+          name={'currency_code'}
+          items={currenciesOptions}
+          valueAccessor={'currency_code'}
+          textAccessor={'formatted_name'}
+          placeholder={<T id={'select_currency_code'} />}
+          onItemSelect={(currency) => {
+            setFieldValue('currency_code', currency.currency_code);
+            setFieldValue('currency_name', currency.name);
+            setFieldValue('currency_sign', currency.symbol);
+          }}
+          itemPredicate={filterCurrencyCode}
+          disabled={isEditMode}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
+
      {/* ----------- Currency name ----------- */}
-      <FastField name={'currency_name'}>
-        {({ field, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'currency_name'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--currency-name'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="currency_name" />}
-            // inline={true}
-          >
-            <InputGroup
-              inputRef={(ref) => (currencyNameFieldRef.current = ref)}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'currency_name'}
+        label={<T id={'currency_name'} />}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <FInputGroup
+          name={'currency_name'}
+          inputRef={(ref) => (currencyNameFieldRef.current = ref)}
+        />
+      </FFormGroup>
+
      {/* ----------- Currency Code ----------- */}
-      <FastField name={'currency_sign'}>
-        {({ field, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'currency_sign'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--currency-sign'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="currency_sign" />}
-          >
-            <InputGroup {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'currency_sign'}
+        label={<T id={'currency_sign'} />}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <FInputGroup name={'currency_sign'} />
+      </FFormGroup>
    </div>
  );
 }
--- a/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
@@ -63,7 +63,7 @@ const CardFooterActions = styled.div`
  --x-color-border: #e0e7ea;

  .bp4-dark & {
-    --x-color-border: rgba(255, 255, 255, 0.25);
+    --x-color-border: rgba(255, 255, 255, 0.15);
  }
  padding-top: 16px;
  border-top: 1px solid var(--x-color-border);
--- a/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
@@ -61,8 +61,10 @@ export function PreferencesEstimatesForm({ isSubmitting }) {

 const CardFooterActions = styled.div`
  --x-color-border: #e0e7ea;
-  --x-color-border: rgba(255, 255, 255, 0.25);

+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.15);
+  }
  padding-top: 16px;
  border-top: 1px solid var(--x-color-border);
  margin-top: 30px;
--- a/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
@@ -61,8 +61,10 @@ export function PreferencesInvoicesForm({ isSubmitting }) {

 const CardFooterActions = styled.div`
  --x-color-border: #e0e7ea;
-  --x-color-border: rgba(255, 255, 255, 0.25);

+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.15);
+  }
  padding-top: 16px;
  border-top: 1px solid var(--x-color-border);
  margin-top: 30px;
--- a/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
@@ -61,8 +61,10 @@ export function PreferencesReceiptsForm({ isSubmitting }) {

 const CardFooterActions = styled.div`
  --x-color-border: #e0e7ea;
-  --x-color-border: rgba(255, 255, 255, 0.25);

+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.15);
+  }
  padding-top: 16px;
  border-top: 1px solid var(--x-color-border);
  margin-top: 30px;
--- a/packages/webapp/src/style/_variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -455,9 +455,9 @@ body.bp4-dark  {
  --color-datatable-constrant-head-border: var(--color-dark-gray5);

  // Card
-  --color-card-background: var(--color-dark-gray4);
+  --color-card-background: var(--color-dark-gray2);
  --color-card-border: #d2dce2;
-  --color-card-border: rgba(255, 255, 255, 0.2);
+  --color-card-border: rgba(255, 255, 255, 0.1);

  // Bank accounts.
  --color-bank-account-card-background: var(--color-card-background);
@@ -492,8 +492,7 @@ body.bp4-dark  {
  --color-bank-transaction-matching-aside-footer: var(--color-dark-gray1);

  --color-sidebar-preferences-background: var(--color-dark-gray1);
-  --color-sidebar-preferences-border: #c6d0d9;
-  --color-sidebar-preferences-border: rgba(255, 255, 255, 0.25);
+  --color-sidebar-preferences-border: rgba(255, 255, 255, 0.15);

  // Preferences - Sidebar. 
  --color-sidebar-preferences-item-background: transparent;
@@ -502,10 +501,7 @@ body.bp4-dark  {
  --color-sidebar-preferences-item-hover-background: var(--color-dark-gray4);
  --color-sidebar-preferences-item-hover-text: #fff;

-  --color-preferences-sidebar-head-border: #bbcbd0;
-  --color-preferences-sidebar-head-text: #3b3b4c;
-
-  --color-preferences-sidebar-head-border: rgba(255, 255, 255, 0.25);
+  --color-preferences-sidebar-head-border: rgba(255, 255, 255, 0.1);
  --color-preferences-sidebar-head-text: rgba(255, 255, 255, 0.85);

  // Preferences - Topbar.
--- a/packages/webapp/src/style/components/DataTable/DataTable.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTable.scss
@@ -216,28 +216,6 @@
      .tr.is-context-menu-active .td {
        background: #f3fafc;
      }
-
-      .td.actions .#{$ns}-button {
-        background: #e6effb;
-        border: 0;
-        box-shadow: none;
-        padding: 5px 15px;
-        border-radius: 8px;
-
-        &:hover,
-        &:focus {
-          background-color: #cfdcee;
-        }
-
-        svg {
-          color: #425361;
-        }
-
-        .bp4-icon-more-h-16 {
-          margin-top: 2px;
-        }
-      }
-
      .tr.no-results {
        .td {
          flex-direction: column;
--- a/packages/webapp/src/style/pages/Preferences/Page.scss
+++ b/packages/webapp/src/style/pages/Preferences/Page.scss
@@ -14,6 +14,11 @@
  }
 }
 .preferences-page {
+  --x-color-tab-list-border: #e5e5e5;
+ 
+  .bp4-dark & {
+    --x-color-tab-list-border: rgba(255, 255, 255, 0.1);
+  }
  &__inside-content {
    display: flex;
    flex-direction: column;
@@ -36,7 +41,7 @@
    overflow: auto;

    .#{$ns}-tab-list {
-      border-bottom: 1px solid #e5e5e5;
+      border-bottom: 1px solid var(--x-color-tab-list-border);
      padding-left: 15px;
      padding-right: 15px;
      align-items: baseline;
--- a/packages/webapp/src/style/pages/Preferences/Topbar.scss
+++ b/packages/webapp/src/style/pages/Preferences/Topbar.scss
@@ -55,6 +55,9 @@
    margin-right: 15px;
    border-right: 1px solid #e5e5e5;

+    .bp4-dark &{
+      border-right-color: rgba(255, 255, 255, 0.2);
+    }
    .bp4-button + .bp4-button {
      margin-left: 10px;
    }
--- a/packages/webapp/src/style/pages/Preferences/Users.scss
+++ b/packages/webapp/src/style/pages/Preferences/Users.scss
@@ -1,6 +1,13 @@
 // Users/Roles List.
 // ---------------------------------
 .preferences-page__inside-content--users {
+  --color-avatar-background: #b7bfc6;
+  --color-avatar-text: #fff;
+
+  .bp4-dark & {
+    --color-avatar-background: rgba(255, 255, 255, 0.2);
+    --color-avatar-text: #fff;
+  }
  .bigcapital-datatable {
    .td {
      .avatar {
@@ -8,7 +15,7 @@
        height: 28px;
        width: 28px;
        text-align: center;
-        background: #b7bfc6;
+        background: var(--color-avatar-background);
        border-radius: 50%;
        line-height: 28px;
        color: #fff;