change button functions

code/frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import "./App.css";
 import "./styles/colors.css";
 import "./styles/fonts.css";
+import "./styles/sizes.css";
 import LoginAndSignUpPage from "./pages/LoginAndSignUpPage";
 import Footer from "./components/Footer";
 import Header from "./components/header";

code/frontend/src/components/Bio.tsx

@@ -1,4 +1,3 @@
-import { Button } from "@mui/material";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
 import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
@@ -9,11 +8,20 @@ import IconButton from "@mui/material/IconButton";
 import EditSquareIcon from "@mui/icons-material/EditSquare";
 import ButtonPrimary from "./ButtonRotkehlchen";
 
-export default function MultilineTextFields() {
+export default function BioTextField({ ownAccount }: { ownAccount: boolean }) {
+  const [bio, setBio] = useState<string>("");
+  const [oldBio, setOldbio] = useState<string>("");
+  const [editMode, setEditable] = useState(false);
+
   const toggleEditMode = () => {
-    isEditable(!editMode);
+    !editMode && setOldbio(bio);
+    ownAccount && setEditable(!editMode);
+  };
+
+  const cancleBio = () => {
+    setBio(oldBio);
+    setEditable(false);
   };
-  const [editMode, isEditable] = useState(false);
 
   return (
     <StyledEngineProvider injectFirst>
@@ -31,16 +39,35 @@ export default function MultilineTextFields() {
             multiline
             maxRows={4}
             disabled={!editMode}
+            value={bio}
+            onChange={(e) => setBio(e.target.value)}
           />
-          <IconButton aria-label="edit-bio">
+          {ownAccount && (
-            <EditSquareIcon
+            <IconButton aria-label="edit-bio">
-              className="edit-icon"
+              <EditSquareIcon
-              onClick={toggleEditMode}
+                className="edit-icon"
-              style={{ display: editMode ? "none" : "block" }}
+                onClick={toggleEditMode}
-            />
+                style={{ display: editMode ? "none" : "block" }}
-          </IconButton>
+              />
+            </IconButton>
+          )}
         </div>
-        {editMode && <ButtonPrimary style="primary" label={"Ok"} onClick={toggleEditMode} />}
+        {ownAccount && editMode && (
+          <div>
+            <ButtonPrimary
+              style="primary"
+              label={"Save"}
+              type="submit"
+              onClick={toggleEditMode}
+            />
+            <ButtonPrimary
+              style="secondary"
+              label={"Cancel"}
+              type="reset"
+              onClick={cancleBio}
+            />
+          </div>
+        )}
       </Box>
     </StyledEngineProvider>
   );

code/frontend/src/components/ButtonRotkehlchen.tsx

@@ -3,15 +3,16 @@ import "./buttonRotkehlchen.css";
 interface ButtonPrimaryProps {
   style: "primary" | "secondary";
   label: string;
+  type: "button" | "submit" | "reset";
   onClick?: () => void;
 }
 
-export default function ButtonPrimary({ style, label, onClick }: ButtonPrimaryProps) {
+export default function ButtonPrimary({ style, label, type, onClick }: ButtonPrimaryProps) {
   return (
     <>
       {style === "primary" && (
         <button
-          type="submit"
+          type={type}
           className="button-primary body-m"
           onClick={onClick}
         >

code/frontend/src/components/ChangeAvatarDialog.tsx

@@ -28,7 +28,13 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   },
 }));
 
-export default function CustomizedDialogs() {
+export default function AvatarDialog({
+  ownAccount,
+  username,
+}: {
+  ownAccount: boolean;
+  username: string;
+}) {
   const { openFilePicker, filesContent, loading } = useFilePicker({
     accept: ".png, .jpg, .jpeg",
     multiple: false,
@@ -83,8 +89,10 @@ export default function CustomizedDialogs() {
           className="small-title orange-text"
           sx={{ m: 1.5, p: 2 }}
           id="change-profile-picture-dialog"
-        >
+        > { ownAccount ?
-          Change Profile Picture
+          "Change Profile Picture" :
+          username
+        }
         </DialogTitle>
         <IconButton
           aria-label="close"
@@ -125,20 +133,36 @@ export default function CustomizedDialogs() {
               ></img>
             ))}
           </Box>
-          <div className="change-avatar-button">
+          {ownAccount && (
-            <IconButton
+            <div className="change-avatar-button">
-              aria-label="upload picture"
+              <IconButton
-              onClick={() => openFilePicker()}
+                aria-label="upload picture"
-            >
+                onClick={() => openFilePicker()}
-              <EditSquareIcon className="edit-icon" />
+              >
-            </IconButton>
+                <EditSquareIcon className="edit-icon" />
-          </div>
+              </IconButton>
+            </div>
+          )}
         </DialogContent>
-        <Divider variant="middle" className="divider" />
+        {ownAccount && (
-        <DialogActions>
+          <div>
-          <ButtonRotkehlchen style="primary" label="Save Changes" onClick={handleSaveChanges} />
+            <Divider variant="middle" className="divider" />
-          <ButtonRotkehlchen style="secondary" label="Cancel" onClick={handleClose} />
+            <DialogActions>
-        </DialogActions>
+              <ButtonRotkehlchen
+                style="primary"
+                label="Save Changes"
+                type="submit"
+                onClick={handleSaveChanges}
+              />
+              <ButtonRotkehlchen
+                style="secondary"
+                label="Cancel"
+                type="reset"
+                onClick={handleClose}
+              />
+            </DialogActions>
+          </div>
+        )}
       </BootstrapDialog>
     </React.Fragment>
   );

code/frontend/src/components/quiltedImageList.css

@@ -13,6 +13,7 @@
   width: 5rem;
   height: 5rem;
   margin: -0.1rem;
+  cursor: pointer;
 }
 
 @media only screen and (min-width: 768px) {

code/frontend/src/pages/LoginAndSignUpPage.tsx

@@ -135,7 +135,7 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
               </div>
             )}
           </div>
-          <ButtonRotkehlchen style="primary" label={signup ? "Sign Up" : "Login"} />
+          <ButtonRotkehlchen style="primary" label={signup ? "Sign Up" : "Login"} type="submit"/>
           <div className="login-signup body-m" onClick={toggleLogin}>
             {signup
               ? "Already have an account? "

code/frontend/src/pages/Profile.tsx

@@ -30,13 +30,14 @@ function Profile() {
   const id = isPopoverOpen ? "simple-popover" : undefined;
 
   const username = "Username12345678"; /* Get username from database */
+  const ownAccount = false;
 
   return (
     <StyledEngineProvider injectFirst>
       <div className="profile-display">
         <div className="user-info">
           <div className="user">
-            <ChangeAvatarDialog />
+            <ChangeAvatarDialog ownAccount={ownAccount} username={username} />
             <Popover
               className="profile-popover"
               onClose={closePopover}
@@ -58,7 +59,7 @@ function Profile() {
               {username}
             </span>
           </div>
-          <Bio/>
+          <Bio ownAccount={ownAccount}/>
           <Divider variant="middle" className="divider" />
           {/* TODO: Change data to data from Database */}
           <div className="numeral-data">