Merge pull request #2749 from bluewave-labs/fix/gap-select-components

Fix/gap select components

client/src/Components/Inputs/Search/index.jsx

@@ -4,7 +4,6 @@ import {
 	ListItem,
 	Autocomplete,
 	TextField,
-	Stack,
 	Typography,
 	Checkbox,
 } from "@mui/material";
@@ -33,7 +32,6 @@ const SearchAdornment = () => {
 	const theme = useTheme();
 	return (
 		<Box
-			mr={theme.spacing(4)}
 			height={16}
 			sx={{
 				"& svg": {
@@ -284,7 +282,9 @@ const Search = ({
 			}}
 			sx={{
 				/* 	height: 34,*/
-				"&.MuiAutocomplete-root .MuiAutocomplete-input": { p: 0 },
+				"&.MuiAutocomplete-root .MuiAutocomplete-input": {
+					padding: `0 ${theme.spacing(5)}`,
+				},
 				...sx,
 			}}
 		/>

client/src/Components/Inputs/Select/index.jsx

@@ -112,7 +112,7 @@ const Select = ({
 						fill: theme.palette.primary.contrastTextTertiary,
 					},
 					"& .MuiSelect-select": {
-						padding: "0 13px",
+						padding: "0",
 						minHeight: "34px",
 						display: "flex",
 						alignItems: "center",

client/src/Pages/Settings/SettingsTimeZone.jsx

@@ -58,7 +58,7 @@ const SettingsTimeZone = ({ HEADING_SX, handleChange, timezone }) => {
 					inputValue={rawInput}
 					handleInputChange={(val) => setRawInput(val)}
 					handleChange={handleTimezoneChange}
-					isAdorned={false}
+					isAdorned={true}
 					unit="timezone"
 				/>
 			</Stack>

client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx

@@ -130,7 +130,7 @@ const TabSettings = ({
 							inputValue={rawInput}
 							handleInputChange={(newVal) => setRawInput(newVal)}
 							handleChange={handleTimezoneChange}
-							isAdorned={false}
+							isAdorned={true}
 							unit="timezone"
 						/>
 					</Stack>

client/src/Utils/Theme/globalTheme.js

@@ -353,7 +353,7 @@ const baseTheme = (palette) => ({
 					},
 
 					"& .MuiInputBase-input.MuiOutlinedInput-input": {
-						padding: "0 var(--env-var-spacing-1-minus) !important",
+						padding: `0 ${theme.spacing(5)}`,
 					},
 
 					"& .MuiOutlinedInput-root": {
@@ -408,6 +408,7 @@ const baseTheme = (palette) => ({
 					"& .MuiOutlinedInput-root": {
 						paddingTop: 0,
 						paddingBottom: 0,
+						paddingRight: theme.spacing(5),
 					},
 					"& fieldset": {
 						borderColor: theme.palette.primary.lowContrast,
@@ -569,7 +570,7 @@ const baseTheme = (palette) => ({
 					"&:hover .MuiOutlinedInput-notchedOutline": {
 						borderColor: theme.palette.primary.lowContrast,
 					},
-					padding: "0 13px",
+					padding: `0 ${theme.spacing(5)}`,
 					minHeight: "34px",
 					display: "flex",
 					alignItems: "center",