From 1fe9dc9c9c4b064eb59f15a7ed2d6aa371e98094 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 14 Sep 2025 11:39:43 -0400
Subject: [PATCH] Fix critical UX issues: make verse stars always visible and
 clickable, fix mobile login button visibility

---
 frontend/src/App.tsx                    | 10 ++++++----
 frontend/src/components/BibleReader.tsx | 16 ++++++++--------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4636e5eb..87990f69 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -372,17 +372,18 @@ function App() {
 
               {/* Authentication Button */}
               {authAvailable && (
-                <div className="hidden sm:block">
+                <div>
                   {user ? (
                     <div className="flex items-center space-x-2">
-                      <span className="text-sm text-gray-600 dark:text-gray-400">
+                      <span className="hidden sm:inline text-sm text-gray-600 dark:text-gray-400">
                         {user.name || user.email}
                       </span>
                       <button
                         onClick={handleLogout}
                         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"
                       >
-                        Logout
+                        <span className="hidden sm:inline">Logout</span>
+                        <span className="sm:hidden">⏻</span>
                       </button>
                     </div>
                   ) : (
@@ -390,7 +391,8 @@ function App() {
                       onClick={handleLogin}
                       className="text-sm px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
                     >
-                      Login
+                      <span className="hidden sm:inline">Login</span>
+                      <span className="sm:hidden">👤</span>
                     </button>
                   )}
                 </div>
diff --git a/frontend/src/components/BibleReader.tsx b/frontend/src/components/BibleReader.tsx
index 87b72651..5cd1248d 100644
--- a/frontend/src/components/BibleReader.tsx
+++ b/frontend/src/components/BibleReader.tsx
@@ -220,16 +220,20 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
         const verseText = verseMatch[2];
 
         verses.push(
-          <div key={`verse-${verseNumber}`} className="mb-4 flex items-start hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded transition-colors group">
+          <div key={`verse-${verseNumber}`} className="mb-4 flex items-start p-2 rounded transition-colors">
+            <div className="flex-1">
+              <span className="verse-number font-semibold text-blue-600 dark:text-blue-400 mr-2">{verseNumber}</span>
+              <span className="bible-text">{verseText}</span>
+            </div>
             {/* Star button - only show for authenticated users */}
             {user && (
               <button
                 onClick={() => toggleFavorite(verseNumber)}
-                className="mr-2 mt-1 p-1 rounded transition-all opacity-60 hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-600"
+                className="ml-2 mt-1 p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                 title={favorites.has(verseNumber) ? 'Remove from favorites' : 'Add to favorites'}
               >
                 <Star 
-                  className={`h-3 w-3 ${
+                  className={`h-4 w-4 ${
                     favorites.has(verseNumber) 
                       ? 'text-yellow-500 fill-yellow-500' 
                       : 'text-gray-400 hover:text-yellow-500'
@@ -237,10 +241,6 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
                 />
               </button>
             )}
-            <div className="flex-1">
-              <span className="verse-number font-semibold text-blue-600 dark:text-blue-400 mr-2">{verseNumber}</span>
-              <span className="bible-text">{verseText}</span>
-            </div>
           </div>
         );
       } else if (line.startsWith('#')) {
@@ -330,7 +330,7 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
         </h1>
         {user && (
           <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
-            Hover over verses to see ★ and add them to your favorites
+            Click the ★ next to verses to add them to your favorites
           </p>
         )}
       </div>