Update badge style to match figma

swisstopo · Jul 25, 2024 · 259d7c8 · 259d7c8
1 parent 6888e40
commit 259d7c8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
@@ -43,7 +43,7 @@ export const theme = createTheme({
       lightgrey: "#f1f3f5",
       darkgrey: "#787878",
       dark: "rgba(0, 0, 0, 0.5)",
-      menuItemActive: "#D92B04",
+      menuItemActive: "#A65462",
       filterItemActive: "#1C2834",
     },
 
@@ -135,5 +135,13 @@ export const theme = createTheme({
         },
       },
     },
+    MuiBadge: {
+      styleOverrides: {
+        badge: {
+          backgroundColor: "#FF0000",
+          color: "#FFFFFF",
+        },
+      },
+    },
   },
 });
diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -99,7 +99,7 @@ const MainSideNav = ({
           padding: "1em",
           flex: "1 1 100%",
         }}>
-        {activeFilterCount > 0 && <Badge color="error" sx={{ margin: "1px" }} badgeContent={activeFilterCount}></Badge>}
+        {activeFilterCount > 0 && <Badge sx={{ margin: "1px" }} badgeContent={activeFilterCount}></Badge>}
         <NavButton
           data-cy="show-filter-button"
           icon={<FilterIcon />}

diff --git a/src/client/src/commons/search/editor/filterComponent.jsx b/src/client/src/commons/search/editor/filterComponent.jsx
@@ -226,7 +226,7 @@ class FilterComponent extends React.Component {
               {t("polygon_selection")}
             </Typography>
             {filterPolygon !== null && (
-              <Badge data-cy="polygon-filter-badge" color="error" badgeContent={1} sx={{ marginLeft: "18px" }}></Badge>
+              <Badge data-cy="polygon-filter-badge" badgeContent={1} sx={{ marginLeft: "18px" }}></Badge>
             )}
           </Button>
           {this.state?.searchList?.map((filter, idx) => {
@@ -248,7 +248,7 @@ class FilterComponent extends React.Component {
                   }}>
                   <Typography variant="h6">
                     {t(filter?.translationId)}{" "}
-                    <Badge color="error" badgeContent={activeFilterLength} sx={{ marginLeft: "12px" }}></Badge>
+                    <Badge badgeContent={activeFilterLength} sx={{ marginLeft: "12px" }}></Badge>
                   </Typography>
                 </AccordionSummary>
                 {filter?.name === "workgroup" && filter?.isSelected && (