Bild wird resetted

code/frontend/src/components/ChangeAvatarDialog.tsx

@@ -35,7 +35,7 @@ export default function AvatarDialog({
   ownAccount: boolean;
   username: string;
 }) {
-  const { openFilePicker, filesContent, loading } = useFilePicker({
+  const { openFilePicker, filesContent, loading, clear } = useFilePicker({
     accept: ".png, .jpg, .jpeg",
     multiple: false,
     readAs: "DataURL",
@@ -56,7 +56,7 @@ export default function AvatarDialog({
     setOpen(true);
   };
   const handleClose = () => {
-    setImageURL({ newImage: false }); // Reset the selected image when closing
+    clear(); // Reset the selected image when closing
     setOpen(false);
   };
   const handleSaveChanges = () => {

code/frontend/src/pages/LoginAndSignUpPage.tsx

@@ -87,6 +87,7 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
                 value={formData.username}
                 onChange={handleChange}
                 required
+                autoFocus
               />
             </div>
             {signup ? (
@@ -135,7 +136,11 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
               </div>
             )}
           </div>
-          <ButtonRotkehlchen style="primary" label={signup ? "Sign Up" : "Login"} type="submit"/>
+          <ButtonRotkehlchen
+            style="primary"
+            label={signup ? "Sign Up" : "Login"}
+            type="submit"
+          />
           <div className="login-signup body-m" onClick={toggleLogin}>
             {signup
               ? "Already have an account? "

code/frontend/src/pages/Profile.tsx

@@ -15,7 +15,6 @@ import ChangeAvatarDialog from "../components/ChangeAvatarDialog";
 import Bio from "../components/Bio";
 
 function Profile() {
-
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
   const openPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -59,7 +58,7 @@ function Profile() {
               {username}
             </span>
           </div>
-          <Bio ownAccount={ownAccount}/>
+          <Bio ownAccount={ownAccount} />
           <Divider variant="middle" className="divider" />
           {/* TODO: Change data to data from Database */}
           <div className="numeral-data">

code/frontend/src/pages/loginAndSignUpPage.css

@@ -1,53 +1,23 @@
-:root {
-  --Rotkehlchen-gray: #e7ecf2;
-  --Rotkehlchen-brown-light: #a28d7a;
-  --Rotkehlchen-orange-default: #e79a0e;
-  --Rotkehlchen-gray-default: #e7ecf2;
-  --Rotkehlchen-brown-middle: #7f6d6d;
-  --Rotkehlchen-yellow-default: #fed640;
-  --Rotkehlchen-yellow-hover: #eac22a;
-  --Rotkehlchen-brown-dark: #4c4141;
-}
-
-.login-display {
+.background {
   display: flex;
   flex-direction: column;
   height: 100vh; /* Full viewport height */
   width: 100vw; /* Full viewport width */
-  position: absolute;
-  background: var(
-    --gradient-blue-backround-mobile,
-    linear-gradient(
-      270deg,
-      rgba(20, 15, 86, 0.27) 0%,
-      rgba(20, 15, 86, 0.58) 24%,
-      rgba(20, 15, 86, 0.74) 43%,
-      rgba(17, 13, 71, 0.82) 56%,
-      rgba(13, 10, 56, 0.9) 68%
-    ),
-    url("../public/assets/images/BirdsSky.jpg") lightgray 50% / cover no-repeat
-  );
+  background: var(--gradient-blue-backround-mobile);
   align-items: center;
   justify-content: center;
-  z-index: -1;
+  background-attachment: fixed;
 }
 
 .login-text {
   display: flex;
-  padding: 8px 40px 40px 40px;
+  padding: 40px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 18px;
-  color: var(--Rotkehlchen-gray-default);
+  color: var(--Rotkehlchen-gray);
   text-align: center;
-
-  /* Body-L */
-  font-family: Inter;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 40px; /* 166.667% */
 }
 
 .login-icon {
@@ -83,53 +53,38 @@
   border: none;
   color: var(--Rotkehlchen-brown-middle);
   outline: 0 !important;
-
-  /* M3/body/large */
-  font-family: var(--Static-Body-Large-Font, Roboto);
-  font-size: var(--Static-Body-Large-Size, 16px);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
-  letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
 }
 .login-here {
-  color: var(--Rotkehlchen-orange-default, #e79a0e);
+  color: var(--Rotkehlchen-orange-default);
   background-color: transparent;
   border: none;
   text-decoration: underline;
   cursor: pointer;
-  /* Body-M */
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 17px;
-  letter-spacing: 0.8px;
 }
 
 .login-signup {
   color: #fff;
   text-align: center;
   cursor: pointer;
-
-  /* Body-M */
-  font-family: Inter;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 17px; /* 106.25% */
-  letter-spacing: 0.8px;
 }
 
 .login-part {
   display: flex;
   padding: 8px 40px 40px 40px;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   gap: 24px;
 }
 
+.input-fields {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+}
+
 /* Desktop view*/
 @media only screen and (min-width: 768px) {
   .login-display {
@@ -148,6 +103,7 @@
     height: 60vh;
     min-height: 400px;
     min-width: 500px;
+    backdrop-filter: blur(8px);
   }
 
   .login-image {
@@ -160,8 +116,8 @@
     align-items: center;
 
     border-radius: 8px;
-    border: 5px solid var(--Rotkehlchen-gray-default);
-    background-image: url("../public/assets/images/IceBirdLogin.jpg");
+    border: 5px solid var(--Rotkehlchen-gray);
+    background-image: url("../../public/assets/images/IceBirdLogin.jpg");
     background-size: cover;
     background-position: 75%;
   }
@@ -176,8 +132,8 @@
     align-items: center;
 
     border-radius: 8px;
-    border: 5px solid var(--Rotkehlchen-gray-default);
-    background-image: url("../public/assets/images/SummerOwlSignup.jpg");
+    border: 5px solid var(--Rotkehlchen-gray);
+    background-image: url("../../public/assets/images/SummerOwlSignup.jpg");
     background-size: cover;
     /*background-position: 75%;*/
   }
@@ -188,8 +144,19 @@
     padding: 3%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
     gap: 24px;
   }
+
+  .input-fields {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    gap: 16px;
+  }
+}
+.error-messages {
+  color: red;
 }