From a6bc88f83d5b725241c86e1e5f9ad118e18e191d Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Tue, 24 Nov 2020 12:47:03 +0200
Subject: [PATCH] feat: disabled button in list component.

---
 .../containers/Accounts/AccountsDataTable.js  |  3 +-
 client/src/containers/Accounts/components.js  | 28 -------------------
 client/src/style/App.scss                     | 17 ++++++++++-
 client/src/style/objects/buttons.scss         | 15 ++++------
 client/src/style/objects/form.scss            |  5 ++++
 client/src/style/pages/expense-form.scss      |  6 +++-
 6 files changed, 33 insertions(+), 41 deletions(-)

diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js
index 520723077..47de2509a 100644
--- a/client/src/containers/Accounts/AccountsDataTable.js
+++ b/client/src/containers/Accounts/AccountsDataTable.js
@@ -19,7 +19,6 @@ import { CLASSES } from 'common/classes';
 import { 
   NormalCell,
   BalanceCell,
-  AccountNameAccessor
 } from './components';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -136,7 +135,7 @@ function AccountsDataTable({
       {
         id: 'name',
         Header: formatMessage({ id: 'account_name' }),
-        accessor: AccountNameAccessor,
+        accessor: 'name',
         className: 'account_name',
         width: 220,
       },
diff --git a/client/src/containers/Accounts/components.js b/client/src/containers/Accounts/components.js
index 97844651e..53552cd78 100644
--- a/client/src/containers/Accounts/components.js
+++ b/client/src/containers/Accounts/components.js
@@ -54,31 +54,3 @@ export function InactiveSemafro() {
     </Tooltip>
   );
 }
-
-export function AccountNameAccessor(row) {
-  return (
-    <>
-      <Choose>
-        <Choose.When condition={!!row.description}>
-          <Tooltip
-            className={classNames(
-              Classes.TOOLTIP_INDICATOR,
-              'bp3-popover-wrapper--account-desc',
-            )}
-            content={row.description}
-            position={Position.RIGHT_TOP}
-            hoverOpenDelay={500}
-          >
-            {row.name}
-          </Tooltip>
-        </Choose.When>
-
-        <Choose.Otherwise>{row.name}</Choose.Otherwise>
-      </Choose>
-
-      <If condition={!row.active}>
-        <InactiveSemafro />
-      </If>
-    </>
-  );
-}
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 641ce99f0..cbf1f122f 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -20,6 +20,15 @@ $sidebar-zindex: 15;
 $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
   Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
 
+$button-box-shadow: 0 0 0 !default;
+$button-box-shadow-active: 0 0 0 !default;
+$button-intent-box-shadow: 0 0 0 !default;
+$button-intent-box-shadow-active: 0 0 0 !default;
+
+$button-background-color-disabled: #E9ECEF !default;
+$button-background-color: #E6EFFB !default;
+$button-background-color-hover: #CFDCEE !default;
+
 // Blueprint framework.
 @import '@blueprintjs/core/src/blueprint.scss';
 @import '@blueprintjs/datetime/src/blueprint-datetime.scss';
@@ -114,6 +123,8 @@ body.authentication {
 }
 
 .select-list--fill-popover {
+  position: relative;
+
   .bp3-transition-container,
   .bp3-popover {
     min-width: 100%;
@@ -245,7 +256,7 @@ body.authentication {
       margin-bottom: 0;
     }
     .table {
-      border: 1px dotted rgb(195, 195, 195);
+      border: 1px solid #d2dce2;
       border-bottom: transparent;
       border-left: transparent;
 
@@ -261,6 +272,10 @@ body.authentication {
             font-weight: 500;
           }
         }
+
+        &:first-child{
+          border-left: 1px solid #d2dce2;
+        }
       }
 
       .thead {
diff --git a/client/src/style/objects/buttons.scss b/client/src/style/objects/buttons.scss
index 9447ff1f8..aea6b1dd1 100644
--- a/client/src/style/objects/buttons.scss
+++ b/client/src/style/objects/buttons.scss
@@ -30,30 +30,27 @@
   padding-right: 12px;
 }
 
+
 .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
-  background-color: #E6EFFB;
   color: #555555;
   box-shadow: 0 0 0 transparent;
 
-  &:hover,
-  &:focus{
-    background-color: #CFDCEE;
-  }
-
   &.bp3-small{
     font-size: 13px;
     min-height: 29px;
   }
-
   .form-group--select-list &{
     border-radius: 2px;
 
     &,
     &:hover{
-      background: #fff;
       box-shadow: 0 0 0 transparent;  
       border: 1px solid #ced4da;
-    }
+      
+      &:not(:disabled) {
+        background: #fff;      
+      }
+    }  
   }
   .form-group--select-list.bp3-intent-danger &{
     
diff --git a/client/src/style/objects/form.scss b/client/src/style/objects/form.scss
index 2d154cbcd..5269186fa 100644
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -48,6 +48,11 @@ label.bp3-label{
     box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); 
     border-color: #80bdff;
   }
+
+  &.bp3-disabled,
+  &:disabled{
+    background: #e9ecef;
+  }
 }
 
 .#{$ns}-form-group{
diff --git a/client/src/style/pages/expense-form.scss b/client/src/style/pages/expense-form.scss
index e22ac2ef4..cf87a95b7 100644
--- a/client/src/style/pages/expense-form.scss
+++ b/client/src/style/pages/expense-form.scss
@@ -58,7 +58,7 @@
       margin-bottom: 0;
     }
     .table {
-      border: 1px dotted rgb(195, 195, 195);
+      border: 1px solid #d2dce2;
       border-bottom: transparent;
       border-left: transparent;
 
@@ -74,6 +74,10 @@
             font-weight: 500;
           }
         }
+
+        &:first-child{
+          border-left: 1px solid #d2dce2;
+        }
       }
 
       .thead {