Replace html elements with MUI in editableField.jsx

client/src/components/manageProjects/editableField.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import { Box, Button, TextareaAutosize, TextField, Typography } from '@mui/material';
 import '../../sass/ManageProjects.scss';
 
 const EditableField = ({
@@ -44,36 +45,41 @@ const EditableField = ({
 
   return (
     // this button will be disabled if user !admin
-    <div className="editable-field-div">
-      <div className="project-edit-title">
-        {fieldTitle}
+    <Box className="editable-field-div">
+      <Box className="project-edit-title">
+        <Typography
+          sx={{ font:"inherit"}}
+        >
+          {fieldTitle}
+        </Typography>
         {notRestricted &&
-          <button
+          <Button
             type="button"
             className="project-edit-button"
+            sx={{ maxWidth:'0', font: 'inherit', padding: 0 }}
             onClick={() => {
               setEditable(true);
             }}
           >
             [edit]
-          </button>
+          </Button>
         }
-      </div>
+      </Box>
 
       {editable ? (
         <>
           {fieldType === 'textarea' ? (
             /* eslint-disable react/jsx-props-no-spreading */
-            <textarea {...inputProps} />
+            <TextareaAutosize {...inputProps} />
           ) : (
-            <input {...inputProps} />
+            <TextField {...inputProps} />
             /* eslint-enable react/jsx-props-no-spreading */
           )}
         </>
       ) : (
-        <div className="section-content">{fieldData}</div>
+        <Box className="section-content">{fieldData}</Box>
       )}
-    </div>
+    </Box>
   );
 };