From b941866d88e3edb541c5ea0a4341c11c67a79a89 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Thu, 3 Dec 2020 13:01:46 +0200
Subject: [PATCH] feat: highlight the inactive accounts.

---
 client/src/containers/Accounts/AccountsDataTable.js |  7 +++++++
 client/src/style/pages/accounts-chart.scss          | 10 +++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js
index 417ff82c9..3f38a18f2 100644
--- a/client/src/containers/Accounts/AccountsDataTable.js
+++ b/client/src/containers/Accounts/AccountsDataTable.js
@@ -206,6 +206,12 @@ function AccountsDataTable({
     [onSelectedRowsChange],
   );
 
+  const rowClassNames = (row) => {
+    return {
+      'inactive': !row.original.active,
+    };
+  };
+
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
       <DataTable
@@ -219,6 +225,7 @@ function AccountsDataTable({
         onSelectedRowsChange={handleSelectedRowsChange}
         loading={accountsLoading && !isMounted}
         rowContextMenu={rowContextMenu}
+        rowClassNames={rowClassNames}
         expandColumnSpace={1}
         autoResetExpanded={false}
         selectionColumnWidth={50}
diff --git a/client/src/style/pages/accounts-chart.scss b/client/src/style/pages/accounts-chart.scss
index 5247c5bdb..d59705583 100644
--- a/client/src/style/pages/accounts-chart.scss
+++ b/client/src/style/pages/accounts-chart.scss
@@ -4,7 +4,7 @@
   .bigcapital-datatable{
     .normal{
       .#{$ns}-icon{
-        color: #6E8091;
+        color: #7f91a2;
         padding-left: 15px;
       }
     }
@@ -15,6 +15,14 @@
           padding-top: 0.3rem;
           padding-bottom: 0.3rem;
         }
+
+        .tr.inactive .td{
+          color: #646b82;
+
+          &.normal .#{$ns}-icon{
+            color: #9eaab6;
+          }
+        }
         .account_name{
           .bp3-popover-wrapper--inactive-semafro{
             margin-left: 8px;