Feat: Filters UI

src/Components/FilterHeader/index.jsx

@@ -42,7 +42,7 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
 						return header;
 					}
 
-					return selected
+					return header + " | " + selected
 						.map((value) => options.find((option) => option.value === value)?.label)
 						.filter(Boolean)
 						.join(", ");

src/Utils/Theme/globalTheme.js

@@ -477,6 +477,7 @@ const baseTheme = (palette) => ({
 				root: ({ theme }) => ({
 					"& .MuiOutlinedInput-input": {
 						color: theme.palette.primary.contrastText,
+						paddingLeft: theme.spacing(14),
 					},
 					"& .MuiOutlinedInput-notchedOutline": {
 						borderColor: theme.palette.primary.lowContrast,
@@ -484,6 +485,7 @@ const baseTheme = (palette) => ({
 					},
 					"& .MuiSelect-icon": {
 						color: theme.palette.primary.contrastTextSecondary, // Dropdown + color
+						left: theme.spacing(4),
 					},
 					"&:hover": {
 						backgroundColor: theme.palette.primary.main, // Background on hover

src/locales/gb.json

@@ -186,6 +186,8 @@
   },
   "testLocale": "testLocale",
   "add": "Add",
+  "state": "State",
+  "reset": "Reset",
   "monitors": "monitors",
   "distributedUptimeStatusCreateStatusPage": "status page",
   "distributedUptimeStatusCreateStatusPageAccess": "Access",