install file picker and fix UI bugs

code/frontend/package.json

@@ -21,6 +21,7 @@
     "react-router-dom": "^7.6.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
+    "use-file-picker": "^2.1.4",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

code/frontend/src/components/ChangeAvatarDialog.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { useRef, useState } from "react";
 import {
   Button,
   styled,
@@ -10,12 +9,15 @@ import {
   IconButton,
   Avatar,
   Box,
+  Divider,
 } 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";
+import ButtonPrimary from "./ButtonPrimary";
+import { useFilePicker } from "use-file-picker";
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiDialogContent-root": {
@@ -27,25 +29,20 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
 }));
 
 export default function CustomizedDialogs() {
+  const { openFilePicker, filesContent, loading } = useFilePicker({
+    accept: ".png, .jpg, .jpeg",
+    multiple: false,
+    readAs: "DataURL",
+    limitFilesConfig: { max: 1 },
+  });
 
-  const inputFile = useRef<HTMLInputElement | null>(null);
+  const setImageURL = ({ newImage = false }: { newImage: boolean }) => {
-  
+    if (newImage) {
-  const openFileExplorer = () => {
+      return filesContent[0].content;
-    // `current` points to the mounted file input element
-    if (inputFile.current) {
-      inputFile.current.click();
     }
-  };
+    // TODO: If no image is selected, return the image already in the database or undefined
-  
-  const [selectedImage, setSelectedImage] = useState<File | null>(null);
-
-  const setImageURL = (selectedImage: File | null) => {
-    if (selectedImage !== null) {
-      return URL.createObjectURL(selectedImage);
-    }
-    //TODO: If no image is selected, return the image already in the database or undefined
     return undefined;
-  }
+  };
 
   const [open, setOpen] = React.useState(false);
 
@@ -53,19 +50,25 @@ export default function CustomizedDialogs() {
     setOpen(true);
   };
   const handleClose = () => {
-    setSelectedImage(null); // Reset the selected image when closing
+    setImageURL({ newImage: false }); // Reset the selected image when closing
     setOpen(false);
   };
   const handleSaveChanges = () => {
     setOpen(false);
-  }
+  };
 
   return (
     <React.Fragment>
       <Button onClick={handleClickOpen}>
         <Avatar
           alt="Username"
-          src={setImageURL(selectedImage)}
+          // current code does not work yet
+          // TODO: If no image is selected, return the image already in the database or undefined
+          src={
+            filesContent.length > 0
+              ? setImageURL({ newImage: true })
+              : undefined
+          }
           className="profile-avatar"
         >
           U
@@ -76,7 +79,11 @@ export default function CustomizedDialogs() {
         aria-labelledby="change-profile-picture-dialog"
         open={open}
       >
-        <DialogTitle sx={{ m: 0, p: 2 }} id="change-profile-picture-dialog">
+        <DialogTitle
+          className="small-title orange-text"
+          sx={{ m: 1.5, p: 2 }}
+          id="change-profile-picture-dialog"
+        >
           Change Profile Picture
         </DialogTitle>
         <IconButton
@@ -91,7 +98,8 @@ export default function CustomizedDialogs() {
         >
           <CloseIcon />
         </IconButton>
-        <DialogContent dividers>
+        <Divider variant="middle" className="divider" />
+        <DialogContent>
           <Box
             sx={{
               display: "flex",
@@ -103,32 +111,32 @@ export default function CustomizedDialogs() {
               maxHeight: "30rem",
             }}
           >
-            {selectedImage && (
+            {filesContent.map((file) => (
               <img
-                src={URL.createObjectURL(selectedImage)}
+                alt={file.name}
-                alt="Profile Picture"
+                src={file.content}
-                style={{maxWidth: "30rem", maxHeight: "30rem" , width: "100%", height: "100%", objectFit: "cover"}}
+                style={{
-              />
+                  maxWidth: "30rem",
-            )}
+                  maxHeight: "30rem",
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                }}
+              ></img>
+            ))}
           </Box>
-          <IconButton aria-label="upload picture" onClick={openFileExplorer}>
+          <div className="change-avatar-button">
-            <EditSquareIcon />
+            <IconButton
-            <input
+              aria-label="upload picture"
-              type="file"
+              onClick={() => openFilePicker()}
-              id="file"
+            >
-              onChange={(event) => {
+              <EditSquareIcon className="edit-icon" />
-                console.log(event.target.files ? [0] : undefined); // Log the selected file
+            </IconButton>
-                if (event.target.files && event.target.files[0]) {
+          </div>
-                  setSelectedImage(event.target.files[0]); // Update the state with the selected file
-                }
-              }}
-            />
-          </IconButton>
         </DialogContent>
+        <Divider variant="middle" className="divider" />
         <DialogActions>
-          <Button autoFocus onClick={handleSaveChanges}>
+          <ButtonPrimary value="Save Changes" onClick={handleSaveChanges} />
-            Save changes
-          </Button>
         </DialogActions>
       </BootstrapDialog>
     </React.Fragment>

code/frontend/src/components/changeAvatarDialog.css

@@ -4,9 +4,43 @@
 }
 
 .profile-image-large {
-  width: 20rem;
+  max-width: 30rem;
-  height: 20rem;
+  max-height: 30rem;
-  object-fit: cover;
+  width: 100%;
-  border-radius: 8px;
+  height: 100%;
+  object-fit: "cover";
 }
 
+.css-10d30g3-MuiPaper-root-MuiDialog-paper {
+  background-color: var(--transparent-dark-blue);
+  backdrop-filter: blur(15px);
+  border-radius: 1rem;
+}
+
+.css-10d30g3-MuiPaper-root-MuiDialog-paper {
+  color: var(--Rotkehlchen-orange-default);
+}
+
+.profile-avatar {
+  width: 40px;
+  height: 40px;
+  background-color: aqua;
+}
+
+.css-53g0n7-MuiButtonBase-root-MuiIconButton-root {
+  color: var(--Rotkehlchen-orange-default);
+}
+
+.change-avatar-button {
+  display: flex;
+  justify-content: end;
+  align-items: end;
+}
+
+@media screen and (min-width: 768px) {
+  .profile-avatar {
+    width: 5rem;
+    height: 5rem;
+    background-color: var(--Rotkehlchen-yellow-default);
+  }
+}

code/frontend/src/pages/profile.css

@@ -31,6 +31,7 @@
 .numeral-data {
   display: flex;
   flex-direction: row;
+  justify-content: space-around;
   font-size: 18px;
   font-weight: 600;
   color: var(--Rotkehlchen-gray);
@@ -49,12 +50,6 @@
   font-weight: 500;
 }
 
-.profile-avatar {
-  width: 40px;
-  height: 40px;
-  background-color: aqua;
-}
-
 .profile-username {
   font-weight: 700;
   font-size: 1.2rem;
@@ -99,7 +94,7 @@
   .numeral-data {
     display: flex;
     flex-direction: column;
-    margin-top: 2rem;
+    margin-top: 1rem;
     font-weight: 700;
     font-size: 2rem;
   }
@@ -115,10 +110,4 @@
     flex-direction: column;
     margin: 1rem;
   }
-
-  .profile-avatar {
-    width: 5rem;
-    height: 5rem;
-    background-color: aqua;
-  }
 }

code/frontend/src/styles/colors.css

@@ -26,3 +26,14 @@ body{
   z-index: -1;
   background-attachment: fixed;
 }
+
+.blue-background {
+  border-radius: 1rem;
+  background-color: var(--transparent-dark-blue);
+  backdrop-filter: blur(8px);
+  height: fit-content;
+}
+
+.edit-icon {
+  color: var(--Rotkehlchen-brown-light)
+}

code/frontend/yarn.lock

@@ -4830,6 +4830,13 @@ file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+file-selector@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-2.1.2.tgz#fe7c7ee9e550952dfbc863d73b14dc740d7de8b4"
+  integrity sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==
+  dependencies:
+    tslib "^2.7.0"
+
 filelist@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz"
@@ -9385,7 +9392,7 @@ tslib@^1.8.1:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3:
+tslib@^2.0.3, tslib@^2.7.0:
   version "2.8.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -9601,6 +9608,13 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-file-picker@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/use-file-picker/-/use-file-picker-2.1.4.tgz#2c005b005b627af30d2cfd1aeb3c01e952d390d1"
+  integrity sha512-b4lZiAWrXi/QNUjTv0Q+S0hVcSFXIC9c4EUcrnYtdPtgK3T6xfi01YLVamhoY0k9WM9Cg4KyxD1TtM1e8dzQAQ==
+  dependencies:
+    file-selector "^2.1.2"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"