From 55caf037cdc0f1b03d19852c59c822cffa4c5ad2 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Mon, 1 Jul 2024 19:24:09 +0200 Subject: [PATCH] fix: match transaction aside layout --- .../src/components/AppShell/AppShell.module.scss | 7 ++++++- .../webapp/src/components/Aside/Aside.module.scss | 12 ++++++++++++ packages/webapp/src/components/Aside/Aside.tsx | 6 +++--- .../RecognizedTransactionsTable.tsx | 7 ++++--- .../RecognizedTransactions/_components.tsx | 7 ++++++- .../drawers/CategorizeTransactionDrawer/_utils.ts | 1 + .../CategorizeTransactionAside.module.scss | 7 ++----- .../CategorizeTransactionTabs.module.scss | 10 ++++++++++ .../MatchTransaction.module.scss | 10 ++++++++++ .../CategorizeTransactionAside/MatchTransaction.tsx | 2 +- .../MatchingTransaction.tsx | 6 +++--- 11 files changed, 58 insertions(+), 17 deletions(-) diff --git a/packages/webapp/src/components/AppShell/AppShell.module.scss b/packages/webapp/src/components/AppShell/AppShell.module.scss index 411286d25..7d3364303 100644 --- a/packages/webapp/src/components/AppShell/AppShell.module.scss +++ b/packages/webapp/src/components/AppShell/AppShell.module.scss @@ -1,5 +1,7 @@ :root { --aside-topbar-offset: 60px; + --aside-width: 34%; + --aside-min-width: 400px; } .main{ @@ -9,11 +11,14 @@ } .aside{ - width: 500px; + width: var(--aside-width); + min-width: var(--aside-min-width); height: 100dvh; border-left: 1px solid rgba(17, 20, 24, 0.15); height: inherit; overflow: auto; + display: flex; + flex-direction: column; } .root { diff --git a/packages/webapp/src/components/Aside/Aside.module.scss b/packages/webapp/src/components/Aside/Aside.module.scss index f2c85a54c..4fd2a37a1 100644 --- a/packages/webapp/src/components/Aside/Aside.module.scss +++ b/packages/webapp/src/components/Aside/Aside.module.scss @@ -1,3 +1,9 @@ +.root{ + display: flex; + flex-direction: column; + flex: 1 1 auto; +} + .title{ align-items: center; background: #fff; @@ -9,3 +15,9 @@ z-index: 0; font-weight: 600; } + +.content{ + display: flex; + flex-direction: column; + flex: 1 1 auto; +} \ No newline at end of file diff --git a/packages/webapp/src/components/Aside/Aside.tsx b/packages/webapp/src/components/Aside/Aside.tsx index ade9d8c58..7967cd2b3 100644 --- a/packages/webapp/src/components/Aside/Aside.tsx +++ b/packages/webapp/src/components/Aside/Aside.tsx @@ -20,7 +20,7 @@ export function Aside({ onClose && onClose(); }; return ( - + {title} @@ -34,7 +34,7 @@ export function Aside({ /> )} - {children} + {children} ); -} +} \ No newline at end of file diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx index 96fdee7c7..d38eca6a8 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx @@ -51,7 +51,8 @@ function RecognizedTransactionsTableRoot({ const { mutateAsync: excludeBankTransaction } = useExcludeUncategorizedTransaction(); - const { recognizedTransactions } = useRecognizedTransactionsBoot(); + const { recognizedTransactions, isRecongizedTransactionsLoading } = + useRecognizedTransactionsBoot(); // Retrieve table columns. const columns = useUncategorizedTransactionsColumns(); @@ -96,8 +97,8 @@ function RecognizedTransactionsTableRoot({ columns={columns} data={recognizedTransactions} sticky={true} - loading={false} - headerLoading={false} + loading={isRecongizedTransactionsLoading} + headerLoading={isRecongizedTransactionsLoading} expandColumnSpace={1} expandToggleColumn={2} selectionColumnWidth={45} diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_components.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_components.tsx index 9780a5b19..56e883786 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_components.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_components.tsx @@ -1,6 +1,7 @@ // @ts-nocheck import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core'; import { safeCallback } from '@/utils'; +import { Icon } from '@/components'; export function ActionsMenu({ payload: { onCategorize, onExclude }, @@ -13,7 +14,11 @@ export function ActionsMenu({ onClick={safeCallback(onCategorize, original)} /> - + } + /> ); } diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/_utils.ts b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/_utils.ts index 418febc2f..340ed16fd 100644 --- a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/_utils.ts +++ b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/_utils.ts @@ -1,3 +1,4 @@ +// @ts-nocheck import * as R from 'ramda'; import { transformToForm, transfromToSnakeCase } from '@/utils'; import { useCategorizeTransactionTabsBoot } from '@/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabsBoot'; diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss index 6474c2381..56e081f4e 100644 --- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss +++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss @@ -1,7 +1,7 @@ .root { - position: relative; - padding-bottom: 110px; + flex: 1 1 auto; + overflow: auto; } .transaction { @@ -25,9 +25,6 @@ .footer { background-color: #fff; - position: fixed; - bottom: 0; - width: 100%; } .footerActions { diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss index b901d9160..279b58051 100644 --- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss +++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss @@ -1,6 +1,10 @@ .tabs :global .bp4-tab-panel{ margin-top: 0; + display: flex; + flex-direction: column; + flex: 1 1 auto; + height: calc(100dvh - 144px); } .tabs :global .bp4-tab-list{ background: #fff; @@ -11,3 +15,9 @@ .tabs :global .bp4-large > .bp4-tab{ font-size: 14px; } + +.tabs { + flex: 1 1 auto; + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.module.scss index 271e3e2bd..94b4613f5 100644 --- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.module.scss +++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.module.scss @@ -9,6 +9,11 @@ &.active{ border-color: #88ABDB; box-shadow: 0 0 0 2px rgba(136, 171, 219, 0.2); + + .label, + .date { + color: rgb(21, 82, 200), + } } &:hover:not(.active){ @@ -32,4 +37,9 @@ .label { color: #10161A; font-size: 15px; +} + +.date { + font-size: 12px; + color: #5C7080; } \ No newline at end of file diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.tsx index e96d4f142..18a0729cd 100644 --- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.tsx +++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.tsx @@ -45,7 +45,7 @@ export function MatchTransaction({ > {label} - Date: {date} + Date: {date} -
+ <> - + +
); @@ -71,7 +72,6 @@ function MatchingBankTransactionContent() { - ); }