Multiple UI Improvements

4 files changed, 78 insertions, 12 deletions

diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 6b2e79933..6399b8fd8 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -94,8 +94,11 @@ a:focus, a:hover {
  margin: 0;
 }
 
-.text-danger {
+.text-danger, a.text-danger {
   color: #E05F5D;
+  &:hover, &:focus {
+    color: #E05F5D;
+  }
 }
 
 .btn {
@@ -112,6 +115,10 @@ a:focus, a:hover {
   &:focus {
     @include box-shadow(none);
   }
+  &.no-padding {
+    line-height: 32px;
+    padding: 0;
+  }
   &.no-resize {
     resize: none;
   }
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index f4e57eec5..892d4d9df 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -401,6 +401,9 @@
                             text-align: left;
                         }
                     }
+                    .no-padding--left {
+                        padding-left: 15px;
+                    }
                 }
                 .settings-links {
                     display: none;
@@ -425,6 +428,11 @@
             }
         }
         .settings-table {
+            .nav {
+                position: relative;
+                top: auto;
+                width: 100%;
+            }
             .settings-content {
                 &.minimize-settings {
                     padding: 0;
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 9af045f98..83f6cddde 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -1,5 +1,6 @@
 @import "access-history";
 @import "activity-log";
+@import "webhooks";
 
 .user-settings {
     min-height:300px;
@@ -29,6 +30,9 @@
     li {
         list-style: none;
     }
+    label {
+        font-weight: 600;
+    }
     .settings-table {
         display: table;
         table-layout: fixed;
@@ -37,6 +41,11 @@
             display: table-cell;
             vertical-align: top;
         }
+        .nav {
+            position: fixed;
+            top: 55px;
+            width: 180px;
+        }
         .security-links {
             margin-right: 20px;
             .fa {
@@ -129,10 +138,6 @@
                 }
             }
 
-            .font--small {
-                font-size: 13px;
-            }
-
             .section-describe {
                 @include opacity(0.7);
                 white-space:pre;
@@ -161,14 +166,29 @@
 
             .setting-list-item {
                 margin-top:7px;
-                .has-error {
-                    color: #a94442;
+            }
+            .has-error {
+                color: #a94442;
+            }
+            .no-padding--left {
+                padding-left: 0;
+            }
+            .padding-top {
+                padding-top: 7px;
+                &.x2 {
+                    padding-top: 14px;
                 }
-                .padding-top {
-                    padding-top: 7px;
-                    &.x2 {
-                        padding-top: 14px;
-                    }
+                &.x3 {
+                    padding-top: 21px;
+                }
+            }
+            .padding-bottom {
+                padding-bottom: 7px;
+                &.x2 {
+                    padding-bottom: 14px;
+                }
+                &.x3 {
+                    padding-bottom: 21px;
                 }
                 .control-label {
                     font-weight: 600;
diff --git a/web/sass-files/sass/partials/_webhooks.scss b/web/sass-files/sass/partials/_webhooks.scss
new file mode 100644
index 000000000..b801ccf63
--- /dev/null
+++ b/web/sass-files/sass/partials/_webhooks.scss
@@ -0,0 +1,31 @@
+.webhooks__container {
+    background: rgba(black, 0.1);
+    border: 1px solid;
+    @include border-radius(3px);
+    padding: 0 13px 15px;
+    margin-top: 10px;
+}
+.webhook__item {
+    font-size: 13px;
+    position: relative;
+    &:last-child {
+        .divider-light:last-child {
+            display: none;
+        }
+    }
+    .webhook__remove {
+        position: absolute;
+        right: -7px;
+        top: 8px;
+        width: 30px;
+        height: 30px;
+        font-size: 22px;
+        font-weight: bold;
+        text-align: center;
+        text-decoration: none;
+        color: #E05F5D;
+    }
+    .webhook__url {
+        padding-right: 20px;
+    }
+}
\ No newline at end of file