-Fix Tab color

Client/src/Pages/Status/CreateStatus/index.jsx

@@ -135,15 +135,14 @@ import { buildErrors } from "../../../Validation/error";
 		};		
 
 		return (
-			<Stack
+			<Box
 				className="status"
 				px={theme.spacing(20)}
 				py={theme.spacing(12)}
-				gap={theme.spacing(12)}
+				backgroundColor={theme.palette.primary.main}
 				border={1}
 				borderColor={theme.palette.primary.lowContrast}
 				borderRadius={theme.shape.borderRadius}
-				backgroundColor={theme.palette.primary.main}
 			>
 				<TabContext value={tabList[tabIdx]}>
 					<Box
@@ -164,30 +163,43 @@ import { buildErrors } from "../../../Validation/error";
 									value={label}
 									sx={{
 										fontSize: 13,
-										color: theme.palette.primary.contrastTextSecondary,
+										color: theme.palette.tertiary.contrastText,
+										backgroundColor: theme.palette.tertiary.main,
 										textTransform: "none",
 										minWidth: "fit-content",
-										minHeight: 0,
-										paddingLeft: 0,
-										paddingY: theme.spacing(4),
+										paddingY: theme.spacing(6),
 										fontWeight: 400,
-										marginRight: theme.spacing(8),
-										"&:focus": {
-											outline: "none",
+										borderBottom: "2px solid transparent",
+										borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
+										"&:first-child": { borderTopLeftRadius: "8px" },
+										"&:last-child": { borderTopRightRadius: "8px", borderRight: 0 },
+										"&:focus-visible": {
+											color: theme.palette.primary.contrastText,
+											borderColor: theme.palette.tertiary.contrastText,
+											borderRightColor: theme.palette.primary.lowContrast,
 										},
+										"&.Mui-selected": {
+											backgroundColor: theme.palette.secondary.main,
+											color: theme.palette.secondary.contrastText,
+											borderColor: theme.palette.secondary.contrastText,
+											borderRightColor: theme.palette.primary.lowContrast,
+										},
+										"&:hover": {
+											borderColor: theme.palette.primary.lowContrast,
+										}
 									}}
 								/>
 							))}
 						</TabList>
-					</Box> 
+					</Box>
 					<StatusFormProvider
 						form={form}
 						setForm={setForm}
 						errors={errors}
 						setErrors={setErrors}
-						handleBlur ={handleBlur}
-						handleChange = {handleChange}
-						handelCheckboxChange = {handelCheckboxChange}
+						handleBlur={handleBlur}
+						handleChange={handleChange}
+						handelCheckboxChange={handelCheckboxChange}
 					>
 						{tabIdx == 0 ? <GeneralSettingsPanel /> : <ContentPanel />}
 					</StatusFormProvider>
@@ -204,7 +216,7 @@ import { buildErrors } from "../../../Validation/error";
 						Save
 					</Button>
 				</Stack>
-			</Stack>
+			</Box>
 		);
 	};