From 4956ff791458c7a114f43f01634ee023058f6c93 Mon Sep 17 00:00:00 2001
From: voltron4lyfe <holiestofhandgrenades@gmail.com>
Date: Sat, 26 Nov 2022 13:01:29 -0800
Subject: [PATCH] Adding indicator display option to PageMenuButton.

---
 frontend/src/Components/Menu/FilterMenu.js    |  6 ++---
 .../src/Components/Menu/PageMenuButton.js     | 24 ++++++++++++++++---
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Components/Menu/FilterMenu.js b/frontend/src/Components/Menu/FilterMenu.js
index f1be6a7cd..3e3a50669 100644
--- a/frontend/src/Components/Menu/FilterMenu.js
+++ b/frontend/src/Components/Menu/FilterMenu.js
@@ -4,7 +4,7 @@ import { icons } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import FilterMenuContent from './FilterMenuContent';
 import Menu from './Menu';
-import ToolbarMenuButton from './ToolbarMenuButton';
+import PageMenuButton from './PageMenuButton';
 import styles from './FilterMenu.css';
 
 class FilterMenu extends Component {
@@ -60,7 +60,7 @@ class FilterMenu extends Component {
             iconName={icons.FILTER}
             text={translate('Filter')}
             isDisabled={isDisabled}
-            indicator={selectedFilterKey !== 'all'}
+            showIndicator={selectedFilterKey !== 'all'}
           />
 
           <FilterMenuContent
@@ -106,7 +106,7 @@ FilterMenu.propTypes = {
 FilterMenu.defaultProps = {
   className: styles.filterMenu,
   isDisabled: false,
-  buttonComponent: ToolbarMenuButton
+  buttonComponent: PageMenuButton
 };
 
 export default FilterMenu;
diff --git a/frontend/src/Components/Menu/PageMenuButton.js b/frontend/src/Components/Menu/PageMenuButton.js
index 76c5591b8..d5defe689 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>
@@ -32,11 +50,11 @@ function PageMenuButton(props) {
 PageMenuButton.propTypes = {
   iconName: PropTypes.object.isRequired,
   text: PropTypes.string,
-  indicator: PropTypes.bool.isRequired
+  showIndicator: PropTypes.bool.isRequired
 };
 
 PageMenuButton.defaultProps = {
-  indicator: false
+  showIndicator: false
 };
 
 export default PageMenuButton;