CustomizedTextField

src/components/CustomizedTextField.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import InputBase, { InputBaseProps } from "@mui/material/InputBase";
+import { FormControl, InputLabel, Theme, styled } from "@mui/material";
+import useId from "@mui/material/utils/useId";
+
+const StyledInput = styled(InputBase)(({ theme }: { theme: Theme }) => ({
+  "label + &": {
+    marginTop: theme.spacing(3)
+  },
+  "& .MuiInputBase-input": {
+    borderRadius: 2,
+    position: "relative",
+    border: "1px solid",
+    borderColor: theme.palette.secondary.main,
+    fontSize: "13px",
+    padding: "10px 12px",
+    "&:focus": {
+      borderColor: theme.palette.primary.main
+    },
+    "&.Mui-disabled": {
+      backgroundColor: theme.palette.secondary[100],
+      borderColor: theme.palette.secondary[100],
+      color: theme.palette.secondary[500],
+      "-webkit-text-fill-color": "unset"
+    }
+  }
+}));
+
+interface ICustomizedTextFieldProps extends InputBaseProps {
+  label: string;
+}
+
+export const CustomizedTextField = (props: ICustomizedTextFieldProps) => {
+  const id = useId();
+  const { label, fullWidth, ..._props } = props;
+  return (
+    <FormControl variant="standard" fullWidth={fullWidth}>
+      <InputLabel
+        shrink
+        htmlFor={id}
+        sx={{
+          fontSize: "13px",
+          fontWeight: 500,
+          color: "#333",
+          transform: "none"
+        }}
+      >
+        {label}
+      </InputLabel>
+      <StyledInput id={id} {..._props} />
+    </FormControl>
+  );
+};

src/components/index.tsx

@@ -5,3 +5,4 @@ export * from "./BlockContainerEditMode";
 export * from "./Popup";
 export * from "./icons";
 export * from "./Dialog";
+export * from "./CustomizedTextField";

src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import TextField from "@mui/material/TextField";
 import useTheme from "@mui/material/styles/useTheme";
+import { CustomizedTextField } from "../../../components";
 import { StyledButtonPrimary } from "../../../styles";
 import { useAppDispatch, useAppSelector } from "../../../hooks";
 import {
@@ -70,39 +70,37 @@ export const EnvironmentDetailsHeader = ({
         <>
           {namespace && (
             <>
-              <TextField
+              <CustomizedTextField
                 label="Namespace"
                 value={namespace}
                 disabled
                 size="small"
               />
               <div
+                aria-hidden
                 style={{
                   borderRight: `2px solid ${palette.secondary.main}`,
                   transform: "skew(-15deg)",
-                  margin: "0 1rem",
-                  height: "1.6rem"
+                  margin: "0 1.2rem 0.25rem",
+                  height: "1.8rem",
+                  alignSelf: "flex-end"
                 }}
               />
             </>
           )}
-          <TextField
+          <CustomizedTextField
             autoFocus
             label="Environment name"
-            sx={{
-              backgroundColor: palette.grey[100],
-              minWidth: "450px",
-              "&:hover fieldset": {
-                borderColor: palette.secondary.main
-              }
-            }}
+            size="small"
+            onChange={(e: ChangeEvent) =>
+              onUpdateName((e.target as HTMLInputElement).value)
+            }
             inputProps={{
-              style: {
-                color: palette.common.black
+              sx: {
+                width: "35ch",
+                minWidth: "auto"
               }
             }}
-            size="small"
-            onChange={e => onUpdateName(e.target.value)}
           />
           {/* <StyledButtonPrimary>Archive</StyledButtonPrimary> */}
         </>

src/features/metadata/components/Description.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import Box from "@mui/material/Box";
-import TextField from "@mui/material/TextField";
 import useTheme from "@mui/material/styles/useTheme";
 import { StyledMetadataItem } from "../../../styles/StyledMetadataItem";
 import { EnvironmentDetailsModes } from "../../../features/environmentDetails";
+import { CustomizedTextField } from "../../../components";
 
 interface IDescriptionProps {
   /**
@@ -22,39 +22,29 @@ export const Description = ({
   const { palette } = useTheme();
 
   return (
-    <Box>
+    <Box width="100%">
       {mode === EnvironmentDetailsModes.READ && description && (
         <StyledMetadataItem>{description}</StyledMetadataItem>
       )}
 
       {mode !== EnvironmentDetailsModes.READ && (
-        <>
-          <StyledMetadataItem
-            sx={{
-              fontWeight: 500
-            }}
-          >
-            Description:
-          </StyledMetadataItem>
-          <Box>
-            <TextField
-              multiline
-              value={description}
-              placeholder="Enter here the description of your environment"
-              sx={{
-                backgroundColor: palette.grey[100],
-                width: "100%",
-                marginBottom: "10px"
-              }}
-              inputProps={{
-                style: {
-                  fontSize: "13px"
-                }
-              }}
-              onChange={e => onChangeDescription(e.target.value)}
-            />
-          </Box>
-        </>
+        <CustomizedTextField
+          multiline
+          label="Description"
+          value={description}
+          placeholder="Enter here the description of your environment"
+          fullWidth
+          sx={{
+            backgroundColor: palette.grey[100],
+            marginBottom: "10px"
+          }}
+          inputProps={{
+            style: {
+              fontSize: "13px"
+            }
+          }}
+          onChange={e => onChangeDescription(e.target.value)}
+        />
       )}
     </Box>
   );