WIP: billing /style

client/src/style/App.scss

@@ -24,6 +24,9 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import '@blueprintjs/core/src/blueprint.scss';
 @import '@blueprintjs/datetime/src/blueprint-datetime.scss';
 
+// Bootstrap
+// @import '~bootstrap/scss/bootstrap';
+
 @import 'basscss';
 
 @import 'functions';
@@ -62,7 +65,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import 'pages/estimates';
 @import 'pages/receipts';
 @import 'pages/invoices';
-
+@import 'pages/billing.scss';
 
 // Views
 @import 'views/filter-dropdown';

client/src/style/pages/billing.scss

@@ -0,0 +1,161 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.billing-form {
+  padding: 25px 45px;
+  width: 800px;
+  margin: 0 auto;
+
+  &__plan-container {
+    display: flex;
+    flex-flow: row wrap;
+    margin-bottom: 30px;
+
+    .plan-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 215px;
+      height: 267px;
+      border-radius: 5px;
+      padding: 15px;
+      border: 1px solid #dcdcdc;
+      background: #fcfdff;
+      text-decoration: none;
+      color: #000;
+      cursor: pointer;
+
+      &.plan-wrapper:not(:first-child) {
+        margin-left: 20px;
+      }
+
+      .plan-header {
+        display: flex;
+        justify-content: flex-start;
+        margin-bottom: 10px;
+      }
+      .plan-name {
+        background: #3657ff;
+        border-radius: 3px;
+        padding: 1px 8px 1px 8px;
+        font-size: 13px;
+        color: #fff;
+        margin-bottom: 15px;
+      }
+      .plan-description {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 2em;
+
+        &.plan-description ul {
+          list-style: none;
+        }
+      }
+      .plan-price {
+        margin-top: auto;
+
+        .amount {
+          font-weight: 500;
+        }
+
+        .period {
+          font-weight: 400;
+          color: #666;
+          &.period::before {
+            content: '/';
+            display: inline-block;
+            margin: 0 2px;
+          }
+        }
+      }
+    }
+    a.plan-selected {
+      border: 1px solid #0069ff;
+      background-color: #fcfdff;
+    }
+  }
+  .payment-method-continer {
+    margin-bottom: 30px;
+    .period-container {
+      display: inline-flex;
+      background-color: #fcfdff;
+      justify-content: space-between;
+      align-items: center;
+      width: 215px;
+      height: 36px;
+      border-radius: 5px;
+      padding: 8px 10px;
+      color: #000;
+      border: 1px solid #dcdcdc;
+      cursor: pointer;
+      text-decoration: none;
+      &.period-container:not(:first-child) {
+        margin-left: 20px;
+      }
+      .period::before {
+        content: '/';
+        display: inline-block;
+        margin: 0 2px;
+      }
+      .bg-period {
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+    a.billing-selected {
+      border: 1px solid #0069ff;
+      background-color: #fcfdff;
+    }
+  }
+
+  .bg-title {
+    font-size: 22px;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .bg-message {
+    margin-bottom: 15px;
+    font-size: 14px;
+  }
+  .license-container {
+    .bp3-form-group {
+      margin-bottom: 20px;
+      .bp3-label {
+        margin-bottom: 15px;
+      }
+    }
+    .bp3-form-content {
+      .bp3-input-group {
+        display: block;
+        position: relative;
+      }
+      .bp3-input {
+        position: relative;
+        width: 59%;
+        height: 41px;
+      }
+    }
+    h4 {
+      font-size: 18px;
+      color: #444444;
+    }
+    p {
+      font-size: 14px;
+    }
+  }
+
+  .bp3-tab-list {
+    border-bottom: 2px solid #f1f1f1;
+    width: 95%;
+  }
+  .subscribe-button {
+    .bp3-button {
+      background-color: #0063ff;
+      min-height: 41px;
+      width: 240px;
+      // width: 25%;
+    }
+  }
+}