diff --git a/frontend/src/Components/Menu/FilterMenu.js b/frontend/src/Components/Menu/FilterMenu.js
index d989605e5a..d71375a16f 100644
--- a/frontend/src/Components/Menu/FilterMenu.js
+++ b/frontend/src/Components/Menu/FilterMenu.js
@@ -59,6 +59,7 @@ class FilterMenu extends Component {
iconName={icons.FILTER}
text="Filter"
isDisabled={isDisabled}
+ indicator={selectedFilterKey !== 'all'}
/>
+ {
+ indicator &&
+
+
+
+ }
+
{text}
@@ -30,7 +49,12 @@ function PageMenuButton(props) {
PageMenuButton.propTypes = {
iconName: PropTypes.object.isRequired,
- text: PropTypes.string
+ text: PropTypes.string,
+ indicator: PropTypes.bool.isRequired
+};
+
+PageMenuButton.defaultProps = {
+ indicator: false
};
export default PageMenuButton;
diff --git a/frontend/src/Components/Menu/ToolbarMenuButton.css b/frontend/src/Components/Menu/ToolbarMenuButton.css
index 71e966c71c..fc46888545 100644
--- a/frontend/src/Components/Menu/ToolbarMenuButton.css
+++ b/frontend/src/Components/Menu/ToolbarMenuButton.css
@@ -7,6 +7,16 @@
text-align: center;
}
+.indicatorBackground {
+ color: $themeRed;
+}
+
+.indicatorContainer {
+ position: absolute;
+ top: 10px;
+ right: 12px;
+}
+
.labelContainer {
composes: labelContainer from '~Components/Page/Toolbar/PageToolbarButton.css';
}
diff --git a/frontend/src/Components/Menu/ToolbarMenuButton.js b/frontend/src/Components/Menu/ToolbarMenuButton.js
index fe06793f6f..01d15082d0 100644
--- a/frontend/src/Components/Menu/ToolbarMenuButton.js
+++ b/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 &&
+
+
+
+ }
+
{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;