refactoring: migrating to react-query to manage service-side state.

client/src/style/components/DataTable/DataTable.scss

@@ -131,6 +131,23 @@
           border-color: #0052ff;
         }
       }
+
+      .skeleton{
+        animation: skeleton-fade-in .3s linear forwards,
+          skeleton-glow 1s linear infinite alternate;
+
+        animation-delay: 0s,.3s;
+        height: 8px;
+        opacity: 1;
+        width: 65%;
+        margin: 10px 0;
+      }
+    }
+
+    .th{
+      .skeleton{
+        margin: 5px 0;
+      }
     }
 
     .tbody {

client/src/style/components/PageForm.scss

@@ -14,6 +14,21 @@
     padding: 14px 18px;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+
+    .bp3-button-group{
+      
+      .bp3-button{
+        &:not(:last-child),
+        &.bp3-popover-wrapper:not(:last-child) {
+          border-right: 1px solid rgba(92, 112, 127, 0.3);
+          margin-right: 0;
+
+          &.bp3-intent-primary{
+            border-right: 1px solid rgba(255, 255, 255, 0.3);
+          }
+        }
+      }
+    }
   }
   &--strip {
     #{$self}__header-fields {

client/src/style/components/Skeleton.scss

@@ -0,0 +1,26 @@
+
+
+@keyframes skeleton-glow {
+  0% {
+    background: rgba(206,217,224,.3);
+    border-color: rgba(206,217,224,.3);
+  }
+  to {
+    background: rgba(92,112,128,.3);
+    border-color: rgba(92,112,128,.3);
+  }
+}
+
+.skeleton{
+  animation: skeleton-glow 1s linear infinite alternate;
+  background: rgba(206,217,224,.3);
+  background-clip: padding-box;
+  border-color: rgba(206,217,224,.3);
+  border-radius: 2px;
+
+  box-shadow: none;
+  color: transparent;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+}

client/src/style/containers/Dashboard/Sidebar.scss

@@ -29,7 +29,7 @@
     }
   }
   &__head {
-    padding: 18px;
+    padding: 18px 20px;
 
     &-logo {
       position: relative;
@@ -99,7 +99,7 @@
     .#{$ns}-submenu {
       .#{$ns}-collapse {
         &-body {
-          background-color: rgba(255, 255, 255, 0.02);
+          background-color: rgba(255, 255, 255, 0.03);
           padding-bottom: 6px;
           padding-top: 6px;
         }
@@ -147,7 +147,7 @@
 
     .sidebar__head{
       .sidebar__head-logo{
-        transform: translate(-6px, 0);
+        transform: translate(-8px, 0);
       }
     }
     // Hide text of bigcapital logo.

client/src/style/pages/Dashboard/Dashboard.scss

@@ -227,8 +227,8 @@ $dashboard-views-bar-height: 45px;
       border-left: 1px solid #d9d9d9;
       padding-left: 10px;
       font-size: 16px;
-      font-weight: 300;
-      color: #101052;
+      font-weight: 400;
+      color: #76768b;
       margin: 0 0 0 12px;
       padding-top: 4px;
       padding-bottom: 4px;

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

@@ -6,7 +6,7 @@
       .tbody{
         .tr .td:not(:first-child),
         .tr .th:not(:first-child) {
-          justify-content: flex-end;
+          text-align: right;
         }
       }
       .tbody{

client/src/style/pages/ItemCategory/ItemCategoryDialog.scss

@@ -27,4 +27,11 @@
       }
     }
   }
+  .bp3-dialog-footer{
+    margin-top: 30px;
+
+    .bp3-button{
+      min-width: 75px;
+    }
+  }
 }

client/src/style/pages/Items/PageForm.scss

@@ -72,6 +72,10 @@
       margin: 0;
       margin-left: 40px;
     }
+
+    .btn--submit{
+      min-width: 65px;
+    }
   }
 
   .bp3-tooltip-indicator {