From e97bf95ca8c9630391d7ebb774e4bd38fea23634 Mon Sep 17 00:00:00 2001
From: Mike Johnston <mike@nervesocket.com>
Date: Sat, 28 Feb 2026 01:43:50 -0500
Subject: [PATCH] dark mode fixes

---
 public/css/style.css          | 30 +++++++++++++++++++++++++++++-
 src/views/home.ejs            |  3 +++
 src/views/partials/footer.ejs | 14 ++++++--------
 src/views/partials/header.ejs |  3 ++-
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 3145835..10db8bd 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -101,6 +101,16 @@ body {
   background: rgba(255, 255, 255, 0.1);
 }
 
+/* Desktop: hide mobile toggle, show nav toggle */
+.mobile-theme-toggle {
+  display: none;
+}
+
+.nav-theme-item {
+  display: flex;
+  align-items: center;
+}
+
 .nav-toggle span {
   display: block;
   width: 24px;
@@ -186,8 +196,13 @@ body {
   color: #fff;
 }
 
+.btn-primary:visited {
+  color: #fff;
+}
+
 .btn-primary:hover {
   background: var(--primary-dark);
+  color: #fff;
 }
 
 .btn-success {
@@ -195,6 +210,10 @@ body {
   color: #fff;
 }
 
+.btn-success:visited {
+  color: #fff;
+}
+
 .btn-success:hover {
   background: #00a381;
 }
@@ -571,7 +590,7 @@ tr:hover {
   background: linear-gradient(135deg, var(--card-bg) 0%, #0d2618 100%);
 }
 
-[data-theme="dark"] a {
+[data-theme="dark"] a:not(.btn) {
   color: var(--primary);
 }
 
@@ -605,6 +624,15 @@ tr:hover {
     display: flex;
   }
 
+  /* Show mobile theme toggle, hide nav one */
+  .mobile-theme-toggle {
+    display: inline-flex;
+  }
+
+  .nav-theme-item {
+    display: none;
+  }
+
   .navbar {
     padding: 0 0.75rem;
     height: 52px;
diff --git a/src/views/home.ejs b/src/views/home.ejs
index 3ce52b1..a48dd47 100644
--- a/src/views/home.ejs
+++ b/src/views/home.ejs
@@ -7,6 +7,9 @@
     <div style="display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;">
       <a href="/hunts" class="btn btn-primary">Browse Hunts</a>
       <a href="/leaderboard" class="btn btn-outline">Leaderboard</a>
+      <% if (!currentUser) { %>
+        <a href="/auth/login" class="btn btn-success">Login</a>
+      <% } %>
     </div>
   </div>
 
diff --git a/src/views/partials/footer.ejs b/src/views/partials/footer.ejs
index ea298da..09f4eb5 100644
--- a/src/views/partials/footer.ejs
+++ b/src/views/partials/footer.ejs
@@ -3,22 +3,20 @@
   </footer>
   <script src="/js/timeago.js"></script>
   <script>
+    function setThemeIcons(isDark) {
+      var icon = isDark ? '\u2600\uFE0F' : '\uD83C\uDF19';
+      document.querySelectorAll('.theme-toggle').forEach(function(btn) { btn.textContent = icon; });
+    }
     function toggleTheme() {
       var html = document.documentElement;
       var current = html.getAttribute('data-theme');
       var next = current === 'dark' ? 'light' : 'dark';
       html.setAttribute('data-theme', next);
       localStorage.setItem('theme', next);
-      // Update toggle icon
-      var btn = document.querySelector('.theme-toggle');
-      if (btn) btn.textContent = next === 'dark' ? '\u2600\uFE0F' : '\uD83C\uDF19';
+      setThemeIcons(next === 'dark');
     }
     // Set correct icon on load
-    (function() {
-      var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-      var btn = document.querySelector('.theme-toggle');
-      if (btn) btn.textContent = isDark ? '\u2600\uFE0F' : '\uD83C\uDF19';
-    })();
+    setThemeIcons(document.documentElement.getAttribute('data-theme') === 'dark');
   </script>
 </body>
 </html>
diff --git a/src/views/partials/header.ejs b/src/views/partials/header.ejs
index eaff442..619ce7a 100644
--- a/src/views/partials/header.ejs
+++ b/src/views/partials/header.ejs
@@ -19,7 +19,7 @@
   <nav class="navbar">
     <a href="/" class="navbar-brand">&#x1F3AF; Loot Hunt</a>
     <div style="display: flex; align-items: center; gap: 0.25rem;">
-      <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle dark mode">&#x1F319;</button>
+      <button class="theme-toggle mobile-theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle dark mode">&#x1F319;</button>
       <button class="nav-toggle" aria-label="Toggle menu" onclick="document.querySelector('.navbar-nav').classList.toggle('open')">
         <span></span><span></span><span></span>
       </button>
@@ -37,6 +37,7 @@
         <li><a href="/auth/login">Login</a></li>
         <li><a href="/auth/register">Register</a></li>
       <% } %>
+      <li class="nav-theme-item"><button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle dark mode">&#x1F319;</button></li>
     </ul>
   </nav>
   <% if (typeof flash !== 'undefined' && flash) { %>