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

Add version-specific logos to app header and version selector cards

Browse Source 
- Header shows ESV/NKJV logo when version is selected, generic book icon on homepage
- Version selector cards now display actual ESV and NKJV logos instead of generic icons
- Logos sourced from frontend/logos/ directory (esv-logo.png, nkjv-logo.png)
- Proper sizing and accessibility with alt text
- Maintains responsive design across all screen sizes
This commit is contained in:
Ryderjj89
2025-09-28 14:11:30 -04:00
parent a94736b9e5
commit ac45350ff5
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/App.tsx
View File

@@ -379,7 +379,17 @@ function App() {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<div className="flex items-center space-x-2 sm:space-x-4">
<Book className="h-6 w-6 sm:h-8 sm:w-8 text-blue-600" />
{!selectedVersion ? (
<Book className="h-6 w-6 sm:h-8 sm:w-8 text-blue-600" />
) : (
<div className="w-6 h-6 sm:w-8 sm:h-8 flex items-center justify-center">
<img
src={`/logos/${selectedVersion}-logo.png`}
alt={`${selectedVersion.toUpperCase()} Logo`}
className="max-w-full max-h-full"
/>
</div>
)}
<div className="flex flex-col">
<button
onClick={() => {

8
frontend/src/components/VersionSelector.tsx
View File

@@ -41,8 +41,8 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect }) =>
>
<div className="p-8">
<div className="flex flex-col items-center text-center">
<div className="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4">
<Book className="w-8 h-8 text-blue-600" />
<div className="w-20 h-20 mb-4 flex items-center justify-center">
<img src="/logos/esv-logo.png" alt="ESV Logo" className="max-w-full max-h-full" />
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
ESV
@@ -64,8 +64,8 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect }) =>
>
<div className="p-8">
<div className="flex flex-col items-center text-center">
<div className="w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mb-4">
<Users className="w-8 h-8 text-purple-600" />
<div className="w-20 h-20 mb-4 flex items-center justify-center">
<img src="/logos/nkjv-logo.png" alt="NKJV Logo" className="max-w-full max-h-full" />
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
NKJV