fix: improvements to bank matching transactions

2026-02-14 11:50:31 +00:00 · 2024-07-06 19:10:07 +02:00
parent cd9039fe16
commit b7487f19d3
18 changed files with 188 additions and 233 deletions
--- a/packages/server/src/loaders/eventEmitter.ts
+++ b/packages/server/src/loaders/eventEmitter.ts
@@ -110,6 +110,7 @@ import { ValidateMatchingOnPaymentMadeDelete } from '@/services/Banking/Matching
 import { ValidateMatchingOnCashflowDelete } from '@/services/Banking/Matching/events/ValidateMatchingOnCashflowDelete';
 import { RecognizeSyncedBankTranasctions } from '@/services/Banking/Plaid/subscribers/RecognizeSyncedBankTransactions';
 import { UnlinkBankRuleOnDeleteBankRule } from '@/services/Banking/Rules/events/UnlinkBankRuleOnDeleteBankRule';
+import { DecrementUncategorizedTransactionOnMatching } from '@/services/Banking/Matching/events/DecrementUncategorizedTransactionsOnMatch';

 export default () => {
  return new EventPublisher();
@@ -258,6 +259,7 @@ export const susbcribers = () => {
    // Bank Rules
    TriggerRecognizedTransactions,
    UnlinkBankRuleOnDeleteBankRule,
+    DecrementUncategorizedTransactionOnMatching,

    // Validate matching
    ValidateMatchingOnCashflowDelete,
@@ -266,7 +268,7 @@ export const susbcribers = () => {
    ValidateMatchingOnPaymentReceivedDelete,
    ValidateMatchingOnPaymentMadeDelete,

-    // Plaid 
+    // Plaid
    RecognizeSyncedBankTranasctions,
  ];
 };
--- a/packages/server/src/models/UncategorizedCashflowTransaction.ts
+++ b/packages/server/src/models/UncategorizedCashflowTransaction.ts
@@ -105,8 +105,34 @@ export default class UncategorizedCashflowTransaction extends mixin(
       * Filters the excluded transactions.
       */
      excluded(query) {
-        query.whereNotNull('excluded_at')
-      }
+        query.whereNotNull('excluded_at');
+      },
+
+      /**
+       * Filter out the recognized transactions.
+       * @param query
+       */
+      recognized(query) {
+        query.whereNotNull('recognizedTransactionId');
+      },
+
+      /**
+       * Filter out the not recognized transactions.
+       * @param query
+       */
+      notRecognized(query) {
+        query.whereNull('recognizedTransactionId');
+      },
+
+      categorized(query) {
+        query.whereNotNull('categorizeRefType');
+        query.whereNotNull('categorizeRefId');
+      },
+
+      notCategorized(query) {
+        query.whereNull('categorizeRefType');
+        query.whereNull('categorizeRefId');
+      },
    };
  }

--- a/packages/server/src/services/Banking/BankAccounts/GetBankAccountSummary.ts
+++ b/packages/server/src/services/Banking/BankAccounts/GetBankAccountSummary.ts
@@ -1,6 +1,6 @@
-import HasTenancyService from '@/services/Tenancy/TenancyService';
-import { Server } from 'socket.io';
 import { Inject, Service } from 'typedi';
+import { initialize } from 'objection';
+import HasTenancyService from '@/services/Tenancy/TenancyService';

@Service()
 export class GetBankAccountSummary {
@@ -14,22 +14,41 @@ export class GetBankAccountSummary {
   * @returns
   */
  public async getBankAccountSummary(tenantId: number, bankAccountId: number) {
+    const knex = this.tenancy.knex(tenantId);
    const {
      Account,
      UncategorizedCashflowTransaction,
      RecognizedBankTransaction,
    } = this.tenancy.models(tenantId);

+    await initialize(knex, [
+      UncategorizedCashflowTransaction,
+      RecognizedBankTransaction,
+    ]);
    const bankAccount = await Account.query()
      .findById(bankAccountId)
      .throwIfNotFound();

    // Retrieves the uncategorized transactions count of the given bank account.
    const uncategorizedTranasctionsCount =
-      await UncategorizedCashflowTransaction.query()
-        .where('accountId', bankAccountId)
-        .count('id as total')
-        .first();
+      await UncategorizedCashflowTransaction.query().onBuild((q) => {
+        // Include just the given account.
+        q.where('accountId', bankAccountId);
+
+        // Only the not excluded.
+        q.modify('notExcluded');
+
+        // Only the not categorized.
+        q.modify('notCategorized');
+
+        // Only the not matched bank transactions.
+        q.withGraphJoined('matchedBankTransactions');
+        q.whereNull('matchedBankTransactions.id');
+
+        // Count the results.
+        q.count('uncategorized_cashflow_transactions.id as total');
+        q.first();
+      });

    // Retrieves the recognized transactions count of the given bank account.
    const recognizedTransactionsCount = await RecognizedBankTransaction.query()
@@ -43,8 +62,8 @@ export class GetBankAccountSummary {
      .first();

    const totalUncategorizedTransactions =
-      uncategorizedTranasctionsCount?.total;
-    const totalRecognizedTransactions = recognizedTransactionsCount?.total;
+      uncategorizedTranasctionsCount?.total || 0;
+    const totalRecognizedTransactions = recognizedTransactionsCount?.total || 0;

    return {
      name: bankAccount.name,
--- a/packages/server/src/services/Banking/Matching/UnmatchMatchedTransaction.ts
+++ b/packages/server/src/services/Banking/Matching/UnmatchMatchedTransaction.ts
@@ -31,6 +31,7 @@ export class UnmatchMatchedBankTransaction {
    return this.uow.withTransaction(tenantId, async (trx) => {
      await this.eventPublisher.emitAsync(events.bankMatch.onUnmatching, {
        tenantId,
+        uncategorizedTransactionId,
        trx,
      } as IBankTransactionUnmatchingEventPayload);

@@ -40,6 +41,7 @@ export class UnmatchMatchedBankTransaction {

      await this.eventPublisher.emitAsync(events.bankMatch.onUnmatched, {
        tenantId,
+        uncategorizedTransactionId,
        trx,
      } as IBankTransactionUnmatchingEventPayload);
    });
--- a/packages/server/src/services/Banking/Matching/ValidateTransactionsMatched.ts
+++ b/packages/server/src/services/Banking/Matching/ValidateTransactionsMatched.ts
@@ -1,6 +1,7 @@
+import { Knex } from 'knex';
+import { Inject, Service } from 'typedi';
 import { ServiceError } from '@/exceptions';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
-import { Inject, Service } from 'typedi';
 import { ERRORS } from './types';

@Service()
@@ -18,12 +19,13 @@ export class ValidateTransactionMatched {
  public async validateTransactionNoMatchLinking(
    tenantId: number,
    referenceType: string,
-    referenceId: number
+    referenceId: number,
+    trx?: Knex.Transaction
  ) {
    const { MatchedBankTransaction } = this.tenancy.models(tenantId);

    const foundMatchedTransaction =
-      await MatchedBankTransaction.query().findOne({
+      await MatchedBankTransaction.query(trx).findOne({
        referenceType,
        referenceId,
      });
--- a/packages/server/src/services/Banking/Matching/events/DecrementUncategorizedTransactionsOnMatch.ts
+++ b/packages/server/src/services/Banking/Matching/events/DecrementUncategorizedTransactionsOnMatch.ts
@@ -0,0 +1,69 @@
+import { Inject, Service } from 'typedi';
+import events from '@/subscribers/events';
+import {
+  IBankTransactionMatchedEventPayload,
+  IBankTransactionUnmatchedEventPayload,
+} from '../types';
+import HasTenancyService from '@/services/Tenancy/TenancyService';
+
+@Service()
+export class DecrementUncategorizedTransactionOnMatching {
+  @Inject()
+  private tenancy: HasTenancyService;
+  /**
+   * Constructor method.
+   */
+  public attach(bus) {
+    bus.subscribe(
+      events.bankMatch.onMatched,
+      this.decrementUnCategorizedTransactionsOnMatching.bind(this)
+    );
+    bus.subscribe(
+      events.bankMatch.onUnmatched,
+      this.incrementUnCategorizedTransactionsOnUnmatching.bind(this)
+    );
+  }
+
+  /**
+   * Validates the cashflow transaction whether matched with bank transaction on deleting.
+   * @param {IManualJournalDeletingPayload}
+   */
+  public async decrementUnCategorizedTransactionsOnMatching({
+    tenantId,
+    uncategorizedTransactionId,
+    matchTransactionsDTO,
+    trx,
+  }: IBankTransactionMatchedEventPayload) {
+    const { UncategorizedCashflowTransaction, Account } =
+      this.tenancy.models(tenantId);
+
+    const transaction = await UncategorizedCashflowTransaction.query().findById(
+      uncategorizedTransactionId
+    );
+    //
+    await Account.query(trx)
+      .findById(transaction.accountId)
+      .decrement('uncategorizedTransactions', 1);
+  }
+
+  /**
+   * Validates the cashflow transaction whether matched with bank transaction on deleting.
+   * @param {IManualJournalDeletingPayload}
+   */
+  public async incrementUnCategorizedTransactionsOnUnmatching({
+    tenantId,
+    uncategorizedTransactionId,
+    trx,
+  }: IBankTransactionUnmatchedEventPayload) {
+    const { UncategorizedCashflowTransaction, Account } =
+      this.tenancy.models(tenantId);
+
+    const transaction = await UncategorizedCashflowTransaction.query().findById(
+      uncategorizedTransactionId
+    );
+    //
+    await Account.query(trx)
+      .findById(transaction.accountId)
+      .decrement('uncategorizedTransactions', 1);
+  }
+}
--- a/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnCashflowDelete.ts
+++ b/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnCashflowDelete.ts
@@ -1,5 +1,5 @@
 import { Inject, Service } from 'typedi';
-import { IManualJournalDeletingPayload } from '@/interfaces';
+import { ICommandCashflowDeletingPayload, IManualJournalDeletingPayload } from '@/interfaces';
 import events from '@/subscribers/events';
 import { ValidateTransactionMatched } from '../ValidateTransactionsMatched';

@@ -24,13 +24,14 @@ export class ValidateMatchingOnCashflowDelete {
   */
  public async validateMatchingOnCashflowDeleting({
    tenantId,
-    oldManualJournal,
+    oldCashflowTransaction,
    trx,
-  }: IManualJournalDeletingPayload) {
+  }: ICommandCashflowDeletingPayload) {
    await this.validateNoMatchingLinkedService.validateTransactionNoMatchLinking(
      tenantId,
-      'ManualJournal',
-      oldManualJournal.id
+      'CashflowTransaction',
+      oldCashflowTransaction.id,
+      trx
    );
  }
 }
--- a/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnExpenseDelete.ts
+++ b/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnExpenseDelete.ts
@@ -30,7 +30,8 @@ export class ValidateMatchingOnExpenseDelete {
    await this.validateNoMatchingLinkedService.validateTransactionNoMatchLinking(
      tenantId,
      'Expense',
-      oldExpense.id
+      oldExpense.id,
+      trx
    );
  }
 }
--- a/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnManualJournalDelete.ts
+++ b/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnManualJournalDelete.ts
@@ -30,7 +30,8 @@ export class ValidateMatchingOnManualJournalDelete {
    await this.validateNoMatchingLinkedService.validateTransactionNoMatchLinking(
      tenantId,
      'ManualJournal',
-      oldManualJournal.id
+      oldManualJournal.id,
+      trx
    );
  }
 }
--- a/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnPaymentMadeDelete.ts
+++ b/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnPaymentMadeDelete.ts
@@ -33,7 +33,8 @@ export class ValidateMatchingOnPaymentMadeDelete {
    await this.validateNoMatchingLinkedService.validateTransactionNoMatchLinking(
      tenantId,
      'PaymentMade',
-      oldBillPayment.id
+      oldBillPayment.id,
+      trx
    );
  }
 }
--- a/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnPaymentReceivedDelete.ts
+++ b/packages/server/src/services/Banking/Matching/events/ValidateMatchingOnPaymentReceivedDelete.ts
@@ -30,7 +30,8 @@ export class ValidateMatchingOnPaymentReceivedDelete {
    await this.validateNoMatchingLinkedService.validateTransactionNoMatchLinking(
      tenantId,
      'PaymentReceive',
-      oldPaymentReceive.id
+      oldPaymentReceive.id,
+      trx
    );
  }
 }
--- a/packages/server/src/services/Banking/Matching/types.ts
+++ b/packages/server/src/services/Banking/Matching/types.ts
@@ -16,10 +16,14 @@ export interface IBankTransactionMatchedEventPayload {

 export interface IBankTransactionUnmatchingEventPayload {
  tenantId: number;
+  uncategorizedTransactionId: number;
+  trx?: Knex.Transaction;
 }

 export interface IBankTransactionUnmatchedEventPayload {
  tenantId: number;
+  uncategorizedTransactionId: number;
+  trx?: Knex.Transaction;
 }

 export interface IMatchTransactionDTO {
--- a/packages/webapp/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.tsx
@@ -69,6 +69,14 @@ function AccountDeleteTransactionAlert({
                'Cannot delete transaction converted from uncategorized transaction but you uncategorize it.',
              intent: Intent.DANGER,
            });
+          } else if (
+            errors.find((e) => e.type === 'CANNOT_DELETE_TRANSACTION_MATCHED')
+          ) {
+            AppToaster.show({
+              message:
+                'Cannot delete a transaction matched to the bank transaction',
+              intent: Intent.DANGER,
+            });
          }
        },
      )
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
@@ -15,7 +15,6 @@
      color: rgb(21, 82, 200),
    }
  }
-
  &:hover:not(.active){
    border-color: #c0c0c0;
  }
@@ -25,7 +24,7 @@
  margin: 0;
 }
 .checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
-  border-color: #CBCBCB;
+  box-shadow: 0 0 0 1px #CBCBCB;
 }
 .checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
  margin-right: 4px;
@@ -34,9 +33,17 @@
  width: 16px;
 }

+.checkbox:global(.bp4-control.bp4-checkbox) :global input:checked ~ .bp4-control-indicator{
+  box-shadow:  0 0 0 1px #0069ff;
+}
+
 .label {
-  color: #10161A;
-  font-size: 15px;
+  color: #252A33;
+  font-size: 15px; 
+}
+.label :global strong {
+  font-weight: 500;
+  font-variant-numeric:tabular-nums;
 }

 .date {
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.tsx
@@ -9,7 +9,7 @@ export interface MatchTransactionCheckboxProps {
  active?: boolean;
  initialActive?: boolean;
  onChange?: (state: boolean) => void;
-  label: string;
+  label: string | React.ReactNode;
  date: string;
 }

@@ -43,7 +43,7 @@ export function MatchTransactionCheckbox({
      position="apart"
      onClick={handleClick}
    >
-      <Stack spacing={3}>
+      <Stack spacing={2}>
        <span className={styles.label}>{label}</span>
        <Text className={styles.date}>Date: {date}</Text>
      </Stack>
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx
@@ -237,9 +237,6 @@ function PossibleMatchingTransactions() {
      <Box className={styles.matchBar}>
        <Stack spacing={2}>
          <h2 className={styles.matchBarTitle}>Possible Matches</h2>
-          <Text style={{ fontSize: 12, color: '#5C7080' }}>
-            Transactions up to 20 Aug 2019
-          </Text>
        </Stack>
      </Box>

@@ -247,7 +244,12 @@ function PossibleMatchingTransactions() {
        {possibleMatches.map((match, index) => (
          <MatchTransactionField
            key={index}
-            label={`${match.transsactionTypeFormatted} for ${match.amountFormatted}`}
+            label={
+              <>
+                {`${match.transsactionTypeFormatted} for `}
+                <strong>{match.amountFormatted}</strong>
+              </>
+            }
            date={match.dateFormatted}
            transactionId={match.referenceId}
            transactionType={match.referenceType}
@@ -329,7 +331,7 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
              </AnchorButton>
            )}
            <Text
-              style={{ fontSize: 14, marginLeft: 'auto', color: '#5F6B7C' }}
+              style={{ fontSize: 14, marginLeft: 'auto', color: '#404854' }}
              tagName="span"
            >
              Pending <FormatNumber value={totalPending} currency={'USD'} />
@@ -343,8 +345,8 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
              intent={Intent.PRIMARY}
              style={{ minWidth: 85 }}
              onClick={handleSubmitBtnClick}
-              // loading={isSubmitting}
-              // disabled={submitDisabled}
+              loading={isSubmitting}
+              disabled={submitDisabled}
            >
              Match
            </Button>
--- a/packages/webapp/src/style/_variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -50,3 +50,9 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
 // z-indexs
 $zindex-dashboard-splash-screen: 39;
 $zindex-toast: 40;
+
+// Controls
+$control-checked-background-color: #0069ff !default;
+$control-checked-background-color-hover: #0069ff !default;
+$control-checked-background-color-active: #0069ff !default;
+$control-box-shadow: inset 0 0 0 1px #666 !default;
--- a/packages/webapp/src/style/objects/form.scss
+++ b/packages/webapp/src/style/objects/form.scss
@@ -271,203 +271,6 @@ label.bp4-label {
 .select-list--tooltip-items .bp4-popover-target {
  display: block;
 }
-
-@mixin control-checked-colors($selector: ':checked') {
-  input#{$selector}~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: $control-checked-background-color;
-    color: $white;
-  }
-
-  &:hover input#{$selector}~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: $control-checked-background-color-hover;
-    border-color: $control-checked-background-color-active;
-  }
-
-  input:not(:disabled):active#{$selector}~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: $control-checked-background-color-active;
-    border-color: $control-checked-background-color-active;
-  }
-
-  input:disabled#{$selector}~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background: rgba($control-checked-background-color, 0.5);
-  }
-}
-
-///@extend
-.#{$ns}-control {
-  input:checked~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: transparent;
-    background-image: none;
-  }
-
-  &:hover input:checked~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background-color: transparent;
-  }
-
-  input:not(:disabled):active:checked~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background: transparent;
-  }
-
-  input:disabled:checked~.#{$ns}-control-indicator {
-    box-shadow: none;
-    background: transparent;
-  }
-
-  &.#{$ns}-disabled {
-    cursor: not-allowed;
-    color: $pt-text-color-disabled;
-  }
-
-  &.#{$ns}-inline {
-    display: inline-block;
-    margin-right: $pt-grid-size * 2;
-  }
-
-  .#{$ns}-control-indicator {
-    box-shadow: 0 0 0 transparent;
-    background-clip: padding-box;
-    background-color: transparent;
-    background-image: none;
-    width: 18px;
-    height: 18px;
-
-    &::before {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &.bp4-large .#{$ns}-control-indicator {
-    width: 20px;
-    height: 20px;
-
-    &::before {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  &:hover .#{$ns}-control-indicator {
-    background-color: transparent;
-  }
-
-  input:not(:disabled):active~.#{$ns}-control-indicator {
-    box-shadow: 0 0 0 transparent;
-    background: transparent;
-  }
-
-  /*
-    Checkbox
-
-    Markup:
-    <label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
-      <input type="checkbox" {{:modifier}} />
-      <span class="#{$ns}-control-indicator"></span>
-      Checkbox
-    </label>
-
-    :checked  - Checked
-    :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
-    :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
-                     <code>input.indeterminate = true</code>.
-    .#{$ns}-align-right - Right-aligned indicator
-    .#{$ns}-large - Large
-
-    Styleguide checkbox
-  */
-  &.#{$ns}-checkbox {
-    &:hover input:indeterminate~.#{$ns}-control-indicator {
-      // box-shadow: 0 0 0 transparent;
-    }
-
-    @mixin indicator-inline-icon($icon) {
-      &::before {
-        // embed SVG icon image as backgroud-image above gradient.
-        // the SVG image content is inlined into the CSS, so use this sparingly.
-        height: 100%;
-        width: 100%;
-      }
-    }
-
-    @include control-checked-colors(':checked');
-
-    // make :indeterminate look like :checked _for Checkbox only_
-    @include control-checked-colors(':indeterminate');
-
-    .#{$ns}-control-indicator {
-      border: 1px solid #c6c6c6;
-      border-radius: $pt-border-radius;
-      background-color: #fff;
-    }
-
-    input:checked~.#{$ns}-control-indicator {
-      background-image: escape-svg($form-check-input-checked-bg-image);
-      border-color: $form-check-input-checked-bg-color;
-      background-color: $form-check-input-checked-bg-color;
-    }
-
-    input:indeterminate~.#{$ns}-control-indicator {
-      // background-image: escape-svg($form-check-input-indeterminate-bg-image);
-      border-color: $form-check-input-checked-bg-color;
-      background-color: $form-check-input-checked-bg-color;
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-
-  /*
-    Radio
-
-    Markup:
-    <label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
-      <input type="radio" name="docs-radio-regular" {{:modifier}} />
-      <span class="#{$ns}-control-indicator"></span>
-      Radio
-    </label>
-
-    :checked  - Selected
-    :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
-    .#{$ns}-align-right - Right-aligned indicator
-    .#{$ns}-large - Large
-
-    Styleguide radio
-  */
-  &.#{$ns}-radio {
-    .#{$ns}-control-indicator {
-      border: 2px solid #cecece;
-      background-color: #fff;
-
-      &::before {
-        height: 14px;
-        width: 14px;
-      }
-    }
-
-    input:checked~.#{$ns}-control-indicator {
-      border-color: $form-check-input-checked-bg-color;
-
-      &::before {
-        background-image: radial-gradient($form-check-input-checked-bg-color 40%,
-            transparent 40%);
-      }
-    }
-
-    input:checked:disabled~.#{$ns}-control-indicator::before {
-      opacity: 0.5;
-    }
-
-    input:focus~.#{$ns}-control-indicator {
-      -moz-outline-radius: $control-indicator-size;
-    }
-  }
-}
-
 .bp4-menu-item::before,
 .bp4-menu-item>.bp4-icon {
  color: #4b5d6b;