From bfae88e60c7a623afae82e06ce1421ca778c06e7 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Fri, 17 Mar 2017 17:19:54 +0500
Subject: Ui improvements (#5755)

* PLT-5816 - Flagged posts tooltip fix

* PLT-5766 - Link previews appearing outside the box

* PLT-5795 - Fixing alignment user list in channel

* PLT-5818 - Reset password error not aligned

* PLT-5837 - Adjusting image preview max height

* PLT-5778 - Updating word break for paragraphs

* PLT-5848 - Updating label for file error

* PLT-5846 - Markdown tables extra border on mobile

* PLT-5662 - Pinned post UI improvement

* Fixing eslint error

* Updating tooltip eslint issue

* PLT-5832 - Removing error styling on labels
---
 webapp/sass/layout/_forms.scss    |  5 ++++-
 webapp/sass/layout/_headers.scss  |  6 +++---
 webapp/sass/layout/_post.scss     | 10 +++++++++-
 webapp/sass/layout/_webhooks.scss | 16 +++++++++++-----
 4 files changed, 27 insertions(+), 10 deletions(-)

(limited to 'webapp/sass/layout')

diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss
index 7552290d8..64c74b0a5 100644
--- a/webapp/sass/layout/_forms.scss
+++ b/webapp/sass/layout/_forms.scss
@@ -62,7 +62,6 @@
 
 .has-error {
     .help-block,
-    .control-label,
     .radio,
     .checkbox,
     .radio-inline,
@@ -70,6 +69,10 @@
         color: $red;
     }
 
+    .control-label {
+        color: inherit;
+    }
+
     &.radio,
     &.checkbox,
     &.radio-inline,
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index d38819d03..f8211d433 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -9,10 +9,10 @@
 
     .member-popover__trigger,
     .pinned-posts-button {
+        cursor: pointer;
         display: inline-block;
+        margin-left: 7px;
         min-width: 30px;
-        cursor: pointer;
-        margin-left: 10px;
         text-align: center;
         white-space: nowrap;
 
@@ -65,7 +65,7 @@
         }
 
         &:last-child {
-            padding-right: 8px;
+            padding-right: 6px;
             width: 8.9%;
         }
     }
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index debcd70e7..8d14bfafc 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -359,6 +359,10 @@
 }
 
 .post-create__container {
+    label {
+        font-weight: normal;
+    }
+
     form {
         margin: 0 auto;
         padding: .5em 15px 0;
@@ -523,6 +527,7 @@
             .col__reply {
                 min-width: 0;
             }
+
             .dropdown {
                 margin-right: 0;
             }
@@ -749,6 +754,7 @@
         line-height: 1.6em;
         margin: 0;
         white-space: pre-wrap;
+        word-break: break-word;
     }
 
     .post__header--info {
@@ -786,7 +792,7 @@
 
             .flag-icon__container {
                 left: 36px;
-                margin-left: 5px;
+                margin-left: 7px;
                 position: absolute;
                 top: 8px;
             }
@@ -1358,6 +1364,8 @@
 
 .post__pinned-badge {
     margin-left: 7px;
+    position: relative;
+    top: -1px;
 }
 
 .permalink-text {
diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss
index f3a8c6fd3..c36edb8a2 100644
--- a/webapp/sass/layout/_webhooks.scss
+++ b/webapp/sass/layout/_webhooks.scss
@@ -41,6 +41,7 @@
         &.attachment--opengraph {
             max-width: 800px;
         }
+
         .attachment__content {
             border-radius: 4px;
             border-style: solid;
@@ -71,16 +72,18 @@
             &.attachment__container--danger {
                 border-left-color: #e40303;
             }
+
             &.attachment__container--opengraph {
                 display: table;
-                table-layout: fixed;
-                width: 100%;
                 margin: 0;
                 padding-bottom: 13px;
+                width: 100%;
+
                 div {
                     margin: 0;
                 }
             }
+
             .sitename {
                 color: #A3A3A3;
             }
@@ -89,8 +92,8 @@
         .attachment__body__wrap {
             &.attachment__body__wrap--opengraph {
                 display: table-cell;
-                width: 100%;
                 vertical-align: top;
+                width: 100%;
             }
         }
 
@@ -104,6 +107,7 @@
             &.attachment__body--no_thumb {
                 width: 100%;
             }
+
             &.attachment__body--opengraph {
                 float: none;
                 padding-right: 0;
@@ -142,6 +146,7 @@
                     margin-top: 10px;
                     max-height: 200px;
                     max-width: 400px;
+                    width: 100%;
 
                     &.loading {
                         height: 150px;
@@ -164,16 +169,17 @@
 
             &.has-link {
                 color: #2f81b7;
-                text-overflow: ellipsis;
                 overflow: hidden;
+                text-overflow: ellipsis;
                 white-space: nowrap;
             }
 
             &.attachment__title--opengraph {
                 height: auto;
                 word-wrap: break-word;
+
                 &.is-url {
-                    word-break: break-all
+                    word-break: break-all;
                 }
             }
         }
-- 
cgit v1.2.3-1-g7c22