feat: style bill form.

feat: add row and column of grid components.

client/src/style/App.scss

@@ -44,6 +44,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import 'components/pagination';
 @import 'components/resizer';
 
+// Pages
 // Pages
 @import 'pages/dashboard';
 @import 'pages/accounts-chart';
@@ -65,6 +66,8 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import 'pages/billing';
 @import 'pages/register-wizard-page';
 @import 'pages/register-organizaton';
+@import 'pages/bills';
+@import 'pages/estimates';
 
 // Views
 @import 'views/filter-dropdown';
@@ -195,4 +198,53 @@ body.authentication {
     opacity: 0.85;
     display: none;
   }
+}
+
+
+.page-form{
+  
+  &__header{   
+    padding: 20px;
+  }
+
+  &__primary-section{
+    background-color: #fbfbfb;
+    padding: 30px 20px 20px;
+    margin: -20px;
+    padding-bottom: 6px;
+  }
+  &__footer{
+    padding: 15px;
+  }
+}
+
+.datatable-editor{
+
+  .table{
+    .tbody{
+      .tr .td.actions .bp3-button{
+        background-color: transparent;
+        color: #e66d6d;
+
+        svg{
+          color: inherit;
+        }
+      } 
+    }
+  }
+
+  &__actions{
+
+    .bp3-button{
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
+    .button--clear-lines{
+
+      &.bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
+        background-color: #fcefef;
+      }
+    }
+  }
 }

client/src/style/pages/bills.scss

@@ -0,0 +1,67 @@
+
+
+.page-form--bill{
+  $self: '.page-form';
+
+  #{$self}__header{
+
+    .bp3-form-group{
+      margin-bottom: 18px;
+    }
+    .bp3-label{
+      min-width: 140px;
+    }
+    .bp3-form-content{
+      width: 100%;
+    }
+
+    .bp3-form-group{
+      &.bp3-inline{
+        max-width: 450px; 
+      }
+
+      &.form-group{  
+        &--vendor{
+          max-width: 650px
+        }
+
+        &--due-date{
+          max-width: 300px;
+
+          .bp3-label{
+            min-width: 95px;
+          }
+        }
+
+        &--expiration-date{
+          max-width: 340px;
+
+          .bp3-label{
+            min-width: 120px;
+          }
+        }
+      }
+    }
+    .row--bill-date{
+
+      .col:first-of-type{
+        max-width: 465px;
+      }
+    }
+    .col--estimate-date{
+      max-width: 530px;
+    }
+  }
+
+  #{$self}__footer{
+    .form-group--note{
+      max-width: 450px;
+      width: 100%;
+
+      textarea{
+        width: 100%;
+        min-height: 60px;
+      }
+    }
+  }
+}

client/src/style/pages/estimates.scss

@@ -0,0 +1,7 @@
+.page-form--estimate{
+  $self: '.page-form';
+
+  #{$self}__header{
+    
+  }
+}