wip

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

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;

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

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

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

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 { TimezonePicker, getTimezoneMetadata } from '@blueprintjs/timezone';
-import { ErrorMessage, FastField } from 'formik';
+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 ----------  */}
+      {/* --------- Timezone ----------- */}
-      <FastField name={'timezone'}>
+      <TimezoneField />
-        {({ 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>
 
       {/* --------- 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>
+  );
+}

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

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

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