Merge pull request #754 from statping/sass-design

Sass design

frontend/public/css/base.css

@@ -113,10 +113,6 @@ HTML, BODY {
   color: #fff;
 }
 
-.nav-pills .nav-link {
-  border-radius: 0.2rem;
-}
-
 .form-control {
   border-radius: 0.2rem;
 }

frontend/src/assets/scss/base.scss

@@ -1,8 +1,5 @@
 @import 'variables';
-
-HTML,BODY {
-    background-color: $background-color;
-}
+@import 'mixin';
 
 .index-chart {
   height: $service-card-height;
@@ -26,26 +23,11 @@ HTML,BODY {
   box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.08);
 }
 
-.copy-btn {
-  position: absolute;
-  right: 0;
-}
-
 .btn-xs {
   font-size: 8pt;
   padding: 2px 6px;
 }
 
-.copy-btn BUTTON {
-  background-color: white;
-  margin: 6px;
-  height: 26px;
-  font-size: 8pt;
-  padding: 5px 7px;
-  border: 1px solid #a7a7a7;
-  border-radius: 4px !important;
-}
-
 .dim {
   background-color: #f3f3f3;
 }
@@ -55,41 +37,6 @@ HTML,BODY {
   font-weight: bold;
 }
 
-/* The slider itself */
-.slider {
-  -webkit-appearance: none;  /* Override default CSS styles */
-  appearance: none;
-  width: 100%; /* Full-width */
-  height: 5px; /* Specified height */
-  background: #d3d3d3; /* Grey background */
-  outline: none; /* Remove outline */
-  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
-  transition: opacity .2s;
-}
-
-/* Mouse-over effects */
-.slider:hover {
-  opacity: 1; /* Fully shown on mouse-over */
-}
-
-/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none; /* Override default look */
-  appearance: none;
-  border-radius: 50%;
-  width: 20px; /* Set a specific slider handle width */
-  height: 20px; /* Slider handle height */
-  background: #4CAF50; /* Green background */
-  cursor: pointer; /* Cursor on hover */
-}
-
-.slider::-moz-range-thumb {
-  width: 15px; /* Set a specific slider handle width */
-  height: 15px; /* Slider handle height */
-  background: #4CAF50; /* Green background */
-  cursor: pointer; /* Cursor on hover */
-}
-
 @-o-keyframes fadeIt {
   0%   { background-color: #f5f5f5; }
   50%  { background-color: #f2f2f2; }
@@ -151,18 +98,6 @@ HTML,BODY {
   box-shadow: none;
 }
 
-.contain-card {
-
-  .card-header {
-    font-size: 1.15rem;
-  }
-
-  .dropdown-menu {
-    background-color: rgba(239, 239, 239, 0.65);
-  }
-
-}
-
 .dropup .dropdown-menu {
     border-radius: 8px 8px 8px 0;
     background-color: #efefef;
@@ -202,13 +137,6 @@ HTML,BODY {
     opacity: 0;
   }
 
-  .container {
-    padding-top: 20px;
-    padding-bottom: 25px;
-    max-width: $max-width;
-    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
-  }
-
   .header-title {
     color: $title-color;
   }
@@ -226,10 +154,6 @@ HTML,BODY {
     padding: 5px 7px;
   }
 
-  .navbar {
-    margin-bottom: 30px;
-  }
-
   .btn-sm {
     line-height: 1.3;
     font-size: 0.75rem;
@@ -274,20 +198,6 @@ HTML,BODY {
     color: $service-description-color
   }
 
-  .footer {
-    text-decoration: none;
-    margin-top: 20px;
-  }
-
-  .footer A {
-    color: $footer-text-color;
-    text-decoration: none;
-  }
-
-  .footer A:HOVER {
-    color: #6d6d6d;
-  }
-
   .font-0 {
     font-size: 0.35rem;
   }
@@ -342,18 +252,6 @@ HTML,BODY {
     }
   }
 
-  .card-body .badge {
-    color: #fff;
-  }
-
-  .nav-pills .nav-link {
-    border-radius: $global-border-radius;
-  }
-
-  .form-control {
-    border-radius: $global-border-radius;
-  }
-
   .mini_success {
     background-color: #f3f3f3;
   }
@@ -418,27 +316,6 @@ HTML,BODY {
   font-weight: bold;
 }
 
-
-  .card {
-    background-color: $service-background;
-    border: $service-border;
-    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.08);
-  }
-
-  .card-body {
-    overflow: hidden;
-  }
-
-  .card-body H4 A {
-    color: $service-title;
-    text-decoration: none;
-  }
-
-  .card-title A {
-    color: $service-title;
-    text-decoration: none;
-  }
-
   .chart-container {
     position: relative;
     height: 240px;
@@ -458,79 +335,6 @@ HTML,BODY {
     width: 100%;
   }
 
-  .inputTags-field {
-    border: 0;
-    background-color: transparent;
-    padding-top: .13rem;
-  }
-
-  input.inputTags-field:focus {
-    outline-width: 0;
-  }
-
-  .inputTags-list {
-    display: block;
-    width: 100%;
-    min-height: calc(2.25rem + 2px);
-    padding: .2rem .35rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: #495057;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid #ced4da;
-    border-radius: .25rem;
-    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-  }
-
-  .inputTags-item {
-    background-color: #3aba39;
-    margin-right: 5px;
-    padding: 5px 8px;
-    font-size: 10pt;
-    color: white;
-    border-radius: 4px;
-  }
-
-  .inputTags-item .close-item {
-    margin-left: 6px;
-    font-size: 13pt;
-    font-weight: bold;
-    cursor: pointer;
-  }
-
-  @mixin dynamic-color-hov($color) {
-    &.dyn-dark {
-      background-color: darken($color, 12%) !important;
-      border-color: darken($color, 17%) !important;
-    }
-    &.dyn-dark:HOVER {
-      background-color: darken($color, 17%) !important;
-      border-color: darken($color, 20%) !important;
-    }
-    &.dyn-light {
-      background-color: lighten($color, 12%) !important;
-      border-color: lighten($color, 17%) !important;
-    }
-    &.dyn-light:HOVER {
-      background-color: lighten($color, 17%) !important;
-      border-color: lighten($color, 20%) !important;
-    }
-  }
-
-  @mixin dynamic-color($color) {
-    &.dyn-dark {
-      background-color: darken($color, 12%) !important;
-      border-color: darken($color, 17%) !important;
-    }
-    &.dyn-light {
-      background-color: lighten($color, 12%) !important;
-      border-color: lighten($color, 17%) !important;
-    }
-  }
-
-
   .btn-primary {
     background-color: $primary-color;
     border-color: darken($primary-color, 17%);
@@ -564,18 +368,6 @@ HTML,BODY {
     background-color: darken($danger-color, 10%) !important;
   }
 
-  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
-    background-color: $nav-tab-color;
-  }
-
-  .nav-pills A {
-    color: #424242;
-  }
-
-  .nav-pills I {
-    margin-right: 10px;
-  }
-
   @keyframes fadeInOut {
     0%   { opacity:1; }
     50%  { opacity:0.3; }
@@ -600,181 +392,13 @@ HTML,BODY {
     -webkit-animation: fadeInOut 1s infinite;
     -moz-animation: fadeInOut 1s infinite;
     -o-animation: fadeInOut 1s infinite;
-    animation: fadeInOut 21 infinite;
-  }
-
-  .CodeMirror {
-    /* Bootstrap Settings */
-    box-sizing: border-box;
-    margin: 0;
-    font: inherit;
-    overflow: auto;
-    display: block;
-    width: 100%;
-    padding: 0px;
-    font-size: 14px;
-    line-height: 1.5;
-    color: #555;
-    background-color: #fff;
-    background-image: none;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-    /* Code Mirror Settings */
-    font-family: monospace;
-    position: relative;
-    height:80vh;
-  }
-
-  .CodeMirror-focused {
-    /* Bootstrap Settings */
-    border-color: #66afe9;
-    outline: 0;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
-    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  }
-
-  .switch {
-    font-size: 1rem;
-    position: relative;
-  }
-  .switch input {
-    position: absolute;
-    height: 1px;
-    width: 1px;
-    background: none;
-    border: 0;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    overflow: hidden;
-    padding: 0;
-  }
-  .switch input + label {
-    position: relative;
-    min-width: calc(calc(2.375rem * .8) * 2);
-    border-radius: calc(2.375rem * .8);
-    height: calc(2.375rem * .8);
-    line-height: calc(2.375rem * .8);
-    display: inline-block;
-    cursor: pointer;
-    outline: none;
-    user-select: none;
-    vertical-align: middle;
-    text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem);
-  }
-  .switch input + label::before,
-  .switch input + label::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(calc(2.375rem * .8) * 2);
-    bottom: 0;
-    display: block;
-  }
-  .switch input + label::before {
-    right: 0;
-    background-color: #dee2e6;
-    border-radius: calc(2.375rem * .8);
-    transition: 0.2s all;
-  }
-  .switch input + label::after {
-    top: 2px;
-    left: 2px;
-    width: calc(calc(2.375rem * .8) - calc(2px * 2));
-    height: calc(calc(2.375rem * .8) - calc(2px * 2));
-    border-radius: 50%;
-    background-color: white;
-    transition: 0.2s all;
-  }
-  .switch-rd-gr input:checked + label::before {
-    background-color: #29b10c !important;
-  }
-  .switch input:checked + label::before {
-    background-color: #08d;
-  }
-  .switch input:checked + label::after {
-    margin-left: calc(2.375rem * .8);
-  }
-  .switch input:focus + label::before {
-    outline: none;
-    box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
-  }
-  .switch input:disabled + label {
-    color: #868e96;
-    cursor: not-allowed;
-  }
-  .switch input:disabled + label::before {
-    background-color: #e9ecef;
-  }
-  .switch.switch-sm {
-    font-size: 0.875rem;
-  }
-  .switch.switch-sm input + label {
-    min-width: calc(calc(1.9375rem * .8) * 2);
-    height: calc(1.9375rem * .8);
-    line-height: calc(1.9375rem * .8);
-    text-indent: calc(calc(calc(1.9375rem * .8) * 2) + .5rem);
-  }
-  .switch.switch-sm input + label::before {
-    width: calc(calc(1.9375rem * .8) * 2);
-  }
-  .switch.switch-sm input + label::after {
-    width: calc(calc(1.9375rem * .8) - calc(2px * 2));
-    height: calc(calc(1.9375rem * .8) - calc(2px * 2));
-  }
-  .switch.switch-sm input:checked + label::after {
-    margin-left: calc(1.9375rem * .8);
-  }
-  .switch.switch-lg {
-    font-size: 1.25rem;
-  }
-  .switch.switch-lg input + label {
-    min-width: calc(calc(3rem * .8) * 2);
-    height: calc(3rem * .8);
-    line-height: calc(3rem * .8);
-    text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem);
-  }
-  .switch.switch-lg input + label::before {
-    width: calc(calc(3rem * .8) * 2);
-  }
-  .switch.switch-lg input + label::after {
-    width: calc(calc(3rem * .8) - calc(2px * 2));
-    height: calc(calc(3rem * .8) - calc(2px * 2));
-  }
-  .switch.switch-lg input:checked + label::after {
-    margin-left: calc(3rem * .8);
-  }
-  .switch + .switch {
-    margin-left: 1rem;
+    animation: fadeInOut 1s infinite;
   }
 
   .sortable_drag {
     background-color: #0000000f;
   }
 
-  .drag_icon {
-    cursor: move; /* fallback if grab cursor is unsupported */
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-    width: 25px;
-    height: 25px;
-    display: inline-block;
-    margin-right: 5px;
-    margin-left: -10px;
-    text-align: center;
-    color: #b1b1b1;
-  }
-
-  /* (Optional) Apply a "closed-hand" cursor during drag operation. */
-  .drag_icon:active {
-    cursor: grabbing;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
-  }
-
   .switch_btn {
     float: right;
     margin: -1px 0px 0px 0px;
@@ -799,7 +423,7 @@ HTML,BODY {
   }
 
   .jumbotron {
-    background-color: white;
+    background-color: rgba(0,0,0,0);
   }
 
   .toggle-service {
@@ -809,19 +433,6 @@ HTML,BODY {
     cursor: pointer;
   }
 
-  .list-group-item {
-    min-height: 85pt;
-  }
-
-  .list-group-item:HOVER {
-    background-color: #fff;
-  }
-
-  .index_container {
-    min-height: 980pt;
-    background-color: $container-color;
-  }
-
   /* Enter and leave animations can use different */
   /* durations and timing functions.              */
   .slide-fade-enter-active {

frontend/src/assets/scss/forms.scss

@@ -0,0 +1,294 @@
+@import 'variables';
+@import 'mixin';
+
+.copy-btn {
+  position: absolute;
+  right: 0;
+}
+
+.copy-btn BUTTON {
+  background-color: white;
+  margin: 6px;
+  height: 26px;
+  font-size: 8pt;
+  padding: 5px 7px;
+  border: 1px solid #a7a7a7;
+  border-radius: 4px !important;
+}
+
+.form-control {
+  background-color: $input-background;
+  border: $input-border;
+  color: $input-color;
+}
+
+.form-control:FOCUS {
+  background-color: lighten($input-background, 4%) !important;
+  border: $input-border;
+  color: $input-color;
+}
+
+.form-control[readonly] {
+  background-color: lighten($background-color, 12%) !important;
+  color: darken($background-color, 5%) !important;
+}
+
+/* The slider itself */
+.slider {
+  -webkit-appearance: none;  /* Override default CSS styles */
+  appearance: none;
+  width: 100%; /* Full-width */
+  height: 5px; /* Specified height */
+  background: #d3d3d3; /* Grey background */
+  outline: none; /* Remove outline */
+  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+  transition: opacity .2s;
+}
+
+/* Mouse-over effects */
+.slider:hover {
+  opacity: 1; /* Fully shown on mouse-over */
+}
+
+/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  border-radius: 50%;
+  width: 20px; /* Set a specific slider handle width */
+  height: 20px; /* Slider handle height */
+  background: #4CAF50; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
+
+.slider::-moz-range-thumb {
+  width: 15px; /* Set a specific slider handle width */
+  height: 15px; /* Slider handle height */
+  background: #4CAF50; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
+
+
+.inputTags-field {
+  border: 0;
+  background-color: transparent;
+  padding-top: .13rem;
+}
+
+input.inputTags-field:focus {
+  outline-width: 0;
+}
+
+.inputTags-list {
+  display: block;
+  width: 100%;
+  min-height: calc(2.25rem + 2px);
+  padding: .2rem .35rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.inputTags-item {
+  background-color: #3aba39;
+  margin-right: 5px;
+  padding: 5px 8px;
+  font-size: 10pt;
+  color: white;
+  border-radius: 4px;
+}
+
+.inputTags-item .close-item {
+  margin-left: 6px;
+  font-size: 13pt;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.switch {
+  font-size: 1rem;
+  position: relative;
+}
+.switch input {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  background: none;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  padding: 0;
+}
+.switch input + label {
+  position: relative;
+  min-width: calc(calc(2.375rem * .8) * 2);
+  border-radius: calc(2.375rem * .8);
+  height: calc(2.375rem * .8);
+  line-height: calc(2.375rem * .8);
+  display: inline-block;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  vertical-align: middle;
+  text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem);
+}
+.switch input + label::before,
+.switch input + label::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(calc(2.375rem * .8) * 2);
+  bottom: 0;
+  display: block;
+}
+.switch input + label::before {
+  right: 0;
+  background-color: #dee2e6;
+  border-radius: calc(2.375rem * .8);
+  transition: 0.2s all;
+}
+.switch input + label::after {
+  top: 2px;
+  left: 2px;
+  width: calc(calc(2.375rem * .8) - calc(2px * 2));
+  height: calc(calc(2.375rem * .8) - calc(2px * 2));
+  border-radius: 50%;
+  background-color: white;
+  transition: 0.2s all;
+}
+.switch-rd-gr input:checked + label::before {
+  background-color: #29b10c !important;
+}
+.switch input:checked + label::before {
+  background-color: #08d;
+}
+.switch input:checked + label::after {
+  margin-left: calc(2.375rem * .8);
+}
+.switch input:focus + label::before {
+  outline: none;
+  box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
+}
+.switch input:disabled + label {
+  color: #868e96;
+  cursor: not-allowed;
+}
+.switch input:disabled + label::before {
+  background-color: #e9ecef;
+}
+.switch.switch-sm {
+  font-size: 0.875rem;
+}
+.switch.switch-sm input + label {
+  min-width: calc(calc(1.9375rem * .8) * 2);
+  height: calc(1.9375rem * .8);
+  line-height: calc(1.9375rem * .8);
+  text-indent: calc(calc(calc(1.9375rem * .8) * 2) + .5rem);
+}
+.switch.switch-sm input + label::before {
+  width: calc(calc(1.9375rem * .8) * 2);
+}
+.switch.switch-sm input + label::after {
+  width: calc(calc(1.9375rem * .8) - calc(2px * 2));
+  height: calc(calc(1.9375rem * .8) - calc(2px * 2));
+}
+.switch.switch-sm input:checked + label::after {
+  margin-left: calc(1.9375rem * .8);
+}
+.switch.switch-lg {
+  font-size: 1.25rem;
+}
+.switch.switch-lg input + label {
+  min-width: calc(calc(3rem * .8) * 2);
+  height: calc(3rem * .8);
+  line-height: calc(3rem * .8);
+  text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem);
+}
+.switch.switch-lg input + label::before {
+  width: calc(calc(3rem * .8) * 2);
+}
+.switch.switch-lg input + label::after {
+  width: calc(calc(3rem * .8) - calc(2px * 2));
+  height: calc(calc(3rem * .8) - calc(2px * 2));
+}
+.switch.switch-lg input:checked + label::after {
+  margin-left: calc(3rem * .8);
+}
+.switch + .switch {
+  margin-left: 1rem;
+}
+
+
+.CodeMirror {
+  /* Bootstrap Settings */
+  box-sizing: border-box;
+  margin: 0;
+  font: inherit;
+  overflow: auto;
+  display: block;
+  width: 100%;
+  padding: 0px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  /* Code Mirror Settings */
+  font-family: monospace;
+  position: relative;
+  height:80vh;
+}
+
+.CodeMirror-focused {
+  /* Bootstrap Settings */
+  border-color: #66afe9;
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
+  background-color: $nav-tab-color;
+}
+
+.nav-pills A {
+  color: $text-color;
+}
+
+.nav-pills I {
+  margin-right: 10px;
+}
+
+
+.drag_icon {
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  width: 25px;
+  height: 25px;
+  display: inline-block;
+  margin-right: 5px;
+  margin-left: -10px;
+  text-align: center;
+  color: #b1b1b1;
+}
+
+/* (Optional) Apply a "closed-hand" cursor during drag operation. */
+.drag_icon:active {
+  cursor: grabbing;
+  cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+}

frontend/src/assets/scss/layout.scss

@@ -0,0 +1,113 @@
+@import 'variables';
+@import 'mixin';
+
+HTML,BODY {
+  background-color: $background-color;
+  color: $text-color;
+}
+
+A {
+  color: $text-color;
+}
+
+A:HOVER {
+  color: lighten($text-color, 12%) !important;
+}
+
+.text-muted {
+  color: darken($text-color, 30%) !important;
+}
+
+.contain-card {
+
+  .card-header {
+    font-size: 1.15rem;
+  }
+
+  .dropdown-menu {
+    background-color: rgba(239, 239, 239, 0.65);
+  }
+
+}
+
+.navbar {
+  margin-bottom: 30px;
+  color: $navbar-color;
+  background-color: $navbar-background;
+}
+
+.table {
+  color: $text-color;
+}
+
+.nav-pills {
+  border-radius: $global-border-radius;
+}
+
+.nav-link {
+  color: $navbar-color;
+}
+
+.form-control {
+  border-radius: $global-border-radius;
+}
+
+.card {
+  background-color: $card-background;
+  border: $card-border;
+  box-shadow: $card-shadow;
+}
+
+.card-body {
+  overflow: hidden;
+}
+
+.card-body H4 A {
+  color: $service-title;
+  text-decoration: none;
+}
+
+.card-title A {
+  color: $service-title;
+  text-decoration: none;
+}
+
+.card-body .badge {
+  color: #fff;
+}
+
+.list-group-item {
+  min-height: 85pt;
+  background-color: $group-list-background;
+}
+
+.list-group-item:HOVER {
+  background-color: darken($group-list-background, 12%) !important;
+}
+
+.list-group-item A {
+  color: $group-list-title;
+}
+
+.container {
+  padding-top: 20px;
+  padding-bottom: 25px;
+  max-width: $max-width;
+  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  min-height: 98vh;
+  background-color: $container-color;
+}
+
+.footer {
+  text-decoration: none;
+  margin-top: 20px;
+}
+
+.footer A {
+  color: $footer-text-color;
+  text-decoration: none;
+}
+
+.footer A:HOVER {
+  color: #6d6d6d;
+}

frontend/src/assets/scss/main.scss

@@ -1,2 +1,4 @@
 @import 'base';
+@import 'layout';
+@import 'forms';
 @import 'mobile';

frontend/src/assets/scss/mixin.scss

@@ -0,0 +1,29 @@
+@mixin dynamic-color-hov($color) {
+  &.dyn-dark {
+    background-color: darken($color, 12%) !important;
+    border-color: darken($color, 17%) !important;
+  }
+  &.dyn-dark:HOVER {
+    background-color: darken($color, 17%) !important;
+    border-color: darken($color, 20%) !important;
+  }
+  &.dyn-light {
+    background-color: lighten($color, 12%) !important;
+    border-color: lighten($color, 17%) !important;
+  }
+  &.dyn-light:HOVER {
+    background-color: lighten($color, 17%) !important;
+    border-color: lighten($color, 20%) !important;
+  }
+}
+
+@mixin dynamic-color($color) {
+  &.dyn-dark {
+    background-color: darken($color, 12%) !important;
+    border-color: darken($color, 17%) !important;
+  }
+  &.dyn-light {
+    background-color: lighten($color, 12%) !important;
+    border-color: lighten($color, 17%) !important;
+  }
+}

frontend/src/assets/scss/variables.scss

@@ -1,16 +1,25 @@
 /*    Index Page      */
-$background-color: #fcfcfc;
-$container-color: #fcfcfc;
+$background-color: #313131;
+$container-color: #494949;
+$text-color: #e3e3e3;
 $max-width: 860px;
-$title-color: #464646;
-$description-color: #939393;
+$title-color: #ffffff;
+$description-color: #d2d2d2;
 $subtitle-color: #747474;
 $mobile-card-shadow: 2px 3px 10px #b7b7b7;
+$group-list-background: #282828;
+$group-list-title: #ea8114;
+$navbar-color: #ea8114;
+$navbar-background: #323232;
+$input-background: #323232;
+$input-color: #f5821c;
+$input-border: 1px solid #e78033;
 
 /*    Status Container   */
-$service-background: #ffffff;
-$service-border: 1px solid rgba(0,0,0,.125);
-$service-title: #444444;
+$card-background: #2a2a2a;
+$card-border: 1px solid rgba(0,0,0,.125);
+$card-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.08);
+$service-title: #f17833;
 $service-title-size: 1.8rem;
 $service-stats-color: #4f4f4f;
 $service-description-color: #fff;

frontend/src/components/Dashboard/Cache.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card text-black-50 bg-white mb-5">
+    <div class="card mb-5">
         <div class="card-header">Cache</div>
         <div class="card-body">
         <span v-if="!cache" class="text-muted">There are no cached pages yet!</span>

frontend/src/components/Dashboard/Checkins.vue

@@ -96,6 +96,8 @@ export default {
             name: "",
             interval: 1,
             service_id: 0,
+            hits: [],
+            failures: []
           }
         }
     },

frontend/src/components/Dashboard/DashboardMessages.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <div class="card contain-card text-black-50 bg-white mb-4">
+    <div class="card contain-card mb-4">
       <div class="card-header">{{ $t('top_nav.announcements') }}</div>
       <div class="card-body pt-0">
         <table class="table table-striped">

frontend/src/components/Dashboard/DashboardServices.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="col-12">
-        <div class="card contain-card text-black-50 bg-white mb-4">
+        <div class="card contain-card mb-4">
             <div class="card-header">{{ $t('top_nav.services') }}
                 <router-link v-if="$store.state.admin" to="/dashboard/create_service" class="btn btn-sm btn-outline-success float-right">
                     <font-awesome-icon icon="plus"/>  Create
@@ -11,7 +11,7 @@
             </div>
         </div>
 
-        <div class="card contain-card text-black-50 bg-white mb-4">
+        <div class="card contain-card mb-4">
             <div class="card-header">{{ $t('top_nav.groups') }}</div>
             <div class="card-body pt-0">
         <table class="table">

frontend/src/components/Dashboard/DashboardUsers.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="col-12">
-        <div class="card contain-card text-black-50 bg-white mb-4">
+        <div class="card contain-card mb-4">
             <div class="card-header">{{ $t('top_nav.users') }}</div>
             <div class="card-body pt-0">
         <table class="table table-striped">

frontend/src/components/Dashboard/Failures.vue

@@ -35,7 +35,7 @@
                 </li>
             </ul>
             <div class="text-center">
-             <span class="text-black-50">{{total}} Total</span>
+             <span>{{total}} Failures</span>
             </div>
         </nav>
     </div>
@@ -50,7 +50,7 @@ export default {
     data() {
         return {
             service: {},
-          failures: [],
+          fails: [],
           limit: 10,
           offset: 0,
           total: 0,
@@ -58,6 +58,9 @@ export default {
         }
     },
       computed: {
+        failures() {
+          return this.fails.sort(function(a,b) {return b.id - a.id;});
+        },
         pages() {
           return Math.floor(this.total / this.limit)
         },
@@ -91,7 +94,7 @@ export default {
         await this.load()
       },
       async load() {
-        this.failures = await Api.service_failures(this.service.id, 0, 9999999999, this.limit, this.offset)
+        this.fails = await Api.service_failures(this.service.id, 0, 9999999999, this.limit, this.offset)
       }
     }
 }

frontend/src/components/Dashboard/Incidents.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="col-12">
 
-        <div v-for="incident in incidents" :key="incident.id" class="card contain-card text-black-50 bg-white mb-4">
+        <div v-for="incident in incidents" :key="incident.id" class="card contain-card mb-4">
             <div class="card-header">Incident: {{incident.title}}
                 <button @click="deleteIncident(incident)" class="btn btn-sm btn-danger float-right">
                     <font-awesome-icon icon="times" />  Delete
@@ -14,7 +14,7 @@
         </div>
 
 
-        <div class="card contain-card text-black-50 bg-white">
+        <div class="card contain-card">
             <div class="card-header">Create Incident</div>
             <div class="card-body">
                 <form @submit.prevent="createIncident">

frontend/src/components/Dashboard/ServiceInfo.vue

@@ -83,7 +83,7 @@
                     </router-link>
                 </div>
                 <div class="col-12 col-md-3 mb-2 mb-md-0 mt-0 mt-md-1">
-                    <span class="text-black-50 float-md-right">
+                    <span class="float-md-right">
                         {{$t('uptime', [service.online_7_days])}}
                     </span>
                 </div>

frontend/src/components/Dashboard/ThemeEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card text-black-50 bg-white mb-5">
+    <div class="card mb-5">
         <div class="card-header">Theme Editor</div>
         <div class="card-body">
         <div v-if="error" class="alert alert-danger mt-3" style="white-space: pre-line;">

frontend/src/components/Dashboard/TopNav.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <nav class="navbar navbar-expand-lg">
         <router-link to="/" class="navbar-brand">Statping</router-link>
         <button @click="navopen = !navopen" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
             <font-awesome-icon v-if="!navopen" icon="bars"/>

frontend/src/components/Index/UpdatesBlock.vue

@@ -5,7 +5,7 @@
                 <span class="badge text-uppercase" :class="badgeClass(update.type)">{{update.type}}</span>
             </div>
             <div class="col-md-12 col-12 mt-2 font-3">{{update.message}}</div>
-            <div class="col-12 font-1 float-right text-black-50 mt-2">{{ago(update.created_at)}} ago</div>
+            <div class="col-12 font-1 float-right mt-2">{{ago(update.created_at)}} ago</div>
         </div>
     </div>
 </template>

frontend/src/forms/Group.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card contain-card text-black-50 bg-white mb-3">
+    <div class="card contain-card mb-3">
         <div class="card-header">{{group.id ? `Update ${group.name}` : "Create Group"}}
             <transition name="slide-fade">
                 <button @click="removeEdit" v-if="group.id" class="btn float-right btn-danger btn-sm">

frontend/src/forms/IncidentUpdates.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card-body bg-light pt-3">
+    <div class="card-body pt-3">
 
         <div v-if="updates.length===0" class="alert alert-link text-danger">
             No updates found, create a new Incident Update below.

frontend/src/forms/Message.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="card contain-card text-black-50 bg-white mb-5">
+    <div class="card contain-card mb-5">
       <div class="card-header">{{message.id ? `Update ${message.title}` : "Create Announcement"}}
         <transition name="slide-fade">
           <button @click="removeEdit" v-if="message.id" class="btn btn-sm float-right btn-danger btn-sm">

frontend/src/forms/Notifier.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <form @submit.prevent="saveNotifier">
-    <div class="card contain-card text-black-50 bg-white mb-3">
+    <div class="card contain-card mb-3">
         <div class="card-header text-capitalize">
             {{notifier.title}}
             <span @click="enableToggle" class="switch switch-sm switch-rd-gr float-right">
@@ -69,7 +69,7 @@
         </div>
     </div>
 
-        <div v-if="notifier.data_type" class="card text-black-50 bg-white mb-3">
+        <div v-if="notifier.data_type" class="card mb-3">
             <div class="card-header text-capitalize">
                 <font-awesome-icon @click="expanded = !expanded" :icon="expanded ? 'minus' : 'plus'" class="mr-2 pointer"/>
                 {{notifier.title}} Outgoing Request
@@ -103,7 +103,7 @@
 
     </form>
 
-        <div v-if="error || success" class="card text-black-50 bg-white mb-3">
+        <div v-if="error || success" class="card mb-3">
             <div class="card-body">
 
             <div v-if="error && !success" class="alert alert-danger col-12" role="alert">
@@ -119,7 +119,7 @@
             </div>
         </div>
 
-        <div class="card text-black-50 bg-white mb-3">
+        <div class="card mb-3">
             <div class="card-body">
                 <div class="row">
                     <div class="col-12 col-sm-4 mb-2 mb-sm-0 mt-2 mt-sm-0">

frontend/src/forms/OAuth.vue

@@ -1,6 +1,6 @@
 <template>
     <form @submit.prevent="saveOAuth">
-        <div class="card text-black-50 bg-white mb-3">
+        <div class="card mb-3">
             <div class="card-header">
                 Internal Login
                 <span @click="local_enabled = !!local_enabled" class="switch switch-sm switch-rd-gr float-right">
@@ -12,7 +12,7 @@
                 Use Statping's default authentication to allow users you've created to login.
             </div>
         </div>
-        <div class="card text-black-50 bg-white mb-3">
+        <div class="card mb-3">
             <div class="card-header text-capitalize">
                 <font-awesome-icon @click="expanded.github = !expanded.github" :icon="expanded.github ? 'minus' : 'plus'" class="mr-2 pointer"/>
                 Github Settings
@@ -69,7 +69,7 @@
                 </div>
             </div>
         </div>
-        <div class="card text-black-50 bg-white mb-3">
+        <div class="card mb-3">
             <div class="card-header">
                 <font-awesome-icon @click="expanded.google = !expanded.google" :icon="expanded.google ? 'minus' : 'plus'" class="mr-2 pointer"/>
                 Google Settings
@@ -113,7 +113,7 @@
                 </div>
             </div>
         </div>
-        <div class="card text-black-50 bg-white mb-3">
+        <div class="card mb-3">
             <div class="card-header">
                 <font-awesome-icon @click="expanded.slack = !expanded.slack" :icon="expanded.slack ? 'minus' : 'plus'" class="mr-2 pointer"/>
                 Slack Settings
@@ -165,7 +165,7 @@
             </div>
         </div>
 
-        <div class="card text-black-50 bg-white mb-3">
+        <div class="card mb-3">
             <div class="card-header">
                 <font-awesome-icon @click="expanded.custom = !expanded.custom" :icon="expanded.custom ? 'minus' : 'plus'" class="mr-2 pointer"/>
                 Custom oAuth Settings

frontend/src/forms/Service.vue

@@ -1,6 +1,6 @@
 <template>
     <form v-if="service.type" @submit.prevent="saveService">
-        <div class="card contain-card text-black-50 bg-white mb-4">
+        <div class="card contain-card mb-4">
             <div class="card-header">{{ $t('service.info') }}</div>
             <div class="card-body">
         <div class="form-group row">
@@ -67,7 +67,7 @@
             </div>
         </div>
 
-        <div class="card contain-card text-black-50 bg-white mb-4">
+        <div class="card contain-card mb-4">
             <div class="card-header">Request Details</div>
             <div class="card-body">
 
@@ -202,7 +202,7 @@
             </div>
         </div>
 
-        <div class="card contain-card text-black-50 bg-white mb-4">
+        <div class="card contain-card mb-4">
             <div class="card-header">Notification Options</div>
             <div class="card-body">
 

frontend/src/forms/User.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card contain-card text-black-50 bg-white mb-3">
+    <div class="card contain-card mb-3">
         <div class="card-header"> {{user.id ? `Update ${user.username}` : "Create User"}}
             <transition name="slide-fade">
                 <button @click.prevent="removeEdit" v-if="user.id" class="btn btn-sm float-right btn-danger btn-sm">Close</button>

frontend/src/pages/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container col-md-7 col-sm-12 mt-md-5 bg-light">
+    <div class="container col-md-7 col-sm-12 mt-md-5">
         <TopNav :admin="admin"/>
         <router-view :admin="admin"/>
     </div>

frontend/src/pages/Help.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="col-12 bg-white p-4" v-html="<a class=\"scrollclick\" href=\"#\" data-id=\"page_0\">Types of Monitoring</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_1\">Features</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_2\">Start Statping</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_3\">Linux</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_4\">Mac</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_5\">Windows</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_6\">AWS EC2</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_7\">Docker</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_8\">Mobile App</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_9\">Heroku</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_10\">API</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_11\">Makefile</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_12\">Notifiers</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_13\">Notifier Events</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_14\">Notifier Example</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_15\">Prometheus Exporter</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_16\">SSL</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_17\">Config with .env File</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_18\">Static Export</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_19\">Statping Plugins</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_20\">Statuper</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_21\">Build and Test</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_22\">Contributing</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_23\">PGP Signature</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_24\">Testing</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_25\">Deployment</a><br>\n\n<div class=\"mt-5\" id=\"page_0\"><h1>Types of Monitoring</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_1\"><h1>Features</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_2\"><h1>Start Statping</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_3\"><h1>Linux</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_4\"><h1>Mac</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_5\"><h1>Windows</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_6\"><h1>AWS EC2</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_7\"><h1>Docker</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_8\"><h1>Mobile App</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_9\"><h1>Heroku</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_10\"><h1>API</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_11\"><h1>Makefile</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_12\"><h1>Notifiers</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_13\"><h1>Notifier Events</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_14\"><h1>Notifier Example</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_15\"><h1>Prometheus Exporter</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_16\"><h1>SSL</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_17\"><h1>Config with .env File</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_18\"><h1>Static Export</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_19\"><h1>Statping Plugins</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_20\"><h1>Statuper</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_21\"><h1>Build and Test</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_22\"><h1>Contributing</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_23\"><h1>PGP Signature</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_24\"><h1>Testing</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_25\"><h1>Deployment</h1></div>\n"></div>
+    <div class="col-12 p-4" v-html="<a class=\"scrollclick\" href=\"#\" data-id=\"page_0\">Types of Monitoring</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_1\">Features</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_2\">Start Statping</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_3\">Linux</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_4\">Mac</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_5\">Windows</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_6\">AWS EC2</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_7\">Docker</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_8\">Mobile App</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_9\">Heroku</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_10\">API</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_11\">Makefile</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_12\">Notifiers</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_13\">Notifier Events</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_14\">Notifier Example</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_15\">Prometheus Exporter</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_16\">SSL</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_17\">Config with .env File</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_18\">Static Export</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_19\">Statping Plugins</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_20\">Statuper</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_21\">Build and Test</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_22\">Contributing</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_23\">PGP Signature</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_24\">Testing</a><br><a class=\"scrollclick\" href=\"#\" data-id=\"page_25\">Deployment</a><br>\n\n<div class=\"mt-5\" id=\"page_0\"><h1>Types of Monitoring</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_1\"><h1>Features</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_2\"><h1>Start Statping</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_3\"><h1>Linux</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_4\"><h1>Mac</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_5\"><h1>Windows</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_6\"><h1>AWS EC2</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_7\"><h1>Docker</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_8\"><h1>Mobile App</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_9\"><h1>Heroku</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_10\"><h1>API</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_11\"><h1>Makefile</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_12\"><h1>Notifiers</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_13\"><h1>Notifier Events</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_14\"><h1>Notifier Example</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_15\"><h1>Prometheus Exporter</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_16\"><h1>SSL</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_17\"><h1>Config with .env File</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_18\"><h1>Static Export</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_19\"><h1>Statping Plugins</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_20\"><h1>Statuper</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_21\"><h1>Build and Test</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_22\"><h1>Contributing</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_23\"><h1>PGP Signature</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_24\"><h1>Testing</h1></div>\n\n\n<div class=\"mt-5\" id=\"page_25\"><h1>Deployment</h1></div>\n"></div>
 </template>
 
 <script>
 export default {
   name: 'Help',
 }
-</script>
+</script>

frontend/src/pages/Index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container col-md-7 col-sm-12 sm-container index_container">
+    <div class="container col-md-7 col-sm-12 sm-container">
 
         <Header/>
 

frontend/src/pages/Login.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container col-md-7 col-sm-12 mt-md-5 bg-light">
+    <div class="container col-md-7 col-sm-12 mt-md-5">
         <div class="col-10 offset-1 col-md-8 offset-md-2 mt-md-2">
             <div class="col-12 col-md-8 offset-md-2 mb-4">
                 <img alt="Statping Login" class="col-12 mt-5 mt-md-0" style="max-width:650px" src="banner.png">

frontend/src/pages/Logs.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="col-12 bg-white p-4">
+    <div class="col-12 p-4">
         <p v-if="logs.length === 0" class="text-monospace sm">
             Loading Logs...
         </p>

frontend/src/pages/Service.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container col-md-7 col-sm-12 mt-md-5 bg-light">
+    <div class="container col-md-7 col-sm-12 mt-md-5">
 
         <div class="col-12 mb-4">
 
@@ -388,8 +388,7 @@ export default {
         this.loading = false
       },
       async fetchUptime() {
-         const uptime = await Api.service_uptime(this.service.id, this.params.start, this.params.end)
-        window.console.log(uptime)
+        const uptime = await Api.service_uptime(this.service.id, this.params.start, this.params.end)
         this.uptime_data = this.parse_uptime(uptime)
       },
       parse_uptime(timedata) {

frontend/src/pages/Settings.vue

@@ -60,14 +60,14 @@
                 <div class="tab-content" id="v-pills-tabContent">
                     <div class="tab-pane fade" v-bind:class="{active: liClass('v-pills-home-tab'), show: liClass('v-pills-home-tab')}" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
 
-                        <div class="card text-black-50 bg-white">
+                        <div class="card">
                             <div class="card-header">Statping Settings</div>
                             <div class="card-body">
                                 <CoreSettings/>
                             </div>
                         </div>
 
-                        <div class="card text-black-50 bg-white mt-3">
+                        <div class="card mt-3">
                             <div class="card-header">API Settings</div>
                             <div class="card-body">
                                 <div class="form-group row">
@@ -80,7 +80,9 @@
                                             </div>
                                         </div>
                                         <small class="form-text text-muted">API Secret is used for read, create, update and delete routes</small>
-                                        <small class="form-text text-muted">You can <a href="#" id="regenkeys" @click="renewApiKeys">Regenerate API Keys</a> if you need to.</small>
+                                        <small class="form-text text-muted">You can Regenerate API Keys if you need to.</small>
+
+                                        <button id="regenkeys" @click="renewApiKeys" class="btn btn-sm btn-danger mt-2">Regenerate API Keys</button>
                                     </div>
                                 </div>
                             </div>

source/generate_wiki.go

@@ -67,7 +67,7 @@ func die(err error) {
 }
 
 var packageTemplate = template.Must(template.New("").Parse(`<template>
-    <div class="col-12 bg-white p-4" v-html={{printf "%q" .Compiled}}></div>
+    <div class="col-12 p-4" v-html={{printf "%q" .Compiled}}></div>
 </template>
 
 <script>