Merge pull request #927 from bigcapitalhq/feature/20260202223150

fix(webapp): darkmode warehouses list page

packages/webapp/src/components/Preferences/PreferencesSidebar.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
 import { FormattedMessage as T } from '@/components';
-import preferencesMenu from '@/constants/preferencesMenu';
+import { PreferencesMenu } from '@/constants/preferencesMenu';
 import PreferencesSidebarContainer from './PreferencesSidebarContainer';
 
 import '@/style/pages/Preferences/Sidebar.scss';
@@ -15,7 +15,7 @@ export default function PreferencesSidebar() {
   const history = useHistory();
   const location = useLocation();
 
-  const items = preferencesMenu.map((item) =>
+  const items = PreferencesMenu.map((item) =>
     item.divider ? (
       <MenuDivider title={item.title} />
     ) : (

packages/webapp/src/constants/allocateLandedCostType.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import intl from 'react-intl-universal';
 
-export default [
+export const AllocateLandedCostType = [
   { name: intl.get('bills'), value: 'Bill' },
   { name: intl.get('expenses'), value: 'Expense' },
 ];

packages/webapp/src/constants/app.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-export default {
+export const App = {
   "app_name": "BigCapital",
   "app_version": "0.0.1 (build 12344)",
 }

packages/webapp/src/constants/contactsOptions.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-export default [
+export const ContactsOptions = [
   { name: intl.get('customer'), path: 'customers' },
   { name: intl.get('vendor'), path: 'vendors' },
 ];

packages/webapp/src/constants/keyboardShortcutsOptions.tsx

@@ -16,7 +16,7 @@ import {
   VendorAction,
 } from './abilityOption';
 
-export default [
+export const KeyboardShortcutsOptions = [
   {
     shortcut_key: 'Shift + I',
     description: intl.get('jump_to_the_invoices'),

packages/webapp/src/constants/preferencesMenu.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { FormattedMessage as T } from '@/components';
 
-export default [
+export const PreferencesMenu = [
   {
     text: <T id={'general'} />,
     disabled: false,
@@ -13,10 +13,10 @@ export default [
     disabled: false,
     href: '/preferences/branding',
   },
-  {
-    text: 'Billing',
-    href: '/preferences/billing',
-  },
+  // {
+  //   text: 'Billing',
+  //   href: '/preferences/billing',
+  // },
   {
     text: <T id={'users'} />,
     href: '/preferences/users',
@@ -63,11 +63,11 @@ export default [
     disabled: false,
     href: '/preferences/items',
   },
-  {
-    text: 'Integrations',
-    disabled: false,
-    href: '/preferences/integrations'
-  },
+  // {
+  //   text: 'Integrations',
+  //   disabled: false,
+  //   href: '/preferences/integrations'
+  // },
   {
     text: 'API Keys',
     disabled: false,

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx

@@ -16,7 +16,7 @@ import { FormattedMessage as T, If, FFormGroup, FSelect, FRadioGroup, FInputGrou
 import { handleStringChange } from '@/utils';
 import { FieldRequiredHint } from '@/components';
 import { CLASSES } from '@/constants/classes';
-import allocateLandedCostType from '@/constants/allocateLandedCostType';
+import { AllocateLandedCostType } from '@/constants/allocateLandedCostType';
 
 import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
 import {
@@ -81,7 +81,7 @@ export default function AllocateLandedCostFormFields() {
       >
         <FSelect
           name={'transaction_type'}
-          items={allocateLandedCostType}
+          items={AllocateLandedCostType}
           onItemChange={handleTransactionTypeChange}
           filterable={false}
           valueAccessor={'value'}

packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx

@@ -9,7 +9,7 @@ import { FormattedMessage as T } from '@/components';
 import { useHistory } from 'react-router-dom';
 import { useContactDuplicateFromContext } from './ContactDuplicateProvider';
 
-import Contacts from '@/constants/contactsOptions';
+import { ContactsOptions } from '@/constants/contactsOptions';
 
 import { withDialogActions } from '@/containers/Dialog/withDialogActions';
 import { compose } from '@/utils';
@@ -66,7 +66,7 @@ function ContactDuplicateForm({
             >
               <FSelect
                 name={'contact_type'}
-                items={Contacts}
+                items={ContactsOptions}
                 placeholder={<T id={'select_contact'} />}
                 textAccessor={'name'}
                 valueAccessor={'path'}

packages/webapp/src/containers/Preferences/Warehouses/components.tsx

@@ -87,7 +87,7 @@ export function WarehousesGridItemBox({
     <WarehouseBoxRoot>
       <WarehouseHeader>
         <WarehouseTitle>
-          {title} {primary && <Icon icon={'star-18dp'} iconSize={16} />}
+          {title} {primary ? <Icon icon={'star-18dp'} iconSize={16} /> : null}
         </WarehouseTitle>
         <WarehouseCode>{code}</WarehouseCode>
         <WarehouseIcon>
@@ -118,12 +118,21 @@ export const WarehousesList = styled.div`
 `;
 
 export const WarehouseBoxRoot = styled.div`
+  --x-box-border-color: #c8cad0;
+  --x-box-background-color: #fff;
+  --x-box-hover-border-color: #0153cc;
+
+  .bp4-dark & {
+    --x-box-border-color: rgba(255, 255, 255, 0.2);
+    --x-box-background-color: var(--color-dark-gray3);
+    --x-box-hover-border-color: #0153cc;
+  }
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   border-radius: 5px;
-  border: 1px solid #c8cad0;
-  background: #fff;
+  border: 1px solid var(--x-box-border-color);
+  background: var(--x-box-background-color);
   margin: 5px 5px 8px;
   width: 200px;
   height: 160px;
@@ -132,7 +141,7 @@ export const WarehouseBoxRoot = styled.div`
   position: relative;
 
   &:hover {
-    border-color: #0153cc;
+    border-color: var(--x-box-hover-border-color);
   }
 `;
 
@@ -143,9 +152,16 @@ export const WarehouseHeader = styled.div`
 `;
 
 export const WarehouseTitle = styled.div`
+  --x-title-color: #000;
+  --x-title-icon-color: #e1b31d;
+
+  .bp4-dark & {
+    --x-title-color: var(--color-light-gray5);
+    --x-title-icon-color: #e1b31d;
+  }
   font-size: 14px;
   font-style: inherit;
-  color: #000;
+  color: var(--x-title-color);
   white-space: nowrap;
   font-weight: 500;
   line-height: 1;
@@ -154,14 +170,19 @@ export const WarehouseTitle = styled.div`
     margin: 0;
     margin-left: 2px;
     vertical-align: top;
-    color: #e1b31d;
+    color: var(--x-title-icon-color);
   }
 `;
 
 const WarehouseCode = styled.div`
+  --x-code-color: #6b7176;
+
+  .bp4-dark & {
+    --x-code-color: var(--color-muted-text);
+  }
   display: block;
   font-size: 11px;
-  color: #6b7176;
+  color: var(--x-code-color);
   margin-top: 4px;
 `;
 
@@ -178,8 +199,13 @@ const WarehouseContent = styled.div`
 `;
 
 const WarehouseItem = styled.div`
+  --x-item-color: #000;
+
+  .bp4-dark & {
+    --x-item-color: var(--color-light-gray1);
+  }
   font-size: 11px;
-  color: #000;
+  color: var(--x-item-color);
   text-overflow: ellipsis;
   overflow: hidden;
 

packages/webapp/src/hooks/dashboard/useKeywordShortcuts.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import keyboardShortcuts from '@/constants/keyboardShortcutsOptions';
+import { KeyboardShortcutsOptions } from '@/constants/keyboardShortcutsOptions';
 import { useAbilitiesFilter } from '../utils/useAbilityContext';
 
 /**
@@ -10,7 +10,7 @@ export const useKeywordShortcuts = () => {
   const abilitiesFilter = useAbilitiesFilter();
 
   return React.useMemo(
-    () => abilitiesFilter(keyboardShortcuts),
+    () => abilitiesFilter(KeyboardShortcutsOptions),
     [abilitiesFilter],
   );
 };

packages/webapp/src/routes/preferences.tsx

@@ -11,7 +11,10 @@ export const getPreferenceRoutes = () => [
   },
   {
     path: `${BASE_URL}/branding`,
-    component: lazy(() => import('../containers/Preferences/Branding/PreferencesBrandingPage')),
+    component: lazy(
+      () =>
+        import('../containers/Preferences/Branding/PreferencesBrandingPage'),
+    ),
     exact: true,
   },
   {
@@ -29,14 +32,20 @@ export const getPreferenceRoutes = () => [
   {
     path: `${BASE_URL}/payment-methods`,
     component: lazy(
-      () => import('../containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage'),
+      () =>
+        import(
+          '../containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage'
+        ),
     ),
     exact: true,
   },
   {
     path: `${BASE_URL}/payment-methods/stripe/callback`,
     component: lazy(
-      () => import('../containers/Preferences/PaymentMethods/PreferencesStripeCallback'),
+      () =>
+        import(
+          '../containers/Preferences/PaymentMethods/PreferencesStripeCallback'
+        ),
     ),
     exact: true,
   },
@@ -112,16 +121,6 @@ export const getPreferenceRoutes = () => [
     component: lazy(() => import('@/containers/Preferences/Item')),
     exact: true,
   },
-  // {
-  //   path: `${BASE_URL}/sms-message`,
-  //   component: SMSIntegration,
-  //   exact: true,
-  // },
-  {
-    path: `${BASE_URL}/billing`,
-    component: lazy(() => import('@/containers/Subscriptions/BillingPage')),
-    exact: true,
-  },
   {
     path: `${BASE_URL}/api-keys`,
     component: lazy(() => import('@/containers/Preferences/ApiKeys/ApiKeys')),