make profile page editable

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;
   }
 }