From 7b566caa7edac076ded346c013c7f2266f948f29 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Tue, 24 Jan 2023 23:15:01 -0600
Subject: [PATCH] Fixed: Filter indicator in interactive search

Closes #2679

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
---
 frontend/src/Components/Menu/FilterMenu.js    |  2 +-
 .../src/Components/Menu/PageMenuButton.css    |  8 ++++++
 .../src/Components/Menu/PageMenuButton.js     | 26 ++++++++++++++++---
 .../src/Components/Menu/ToolbarMenuButton.js  | 13 +++++-----
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Components/Menu/FilterMenu.js b/frontend/src/Components/Menu/FilterMenu.js
index 18f5b3926..2ed1235ee 100644
--- a/frontend/src/Components/Menu/FilterMenu.js
+++ b/frontend/src/Components/Menu/FilterMenu.js
@@ -57,9 +57,9 @@ class FilterMenu extends Component {
         >
           <ButtonComponent
             iconName={icons.FILTER}
+            showIndicator={selectedFilterKey !== 'all'}
             text="Filter"
             isDisabled={isDisabled}
-            indicator={selectedFilterKey !== 'all'}
           />
 
           <FilterMenuContent
diff --git a/frontend/src/Components/Menu/PageMenuButton.css b/frontend/src/Components/Menu/PageMenuButton.css
index d979a1708..f76d5ddb0 100644
--- a/frontend/src/Components/Menu/PageMenuButton.css
+++ b/frontend/src/Components/Menu/PageMenuButton.css
@@ -1,11 +1,19 @@
 .menuButton {
   composes: menuButton from '~./MenuButton.css';
 
+  position: relative;
+
   &:hover {
     color: #666;
   }
 }
 
+.indicatorContainer {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
 .label {
   margin-left: 5px;
 }
diff --git a/frontend/src/Components/Menu/PageMenuButton.js b/frontend/src/Components/Menu/PageMenuButton.js
index 76c5591b8..8c7a86740 100644
--- a/frontend/src/Components/Menu/PageMenuButton.js
+++ b/frontend/src/Components/Menu/PageMenuButton.js
@@ -1,13 +1,15 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
 import MenuButton from 'Components/Menu/MenuButton';
+import { icons } from 'Helpers/Props';
 import styles from './PageMenuButton.css';
 
 function PageMenuButton(props) {
   const {
     iconName,
-    indicator,
+    showIndicator,
     text,
     ...otherProps
   } = props;
@@ -22,6 +24,22 @@ function PageMenuButton(props) {
         size={18}
       />
 
+      {
+        showIndicator ?
+          <span
+            className={classNames(
+              styles.indicatorContainer,
+              'fa-layers fa-fw'
+            )}
+          >
+            <Icon
+              name={icons.CIRCLE}
+              size={9}
+            />
+          </span> :
+          null
+      }
+
       <div className={styles.label}>
         {text}
       </div>
@@ -31,12 +49,12 @@ function PageMenuButton(props) {
 
 PageMenuButton.propTypes = {
   iconName: PropTypes.object.isRequired,
-  text: PropTypes.string,
-  indicator: PropTypes.bool.isRequired
+  showIndicator: PropTypes.bool.isRequired,
+  text: PropTypes.string
 };
 
 PageMenuButton.defaultProps = {
-  indicator: false
+  showIndicator: false
 };
 
 export default PageMenuButton;
diff --git a/frontend/src/Components/Menu/ToolbarMenuButton.js b/frontend/src/Components/Menu/ToolbarMenuButton.js
index 4bd4d6e33..ba575753a 100644
--- a/frontend/src/Components/Menu/ToolbarMenuButton.js
+++ b/frontend/src/Components/Menu/ToolbarMenuButton.js
@@ -9,7 +9,7 @@ import styles from './ToolbarMenuButton.css';
 function ToolbarMenuButton(props) {
   const {
     iconName,
-    indicator,
+    showIndicator,
     text,
     ...otherProps
   } = props;
@@ -26,7 +26,7 @@ function ToolbarMenuButton(props) {
         />
 
         {
-          indicator &&
+          showIndicator ?
             <span
               className={classNames(
                 styles.indicatorContainer,
@@ -37,7 +37,8 @@ function ToolbarMenuButton(props) {
                 name={icons.CIRCLE}
                 size={9}
               />
-            </span>
+            </span> :
+            null
         }
 
         <div className={styles.labelContainer}>
@@ -52,12 +53,12 @@ function ToolbarMenuButton(props) {
 
 ToolbarMenuButton.propTypes = {
   iconName: PropTypes.object.isRequired,
-  text: PropTypes.string,
-  indicator: PropTypes.bool.isRequired
+  showIndicator: PropTypes.bool.isRequired,
+  text: PropTypes.string
 };
 
 ToolbarMenuButton.defaultProps = {
-  indicator: false
+  showIndicator: false
 };
 
 export default ToolbarMenuButton;