BottomNav: replace emoji icons with Lucide, unify icon sizes and actions

src/components/BottomNav.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import { useAuth } from '@/context/AuthContext';
 import { useState } from 'react';
+import { Home, PenSquare, Calendar as CalendarIcon, HandHeart, CheckCircle2, BookOpen, Info, EllipsisVertical, LogOut } from 'lucide-react';
 
 interface BottomNavProps {
   activeTab: 'home' | 'compose' | 'journal' | 'answered' | 'praying' | 'reflections' | 'about';
@@ -14,16 +15,16 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
   const [showMoreMenu, setShowMoreMenu] = useState(false);
 
   const primaryNavItems = [
-    { id: 'home' as const, label: 'Home', icon: '🏠' },
-    { id: 'compose' as const, label: 'Compose', icon: '✍️' },
-    { id: 'journal' as const, label: 'Journal', icon: '📅' },
-    { id: 'praying' as const, label: 'Praying', icon: '🙏' },
-      ];
+    { id: 'home' as const, label: 'Home', icon: <Home className="w-5 h-5" /> },
+    { id: 'compose' as const, label: 'Compose', icon: <PenSquare className="w-5 h-5" /> },
+    { id: 'journal' as const, label: 'Journal', icon: <CalendarIcon className="w-5 h-5" /> },
+    { id: 'praying' as const, label: 'Praying', icon: <HandHeart className="w-5 h-5" /> },
+  ];
 
-      const moreMenuItems = [
-    { id: 'answered' as const, label: 'Answered', icon: '✅' },
-    { id: 'reflections' as const, label: 'Reflections', icon: '📖' },
-    { id: 'about' as const, label: 'About', icon: 'ℹ️' },
+  const moreMenuItems = [
+    { id: 'answered' as const, label: 'Answered', icon: <CheckCircle2 className="w-5 h-5" /> },
+    { id: 'reflections' as const, label: 'Reflections', icon: <BookOpen className="w-5 h-5" /> },
+    { id: 'about' as const, label: 'About', icon: <Info className="w-5 h-5" /> },
   ];
 
   const allNavItems = [...primaryNavItems, ...moreMenuItems];
@@ -59,7 +60,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
                           : 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
                       }`}
                     >
-                      <span className="text-2xl">{item.icon}</span>
+                      <span className="text-xl">{item.icon}</span>
                       <span className="text-base font-medium">{item.label}</span>
                     </button>
                   ))}
@@ -70,7 +71,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
                     }}
                     className="w-full px-6 py-4 flex items-center gap-4 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                   >
-                    <span className="text-2xl">🚪</span>
+                    <LogOut className="w-5 h-5" />
                     <span className="text-base font-medium">Logout</span>
                   </button>
                 </div>
@@ -102,7 +103,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
                         : 'text-slate-600 dark:text-slate-400'
                     }`}
                   >
-                    <span className="text-xl">⋯</span>
+                    <EllipsisVertical className="w-5 h-5" />
                     <span className="text-xs font-medium">More</span>
                   </button>
         </div>
@@ -123,7 +124,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
                     : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'
                 }`}
               >
-                <span>{item.icon}</span>
+                <span className="inline-flex items-center justify-center">{item.icon}</span>
                 {item.label}
               </button>
             ))}