feat: expand sidebar once open form editor page.

feat: rounding money amount.
feat: optimize page form structure.
feat: refactoring make journal and expense form with FastField component.

client/src/style/App.scss

@@ -220,49 +220,65 @@ body.authentication {
 //    .page-form__content
 //    .page-form__floating-actions
 .page-form{
+  $self: '.page-form';
+  padding-bottom: 20px;
+  
   
-  &__header{
-    background-color: #fbfbfb;
-    padding: 30px 20px 20px;
-    padding-bottom: 6px;
-  }
-
-  &__primary-section{
-    
-  }
-
-  &__header-fields{
-    width: 85%;
-  }
-  &__footer{
-    padding: 15px;
-    margin: 15px 0 0 0;
-  }
-
   &__floating-actions{
     position: fixed;
     bottom: 0;
     width: 100%;
     background: #fff;
     padding: 14px 18px;
-    border-top: 1px solid #ececec;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+  }
+
+  &--strip{
+
+    #{$self}__header-fields{
+      width: 85%;
+    }
+    #{$self}__body,
+    #{$self}__footer{
+      max-width: 1200px;
+    }
+
+    #{$self}__header{
+      background-color: #fbfbfb;
+      padding: 30px 20px 0;
+      border-bottom: 1px solid #d2dce2;
+  
+      .bp3-form-group.bp3-inline label.bp3-label{
+        font-weight: 500;
+      }
+    }
+
+    #{$self}__body{
+      padding-top: 15px;
+      padding-left: 20px;
+      padding-right: 20px;  
+    }
+
+    #{$self}__footer{
+      margin: 25px 0 0 0;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
   }
 }
 .datatable-editor{
 
-  padding: 15px 15px 0;
-
-    .bp3-form-group {
-      margin-bottom: 0;
-    }
+  .bp3-form-group {
+    margin-bottom: 0;
+  }
     .table {
       border: 1px solid #d2dce2;
-      border-bottom: transparent;
       border-left: transparent;
 
       .th,
       .td {
-        border-left: 1px dotted rgb(195, 195, 195);
+        border-left: 1px solid #e2e2e2;
 
         &.index {
           text-align: center;
@@ -281,10 +297,10 @@ body.authentication {
       .thead {
         .tr .th {
           padding: 10px 10px;
-          background-color: #f2f5fa;
+          background-color: #f0f2f8;
           font-size: 14px;
           font-weight: 500;
-          color: #1e1c3e;
+          color: #1c1940;
 
           &.index > div {
             width: 100%;
@@ -294,12 +310,13 @@ body.authentication {
 
       .tbody {
         .tr .td {
-          padding: 7px;
-          border-bottom: 1px dotted rgb(195, 195, 195);
-          min-height: 46px;
+          padding: 5px;
+          border-bottom: 0;
+          border-top: 1px dashed #AAA;
+          min-height: 42px;
 
           &.index {
-            background-color: #f2f5fa;
+            background-color: #f0f2f8;
 
             > span {
               margin-top: auto;
@@ -310,23 +327,48 @@ body.authentication {
         .tr {
           .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
           .form-group--select-list .bp3-button {
-            border-color: #e5e5e5;
+            border-color: #ffffff;
+            color: #222;
             border-radius: 3px;
-            padding-left: 8px;
-            padding-right: 8px;
           }
 
-          .form-group--select-list {
+          .bp3-form-group:not(.bp3-intent-danger) .bp3-input{
+            border-radius: 2px;
+            padding-left: 4px;
+            padding-right: 4px;
+            
+            &:focus{
+              box-shadow: 0 0 0 2px #116cd0;
+            }
+          }
+
+          .form-group--select-list .bp3-button{
+            padding-left: 6px;
+            padding-right: 6px;
+
+            &:after{
+              display: none;
+            }
+          }
+
+          .form-group--select-list,
+          .bp3-form-group {
             &.bp3-intent-danger {
-              .bp3-button:not(.bp3-minimal) {
-                border-color: #db3737;
+              .bp3-button:not(.bp3-minimal),
+              .bp3-input {
+                border-color: #F7B6B6;
               }
             }
           }
 
+          &:first-of-type{
+            .td{
+              border-top: 0;
+            }
+          }
+
           &:last-of-type {
             .td {
-              border-bottom: transparent;
 
               .bp3-button,
               .bp3-input-group {
@@ -351,6 +393,7 @@ body.authentication {
           }
 
           &.row--total {
+            
             .account.td,
             .debit.td,
             .credit.td {
@@ -373,6 +416,7 @@ body.authentication {
                 width: 100%;
               }
             }
+
           }
         }
       }
@@ -408,6 +452,7 @@ body.authentication {
   }
 
   &__actions{
+    margin-top: 12px;
 
     .bp3-button{
       padding-left: 10px;
@@ -421,9 +466,30 @@ body.authentication {
       }
     }
   }
-}
 
 
+  &.has-total-row{
+
+    .table .tbody-inner .tr:last-of-type{
+
+      .td{
+        border-top-width: 2px;
+        border-top-color: #E9E9EF;
+        border-top-style: solid;
+        min-height: 40px;
+
+        &:not(.index) {
+          background-color: #FCFCFD;
+        }
+
+        &.index span{
+          display: none;
+        }
+      }
+    }
+  }
+}
+
 .cloud-spinner{
   position: relative;
 
@@ -482,7 +548,6 @@ body.authentication {
   }
 }
 
-
 .datatable-empty-status{
   max-width: 550px;
   width: 100%;
@@ -517,4 +582,9 @@ body.authentication {
       }
     }
   }
+}
+
+.dropzone-container{
+  max-width: 250px;
+  margin-left: auto;
 }