Align logout and theme toggle buttons

AyushCodes160 · AyushCodes160 · commit cfd5537e851c · 2026-02-08T23:34:49.000+05:30
diff --git a/public/index.html b/public/index.html
@@ -21,8 +21,9 @@
   <body>
     <header>
       <h1>Pokedex</h1>
-      <button id="logout-btn" style="position: absolute; right: 80px; top: 1.2rem; padding: 0.3rem 0.8rem; background: #ef4444; color: white; border: none; border-radius: 999px; cursor: pointer; font-family: 'Orbitron', sans-serif; font-size: 0.8rem;">Logout</button>
-      <div class="theme-toggle" role="presentation">
+      <div class="header-controls">
+        <button id="logout-btn">Logout</button>
+        <div class="theme-toggle" role="presentation">
         <input
           type="checkbox"
           id="theme-toggle"
@@ -54,6 +55,7 @@ <h1>Pokedex</h1>
           </span>
         </label>
       </div>
+      </div>
     </header>
     <main class="pokedex-layout">
       <section class="sidebar">
diff --git a/public/style.css b/public/style.css
@@ -595,12 +595,48 @@ body.dark-mode .model-3d {
   background: #1a1a1a;
 }
 
-.theme-toggle {
+/* Header Controls Container */
+.header-controls {
   position: absolute;
-  top: 0.75rem;
-  right: 1rem;
+  top: 50%;
+  right: 1.5rem;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  z-index: 20;
+}
+
+#logout-btn {
+  padding: 0.5rem 1.5rem;
+  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 999px;
+  cursor: pointer;
+  font-family: 'Orbitron', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+}
+
+#logout-btn:hover {
+  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.6);
+}
+
+#logout-btn:active {
+  transform: translateY(0);
+}
+
+.theme-toggle {
   display: inline-block;
   height: 28px;
+  position: relative;
 }
 
 .toggle-input {
