New: Indicator when Filter is applied

frontend/src/Components/Menu/ToolbarMenuButton.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
+import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import MenuButton from 'Components/Menu/MenuButton';
 import styles from './ToolbarMenuButton.css';
@@ -7,6 +9,7 @@ import styles from './ToolbarMenuButton.css';
 function ToolbarMenuButton(props) {
   const {
     iconName,
+    indicator,
     text,
     ...otherProps
   } = props;
@@ -22,6 +25,22 @@ function ToolbarMenuButton(props) {
           size={21}
         />
 
+        {
+          indicator &&
+            <span
+              className={classNames(
+                styles.indicatorContainer,
+                'fa-layers fa-fw'
+              )}
+            >
+              <Icon
+                className={styles.indicatorBackground}
+                name={icons.CIRCLE}
+                size={10}
+              />
+            </span>
+        }
+
         <div className={styles.labelContainer}>
           <div className={styles.label}>
             {text}
@@ -34,7 +53,12 @@ function ToolbarMenuButton(props) {
 
 ToolbarMenuButton.propTypes = {
   iconName: PropTypes.object.isRequired,
-  text: PropTypes.string
+  text: PropTypes.string,
+  indicator: PropTypes.bool.isRequired
+};
+
+ToolbarMenuButton.defaultProps = {
+  indicator: false
 };
 
 export default ToolbarMenuButton;