design page general and office information & head panel

app/component/EditField.js

@@ -2,11 +2,13 @@ import EditGrayA from "@/components/icons/EditGrayA"
 import EditOrangeA from "@/components/icons/EditOrangeA"
 import { Button, TextField } from "@mui/material"
 
-function EditField({ changeData, icon, placeholder, data, name, iconGray, isTransparent }) {
+function EditField({ changeData, multiline, icon, placeholder, data, name, iconGray, isTransparent }) {
     return (
         <div className="relative w-full">
             <TextField
                 value={data?.value}
+                rows={multiline}
+                multiline={multiline}
                 disabled={!data?.isEdit}
                 placeholder={placeholder || ''}
                 type='text'
@@ -19,9 +21,12 @@ function EditField({ changeData, icon, placeholder, data, name, iconGray, isTran
                         top: '-4px !important'
                     },
                     '& .MuiInputBase-input': { padding: '12.5px 14px' },
-                    '& .MuiInputBase-root': { borderRadius: '6px !important' },
                     '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
-                    ".Mui-focused": {
+                    '& .MuiInputBase-root': {
+                        padding: '0 !important',
+                        borderRadius: '8px !important'
+                    },
+                    '.Mui-focused': {
                         '& .MuiOutlinedInput-notchedOutline': {
                             border: '1px solid #5559CE !important',
                             transition: '0.5s all'
@@ -30,7 +35,8 @@ function EditField({ changeData, icon, placeholder, data, name, iconGray, isTran
                 }}
             />
             <Button
-                className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
+                className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
+                    ${multiline ? '!top-[24px]' : '!top-1/2'}`}
                 onClick={() => {
                     changeData(!data.isEdit, 'isEdit', name)
                 }}