PLT-6905 - Updating channel header design (#6789)

* PLT-6905 - Updating channel header design

* Updating border-radius

* Updating radius for wide icons

* Updating trigger for overlay

* Updating UI for channel header

* Updating channel header sizing

* Updating channel header css

* Updating sidebar css

* Updating status icons

* Adjusting border

* Updating comment

* Removing type from status icon

* Fixing UI issues for the channel header/sidebar

* make "Add a channel description" open the channel header modal

* Updating status and opacity

* Updating stauts icon positioning

* Updating description and heading size

* Updating UI changes

* Updating UI changes

* add a focused class to the parent div .search__form and then remove when hover away

* Fix active state for pinned posts icon

* Updating UI changes

* Update channel header text

2 files changed, 11 insertions, 3 deletions

diff --git a/webapp/components/post_view/post_flag_icon.jsx b/webapp/components/post_view/post_flag_icon.jsx
index 295bdd116..02f8feb53 100644
--- a/webapp/components/post_view/post_flag_icon.jsx
+++ b/webapp/components/post_view/post_flag_icon.jsx
@@ -21,11 +21,17 @@ function flagToolTip(isFlagged) {
     );
 }
 
-function flagIcon() {
+function flagIcon(isFlagged) {
+    let flagIconSvg = Constants.FLAG_ICON_SVG;
+
+    if (isFlagged) {
+        flagIconSvg = Constants.FLAG_FILLED_ICON_SVG;
+    }
+
     return (
         <span
             className='icon'
-            dangerouslySetInnerHTML={{__html: Constants.FLAG_ICON_SVG}}
+            dangerouslySetInnerHTML={{__html: flagIconSvg}}
         />
     );
 }
@@ -52,6 +58,7 @@ export default function PostFlagIcon(props) {
     if (!props.isEphemeral) {
         return (
             <OverlayTrigger
+                trigger={['hover', 'focus']}
                 key={'flagtooltipkey' + flagVisible}
                 delayShow={Constants.OVERLAY_TIME_DELAY}
                 placement='top'
@@ -63,7 +70,7 @@ export default function PostFlagIcon(props) {
                     className={'flag-icon__container ' + flagVisible}
                     onClick={flagFunc}
                 >
-                    {flagIcon()}
+                    {flagIcon(props.isFlagged)}
                 </a>
             </OverlayTrigger>
         );
diff --git a/webapp/components/post_view/reaction/reaction.jsx b/webapp/components/post_view/reaction/reaction.jsx
index 7fad56d62..f256a1fb5 100644
--- a/webapp/components/post_view/reaction/reaction.jsx
+++ b/webapp/components/post_view/reaction/reaction.jsx
@@ -219,6 +219,7 @@ export default class Reaction extends React.PureComponent {
 
         return (
             <OverlayTrigger
+                trigger={['hover', 'focus']}
                 delayShow={1000}
                 placement='top'
                 shouldUpdatePosition={true}