From ac45350ff5cd18d3e5cf4795de244c9512442149 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 28 Sep 2025 14:11:30 -0400
Subject: [PATCH] Add version-specific logos to app header and version selector
 cards

- 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
---
 frontend/src/App.tsx                        | 12 +++++++++++-
 frontend/src/components/VersionSelector.tsx |  8 ++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 37587e0f..25b327fc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -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={() => {
diff --git a/frontend/src/components/VersionSelector.tsx b/frontend/src/components/VersionSelector.tsx
index cef62594..12b3ce18 100644
--- a/frontend/src/components/VersionSelector.tsx
+++ b/frontend/src/components/VersionSelector.tsx
@@ -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