feat: tweaks in style.

2026-02-18 13:50:31 +00:00 · 2021-01-27 16:42:23 +02:00
parent f8ee455985
commit 3f22872992
11 changed files with 84 additions and 76 deletions
--- 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(
--- 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 (
+    <div
+      {...column.getHeaderProps({
+        className: classNames(column.className || '', 'th'),
+      })}
+    >
+      <If condition={expandable && index + 1 === expandToggleColumn}>
+        <span {...getToggleAllRowsExpandedProps()} className="expand-toggle">
+          <span
+            className={classNames({
+              'arrow-down': isAllRowsExpanded,
+              'arrow-right': !isAllRowsExpanded,
+            })}
+          />
+        </span>
+      </If>
+
+      <div {...column.getSortByToggleProps({
+        className: classNames('cell-inner', {
+          'text-overview': column.textOverview,
+        })
+      })}>
+        {column.render('Header')}
+
+        <If condition={column.isSorted}>
+          <span
+            className={classNames(
+              {
+                'sort-icon--desc': column.isSortedDesc,
+                'sort-icon--asc': !column.isSortedDesc,
+              },
+              'sort-icon',
+            )}
+          ></span>
+        </If>
+      </div>
+
+      {column.canResize && (
+        <div
+          {...column.getResizerProps()}
+          className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
+        >
+          <div class="inner-resizer" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TableHeaderGroup({ headerGroup }) {
  return (
    <div {...headerGroup.getHeaderGroupProps()} className="tr">
      {headerGroup.headers.map((column, index) => (
-        <div
-          {...column.getHeaderProps({
-            className: classNames(column.className || '', 'th'),
-          })}
-        >
-          <If condition={expandable && index + 1 === expandToggleColumn}>
-            <span
-              {...getToggleAllRowsExpandedProps()}
-              className="expand-toggle"
-            >
-              <span
-                className={classNames({
-                  'arrow-down': isAllRowsExpanded,
-                  'arrow-right': !isAllRowsExpanded,
-                })}
-              />
-            </span>
-          </If>
-
-          <div {...column.getSortByToggleProps()}>
-            {column.render('Header')}
-
-            <If condition={column.isSorted}>
-              <span
-                className={classNames(
-                  {
-                    'sort-icon--desc': column.isSortedDesc,
-                    'sort-icon--asc': !column.isSortedDesc,
-                  },
-                  'sort-icon',
-                )}
-              ></span>
-            </If>
-          </div>
-
-          {column.canResize && (
-            <div
-              {...column.getResizerProps()}
-              className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
-            >
-              <div class="inner-resizer" />
-            </div>
-          )}
-        </div>
+        <TableHeaderCell column={column} index={index} />
      ))}
    </div>
  );
--- 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;
--- 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 {
--- 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{
--- 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{
--- 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;
          }
        }
      }
--- 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{
--- 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{
--- 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;
--- 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);