PLT-3506 Added flagged posts functionality (#3679)

* Added flagged posts functionality

* UI Improvements to flags (#3697)

* Added flag functionality for mobile

* Updating flagged text (#3699)

* Add back button to RHS thread when coming from flagged posts

* Updating position of flags (#3708)

* Plt 3506 - Reverting flag position (#3724)

* Revert "Updating position of flags (#3708)"

This reverts commit aaa05632c5d9eda35a048300a5bd7e99584c5b58.

* Fixing the icon in search

* Help text and white space improvements (#3730)

* Updatng help text and some white spacing.

* Updating help text

webapp/sass/layout/_headers.scss

@@ -43,6 +43,7 @@
         }
 
         &:last-child {
+            padding-right: 8px;
             width: 8.9%;
         }
     }
@@ -375,8 +376,17 @@
         font-size: 22px;
         height: 30px;
         line-height: 26px;
-        margin-right: 9px;
-        width: 24px;
+        margin-right: 3px;
+        text-align: center;
+        width: 30px;
+
+        th {
+            &:last-child {
+                div {
+                    margin-right: 10px;
+                }
+            }
+        }
 
         .channel__wrap.move--left & {
             position: absolute;
@@ -384,6 +394,15 @@
             top: 14px;
         }
 
+        .icon__flag {
+            svg {
+                height: 18px;
+                position: relative;
+                top: 2px;
+                width: 19px;
+            }
+        }
+
         > a {
             @include opacity(.6);
             @include single-transition(all, .1s, ease-in);

webapp/sass/layout/_post.scss

@@ -486,6 +486,7 @@ body.ios {
     &:hover {
         .dropdown,
         .comment-icon__container,
+        .flag-icon__container,
         .post__reply,
         .post__remove {
             visibility: visible;
@@ -561,7 +562,7 @@ body.ios {
             .img-div {
                 max-height: 150px;
                 max-width: 150px;
-        }
+            }
 
             p {
                 line-height: inherit;
@@ -573,7 +574,7 @@ body.ios {
 
             ol,
             ul {
-            clear: both;
+                clear: both;
                 padding-left: 20px;
             }
         }
@@ -694,6 +695,13 @@ body.ios {
                 }
             }
 
+            .flag-icon__container {
+                left: 36px;
+                margin-left: 5px;
+                position: absolute;
+                top: 8px;
+            }
+
             .post__img {
                 img {
                     display: none;
@@ -835,7 +843,9 @@ body.ios {
     }
 
     .post__img {
-        width: 42px;
+        padding-right: 10px;
+        text-align: right;
+        width: 53px;
 
         svg {
             height: 32px;
@@ -1076,6 +1086,7 @@ body.ios {
         display: inline-block;
         margin-right: 6px;
         visibility: hidden;
+
         svg {
             fill: inherit;
             position: relative;
@@ -1115,6 +1126,36 @@ body.ios {
         }
     }
 
+    .flag-icon__container {
+        display: inline-block;
+        font-size: 12px;
+        margin-left: 7px;
+        position: relative;
+        top: 1px;
+        visibility: hidden;
+
+        &.visible {
+            visibility: visible;
+        }
+
+        path {
+            fill: inherit;
+        }
+
+        .fa-star-o {
+            @include opacity(.8);
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &.icon--visible {
+            visibility: visible;
+        }
+
+    }
+
     .web-embed-data {
         @include border-radius(2px);
         @include alpha-property(background, $black, 0.05);

webapp/sass/layout/_sidebar-right.scss

@@ -161,7 +161,7 @@
 
     .sidebar--right__subheader {
         font-size: 1em;
-        padding: 1em 1em 0;
+        padding: 0.5em 1em 0;
 
         h4 {
             font-size: 1em;
@@ -176,6 +176,13 @@
             font-size: .95em;
             padding-bottom: 10px;
         }
+
+        .usage__icon {
+            @include opacity(.6);
+            margin: 0 3px;
+            position: relative;
+            top: 1px;
+        }
     }
 
     .suggestion-list__content {