Multiple UI Improvements (#4712)

* Multiple UI Improvements

* Reverting modal animation

6 files changed, 48 insertions, 30 deletions

diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index 4ddb861ca..e1e35ea29 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -21,6 +21,11 @@
     width: 100%;
     z-index: 101;
 
+    .fa-user {
+        position: relative;
+        top: -1px;
+    }
+
     .mention--align {
         @include clearfix;
         text-overflow: ellipsis;
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 408f0ffd0..1bd1f2c3b 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -17,6 +17,7 @@
     }
 
     .popover-title {
+        @include border-radius(0);
         background: alpha-color($black, .05);
         max-width: 100%;
         overflow: hidden;
diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss
index 7b4e03ad9..100b618e8 100644
--- a/webapp/sass/layout/_forms.scss
+++ b/webapp/sass/layout/_forms.scss
@@ -60,6 +60,26 @@
     }
 }
 
+.has-error {
+    .help-block,
+    .control-label,
+    .radio,
+    .checkbox,
+    .radio-inline,
+    .checkbox-inline {
+        color: $red;
+    }
+
+    &.radio,
+    &.checkbox,
+    &.radio-inline,
+    &.checkbox-inline {
+        label {
+            color: $red;
+        }
+    }
+}
+
 .padding-top {
     padding-top: 7px;
 
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index fd1c42135..db3bda627 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -210,7 +210,6 @@
 
     .channel-intro-text {
         margin-top: 35px;
-        word-break: break-all;
     }
 }
 
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index dc55d2d54..68ba20537 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -5,23 +5,6 @@
         max-height: 145px;
     }
 
-    .modal {
-        .modal-dialog {
-            &.new-channel__modal {
-                position: fixed;
-                @include translate3d(0, 100%, 0);
-            }
-        }
-
-        &.in {
-            .modal-dialog {
-                &.new-channel__modal {
-                    @include translate3d(0, 0, 0);
-                }
-            }
-        }
-    }
-
     .webrtc__notification--rhs {
         left: auto;
         right: 0;
@@ -43,7 +26,7 @@
         @include box-shadow(none);
         background: alpha-color($black, .8);
         border: none;
-        height: calc(100% - 45px);
+        height: calc(100% - 40px);
         max-width: 100%;
         position: fixed;
         top: 47px;
@@ -598,6 +581,16 @@
                     min-height: 100%;
                 }
 
+                .nav-pills {
+                    > li {
+                        &:hover {
+                            a {
+                                background: transparent !important;
+                            }
+                        }
+                    }
+                }
+
                 &.display--content {
                     .modal-header {
                         display: none;
@@ -802,7 +795,7 @@
                 @include translate3d(0, 100%, 0);
                 background: alpha-color($black, .9);
                 display: block;
-                height: calc(100% - 45px);
+                height: calc(100% - 40px);
                 left: 0;
                 overflow: auto;
                 padding: 1.4em 0 0;
@@ -1011,11 +1004,11 @@
                     padding-bottom: 25px;
 
                     ul {
-                        clear: both;
-                        background: #ffffff;
+                        background: $white;
                         border-radius: 3px;
-                        top: 5px;
+                        clear: both;
                         position: relative;
+                        top: 5px;
 
                         li {
                             a {
@@ -1031,21 +1024,21 @@
 
                 > a {
                     font-size: 15px;
-                    margin: 0;
                     line-height: 2.5;
+                    margin: 0;
 
                     &:hover,
                     &:focus {
-                        background: transparent;
+                        background: transparent !important;
                     }
 
                     &.has-close {
                         .btn-close {
-                            width: 40px;
-                            text-align: center;
-                            right: 0;
-                            display: block;
                             @include opacity(.5);
+                            display: block;
+                            right: 0;
+                            text-align: center;
+                            width: 40px;
                         }
                     }
                 }
diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss
index ffbcc847e..85bdd28a3 100644
--- a/webapp/sass/utils/_variables.scss
+++ b/webapp/sass/utils/_variables.scss
@@ -6,7 +6,7 @@ $primary-color--hover: darken($primary-color, 10%);
 $bg--gray: rgb(245, 245, 245);
 $white: rgb(255, 255, 255);
 $black: rgb(0, 0, 0);
-$red: rgb(229, 101, 101);
+$red: rgb(214, 73, 70);
 $yellow: rgb(255, 255, 0);
 $light-gray: rgba(0, 0, 0, .15);
 $gray: rgba(0, 0, 0, .3);