feat: tweaks in style.

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) =>
+        (account) => filterByTypes.indexOf(account.account_normal) === filterByNormal,
-          filterByTypes.indexOf(account.type.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(

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
+        <TableHeaderCell column={column} index={index} />
-          {...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>
       ))}
     </div>
   );

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;

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 {

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{

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{

client/src/style/pages/FinancialStatements/GeneralLedger.scss

@@ -10,7 +10,7 @@
           &.debit,
           &.running_balance,
           &.amount{
-            justify-content: flex-end;
+            text-align: right;
           }
         }
       }

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{

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{

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;

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);