From eed017d661d5f009255b5c1ef30a70cff9ad1052 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 28 Sep 2025 16:38:24 -0400
Subject: [PATCH] Improved mobile login button - replaced emoji with icon &
 better styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- **Replaced person emoji**: 👤 → <User> icon for cleaner appearance
- **Matching button styling**: Blue button → Gray button matching logout button
- **Consistent design**: Both login/logout buttons now have same gray theme
- **Professional appearance**: Clean icon instead of emoji for mobile UI

Mobile authentication button now looks polished and theme-consistent!
---
 frontend/src/App.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 68a9ee44..ca528eff 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Routes, Route, useNavigate, useParams, useLocation } from 'react-router-dom';
-import { Book, ChevronRight, Moon, Sun, LogOut, Search } from 'lucide-react';
+import { Book, ChevronRight, Moon, Sun, LogOut, Search, User } from 'lucide-react';
 import BookSelector from './components/BookSelector';
 import ChapterSelector from './components/ChapterSelector';
 import BibleReader from './components/BibleReader';
@@ -452,10 +452,10 @@ function App() {
                   ) : (
                     <button
                       onClick={handleLogin}
-                      className="text-sm px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                      className="text-sm px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
                     >
                       <span className="hidden sm:inline">Login</span>
-                      <span className="sm:hidden">👤</span>
+                      <User className="sm:hidden h-4 w-4" />
                     </button>
                   )}
                 </div>