refactor css and tsx files

code/frontend/src/pages/LoginAndSignUpPage.tsx

@@ -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>

code/frontend/src/pages/Profile.tsx

@@ -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>

code/frontend/src/pages/loginAndSignUpPage.css

@@ -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 {

code/frontend/src/pages/profile.css

@@ -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;
-  }
 }