refactor: change all selects instead of relying on sx

Client/src/Components/TabPanels/Account/TeamPanel.jsx

@@ -280,12 +280,6 @@ const TeamPanel = () => {
 						{ _id: "admin", name: "Admin" },
 						{ _id: "user", name: "User" },
 					]}
-					sx={{
-						color: theme.palette.primary.contrastTextTertiary,
-						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-							borderColor: theme.palette.primary.contrastTextTertiary,
-						},
-					}}
 				/>
 				<Stack
 					direction="row"

Client/src/Utils/Theme/globalTheme.js

@@ -290,6 +290,16 @@ const baseTheme = (palette) => ({
 				}),
 			},
 		},
+		MuiOutlinedInput: {
+			styleOverrides: {
+				root: {
+					color: palette.primary.contrastTextTertiary,
+					"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+						borderColor: palette.primary.contrastTextTertiary,
+					},
+				},
+			},
+		},
 	},
 	shape: {
 		borderRadius: 2,