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 (
@@ -21,7 +18,6 @@ export default function MultilineTextFields() {
             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": {
@@ -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 { StyledEngineProvider } from "@mui/material/styles";
-import {
-  createTheme,
-  StyledEngineProvider,
-  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"));
-  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*/
+                onClick={() =>
+                  console.log(item.title)
+                } /* change to onClick => Feed*/
                 loading="lazy"
               />
             </ImageListItem>
           ))}
         </Grid>
       </Box>
-      </ThemeProvider>
     </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

@@ -4,11 +4,9 @@
 }
 
 .profile-image-large {
-  width: 5rem;
+  width: 20rem;
-  height: 5rem;
+  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;
+  width: 5rem;
-  height: fill-available;
+  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 {

code/frontend/src/pages/Profile.tsx

@@ -4,70 +4,51 @@ import "./loginAndSignUpPage.css";
 import "../styles/sizes.css";
 import "../styles/colors.css";
 import "../styles/fonts.css";
-import { useRef, useState } from "react";
+import { useState } from "react";
-import Avatar from "@mui/material/Avatar";
 import QuiltedImageList from "../components/QuiltedImageList";
-import TextField from "@mui/material/TextField";
-import useMediaQuery from "@mui/material/useMediaQuery";
 import {
   Box,
   StyledEngineProvider,
-  createTheme,
-  ThemeProvider,
   Divider,
   Button,
-  Tooltip,
   Popover,
   Typography,
+  TextField
 } from "@mui/material";
-import ProfilePictureDialog from "../components/ChagneAvatarDialog";
+import ChangeAvatarDialog from "../components/ChagneAvatarDialog";
 
 function Profile() {
-  const toggleEditMode = (event: React.MouseEvent<HTMLElement>) => {
+  const toggleEditMode = () => {
     isEditable(!editMode);
   };
   const [editMode, isEditable] = useState(true);
 
-  const theme = createTheme({
-    breakpoints: {
-      values: {
-        xs: 0,
-        sm: 768,
-        md: 650,
-        lg: 768,
-        xl: 1200,
-      },
-    },
-  });
-  const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
-
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+  const openPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleClose = () => {
+  const closePopover = () => {
     setAnchorEl(null);
   };
 
-  const open = Boolean(anchorEl);
+  const isPopoverOpen = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
+  const id = isPopoverOpen ? "simple-popover" : undefined;
 
   const username = "Username12345678"; /* Get username from database */
 
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
       <div className="profile-display">
         <div className="user-info">
           <div className="user">
-              <ProfilePictureDialog />
+            <ChangeAvatarDialog />
             <Popover
               className="profile-popover"
-                onClose={handleClose}
+              onClose={closePopover}
               id={id}
-                open={open}
+              open={isPopoverOpen}
               anchorEl={anchorEl}
               anchorOrigin={{
                 vertical: "top",
@@ -78,13 +59,14 @@ function Profile() {
                 horizontal: "left",
               }}
             >
-                <Typography sx={{p: 1}}>{username}</Typography>
+              <Typography sx={{ p: 1 }}>{username}</Typography>
             </Popover>
-              <span className="profile-username body-l" onClick={handleClick}>
+            <span className="profile-username body-l" onClick={openPopover}>
               {username}
             </span>
           </div>
-            <div>
+          <div
+          >
             <Box
               component="form"
               sx={{
@@ -102,6 +84,7 @@ function Profile() {
                 className="bio-input"
                 id="outlined-multiline-flexible"
                 label="✎ Bio"
+                defaultValue="This is a sample bio. Click to edit."
                 multiline
                 maxRows={4}
                 disabled={editMode}
@@ -135,7 +118,6 @@ function Profile() {
         </div>
         <QuiltedImageList />
       </div>
-      </ThemeProvider>
     </StyledEngineProvider>
   );
 }