From 9a89d90f6eb3d7330b7a86aca6ab31b0e11df143 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 31 Aug 2025 17:18:50 +0200
Subject: [PATCH] wip

---
 .../Drawer/DrawerActionBar.module.scss        |  6 +-
 .../webapp/src/components/Forms/Select.tsx    |  2 +-
 .../AccountTransactionsDataTable.tsx          |  8 +-
 .../ItemPaymentTransactions/index.tsx         |  1 -
 .../ItemPaymentTransactions/utils.tsx         | 18 ++++-
 .../Preferences/General/GeneralForm.tsx       | 80 ++++++++++++-------
 packages/webapp/src/style/_variables.scss     |  2 +-
 .../src/style/components/BigAmount.scss       |  2 +-
 .../KeyboardShortcutDialog.scss               | 14 ++--
 9 files changed, 85 insertions(+), 48 deletions(-)

diff --git a/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss b/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss
index 2944ab3d3..b25866e44 100644
--- a/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss
+++ b/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss
@@ -2,11 +2,11 @@
 
 .root {
   --x-color-background: var(--color-white);
-  --x-color-border: rgba(255, 255, 255, 0.2);
+  --x-color-border: hsla(0, 0%, 100%, 0.2);
   
-  :global(.bp4-dark) {
+  :global(.bp4-dark) & {
     --x-color-background: transparent;
-    --x-color-border: var(--color-dark-gray1);
+    --x-color-border: rgba(255, 255, 255, 0.2);
   }
   &:global(.bp4-navbar){
     background-color: var(--x-color-background);
diff --git a/packages/webapp/src/components/Forms/Select.tsx b/packages/webapp/src/components/Forms/Select.tsx
index f53cde7a5..570872998 100644
--- a/packages/webapp/src/components/Forms/Select.tsx
+++ b/packages/webapp/src/components/Forms/Select.tsx
@@ -17,7 +17,7 @@ export function FSelect({ ...props }) {
   return <Select input={input} fill={true} {...props} />;
 }
 
-const SelectButton = styled(Button)`
+export const SelectButton = styled(Button)`
   --x-color-select-background: #fff;
   --x-color-select-border: #ced4da;
   --x-color-select-caret: #8d8d8d;
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
index ef72fba46..1f88a82d3 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
@@ -182,6 +182,12 @@ const DashboardConstrantTable = styled(DataTable)`
 `;
 
 const CashflowTransactionsTable = styled(DashboardConstrantTable)`
+  --table-cell-border-color: #e6e6e6;
+
+  .bp4-dark & {
+    --table-cell-border-color: rgba(255, 255, 255, 0.15);
+  }
+
   .table .tbody {
     .tbody-inner .tr.no-results {
       .td {
@@ -195,7 +201,7 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`
 
     .tbody-inner {
       .tr .td:not(:first-child) {
-        border-left: 1px solid #e6e6e6;
+        border-left: 1px solid var(--table-cell-border-color);
       }
     }
   }
diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.tsx
index 4fc0b4775..910ec5482 100644
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.tsx
@@ -30,7 +30,6 @@ export function ItemTransactionsHeader() {
   const handleItemChange = (item) => {
     setValue(item);
   };
-
   return (
     <ItemTransactionsHeaderRoot>
       <ItemManuTransaction onChange={handleItemChange} />
diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx
index a2b4f546a..4d1cc39c4 100644
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx
@@ -20,11 +20,9 @@ export const ItemManuTransaction = ({ onChange }) => {
   if (itemTransactionMenu.length === 0) {
     return null;
   }
-
   const handleClickItem = (item) => {
     onChange && onChange(item);
   };
-
   const content = itemTransactionMenu.map(({ name, label }) => (
     <MenuItem onClick={() => handleClickItem(name)} text={label} />
   ));
@@ -52,15 +50,27 @@ export const ItemManuTransaction = ({ onChange }) => {
   );
 };
 
+ItemManuTransaction.displayName = 'ItemManuTransaction';
+
 const ItemSwitchButton = styled(Button)`
+  --button-text-color: #727983;
+
+  .bp4-dark & {
+    --button-text-color: rgba(255, 255, 255, 0.65);
+  }
   .bp4-button-text {
     display: flex;
-    color: #727983;
+    color: var(--button-text-color);
   }
 `;
 
 const ItemSwitchText = styled.span`
+  --button-text-color: #33304a;
+
+  .bp4-dark & {
+    --button-text-color: rgba(255, 255, 255, 0.85);
+  }
   font-weight: 600;
-  color: #33304a;
+  color: var(--button-text-color);
   padding-left: 3px;
 `;
diff --git a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
index 3f8cee7c2..3caecb50c 100644
--- a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
+++ b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
@@ -2,10 +2,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { Form } from 'formik';
+import { Form, useFormikContext } from 'formik';
 import { Button, FormGroup, Intent } from '@blueprintjs/core';
-import { TimezonePicker } from '@blueprintjs/timezone';
-import { ErrorMessage, FastField } from 'formik';
+import { TimezonePicker, getTimezoneMetadata } from '@blueprintjs/timezone';
+import { ErrorMessage } from 'formik';
 import { useHistory } from 'react-router-dom';
 import { getAllCountries } from '@bigcapital/utils';
 
@@ -26,6 +26,7 @@ import { getLanguages } from '@/constants/languagesOptions';
 import { useGeneralFormContext } from './GeneralFormProvider';
 
 import { shouldBaseCurrencyUpdate } from './utils';
+import { SelectButton } from '@/components/Forms/Select';
 
 const Countries = getAllCountries();
 /**
@@ -211,32 +212,8 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
         />
       </FormGroup>
 
-      {/* ----------  Time zone ----------  */}
-      <FastField name={'timezone'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'time_zone'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames(
-              'form-group--time-zone',
-              CLASSES.FORM_GROUP_LIST_SELECT,
-              CLASSES.FILL,
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="timezone" />}
-          >
-            <TimezonePicker
-              value={value}
-              onChange={(timezone) => {
-                form.setFieldValue('timezone', timezone);
-              }}
-              valueDisplayFormat="composite"
-              placeholder={<T id={'select_time_zone'} />}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      {/* --------- Timezone ----------- */}
+      <TimezoneField />
 
       {/* --------- Data format ----------- */}
       <FFormGroup
@@ -286,3 +263,48 @@ const CardFooterActions = styled.div`
     }
   }
 `;
+
+function TimezoneField() {
+  const { values, setFieldValue, touched, errors } = useFormikContext();
+  const value = values?.timezone;
+  const error = errors?.timezone;
+  const isTouched = touched?.timezone;
+
+  const compositeLabel = React.useMemo(() => {
+    const placeholder = <T id={'select_time_zone'} />;
+    if (!value) return placeholder;
+    try {
+      const { abbreviation, offsetAsString } = getTimezoneMetadata(
+        value,
+        new Date(),
+      );
+      return `${value}${abbreviation ? ` (${abbreviation})` : ''} ${offsetAsString}`;
+    } catch (e) {
+      return value; // fallback
+    }
+  }, [value]);
+
+  return (
+    <FFormGroup
+      name={'timezone'}
+      label={<T id={'time_zone'} />}
+      labelInfo={<FieldRequiredHint />}
+      inline={true}
+      intent={inputIntent({ error, touched: isTouched })}
+      helperText={<ErrorMessage name="timezone" />}
+    >
+      <TimezonePicker
+        value={value}
+        onChange={(timezone) => setFieldValue('timezone', timezone)}
+        popoverProps={{ minimal: true, fill: true }}
+        fill
+      >
+        <SelectButton
+          text={compositeLabel}
+          className={classNames({ 'is-selected': !!value })}
+          fill
+        />
+      </TimezonePicker>
+    </FFormGroup>
+  );
+}
diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss
index d57b3a104..7fe5b2dea 100644
--- a/packages/webapp/src/style/_variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -509,7 +509,7 @@ body.bp4-dark  {
   --color-transaction-locking-item-enabled-border: var(--color-dark-gray5);
 
   // Reports items.
-  --color-report-section-title-text: var(var(--color-light-gray1));
+  --color-report-section-title-text: var(--color-light-gray1);
   --color-report-item-background: var(--color-dark-gray3);
   --color-report-item-border: var(--color-dark-gray5);
   --color-report-item-top-border: var(--color-dark-gray5);
diff --git a/packages/webapp/src/style/components/BigAmount.scss b/packages/webapp/src/style/components/BigAmount.scss
index 2beb54fec..50eaab67f 100644
--- a/packages/webapp/src/style/components/BigAmount.scss
+++ b/packages/webapp/src/style/components/BigAmount.scss
@@ -3,7 +3,7 @@
   --x-color-amount-text: #343463;
   --x-color-label-text: #5d6f90;
 
-  :global(.bp4-dark)w & {
+  :global(.bp4-dark) & {
     --x-color-label-text: var(--color-light-gray1);
     --x-color-amount-text: var(--color-light-gray2);
   }
diff --git a/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss b/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss
index 7e0b149e4..ecdb8d044 100644
--- a/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss
+++ b/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss
@@ -2,18 +2,15 @@
   .bigcapital-datatable {
     .table {
       max-height: 300px;
-      border: 1px solid #d1dee2;
+      border: 1px solid var(--color-datatable-cell-border);
       min-width: auto;
       margin: 15px;
-      .tbody,
-      .thead .tr .td,
-      .tr .th {
-        background: #fff;
-      }
+
       .tbody,
       .tbody-inner {
         height: 250px;
         scrollbar-width: none;
+
         &::-webkit-scrollbar {
           display: none;
         }
@@ -22,7 +19,10 @@
         .tr .td {
           padding: 0.4rem;
           margin-left: -1px;
-          border-left: 1px solid #ececec;
+          border-left: 1px solid var(--color-datatable-cell-border);
+        }
+        .tr:last-of-type .td {
+          border-bottom: 0;
         }
       }
     }