Merge pull request #3843 from ProjectMirador/mui5-badge-color

Use Badge color instead of custom styling
ProjectMirador · Dec 5, 2023 · 8ff56d6 · 8ff56d6
2 parents 95d12e4 + 1e57133
commit 8ff56d6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/__tests__/utils/test-utils.js b/__tests__/utils/test-utils.js
@@ -5,9 +5,10 @@ import { createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import createRootReducer from '../../src/state/reducers/rootReducer';
+import settings from '../../src/config/settings';
 
 const rootReducer = createRootReducer();
-const theme = createTheme();
+const theme = createTheme(settings.theme);
 
 /**
  * Hook up our rendered object to redux

diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
@@ -150,7 +150,7 @@ export class WindowSideBarButtons extends Component {
             onKeyUp={this.handleKeyUp}
             t={t}
             icon={(
-              <Badge overlap="rectangular" sx={{ '.MuiBadge-badge': { backgroundColor: 'notification.main' } }} invisible={!hasAnnotations} variant="dot">
+              <Badge overlap="rectangular" color="notification" invisible={!hasAnnotations} variant="dot">
                 <AnnotationIcon />
               </Badge>
             )}
@@ -162,7 +162,7 @@ export class WindowSideBarButtons extends Component {
             onKeyUp={this.handleKeyUp}
             t={t}
             icon={(
-              <Badge overlap="rectangular" sx={{ '.MuiBadge-badge': { backgroundColor: 'notification.main' } }} invisible={!hasSearchResults} variant="dot">
+              <Badge overlap="rectangular" color="notification" invisible={!hasSearchResults} variant="dot">
                 <SearchIcon />
               </Badge>
             )}
@@ -174,7 +174,7 @@ export class WindowSideBarButtons extends Component {
             onKeyUp={this.handleKeyUp}
             t={t}
             icon={(
-              <Badge overlap="rectangular" sx={{ '.MuiBadge-badge': { backgroundColor: 'notification.main' } }} invisible={!hasCurrentLayers} variant="dot">
+              <Badge overlap="rectangular" color="notification" invisible={!hasCurrentLayers} variant="dot">
                 <LayersIcon />
               </Badge>
             )}