Fix channel header icon highlight (#115)

* Add new css to channel header icon * Remove important tag to hide css in dropdown * Rename todo channel header icon css class
mattermost-community · Sep 2, 2020 · b2a69b7 · b2a69b7
1 parent 6cce8b3
commit b2a69b7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/webapp/src/components/channel_header_button/channel_header_button.scss b/webapp/src/components/channel_header_button/channel_header_button.scss
@@ -0,0 +1,8 @@
+.todo-plugin-icon {
+    &:active,
+    &--active,
+    &--active:hover {
+        fill: var(--button-bg);
+        color: var(--button-bg);
+    }
+}
diff --git a/webapp/src/components/channel_header_button/channel_header_button.tsx b/webapp/src/components/channel_header_button/channel_header_button.tsx
@@ -3,14 +3,19 @@
 
 import React from 'react';
 
+import './channel_header_button.scss';
+
 type Props = {
     shouldHighlight: boolean,
 };
 
 export default function ChannelHeaderButton(props: Props) {
+    let btnClass = 'icon fa fa-list';
+    if (props.shouldHighlight) {
+        btnClass += ' todo-plugin-icon--active';
+    }
+
     return (
-        <span className={props.shouldHighlight ? 'channel-header__icon--active' : ''} >
-            <i className='icon fa fa-list '/>
-        </span>
+        <i className={btnClass}/>
     );
 }