RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Fix critical UX issues: make verse stars always visible and clickable, fix mobile login button visibility

Browse Source
This commit is contained in:
Ryderjj89
2025-09-14 11:39:43 -04:00
parent 2c78f7c437
commit 1fe9dc9c9c
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/App.tsx
View File

@@ -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>

16
frontend/src/components/BibleReader.tsx
View File

@@ -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>