From fb68364a4787b3535a2a076118f56ed36e11219d Mon Sep 17 00:00:00 2001
From: Dominik <Nedele.dominik@gmail.com>
Date: Thu, 13 Jun 2024 11:36:16 +0200
Subject: [PATCH] fix

---
 frontend/src/components/Home/Home.tsx   |  4 ++++
 frontend/src/components/Login/Login.css | 18 ++++++++++++++++++
 frontend/src/components/Login/Login.tsx | 10 ++++++----
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Home/Home.tsx b/frontend/src/components/Home/Home.tsx
index 2b90e3d..4af4fc8 100644
--- a/frontend/src/components/Home/Home.tsx
+++ b/frontend/src/components/Home/Home.tsx
@@ -24,6 +24,10 @@ function Home() {
     setUsername(data);
   };
 
+  if (username === "") {
+    localStorage.removeItem("token");
+  }
+
   const emptyusername = () => {
     setUsername("");
   };
diff --git a/frontend/src/components/Login/Login.css b/frontend/src/components/Login/Login.css
index 2a08ec0..c132dc3 100644
--- a/frontend/src/components/Login/Login.css
+++ b/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;
diff --git a/frontend/src/components/Login/Login.tsx b/frontend/src/components/Login/Login.tsx
index c6cda86..4fd5ed1 100644
--- a/frontend/src/components/Login/Login.tsx
+++ b/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" />