Merge branch 'main' of https://github.com/SE-TINF22B6/CookPit

frontend/src/components/Home/Home.tsx

@@ -24,6 +24,10 @@ function Home() {
     setUsername(data);
   };
 
+  if (username === "") {
+    localStorage.removeItem("token");
+  }
+
   const emptyusername = () => {
     setUsername("");
   };

frontend/src/components/Login/Login.css

@@ -27,6 +27,10 @@
   background-color: #0000000c;
 }
 
+.close-container {
+  margin-right: 10px; /* Moves the button 10px to the left */
+}
+
 .outer {
   display: flex;
   justify-content: center;
@@ -73,6 +77,20 @@
   font-size: 36px;
   cursor: pointer;
 }
+.header-container {
+  display: flex; /* Keeps flexbox layout */
+  align-items: center; /* Keeps items vertically centered */
+  justify-content: flex-start; /* Aligns items to the start, giving more control over spacing */
+  place-items: 10%;
+  width: 100%; /* Keeps the container spanning the full width */
+}
+
+.header-container h1 {
+  margin: 0; /* Keeps default margin removed from h1 */
+  flex-grow: 1; /* Allows the text to take up available space */
+}
+
+
 
 .wrapper .input-box {
   position: relative;

frontend/src/components/Login/Login.tsx

@@ -73,10 +73,12 @@ const Login: React.FC<LoginProps> = ({ onToggleLogin, onData }) => {
   return (
     <div className="outer">
       <div className="wrapper" id="divOne">
-        <h1>
-          {ueberschrift}
-          <IoClose size={35} className="btnclose" onClick={onToggleLogin} />
-        </h1>
+      <div className="header-container">
+  <h1>{ueberschrift}</h1>
+  <div className="close-container">
+  <IoClose size={35} className="btnclose" onClick={onToggleLogin} />
+  </div>
+</div>
         <div className="input-box">
           <input type="text" placeholder="  Username" onChange={(e) => setUsername(e.target.value)} />
           <img src={icon_user} alt="User" />