feat: optimize chart of accounts.

client/src/style/App.scss

@@ -9,6 +9,8 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22,
 $menu-item-color-hover: $light-gray4;
 $menu-item-color-active: $light-gray3;
 
+$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
+
 // Blueprint framework.
 @import "@blueprintjs/core/src/blueprint.scss";
 @import "@blueprintjs/datetime/src/blueprint-datetime.scss";
@@ -27,6 +29,12 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 // Components
 @import "components/data-table";
 @import "components/dialog";
+  
+.bp3-breadcrumbs-collapsed::before{
+  background: escape-svg($breadcrumbs-collapsed-icon) center center;
+  width: 15px;
+  height: 15px;
+}
 
 // Pages
 @import "pages/dashboard";

client/src/style/components/data-table.scss

@@ -4,19 +4,27 @@
   overflow-x: auto;
   overflow-y: hidden;
 
+  .dashboard__page-content &{
+
+    .table .thead{
+      .th{
+        border-bottom-color: #eaeaea;
+      }
+    }
+  }
+
   .table {
     text-align: left;
     border-spacing: 0;
     min-width: 100%;
     display: block;
-    // width: 100%;
 
     .thead{
       overflow-y: auto;
       overflow-x: hidden;
 
       .th{
-        padding: 1rem 0.5rem;
+        padding: 0.8rem 0.5rem;
         background: #F8FAFA;
         font-size: 14px;
         color: #555;
@@ -109,13 +117,17 @@
       .tr .td{
         border-bottom: 1px solid #E0E2E2;
         align-items: center;
+
+        .placeholder{
+          color: #999;
+        }
       }      
       .td.actions .#{$ns}-button{
         background: #E6EFFB;
         border: 0;
         box-shadow: none;
         padding: 5px 15px;
-        border-radius: 2px;
+        border-radius: 5px;
 
         &:hover,
         &:focus{

client/src/style/objects/typography.scss

@@ -1,7 +1,7 @@
 
 
 body{
-  color: #212529;
+  color: #444;
 }
 
 .#{$ns}-heading{

client/src/style/pages/accounts-chart.scss

@@ -2,12 +2,45 @@
 .dashboard__insider--accounts-chart{
 
   .bigcapital-datatable{
+
     .normal{
       .#{$ns}-icon{
-        color: #666;
+        color: #aaa;
         padding-left: 15px;
       }
     }
+
+    .table{
+      .thead,
+      .tbody{
+        .th.selection,
+        .td.selection{
+          padding-left: 18px;
+        }
+      }
+
+      .tbody{
+        .tr .td{
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+        .account_name{
+          font-weight: 500;
+
+          .bp3-tooltip-indicator{
+            cursor: default;
+            border-bottom-color: #c6c6c6;
+          }
+        }
+        .code{
+          color: #666;
+        }
+        .actions{
+          padding-right: 18px;
+          justify-content: right;
+        }
+      }
+    }
   }
 }
 
@@ -48,7 +81,6 @@
     .form-group--parent-account{
       margin-bottom: 35px;
     }
-
     .form-group--account-code{
       margin-bottom: 16px;
     }

client/src/style/pages/financial-statements.scss

@@ -44,7 +44,7 @@
   width: auto;
   padding: 30px 20px;
   max-width: 100%;
-  margin: 35px auto;
+  margin: 25px auto 35px;
   min-height: 400px;
   display: flex;
   flex-direction: column;