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": {
@@ -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">
-        <Box className="box">
+        <Grid container spacing={1} className="image-list">
-          <Grid container spacing={1} className="image-list">
+          {itemData.map((item) => (
-            {itemData.map((item) => (
+            <ImageListItem key={item.img}>
-              <ImageListItem key={item.img}>
+              <img
-                <img
+                srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
-                  className="list-item"
+                src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
-                  srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+                alt={item.title}
-                  src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
+                onClick={() =>
-                  alt={item.title}
+                  console.log(item.title)
-                  onClick={() => console.log(item.title)} /* change to onClick => Feed*/
+                } /* change to onClick => Feed*/
-                  loading="lazy"
+                loading="lazy"
-                />
+              />
-              </ImageListItem>
+            </ImageListItem>
-            ))}
+          ))}
-          </Grid>
+        </Grid>
-        </Box>
+      </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

@@ -1,14 +1,12 @@
 .dialog-content {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
 }
 
 .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,138 +4,120 @@ 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="profile-display">
+        <div className="user-info">
-          <div className="user-info">
+          <div className="user">
-            <div className="user">
+            <ChangeAvatarDialog />
-              <ProfilePictureDialog />
+            <Popover
-              <Popover
+              className="profile-popover"
-                className="profile-popover"
+              onClose={closePopover}
-                onClose={handleClose}
+              id={id}
-                id={id}
+              open={isPopoverOpen}
-                open={open}
+              anchorEl={anchorEl}
-                anchorEl={anchorEl}
+              anchorOrigin={{
-                anchorOrigin={{
+                vertical: "top",
-                  vertical: "top",
+                horizontal: "left",
-                  horizontal: "left",
+              }}
-                }}
+              transformOrigin={{
-                transformOrigin={{
+                vertical: "bottom",
-                  vertical: "bottom",
+                horizontal: "left",
-                  horizontal: "left",
+              }}
-                }}
+            >
+              <Typography sx={{ p: 1 }}>{username}</Typography>
+            </Popover>
+            <span className="profile-username body-l" onClick={openPopover}>
+              {username}
+            </span>
+          </div>
+          <div
+          >
+            <Box
+              component="form"
+              sx={{
+                "& .MuiTextField-root": {
+                  m: 1,
+                  width: "30ch",
+                  maxWidth: "100%",
+                },
+              }}
+              noValidate
+              autoComplete="off"
+              onClick={editMode ? toggleEditMode : undefined}
+            >
+              <TextField
+                className="bio-input"
+                id="outlined-multiline-flexible"
+                label="✎ Bio"
+                defaultValue="This is a sample bio. Click to edit."
+                multiline
+                maxRows={4}
+                disabled={editMode}
+              />
+            </Box>
+            {!editMode && (
+              <Button
+                variant="contained"
+                className="button"
+                onClick={toggleEditMode}
               >
-                <Typography sx={{p: 1}}>{username}</Typography>
+                Ok
-              </Popover>
+              </Button>
-              <span className="profile-username body-l" onClick={handleClick}>
+            )}
-                {username}
+          </div>
-              </span>
+          <Divider variant="middle" className="divider" />
+          <div className="numeral-data">
+            <div className="data">
+              <span aria-label="current-post-number">50</span>
+              <span className="data-label title-h1">Posts</span>
             </div>
-            <div>
+            <div className="data">
-              <Box
+              <span aria-label="current-follower-number">100</span>
-                component="form"
+              <span className="data-label title-h1">Followers</span>
-                sx={{
-                  "& .MuiTextField-root": {
-                    m: 1,
-                    width: "30ch",
-                    maxWidth: "100%",
-                  },
-                }}
-                noValidate
-                autoComplete="off"
-                onClick={editMode ? toggleEditMode : undefined}
-              >
-                <TextField
-                  className="bio-input"
-                  id="outlined-multiline-flexible"
-                  label="✎ Bio"
-                  multiline
-                  maxRows={4}
-                  disabled={editMode}
-                />
-              </Box>
-              {!editMode && (
-                <Button
-                  variant="contained"
-                  className="button"
-                  onClick={toggleEditMode}
-                >
-                  Ok
-                </Button>
-              )}
             </div>
-            <Divider variant="middle" className="divider" />
+            <div className="data">
-            <div className="numeral-data">
+              <span aria-label="current-following-number">50</span>
-              <div className="data">
+              <span className="data-label title-h1">Following</span>
-                <span aria-label="current-post-number">50</span>
-                <span className="data-label title-h1">Posts</span>
-              </div>
-              <div className="data">
-                <span aria-label="current-follower-number">100</span>
-                <span className="data-label title-h1">Followers</span>
-              </div>
-              <div className="data">
-                <span aria-label="current-following-number">50</span>
-                <span className="data-label title-h1">Following</span>
-              </div>
             </div>
           </div>
-          <QuiltedImageList />
         </div>
-      </ThemeProvider>
+        <QuiltedImageList />
+      </div>
     </StyledEngineProvider>
   );
 }