make profile page editable

code/frontend/src/App.css

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  min-height: 100vh;
 }
 
 .App-logo {
@@ -7,6 +8,10 @@
   pointer-events: none;
 }
 
+footer {
+  vertical-align: baseline;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

code/frontend/src/components/ChagneAvatarDialog.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import Typography from "@mui/material/Typography";
+import Avatar from "@mui/material/Avatar";
+
+const BootstrapDialog = styled(Dialog)(({ theme }) => ({
+  "& .MuiDialogContent-root": {
+    padding: theme.spacing(2),
+  },
+  "& .MuiDialogActions-root": {
+    padding: theme.spacing(1),
+  },
+}));
+
+export default function CustomizedDialogs() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <Button onClick={handleClickOpen}>
+        <Avatar
+          alt="Username"
+          src="./assets/images/OwlSignUp.png"
+          className="profile-avatar"
+        >
+          U
+        </Avatar>
+      </Button>
+      <BootstrapDialog
+        onClose={handleClose}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+      >
+        <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
+          Modal title
+        </DialogTitle>
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={(theme) => ({
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: theme.palette.grey[500],
+          })}
+        >
+          <CloseIcon />
+        </IconButton>
+        <DialogContent dividers>
+          <Typography gutterBottom>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
+            ac consectetur ac, vestibulum at eros.
+          </Typography>
+          <Typography gutterBottom>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
+            auctor.
+          </Typography>
+          <Typography gutterBottom>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
+            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
+            dui. Donec ullamcorper nulla non metus auctor fringilla.
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose}>
+            Save changes
+          </Button>
+        </DialogActions>
+      </BootstrapDialog>
+    </React.Fragment>
+  );
+}

code/frontend/src/components/QuiltedImageList.tsx

@@ -8,6 +8,7 @@ import {
   ThemeProvider,
 } from "@mui/material/styles";
 import "./quiltedImageList.css";
+import { Box, Grid } from "@mui/material";
 
 export default function StandardImageList() {
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -16,23 +17,28 @@ export default function StandardImageList() {
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
-        <div className="image-list">
+        <Box className="box">
+          <Grid container spacing={1} className="image-list">
             {itemData.map((item) => (
               <ImageListItem key={item.img}>
                 <img
+                  className="list-item"
                   srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
                   src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
                   alt={item.title}
+                  onClick={() => console.log(item.title)} /* change to onClick => Feed*/
                   loading="lazy"
                 />
               </ImageListItem>
             ))}
-        </div>
+          </Grid>
+        </Box>
       </ThemeProvider>
     </StyledEngineProvider>
   );
 }
 
+
 const theme = createTheme({
   breakpoints: {
     values: {

code/frontend/src/components/footer.css

@@ -1,4 +1,3 @@
-
 /*mobile style first*/
 .footer {
   display: flex;
@@ -10,7 +9,6 @@
   gap: 2rem;
   text-align: center;
   text-decoration: none;
-
 }
 
 .footer-left {
@@ -59,11 +57,13 @@
   font-weight: 500;
 }
 
-.footer-link:hover, .footer-link:active {
+.footer-link:hover,
+.footer-link:active {
   text-decoration: underline;
 }
-.footer-link.feather:hover, .footer-link.feather:active {
+.footer-link.feather:hover,
-  text-decoration-color: var(--Rotkehlchen-orange-default) ;
+.footer-link.feather:active {
+  text-decoration-color: var(--Rotkehlchen-orange-default);
 }
 
 /*@media adjusts styles for desktop */

code/frontend/src/components/quiltedImageList.css

@@ -1,17 +1,38 @@
-.imageList {    
+.image-list {
-    height: 100vh;
+  height: fit-content;
   width: fit-content;
+  justify-content: center;
+}
+
+.box {
+  flex-grow: 1;
+  height: fit-content;
   margin-left: 1rem;
   margin-right: 1rem;
+}
+.css-1row2ej-MuiImageListItem-root .MuiImageListItem-img {
+  object-fit: cover;
+  width: fill-available;
+  height: fill-available;
+}
+
+@media only screen and (min-width: 768px) {
+
+  .box {
+    max-width: 75%;
+    margin-left: 45ch;
+    margin-right: 10ch;
   }
 
-  @media only screen and (min-width: 768px) {
   .image-list {
-      height:  90vh;
     position: relative;
-      width: fit-content;
+    width: fill-available;
-      margin-left: 1rem;
+    margin-bottom: 1rem;
-      margin-right: 10ch;
+  }
-      flex-direction: column;
+
+  .css-1row2ej-MuiImageListItem-root .MuiImageListItem-img {
+    object-fit: cover;
+    width: 15rem;
+    height: 15rem;
   }
 }

code/frontend/src/pages/Profile.tsx

@@ -16,8 +16,9 @@ import {
   ThemeProvider,
   Divider,
   Button,
+  Tooltip,
 } from "@mui/material";
-import Bio from "../components/Bio";
+import ProfilePictureDialog from "../components/ChagneAvatarDialog";
 
 function Profile() {
   const toggleEditMode = (event: React.MouseEvent<HTMLElement>) => {
@@ -44,14 +45,12 @@ function Profile() {
         <div className="profile-display">
           <div className="user-info">
             <div className="user">
-              <Avatar
+              <ProfilePictureDialog />
-                alt="Username"
+              <Tooltip title="Username12345678" placement="top" arrow>
-                src="./assets/images/OwlSignUp.png"
+                <button className="profile-username body-l">
-                className="profile-avatar"
+                  Username12345678
-              >
+                </button>
-                U
+              </Tooltip>
-              </Avatar>
-              <span className="profile-username body-l">Username</span>
             </div>
             <div>
               <Box
@@ -65,6 +64,7 @@ function Profile() {
                 }}
                 noValidate
                 autoComplete="off"
+                onClick={editMode ? toggleEditMode : undefined}
               >
                 <TextField
                   className="bio-input"
@@ -73,12 +73,19 @@ function Profile() {
                   multiline
                   maxRows={4}
                   disabled={editMode}
-                  onClick={editMode ? toggleEditMode :  undefined}
                 />
               </Box>
-              {!editMode && <Button variant="contained" className="button" onClick={toggleEditMode}>Ok</Button>}
+              {!editMode && (
+                <Button
+                  variant="contained"
+                  className="button"
+                  onClick={toggleEditMode}
+                >
+                  Ok
+                </Button>
+              )}
             </div>
-            <Divider variant="middle" className="divider"/>
+            <Divider variant="middle" className="divider" />
             <div className="numeral-data">
               <div className="data">
                 <span aria-label="current-post-number">50</span>

code/frontend/src/pages/profile.css

@@ -1,84 +1,95 @@
 .profile-display {
-  padding-top: var(--Header-hight);
+  display: flex;
+  padding-top: calc(var(--Header-height) + 1rem);
   flex-direction: column;
 }
 
 .user-info {
   display: flex;
   flex-direction: column;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
   border-radius: 1rem;
-    background-color: hsla(244, 70%, 13%, 0.71);
+  background-color: var(--transparent-dark-blue);
   backdrop-filter: blur(8px);
-    margin-top: calc(var(--Header-height) + 1rem);
   padding-left: 1rem;
   padding-right: 1rem;
-  }
+  height: fit-content;
+}
 
 .user {
   display: flex;
   width: fit-content;
   align-items: center;
   gap: 20px;
-    margin: 2rem;
+  padding-bottom: 1rem;
+  margin-top: 1rem;
   border-radius: 1rem;
-  }
+}
 
-  .numeral-data {
+.numeral-data {
   display: flex;
   flex-direction: row;
   font-size: 18px;
-    font-weight: 500;   
+  font-weight: 600;
   color: var(--Rotkehlchen-gray);
   border-radius: 1rem;
-  }
+}
 
-  .data {
+.data {
   display: flex;
   flex-direction: column;
   margin: 1rem;
-  }
+}
 
-  .profile-avatar {
+.data-label {
+  padding-top: 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+.profile-avatar {
   width: 40px;
   height: 40px;
   background-color: aqua;
-  }
+}
 
-  .profile-username {
+.profile-username {
   font-weight: 700;
+  font-size: 1.2rem;
   color: var(--Rotkehlchen-orange-default);
-  }
+  max-width: 10rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .button {
+.button {
   margin-bottom: 0.5rem;
-  }
+}
 
-  .divider {
+.divider {
   border-color: var(--Rotkehlchen-orange-default);
-  }
+}
 
 @media screen and (min-width: 768px) {
-.profile-display {
+  .profile-display {
     flex-direction: row;
-    justify-content: space-around;
+  }
-    align-items: baseline;
-    padding-top: 1rem;
-}
 
   .user-info {
     display: flex;
     flex-direction: column;
+    position: fixed;
     margin-left: 2rem;
-    border-radius: 1rem;
+    margin-right: 1.5rem;
-    background-color: hsla(244, 70%, 13%, 0.71);
-    align-self: top;
-    padding-bottom: 1rem;
   }
 
   .user {
     width: fit-content;
     padding-left: 1rem;
     padding-right: 3rem;
+    padding-bottom: 1rem;
   }
 
   .numeral-data {

code/frontend/src/styles/colors.css

@@ -16,6 +16,7 @@
     ),
     url("../../public/assets/images/BirdsSky.jpg") lightgray 50% / cover
       no-repeat;
+    --transparent-dark-blue: hsla(244, 70%, 13%, 0.71);
 }
 
 body{