fix bugs and now final version of UI

code/frontend/src/components/Bio.tsx

@@ -1,9 +1,6 @@
-import * as React from "react";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
 import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
-import { useFormControl } from '@mui/material/FormControl';
-
 
 export default function MultilineTextFields() {
   return (
@@ -16,12 +13,11 @@ export default function MultilineTextFields() {
       >
         <div>
           <TextField
-          className="bio-input"
+            className="bio-input"
             id="outlined-multiline-flexible"
             label="Multiline"
             multiline
             maxRows={4}
-            onChange={(event) => {}}
           />
         </div>
       </Box>

code/frontend/src/components/ChagneAvatarDialog.tsx

@@ -1,16 +1,21 @@
 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";
-import EditSquareIcon from "@mui/icons-material/EditSquare";
 import { useRef, useState } from "react";
+import {
+  Button,
+  styled,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton,
+  Avatar,
+  Box,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import EditSquareIcon from "@mui/icons-material/EditSquare";
+import "../styles/colors.css";
+import "../styles/fonts.css";
+import "./changeAvatarDialog.css";
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiDialogContent-root": {
@@ -39,7 +44,7 @@ export default function CustomizedDialogs() {
       inputFile.current.click();
     }
   };
-  
+
   const [selectedImage, setSelectedImage] = useState<File | null>(null);
 
   return (
@@ -47,7 +52,7 @@ export default function CustomizedDialogs() {
       <Button onClick={handleClickOpen}>
         <Avatar
           alt="Username"
-          src="./assets/images/OwlSignUp.png"
+          src={selectedImage ? URL.createObjectURL(selectedImage) : undefined}
           className="profile-avatar"
         >
           U
@@ -55,10 +60,10 @@ export default function CustomizedDialogs() {
       </Button>
       <BootstrapDialog
         onClose={handleClose}
-        aria-labelledby="customized-dialog-title"
+        aria-labelledby="change-profile-picture-dialog"
         open={open}
       >
-        <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
+        <DialogTitle sx={{ m: 0, p: 2 }} id="change-profile-picture-dialog">
           Change Profile Picture
         </DialogTitle>
         <IconButton
@@ -74,16 +79,32 @@ export default function CustomizedDialogs() {
           <CloseIcon />
         </IconButton>
         <DialogContent dividers>
-          {selectedImage && <img className="profile-image-large" src={URL.createObjectURL(selectedImage)} alt="Profile Picture" />}
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              objectFit: "cover",
+              maxWidth: "30rem",
+              maxHeight: "30rem",
+            }}
+          >
+            {selectedImage && (
+              <img
+                src={URL.createObjectURL(selectedImage)}
+                alt="Profile Picture"
+                style={{maxWidth: "30rem", maxHeight: "30rem" , width: "100%", height: "100%", objectFit: "cover"}}
+              />
+            )}
+          </Box>
           <IconButton aria-label="upload picture" onClick={openFileExplorer}>
             <EditSquareIcon />
             <input
               type="file"
               id="file"
-              ref={inputFile}
-              style={{ display: "none" }}
               onChange={(event) => {
-                console.log(event.target.files?[0]:undefined); // Log the selected file
+                console.log(event.target.files ? [0] : undefined); // Log the selected file
                 if (event.target.files && event.target.files[0]) {
                   setSelectedImage(event.target.files[0]); // Update the state with the selected file
                 }

code/frontend/src/components/QuiltedImageList.tsx

@@ -1,56 +1,32 @@
-import * as React from "react";
-import ImageList from "@mui/material/ImageList";
 import ImageListItem from "@mui/material/ImageListItem";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import {
-  createTheme,
-  StyledEngineProvider,
-  ThemeProvider,
-} from "@mui/material/styles";
+import { StyledEngineProvider } from "@mui/material/styles";
 import "./quiltedImageList.css";
 import { Box, Grid } from "@mui/material";
 
 export default function StandardImageList() {
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
-  const isLargeScreen = useMediaQuery(theme.breakpoints.down("xl"));
-
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <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>
+      <Box className="box">
+        <Grid container spacing={1} 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}
+                onClick={() =>
+                  console.log(item.title)
+                } /* change to onClick => Feed*/
+                loading="lazy"
+              />
+            </ImageListItem>
+          ))}
+        </Grid>
+      </Box>
     </StyledEngineProvider>
   );
 }
 
-
-const theme = createTheme({
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 1000,
-      md: 650,
-      lg: 768,
-      xl: 1200,
-    },
-  },
-});
-
 const itemData = [
   { img: "/assets/images/BirdLogin.jpg", title: "Bird" },
   { img: "../../assets/images/BirdsSky.jpg", title: "Bird Sky" },

code/frontend/src/components/changeAvatarDialog.css

@@ -1,14 +1,12 @@
 .dialog-content {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .profile-image-large {
-  width: 5rem;
-  height: 5rem;
+  width: 20rem;
+  height: 20rem;
+  object-fit: cover;
+  border-radius: 8px;
 }
 
-#file {
-    max-width: 50rem;
-    max-height: 50rem;
-}

code/frontend/src/components/quiltedImageList.css

@@ -1,23 +1,21 @@
 .image-list {
   height: fit-content;
-  width: fit-content;
+  width: fill-available;
   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;
+  width: 5rem;
+  height: 5rem;
+  margin: -0.1rem;
 }
 
 @media only screen and (min-width: 768px) {
-
   .box {
     max-width: 75%;
     margin-left: 45ch;
@@ -28,6 +26,8 @@
     position: relative;
     width: fill-available;
     margin-bottom: 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
   }
 
   .css-1row2ej-MuiImageListItem-root .MuiImageListItem-img {