add file

code/frontend/src/components/Bio.tsx

@@ -1,8 +1,20 @@
+import { Button } from "@mui/material";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
 import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
+import { useState } from "react";
+import "./bio.css";
+import "../styles/colors.css";
+import IconButton from "@mui/material/IconButton";
+import EditSquareIcon from "@mui/icons-material/EditSquare";
+import ButtonPrimary from "./ButtonPrimary";
 
 export default function MultilineTextFields() {
+  const toggleEditMode = () => {
+    isEditable(!editMode);
+  };
+  const [editMode, isEditable] = useState(false);
+
   return (
     <StyledEngineProvider injectFirst>
       <Box
@@ -15,11 +27,20 @@ export default function MultilineTextFields() {
           <TextField
             className="bio-input"
             id="outlined-multiline-flexible"
-            label="Multiline"
+            label="Bio"
             multiline
             maxRows={4}
+            disabled={!editMode}
           />
+          <IconButton aria-label="edit-bio">
+            <EditSquareIcon
+              className="edit-icon"
+              onClick={toggleEditMode}
+              style={{ display: editMode ? "none" : "block" }}
+            />
+          </IconButton>
         </div>
+        {editMode && <ButtonPrimary value={"Ok"} onClick={toggleEditMode} />}
       </Box>
     </StyledEngineProvider>
   );

code/frontend/src/components/bio.css

@@ -2,6 +2,10 @@
     margin: 0.5rem;
 }
 
+.css-53g0n7-MuiButtonBase-root-MuiIconButton-root {
+  justify-content: end;
+}
+
 /* Root class for the input field */
 .bio-input .MuiOutlinedInput-root {
   color: var(--Rotkehlchen-gray);
@@ -28,10 +32,10 @@
   border-color: transparent;
 }
 
-@media screen and (min-width: 768px) {
+@media only screen and (min-width: 768px) {
   .bio-input {
     width: 100%;
-    margin: 1rem;
+    margin-bottom: 1rem;
   }
   .bio-input .MuiInputLabel-outlined {
     font-size: 18px;