wip

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