From 16c7a6103239e56b31e5e635316fe928eca277c0 Mon Sep 17 00:00:00 2001
From: Aditya Gupta <mail@adityagupta.dev>
Date: Sat, 6 Jun 2026 11:06:35 +0530
Subject: [PATCH] feat: updated navbar to match style

---
 src/components/BottomNav.jsx | 39 ++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/BottomNav.jsx b/src/components/BottomNav.jsx
index 2d0f273..1a381bf 100644
--- a/src/components/BottomNav.jsx
+++ b/src/components/BottomNav.jsx
@@ -1,38 +1,51 @@
 import React from "react";
+import { Home, Coffee, Plus, Bookmark, User } from "lucide-react";
 
 export default function BottomNav({ view, setView, setSelectedBean, onCreatePress }) {
   const items = [
-    { id: "dashboard", label: "Home", icon: "🏠" },
-    { id: "beans", label: "Recipes", icon: "🫘" },
-    { id: "create", label: "Create", icon: "＋", isAction: true },
-    { id: "brews", label: "Logs", icon: "📋" },
-    { id: "profile", label: "Profile", icon: "👤" },
+    { id: "dashboard", label: "Home", Icon: Home },
+    { id: "beans", label: "Recipes", Icon: Coffee },
+    { id: "create", label: "Create", Icon: Plus, isAction: true },
+    { id: "brews", label: "Logs", Icon: Bookmark },
+    { id: "profile", label: "Profile", Icon: User },
   ];
 
   return (
-    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 w-[calc(100%-32px)] max-w-[448px] z-[60]">
-      <div className="bg-white/90 backdrop-blur-md border border-[#E8DFD3] rounded-[28px] shadow-[0_8px_32px_rgba(44,24,16,0.12),0_2px_8px_rgba(44,24,16,0.08)] flex items-center px-2 py-2">
+    <div className="fixed bottom-5 left-1/2 -translate-x-1/2 w-[calc(100%-32px)] max-w-[448px] z-[60]">
+      <div className="bg-[#2C1810] border border-[#2C1810] rounded-full shadow-[0_12px_32px_rgba(44,24,16,0.25),0_4px_12px_rgba(44,24,16,0.15)] flex items-center px-3 py-2">
         {items.map(item => {
           const isActive = view === item.id;
+          const { Icon } = item;
+          
           if (item.isAction) {
             return (
               <button
                 key={item.id}
                 onClick={onCreatePress}
-                className="flex-1 flex flex-col items-center justify-center mx-1">
-                <div className="w-12 h-12 rounded-full bg-[#2C1810] flex items-center justify-center text-[#FAF6F1] text-2xl font-light shadow-[0_4px_12px_rgba(44,24,16,0.25)] transition-transform active:scale-90 hover:scale-105">
-                  ＋
+                className="flex-1 flex flex-col items-center justify-center mx-1 cursor-pointer"
+                aria-label="Create new item"
+              >
+                <div className="w-11 h-11 rounded-full bg-[#FAF6F1] flex items-center justify-center text-[#2C1810] shadow-[0_4px_12px_rgba(0,0,0,0.2)] transition-transform active:scale-90 hover:scale-105">
+                  <Icon size={20} strokeWidth={2.5} />
                 </div>
               </button>
             );
           }
+          
           return (
             <button
               key={item.id}
               onClick={() => { setView(item.id); setSelectedBean(null); }}
-              className={`flex-1 flex flex-col items-center gap-0.5 py-1.5 rounded-[20px] cursor-pointer border-none transition-all ${isActive ? "bg-[#FAF6F1]" : "bg-transparent"}`}>
-              <span className={`text-xl transition-transform ${isActive ? "scale-110" : "scale-100 opacity-50"}`}>{item.icon}</span>
-              <span className={`text-[10px] font-semibold tracking-wide transition-colors ${isActive ? "text-[#2C1810]" : "text-[#9C8B7A]"}`}>{item.label}</span>
+              className={`flex-1 flex flex-col items-center gap-1 py-1.5 rounded-full cursor-pointer border-none transition-all ${isActive ? "bg-white/10" : "bg-transparent"}`}
+            >
+              <Icon 
+                size={20} 
+                strokeWidth={2} 
+                className={`transition-all ${isActive ? "text-white scale-105" : "text-white/60"}`} 
+              />
+              <span className={`text-[10px] font-semibold tracking-wide transition-colors ${isActive ? "text-white" : "text-white/60"}`}>
+                {item.label}
+              </span>
             </button>
           );
         })}