From b2f6850b8127379e13898574b9bc2624ced80662 Mon Sep 17 00:00:00 2001
From: Aryaman Kumar Sharma <kumararyaman26@gmail.com>
Date: Fri, 11 Apr 2025 00:25:53 +0530
Subject: [PATCH] Feat: Filters UI

---
 src/Components/FilterHeader/index.jsx | 2 +-
 src/Utils/Theme/globalTheme.js        | 2 ++
 src/locales/gb.json                   | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Components/FilterHeader/index.jsx b/src/Components/FilterHeader/index.jsx
index 4bb27646f..284170a8c 100644
--- a/src/Components/FilterHeader/index.jsx
+++ b/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(", ");
diff --git a/src/Utils/Theme/globalTheme.js b/src/Utils/Theme/globalTheme.js
index 306ed3466..a6e747555 100644
--- a/src/Utils/Theme/globalTheme.js
+++ b/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
diff --git a/src/locales/gb.json b/src/locales/gb.json
index 5dfe9b4ca..21299f2e8 100644
--- a/src/locales/gb.json
+++ b/src/locales/gb.json
@@ -186,6 +186,8 @@
   },
   "testLocale": "testLocale",
   "add": "Add",
+  "state": "State",
+  "reset": "Reset",
   "monitors": "monitors",
   "distributedUptimeStatusCreateStatusPage": "status page",
   "distributedUptimeStatusCreateStatusPageAccess": "Access",