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;

code/frontend/src/pages/Profile.tsx

@@ -15,12 +15,9 @@ import {
   TextField
 } from "@mui/material";
 import ChangeAvatarDialog from "../components/ChangeAvatarDialog";
+import Bio from "../components/Bio";
 
 function Profile() {
-  const toggleEditMode = () => {
-    isEditable(!editMode);
-  };
-  const [editMode, isEditable] = useState(true);
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
@@ -64,42 +61,9 @@ function Profile() {
               {username}
             </span>
           </div>
-          <div
+          <Bio/>
-          >
-            <Box
-              component="form"
-              sx={{
-                "& .MuiTextField-root": {
-                  m: 1,
-                  width: "30ch",
-                  maxWidth: "100%",
-                },
-              }}
-              noValidate
-              autoComplete="off"
-              onClick={editMode ? toggleEditMode : undefined}
-            >
-              <TextField
-                className="bio-input"
-                id="outlined-multiline-flexible"
-                label="✎ Bio"
-                defaultValue="This is a sample bio. Click to edit."
-                multiline
-                maxRows={4}
-                disabled={editMode}
-              />
-            </Box>
-            {!editMode && (
-              <Button
-                variant="contained"
-                className="button"
-                onClick={toggleEditMode}
-              >
-                Ok
-              </Button>
-            )}
-          </div>
           <Divider variant="middle" className="divider" />
+          {/* TODO: Change data to data from Database */}
           <div className="numeral-data">
             <div className="data">
               <span aria-label="current-post-number">50</span>