Enhance logging with timestamps and filtering.

src/sass/directives/directives.scss

@@ -1 +1,2 @@
-@import "gravatar"
+@import "gravatar";
+@import "rzslider";

src/sass/directives/rzslider.scss

@@ -0,0 +1,47 @@
+.stable-slider.rzslider .rz-bar {
+  background: $v-light-gray;
+  height: 2px;
+}
+.stable-slider.rzslider .rz-selection {
+  background: $v-accent-color;
+}
+
+.stable-slider.rzslider .rz-pointer {
+  width: 20px;
+  height: 20px;
+  top: -9px;
+  bottom: 0;
+  background-color: $v-accent-color;
+}
+
+.stable-slider.rzslider .rz-pointer:after {
+  display: none;
+}
+
+.stable-slider.rzslider .rz-bubble {
+  bottom: 14px;
+}
+
+.stable-slider.rzslider .rz-limit {
+  font-weight: bold;
+  color: $v-accent-color;
+}
+
+.stable-slider.rzslider .rz-tick {
+  width: 10px;
+  height: 10px;
+  margin-left: 4px;
+  border-radius: 50%;
+  background: $v-light-gray;
+  top: -1px;
+}
+
+.stable-slider.rzslider .rz-tick.rz-selected {
+  background: $v-accent-color;
+}
+
+.stable-slider.rzslider .rz-tick-legend {
+	top: 20px;
+	font-size: 12px;
+	color: $v-dark-gray;
+}

src/sass/views/includes/logOptions.scss

@@ -0,0 +1,68 @@
+log-options {
+
+  $border-color: #EFEFEF;
+
+  .bp-action-sheet__sheet {
+    padding-left: 2rem;
+    padding-right: .75rem;
+  }
+
+  .log-options {
+    .option {
+      border: 0;
+      padding-right: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-bottom: 1px;
+      overflow: visible;
+
+      > i {
+        color: $v-accent-color;
+        padding: 0 0 5px 0;
+        margin-left: -5px;
+
+        > img {
+          height: 39px;
+          width: 39px;
+          padding: 4px;
+        }
+      }
+    }
+    .log-options-inner {
+      display: flex;
+      position: relative;
+      padding-top: 16px;
+      padding-bottom: 16px;
+
+      &::after {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: $border-color;
+        bottom: 0;
+        right: 0;
+        content: '';
+      }
+
+      .check {
+        padding: 0 1.2rem;
+      }
+    }
+    .log-options-details {
+      flex-grow: 1;
+
+      .log-options-name {
+        padding-bottom: 5px;
+      }
+    }
+
+    .log-level-slider {
+      width: 90%;
+      margin: auto;
+      font-size: 12px;
+      height: 90px;
+    }
+  }
+
+}

src/sass/views/tab-settings.scss

@@ -75,6 +75,14 @@
       font-weight: bold;
     }
   }
+  .setting-range-hdist {
+    display: table;
+    width: 100%;
+    span {
+      display: table-cell;
+      text-align: center;
+    }
+  }
  .settings-list {
     .item {
       color: $v-dark-gray;
@@ -119,6 +127,10 @@
     color: #00901B;
    }
  }
+ .log-text {
+    font-size: 12px;
+    line-height: 18px;
+  }
 }
 
 #tab-settings {