feat: darkmode preferences screens

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_NOT_FOUND: 'CURRENCY_NOT_FOUND',
-  CURRENCY_CODE_EXISTS: 'currency_code_exists',
+  CURRENCY_CODE_EXISTS: 'CURRENCY_CODE_EXISTS',
   BASE_CURRENCY_INVALID: 'BASE_CURRENCY_INVALID',
   CANNOT_DELETE_BASE_CURRENCY: 'CANNOT_DELETE_BASE_CURRENCY',
 };

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

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 { Classes } from '@blueprintjs/core';
-import { FastField } from 'formik';
+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'}>
+      <FFormGroup
-        {({
+        name={'currency_code'}
-          form: { setFieldValue },
+        label={<T id={'currency_code'} />}
-          field: { value },
+      >
-          meta: { error, touched },
+        <FSelect
-        }) => (
+          name={'currency_code'}
-          <FormGroup
+          items={currenciesOptions}
-            label={<T id={'currency_code'} />}
+          valueAccessor={'currency_code'}
-            className={classNames(CLASSES.FILL, 'form-group--type')}
+          textAccessor={'formatted_name'}
-          >
+          placeholder={<T id={'select_currency_code'} />}
-            <ListSelect
+          onItemSelect={(currency) => {
-              items={currenciesOptions}
+            setFieldValue('currency_code', currency.currency_code);
-              selectedItemProp={'currency_code'}
+            setFieldValue('currency_name', currency.name);
-              selectedItem={value}
+            setFieldValue('currency_sign', currency.symbol);
-              textProp={'formatted_name'}
+          }}
-              defaultText={<T id={'select_currency_code'} />}
+          itemPredicate={filterCurrencyCode}
-              onItemSelect={(currency) => {
+          disabled={isEditMode}
-                setFieldValue('currency_code', currency.currency_code);
+          popoverProps={{ minimal: true }}
-                setFieldValue('currency_name', currency.name);
+        />
-                setFieldValue('currency_sign', currency.symbol);
+      </FFormGroup>
-              }}
+
-              itemPredicate={filterCurrencyCode}
-              disabled={isEditMode}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
       {/* ----------- Currency name ----------- */}
-      <FastField name={'currency_name'}>
+      <FFormGroup
-        {({ field, field: { value }, meta: { error, touched } }) => (
+        name={'currency_name'}
-          <FormGroup
+        label={<T id={'currency_name'} />}
-            label={<T id={'currency_name'} />}
+        labelInfo={<FieldRequiredHint />}
-            labelInfo={<FieldRequiredHint />}
+      >
-            className={'form-group--currency-name'}
+        <FInputGroup
-            intent={inputIntent({ error, touched })}
+          name={'currency_name'}
-            helperText={<ErrorMessage name="currency_name" />}
+          inputRef={(ref) => (currencyNameFieldRef.current = ref)}
-            // inline={true}
+        />
-          >
+      </FFormGroup>
-            <InputGroup
+
-              inputRef={(ref) => (currencyNameFieldRef.current = ref)}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
       {/* ----------- Currency Code ----------- */}
-      <FastField name={'currency_sign'}>
+      <FFormGroup
-        {({ field, field: { value }, meta: { error, touched } }) => (
+        name={'currency_sign'}
-          <FormGroup
+        label={<T id={'currency_sign'} />}
-            label={<T id={'currency_sign'} />}
+        labelInfo={<FieldRequiredHint />}
-            labelInfo={<FieldRequiredHint />}
+      >
-            className={'form-group--currency-sign'}
+        <FInputGroup name={'currency_sign'} />
-            intent={inputIntent({ error, touched })}
+      </FFormGroup>
-            helperText={<ErrorMessage name="currency_sign" />}
-          >
-            <InputGroup {...field} />
-          </FormGroup>
-        )}
-      </FastField>
     </div>
   );
 }

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

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;

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;

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;

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.15);
-  --color-sidebar-preferences-border: rgba(255, 255, 255, 0.25);
 
   // 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-border: rgba(255, 255, 255, 0.1);
-  --color-preferences-sidebar-head-text: #3b3b4c;
-
-  --color-preferences-sidebar-head-border: rgba(255, 255, 255, 0.25);
   --color-preferences-sidebar-head-text: rgba(255, 255, 255, 0.85);
 
   // Preferences - Topbar.

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;

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;

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

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;