WIP Make journal entries.

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

@@ -47,7 +47,7 @@
       margin: 0;
       padding: 0.5rem;
 
-      :last-child {
+      &:last-child {
         border-right: 0;
       }
 

client/src/style/objects/buttons.scss

@@ -32,6 +32,11 @@
   color: #555555;
   box-shadow: 0 0 0 transparent;
 
+  &.bp3-small{
+    font-size: 13px;
+    min-height: 29px;
+  }
+
   .form-group--select-list &{
     border-radius: 0;
 

client/src/style/objects/form.scss

@@ -17,7 +17,7 @@ label{
 }
 
 .#{$ns}-input{
-  box-shadow: 0 0 0;
+  box-shadow: 0 0 0 transparent;
   border: 1px solid #ced4da;
   border-radius: 0;
   height: 32px;
@@ -94,6 +94,10 @@ label{
   .#{$ns}-icon-caret-down{
     color: #8D8D8D;
   }
+
+  &.bp3-fill{
+    width: 100%;
+  }
 }
 
 

client/src/style/pages/make-journal-entries.scss

@@ -2,38 +2,147 @@
 .make-journal-entries{
 
   &__header{
-    padding: 25px 40px;
+    padding: 25px 27px 20px;
     background: #fbfbfb;
+
+    .bp3-form-group{
+
+      .bp3-label{
+        font-weight: 500;
+        font-size: 13px;
+        color: #444;
+      }
+    }
   }
 
   &__table{
+    padding: 15px;
+
     .bp3-form-group{
       margin-bottom: 0;
     }
-    table{
-      border: 1px solid transparent;
+    .table{
+      border: 1px dotted rgb(195, 195, 195);
+      border-bottom: transparent;
+      border-left: transparent;
 
-      thead{
-        th.index{ width: 3%; }
-        th.account{ width: 22%; }
-        th.note{ width: 40%; }
-        th.credit{ width: 17.5%; }
-        th.debit{ width: 17.5%; }
+      .th,
+      .td{
+        border-left: 1px dotted rgb(195, 195, 195); 
+
+        &.index{
+
+          span{
+            width: 100%;
+            font-weight: 500;
+          }            
+        }
       }
 
-      th,
-      td{
-        border-right: 1px dotted #999;
+      .thead{
+        .tr .th{
+          padding: 10px 10px;
+          background-color: #F2F5FA;
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+        }
       }
-      th{
+
+      .tbody{
+        .tr .td{
+          padding: 7px;
+          border-bottom: 1px dotted rgb(195, 195, 195);
+          min-height: 46px;
+
+          &.index{
+            background-color: #F2F5FA;
+            text-align: center;
+
+            > span{
+              margin-top: auto;
+              margin-bottom: auto; 
+            }
+          }
+        }
+        .tr{
+          .bp3-input,
+          .form-group--select-list .bp3-button{
+            border-color: #E5E5E5;
+            border-radius: 3px;
+            padding-left: 8px;
+            padding-right: 8px;
+          }
+
+          &:last-of-type{
+
+            .td{
+              border-bottom: transparent;
+
+              .bp3-button,
+              .bp3-input-group{
+                display: none;
+              }
+            }
+          }
+
+          .td.actions{
+            .bp3-button{
+              background-color: transparent;
+              color: #E68F8E;
+
+              &:hover{
+                color: #c23030;
+              }
+            }
+          }
+
+          &.row--total{
+
+            .account.td,
+            .debit.td,
+            .credit.td{
+              > span{
+                padding-top: 6px;
+              }
+            }
+            .debit.td,
+            .credit.td{
+              > span{
+                font-weight: 600;
+                color: #444;
+              }
+            }
+          }
+        }
+      }
+      .th{
         color: #444;
         font-weight: 600;
         border-bottom: 1px dotted #666;
       }
 
-      td{
+      .td{
         border-bottom: 1px dotted #999;
       }
+
+      .actions.td{
+        .bp3-button{
+          background: transparent;
+          margin: 0;
+        }
+      }
     }
   }
+
+  .bp3-button{
+    &.button--clear-lines{
+      background-color: #FCEFEF;
+    }
+  }
+  .button--clear-lines,
+  .button--new-line{
+    padding-left: 14px;
+    padding-right: 14px;
+  }
 }