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">
-          {itemData.map((item) => (
-            <ImageListItem key={item.img}>
-              <img
-                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}
-                loading="lazy"
-              />
-            </ImageListItem>
-          ))}
-        </div>
+        <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>
+            ))}
+          </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 {
@@ -23,9 +21,9 @@
 .footer-link {
   display: flex;
   align-items: center;
-  gap: 0.5rem;            /*Gap between icon and logo */
-  text-decoration: none;  /*prevents constant underline*/
-  color: black;     
+  gap: 0.5rem; /*Gap between icon and logo */
+  text-decoration: none; /*prevents constant underline*/
+  color: black;
   font-weight: 500;
 }
 
@@ -42,14 +40,14 @@
 }
 
 .footer-link.feather span {
-  color: var(--Rotkehlchen-orange-default); 
+  color: var(--Rotkehlchen-orange-default);
   font-weight: bold;
 }
 
 .footer-right {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;            /*gap between the links*/
+  gap: 0.4rem; /*gap between the links*/
   align-items: flex-end;
 }
 
@@ -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 {
-  text-decoration-color: var(--Rotkehlchen-orange-default) ;
+.footer-link.feather:hover,
+.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 {    
-    height: 100vh;
-    width: fit-content;
-    margin-left: 1rem;
-    margin-right: 1rem;
+.image-list {
+  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;
-      margin-left: 1rem;
-      margin-right: 10ch;
-      flex-direction: column;
+
+  .image-list {
+    position: relative;
+    width: fill-available;
+    margin-bottom: 1rem;
+  }
+
+  .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
-                alt="Username"
-                src="./assets/images/OwlSignUp.png"
-                className="profile-avatar"
-              >
-                U
-              </Avatar>
-              <span className="profile-username body-l">Username</span>
+              <ProfilePictureDialog />
+              <Tooltip title="Username12345678" placement="top" arrow>
+                <button className="profile-username body-l">
+                  Username12345678
+                </button>
+              </Tooltip>
             </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;
-    border-radius: 1rem;
-    background-color: hsla(244, 70%, 13%, 0.71);
-    backdrop-filter: blur(8px);
-    margin-top: calc(var(--Header-height) + 1rem);
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  border-radius: 1rem;
+  background-color: var(--transparent-dark-blue);
+  backdrop-filter: blur(8px);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: fit-content;
+}
 
 .user {
-    display: flex;
-    width: fit-content;
-    align-items: center;
-    gap: 20px;
-    margin: 2rem;
-    border-radius: 1rem;
-  }
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 20px;
+  padding-bottom: 1rem;
+  margin-top: 1rem;
+  border-radius: 1rem;
+}
 
-  .numeral-data {
-    display: flex;
-    flex-direction: row;
-    font-size: 18px;
-    font-weight: 500;   
-    color: var(--Rotkehlchen-gray);
-    border-radius: 1rem;
-  }
+.numeral-data {
+  display: flex;
+  flex-direction: row;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--Rotkehlchen-gray);
+  border-radius: 1rem;
+}
 
-  .data {
-    display: flex;
-    flex-direction: column;
-    margin: 1rem;
-  }
+.data {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem;
+}
 
-  .profile-avatar {
-    width: 40px;
-    height: 40px;
-    background-color: aqua;
-  }
+.data-label {
+  padding-top: 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+}
 
-  .profile-username {
-    font-weight: 700;
-    color: var(--Rotkehlchen-orange-default);
-  }
+.profile-avatar {
+  width: 40px;
+  height: 40px;
+  background-color: aqua;
+}
 
-  .button {
-    margin-bottom: 0.5rem;
-  }
+.profile-username {
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: var(--Rotkehlchen-orange-default);
+  max-width: 10rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .divider {
-    border-color: var(--Rotkehlchen-orange-default);
-  }
+.button {
+  margin-bottom: 0.5rem;
+}
+
+.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;
-    background-color: hsla(244, 70%, 13%, 0.71);
-    align-self: top;
-    padding-bottom: 1rem;
+    margin-right: 1.5rem;
   }
 
   .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{