From 3f2287299275d1bfa9949085a022bcfad9e2110a Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Wed, 27 Jan 2021 16:42:23 +0200 Subject: [PATCH] feat: tweaks in style. --- client/src/components/AccountsSuggestField.js | 13 ++- .../src/components/Datatable/TableHeader.js | 97 ++++++++++--------- .../style/components/DataTable/DataTable.scss | 21 ++-- .../src/style/pages/Dashboard/Dashboard.scss | 15 ++- .../FinancialStatements/ARAgingSummary.scss | 2 +- .../FinancialStatements/BalanceSheet.scss | 2 +- .../FinancialStatements/GeneralLedger.scss | 2 +- .../pages/FinancialStatements/Journal.scss | 2 +- .../TrialBalanceSheet.scss | 2 +- .../src/style/pages/Preferences/Sidebar.scss | 2 +- client/src/style/variables.scss | 2 +- 11 files changed, 84 insertions(+), 76 deletions(-) diff --git a/client/src/components/AccountsSuggestField.js b/client/src/components/AccountsSuggestField.js index f43cdb2f4..a47cb0703 100644 --- a/client/src/components/AccountsSuggestField.js +++ b/client/src/components/AccountsSuggestField.js @@ -15,7 +15,7 @@ export default function AccountsSuggestField({ defaultSelectText = 'Select account', onAccountSelected, - filterByRootTypes = [], + filterByParentTypes = [], filterByTypes = [], filterByNormal, popoverFill = false, @@ -26,24 +26,23 @@ export default function AccountsSuggestField({ const filteredAccounts = useMemo(() => { let filteredAccounts = [...accounts]; - if (!isEmpty(filterByRootTypes)) { + if (!isEmpty(filterByParentTypes)) { filteredAccounts = filteredAccounts.filter( - (account) => filterByRootTypes.indexOf(account.type.root_type) !== -1, + (account) => filterByParentTypes.indexOf(account.account_parent_type) !== -1, ); } if (!isEmpty(filterByTypes)) { filteredAccounts = filteredAccounts.filter( - (account) => filterByTypes.indexOf(account.type.key) !== -1, + (account) => filterByTypes.indexOf(account.account_type) !== -1, ); } if (!isEmpty(filterByNormal)) { filteredAccounts = filteredAccounts.filter( - (account) => - filterByTypes.indexOf(account.type.normal) === filterByNormal, + (account) => filterByTypes.indexOf(account.account_normal) === filterByNormal, ); } return filteredAccounts; - }, [accounts, filterByRootTypes, filterByTypes, filterByNormal]); + }, [accounts, filterByParentTypes, filterByTypes, filterByNormal]); // Find initial account object to set it as default account in initial render. const initialAccount = useMemo( diff --git a/client/src/components/Datatable/TableHeader.js b/client/src/components/Datatable/TableHeader.js index a4d5f1100..91995b3c5 100644 --- a/client/src/components/Datatable/TableHeader.js +++ b/client/src/components/Datatable/TableHeader.js @@ -4,59 +4,66 @@ import { ScrollSyncPane } from 'react-scroll-sync'; import { If } from 'components'; import TableContext from './TableContext'; -function TableHeaderGroup({ headerGroup }) { +function TableHeaderCell({ column, index }) { const { table: { getToggleAllRowsExpandedProps, isAllRowsExpanded }, props: { expandable, expandToggleColumn }, } = useContext(TableContext); + return ( +
+ + + + + + +
+ {column.render('Header')} + + + + +
+ + {column.canResize && ( +
+
+
+ )} +
+ ); +} + +function TableHeaderGroup({ headerGroup }) { return (
{headerGroup.headers.map((column, index) => ( -
- - - - - - -
- {column.render('Header')} - - - - -
- - {column.canResize && ( -
-
-
- )} -
+ ))}
); diff --git a/client/src/style/components/DataTable/DataTable.scss b/client/src/style/components/DataTable/DataTable.scss index 401c17725..40e654b8c 100644 --- a/client/src/style/components/DataTable/DataTable.scss +++ b/client/src/style/components/DataTable/DataTable.scss @@ -22,9 +22,9 @@ .th { padding: 0.6rem 0.5rem; - background: #fafafa; + background: #f5f5f5; font-size: 14px; - color: #58667b; + color: #505e71; font-weight: 500; border-bottom: 1px solid rgb(224, 224, 224); @@ -76,6 +76,10 @@ margin: 0; padding: 0.5rem; + .cell-inner{ + flex: 1 0 0; + } + &:last-child { border-right: 0; } @@ -102,7 +106,7 @@ .inner-resizer { height: 100%; width: 1px; - border-left: 1px solid #ececec; + border-left: 1px solid #E6E6E6; margin: 0 auto; } @@ -140,21 +144,17 @@ } .tr .td { - border-bottom: 1px solid #e8e8e8; + border-bottom: 1px solid #e0e0e0; align-items: center; color: #101219; .placeholder { color: #a0a0a0; } - .cell-inner{ - flex: 1 0 0; - } .text-overview{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - } .bp3-form-group { @@ -171,7 +171,6 @@ .tr:hover .td { background: #f3f7fc; } - .tr.is-context-menu-active .td { background: #f3fafc; } @@ -186,11 +185,9 @@ &:focus { background-color: #cfdcee; } - svg { color: #425361; } - .bp3-icon-more-h-16 { margin-top: 2px; } @@ -267,12 +264,10 @@ .thead { top: 0; - // box-shadow: 0px 3px 3px #ccc; } .tfoot { bottom: 0; - // box-shadow: 0px -3px 3px #ccc; } .tbody { position: relative; diff --git a/client/src/style/pages/Dashboard/Dashboard.scss b/client/src/style/pages/Dashboard/Dashboard.scss index f002dcf5b..0e4ce732e 100644 --- a/client/src/style/pages/Dashboard/Dashboard.scss +++ b/client/src/style/pages/Dashboard/Dashboard.scss @@ -1,4 +1,5 @@ @import '../../Base.scss'; +$dashboard-views-bar-height: 45px; .dashboard { display: flex; @@ -412,10 +413,11 @@ } .tabs--dashboard-views { + .#{$ns}-tab { - color: #5b606d; + color: #474d5e; font-size: 14px; - line-height: 50px; + line-height: $dashboard-views-bar-height; font-weight: 400; padding: 0; margin-right: 0; @@ -430,12 +432,12 @@ .#{$ns}-tab-indicator-wrapper { .#{$ns}-tab-indicator { - height: 4px; + height: 3px; } } .button--new-view { margin: 0; - height: 50px; + height: $dashboard-views-bar-height; &, &:hover, @@ -455,6 +457,11 @@ .navbar--dashboard-views { box-shadow: 0 0 0; border-bottom: 1px solid #d2dce2; + height: $dashboard-views-bar-height; + + .bp3-navbar-group{ + height: $dashboard-views-bar-height; + } } .navbar-omnibar { diff --git a/client/src/style/pages/FinancialStatements/ARAgingSummary.scss b/client/src/style/pages/FinancialStatements/ARAgingSummary.scss index afdc364cc..42d6dc4ba 100644 --- a/client/src/style/pages/FinancialStatements/ARAgingSummary.scss +++ b/client/src/style/pages/FinancialStatements/ARAgingSummary.scss @@ -9,7 +9,7 @@ .thead{ .tr .td.customer_name ~ .td, .tr .th.customer_name ~ .th{ - justify-content: flex-end; + text-align: right; } } .tbody{ diff --git a/client/src/style/pages/FinancialStatements/BalanceSheet.scss b/client/src/style/pages/FinancialStatements/BalanceSheet.scss index e145fd445..10a7a3462 100644 --- a/client/src/style/pages/FinancialStatements/BalanceSheet.scss +++ b/client/src/style/pages/FinancialStatements/BalanceSheet.scss @@ -8,7 +8,7 @@ .tbody{ .tr .td.account_name ~ .td, .tr .th.account_name ~ .th{ - justify-content: flex-end; + text-align: right; } } .tbody{ diff --git a/client/src/style/pages/FinancialStatements/GeneralLedger.scss b/client/src/style/pages/FinancialStatements/GeneralLedger.scss index 96dd9a8a9..1966a177e 100644 --- a/client/src/style/pages/FinancialStatements/GeneralLedger.scss +++ b/client/src/style/pages/FinancialStatements/GeneralLedger.scss @@ -10,7 +10,7 @@ &.debit, &.running_balance, &.amount{ - justify-content: flex-end; + text-align: right; } } } diff --git a/client/src/style/pages/FinancialStatements/Journal.scss b/client/src/style/pages/FinancialStatements/Journal.scss index cd7792e9b..f841d3a6c 100644 --- a/client/src/style/pages/FinancialStatements/Journal.scss +++ b/client/src/style/pages/FinancialStatements/Journal.scss @@ -7,7 +7,7 @@ .tr .th.credit, .tr .td.debit, .tr .th.debit{ - justify-content: flex-end; + text-align: right; } .tbody{ .tr:not(.no-results) .td{ diff --git a/client/src/style/pages/FinancialStatements/TrialBalanceSheet.scss b/client/src/style/pages/FinancialStatements/TrialBalanceSheet.scss index 4dce5a389..acf0a843c 100644 --- a/client/src/style/pages/FinancialStatements/TrialBalanceSheet.scss +++ b/client/src/style/pages/FinancialStatements/TrialBalanceSheet.scss @@ -9,7 +9,7 @@ .tbody{ .tr .td:not(:first-child), .tr .th:not(:first-child) { - justify-content: flex-end; + text-align: right; } } .tbody{ diff --git a/client/src/style/pages/Preferences/Sidebar.scss b/client/src/style/pages/Preferences/Sidebar.scss index 8c4b666fc..2c49edbae 100644 --- a/client/src/style/pages/Preferences/Sidebar.scss +++ b/client/src/style/pages/Preferences/Sidebar.scss @@ -55,7 +55,7 @@ background: transparent; .#{$ns}-menu-item { - padding: 10px 18px; + padding: 8px 18px; font-size: 15px; font-weight: 400; color: #333; diff --git a/client/src/style/variables.scss b/client/src/style/variables.scss index 7eba241bf..ec2d51453 100644 --- a/client/src/style/variables.scss +++ b/client/src/style/variables.scss @@ -32,7 +32,7 @@ $button-background-color-hover: #CFDCEE !default; $sidebar-background: #01194e; $sidebar-text-color: #fff; $sidebar-width: 100%; -$sidebar-menu-item-color: rgba(255, 255, 255, 0.9); +$sidebar-menu-item-color: rgb(255, 255, 255); $sidebar-menu-item-color-active: rgb(255, 255, 255); $sidebar-popover-submenu-bg: rgb(1, 20, 62); $sidebar-menu-label-color: rgba(255, 255, 255, 0.45);