mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor css and tsx files

Browse source
This commit is contained in:
luisa.bellitto 2025-06-26 09:18:22 +02:00
parent 59d21e07b0
commit 98ef4d441e
10 changed files with 205 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

193
code/frontend/src/components/ChangeAvatarDialog.tsx
View file

@ -18,6 +18,8 @@ import "../styles/fonts.css";
import "./changeAvatarDialog.css";
import ButtonRotkehlchen from "./ButtonRotkehlchen";
import { useFilePicker } from "use-file-picker";
import Username from "./Username";
import "./username.css"
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
"& .MuiDialogContent-root": {
@ -65,105 +67,106 @@ export default function AvatarDialog({
return (
<React.Fragment>
<Button onClick={handleClickOpen}>
<Avatar
alt="Username"
// 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
</Avatar>
</Button>
<BootstrapDialog
onClose={handleClose}
aria-labelledby="change-profile-picture-dialog"
open={open}
>
<DialogTitle
className="small-title orange-text"
sx={{ m: 1.5, p: 2 }}
id="change-profile-picture-dialog"
> { ownAccount ?
"Change Profile Picture" :
username
}
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
<Divider variant="middle" className="divider" />
<DialogContent>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
objectFit: "cover",
maxWidth: "30rem",
maxHeight: "30rem",
}}
<div className="user">
<Button onClick={handleClickOpen}>
<Avatar
className="profile-avatar"
alt="Username"
// 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
}
>
{filesContent.map((file) => (
<img
alt={file.name}
src={file.content}
style={{
maxWidth: "30rem",
maxHeight: "30rem",
width: "100%",
height: "100%",
objectFit: "cover",
}}
></img>
))}
</Box>
U
</Avatar>
</Button>
<Username username={username} />
<BootstrapDialog
onClose={handleClose}
aria-labelledby="change-profile-picture-dialog"
open={open}
>
<DialogTitle
className="small-title orange-text"
sx={{ m: 1.5, p: 2 }}
id="change-profile-picture-dialog"
>
{ownAccount ? "Change Profile Picture" : username}
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
<Divider variant="middle" className="divider" />
<DialogContent>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
objectFit: "cover",
maxWidth: "30rem",
maxHeight: "30rem",
}}
>
{filesContent.map((file) => (
<img
alt={file.name}
src={file.content}
style={{
maxWidth: "30rem",
maxHeight: "30rem",
width: "100%",
height: "100%",
objectFit: "cover",
}}
></img>
))}
</Box>
{ownAccount && (
<div className="change-avatar-button">
<IconButton
aria-label="upload picture"
onClick={() => openFilePicker()}
>
<EditSquareIcon className="edit-icon" />
</IconButton>
</div>
)}
</DialogContent>
{ownAccount && (
<div className="change-avatar-button">
<IconButton
aria-label="upload picture"
onClick={() => openFilePicker()}
>
<EditSquareIcon className="edit-icon" />
</IconButton>
<div>
<Divider variant="middle" className="divider" />
<DialogActions>
<ButtonRotkehlchen
style="primary"
label="Save Changes"
type="submit"
onClick={handleSaveChanges}
/>
<ButtonRotkehlchen
style="secondary"
label="Cancel"
type="reset"
onClick={handleClose}
/>
</DialogActions>
</div>
)}
</DialogContent>
{ownAccount && (
<div>
<Divider variant="middle" className="divider" />
<DialogActions>
<ButtonRotkehlchen
style="primary"
label="Save Changes"
type="submit"
onClick={handleSaveChanges}
/>
<ButtonRotkehlchen
style="secondary"
label="Cancel"
type="reset"
onClick={handleClose}
/>
</DialogActions>
</div>
)}
</BootstrapDialog>
</BootstrapDialog>
</div>
</React.Fragment>
);
}

46
code/frontend/src/components/Username.tsx Normal file
View file

@ -0,0 +1,46 @@
import { Popover, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import "./username.css";
export default function Username({ username }: { username: string }) {
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const openPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const closePopover = () => {
setAnchorEl(null);
};
const isPopoverOpen = Boolean(anchorEl);
const id = isPopoverOpen ? "simple-popover" : undefined;
useEffect(() => {
console.log("Username component mounted");
}, []);
return (
<>
<Popover
className="profile-popover"
onClose={closePopover}
id={id}
open={isPopoverOpen}
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "left",
}}
transformOrigin={{
vertical: "bottom",
horizontal: "left",
}}
>
<Typography sx={{ p: 1 }}>{username}</Typography>
</Popover>
<span className="profile-username body-bold" onClick={openPopover}>
{username}
</span>
</>
);
}

27
code/frontend/src/components/changeAvatarDialog.css
View file

@ -15,20 +15,13 @@
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);
background-color: var(--Rotkehlchen-yellow-default);
}
.change-avatar-button {
@ -37,10 +30,28 @@
align-items: end;
}
.user {
display: inline-flex;
width: fit-content;
align-items: center;
justify-content: center;
gap: 20px;
padding-bottom: 1rem;
margin-top: 1rem;
border-radius: 1rem;
}
@media screen and (min-width: 768px) {
.profile-avatar {
width: 5rem;
height: 5rem;
background-color: var(--Rotkehlchen-yellow-default);
}
.user {
width: fit-content;
padding-left: 1rem;
padding-right: 3rem;
padding-bottom: 1rem;
}
}

10
code/frontend/src/components/quiltedImageList.css
View file

@ -1,17 +1,13 @@
.image-list {
height: fit-content;
width: fill-available;
justify-content: center;
margin-bottom: 1rem;
}
.box {
flex-grow: 1;
height: fit-content;
}
.css-1row2ej-MuiImageListItem-root .MuiImageListItem-img {
object-fit: cover;
width: 5rem;
height: 5rem;
width: 7rem;
height: 7rem;
margin: -0.1rem;
cursor: pointer;
}

10
code/frontend/src/components/username.css Normal file
View file

@ -0,0 +1,10 @@
.profile-username {
color: var(--Rotkehlchen-orange-default);
max-width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.profile-popover {
padding: 1rem;
}

17
code/frontend/src/pages/LoginAndSignUpPage.tsx
View file

@ -4,6 +4,7 @@ import api from "../api/axios";
import ButtonRotkehlchen from "../components/ButtonRotkehlchen";
import { useLocation, useNavigate } from "react-router-dom";
import { useAuth } from "../api/Auth";
import { createTheme, useMediaQuery } from "@mui/material";
type FormData = {
username: string;
@ -83,9 +84,23 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
[name]: value,
}));
};
const theme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 768,
md: 960,
lg: 1280,
xl: 1920,
},
},
});
const matchDownMd = useMediaQuery(theme.breakpoints.down('sm'));
return (
<div className="background">
<div className="login-login">
<div className={matchDownMd ? "login-login" : "login-login blue-background"}>
<div className="login-part">
<div className={signup ? "signup-image" : "login-image"}></div>
</div>

44
code/frontend/src/pages/Profile.tsx
View file

@ -3,66 +3,28 @@ import "../components/bio.css";
import "./loginAndSignUpPage.css";
import "../styles/sizes.css";
import "../styles/fonts.css";
import { useState } from "react";
import QuiltedImageList from "../components/QuiltedImageList";
import {
StyledEngineProvider,
Divider,
Popover,
Typography,
} from "@mui/material";
import ChangeAvatarDialog from "../components/ChangeAvatarDialog";
import Bio from "../components/Bio";
import RotkehlchenButton from "../components/ButtonRotkehlchen";
function Profile() {
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const openPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const closePopover = () => {
setAnchorEl(null);
};
const isPopoverOpen = Boolean(anchorEl);
const id = isPopoverOpen ? "simple-popover" : undefined;
const username = "Username12345678"; /* Get username from database */
const ownAccount = false;
const ownAccount = true;
return (
<StyledEngineProvider injectFirst>
<div className="profile-display">
<div className="user-info">
<div className="user">
<div className="user-info blue-background">
<ChangeAvatarDialog ownAccount={ownAccount} username={username} />
<Popover
className="profile-popover"
onClose={closePopover}
id={id}
open={isPopoverOpen}
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "left",
}}
transformOrigin={{
vertical: "bottom",
horizontal: "left",
}}
>
<Typography sx={{ p: 1 }}>{username}</Typography>
</Popover>
<span className="profile-username body-l" onClick={openPopover}>
{username}
</span>
</div>
<Bio ownAccount={ownAccount} />
<Divider variant="middle" className="divider" />
{/* TODO: Change data to data from Database */}
<div className="numeral-data">
<div className="numeral-data body-bold">
<div className="data">
<span aria-label="current-post-number">50</span>
<span className="data-label title-h1">Posts</span>

3
code/frontend/src/pages/loginAndSignUpPage.css
View file

@ -36,7 +36,6 @@
width: 100%;
height: 44px;
align-items: center;
justify-content: flex-start;
}
.login-div-input:hover {
@ -95,7 +94,6 @@
display: flex;
flex-direction: row;
border-radius: 4px;
background: rgba(13, 10, 56, 0.71);
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
align-items: center;
justify-content: start;
@ -103,7 +101,6 @@
height: 60vh;
min-height: 400px;
min-width: 500px;
backdrop-filter: blur(8px);
}
.login-image {

63
code/frontend/src/pages/profile.css
View file

@ -1,42 +1,21 @@
.profile-display {
display: flex;
padding-top: calc(var(--Header-height) + 1rem);
flex-direction: column;
}
.user-info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
margin-left: 1rem;
margin-right: 1rem;
border-radius: 1rem;
background-color: var(--transparent-dark-blue);
backdrop-filter: blur(8px);
padding-left: 1rem;
padding-right: 1rem;
height: fit-content;
}
.user {
display: flex;
width: fit-content;
align-items: center;
gap: 20px;
padding-bottom: 1rem;
margin-top: 1rem;
border-radius: 1rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.numeral-data {
justify-content: space-around;
color: var(--Rotkehlchen-gray);
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 18px;
font-weight: 600;
color: var(--Rotkehlchen-gray);
border-radius: 1rem;
}
.data {
@ -51,19 +30,6 @@
font-weight: 500;
}
.profile-username {
font-weight: 700;
font-size: 1.2rem;
color: var(--Rotkehlchen-orange-default);
max-width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-popover {
padding: 1rem;
}
.button {
margin-bottom: 0.5rem;
}
@ -73,42 +39,21 @@
}
@media screen and (min-width: 768px) {
.profile-display {
flex-direction: row;
}
.user-info {
display: flex;
flex-direction: column;
position: fixed;
margin-left: 2rem;
margin-right: 1.5rem;
}
.user {
width: fit-content;
padding-left: 1rem;
padding-right: 3rem;
padding-bottom: 1rem;
}
.numeral-data {
display: flex;
flex-direction: column;
margin-top: 1rem;
font-weight: 700;
font-size: 2rem;
}
.data-label {
padding-top: 0.5rem;
font-size: 1.5rem;
font-weight: 500;
}
.data {
display: flex;
flex-direction: column;
margin: 1rem;
}
}

6
code/frontend/src/styles/fonts.css
View file

@ -63,6 +63,12 @@ h1 {
font-weight: 400;
}
.body-bold {
font-family: "Inter";
font-size: 1.2rem;
font-weight: 600;
}
p {
font-family: "Inter";
}