From 3c27026371417f275344eb33696a19abdad69cad Mon Sep 17 00:00:00 2001
From: iamkiddy <francisyoungson@gmail.com>
Date: Thu, 6 Nov 2025 14:40:30 +0000
Subject: [PATCH] Refactor SideNav component for improved styling and
 responsiveness. Adjust layout in Booking and Dashboard pages to match updated
 SideNav dimensions. Enhance Login page with gradient text and button styles
 for a more modern appearance.

---
 app/(admin)/_components/side-nav.tsx | 42 ++++++++++++++--------------
 app/(admin)/booking/page.tsx         |  2 +-
 app/(admin)/dashboard/page.tsx       |  2 +-
 app/(auth)/login/page.tsx            |  6 ++--
 4 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/app/(admin)/_components/side-nav.tsx b/app/(admin)/_components/side-nav.tsx
index 1b8bf54..ba52334 100644
--- a/app/(admin)/_components/side-nav.tsx
+++ b/app/(admin)/_components/side-nav.tsx
@@ -63,21 +63,21 @@ export default function SideNav() {
 
       {/* Side Navigation */}
       <aside
-        className={`fixed top-0 left-0 z-50 h-screen bg-white border-r border-gray-200 flex flex-col transition-transform duration-200 w-[85vw] max-w-[250px] min-w-[200px] md:translate-x-0 md:w-[250px] md:min-w-[250px] md:max-w-[250px] ${
+        className={`fixed top-0 left-0 z-50 h-screen bg-white border-r border-gray-200 flex flex-col transition-transform duration-200 w-[85vw] max-w-[200px] min-w-[160px] md:translate-x-0 md:w-[200px] md:min-w-[200px] md:max-w-[200px] ${
           open ? "translate-x-0" : "-translate-x-full"
         } md:translate-x-0`}
       >
         {/* Logo Section */}
-        <div className="flex-shrink-0 px-4 pb-4 flex flex-col gap-1 md:block mb-5 pt-16 md:pt-4">
-          <div className="flex items-center gap-3 mb-1 ml-4 md:ml-6">
-            <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gradient-to-br from-rose-100 to-pink-100">
-              <Heart className="w-6 h-6 text-rose-600" fill="currentColor" />
+        <div className="flex-shrink-0 px-3 pb-4 flex flex-col gap-1 md:block mb-5 pt-16 md:pt-4">
+          <div className="flex items-center gap-2 mb-1 ml-2 md:ml-3">
+            <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-gradient-to-br from-rose-100 to-pink-100">
+              <Heart className="w-5 h-5 text-rose-600" fill="currentColor" />
             </div>
-            <span className="text-lg font-semibold text-gray-900">Attune Heart</span>
+            <span className="text-sm font-semibold text-gray-900">Attune Heart</span>
           </div>
         </div>
 
-        <hr className="flex-shrink-0 -mt-10 mb-4 mx-4 border-gray-200 md:block hidden" />
+        <hr className="flex-shrink-0 -mt-10 mb-4 mx-3 border-gray-200 md:block hidden" />
 
         {/* Navigation Items */}
         <nav className="flex-1 overflow-y-auto flex flex-col gap-2 px-2 md:px-0">
@@ -89,31 +89,31 @@ export default function SideNav() {
               <div className="relative flex items-center w-full" key={item.label}>
                 {isActive && (
                   <span
-                    className="absolute left-0 top-0 h-[45px] w-[3px] bg-[#4A90A4]"
+                    className="absolute left-0 top-0 h-[40px] w-[3px] bg-gradient-to-b from-rose-500 to-pink-600"
                     style={{ left: 0 }}
                   />
                 )}
                 <Link
                   href={item.href}
                   onClick={() => setOpen(false)}
-                  className={`group flex items-center gap-3 py-3 pl-4 md:pl-4 pr-4 md:pr-4 transition-colors duration-200 focus:outline-none w-[90%] md:w-[90%] ml-2 md:ml-4 cursor-pointer justify-start ${
+                  className={`group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 focus:outline-none w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start ${
                     isActive
-                      ? "bg-[#4A90A4] text-white border border-[#4A90A4] rounded-[5px] shadow-sm"
-                      : "bg-transparent text-gray-600 hover:bg-[#4A90A4]/10 hover:text-[#4A90A4] rounded-lg"
+                      ? "bg-gradient-to-r from-rose-500 to-pink-600 text-white border border-rose-500 rounded-[5px] shadow-sm"
+                      : "bg-transparent text-gray-600 hover:bg-rose-50 hover:text-rose-600 rounded-lg"
                   }`}
-                  style={isActive ? { height: 45 } : {}}
+                  style={isActive ? { height: 40 } : {}}
                 >
                   <Icon
-                    size={20}
+                    size={18}
                     strokeWidth={isActive ? 2.2 : 1.5}
                     className={
                       isActive
                         ? "text-white"
-                        : "text-gray-700 group-hover:text-[#4A90A4]"
+                        : "text-gray-700 group-hover:text-rose-600"
                     }
                   />
                   <span
-                    className="font-light leading-none text-[13px] md:text-[13px]"
+                    className="font-light leading-none text-[12px] md:text-[12px]"
                     style={{ fontWeight: 300 }}
                   >
                     {item.label}
@@ -128,10 +128,10 @@ export default function SideNav() {
             <Link
               href="/settings"
               onClick={() => setOpen(false)}
-              className="group flex items-center gap-3 py-3 pl-4 md:pl-4 pr-4 md:pr-4 transition-colors duration-200 w-[90%] md:w-[90%] ml-2 md:ml-4 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
+              className="group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
             >
-              <Settings size={20} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
-              <span className="font-light leading-none text-[13px]" style={{ fontWeight: 300 }}>
+              <Settings size={18} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
+              <span className="font-light leading-none text-[12px]" style={{ fontWeight: 300 }}>
                 Settings
               </span>
             </Link>
@@ -140,10 +140,10 @@ export default function SideNav() {
                 setOpen(false);
                 // Handle logout
               }}
-              className="group flex items-center gap-3 py-3 pl-4 md:pl-4 pr-4 md:pr-4 transition-colors duration-200 w-[90%] md:w-[90%] ml-2 md:ml-4 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
+              className="group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
             >
-              <LogOut size={20} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
-              <span className="font-light leading-none text-[13px]" style={{ fontWeight: 300 }}>
+              <LogOut size={18} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
+              <span className="font-light leading-none text-[12px]" style={{ fontWeight: 300 }}>
                 Logout
               </span>
             </button>
diff --git a/app/(admin)/booking/page.tsx b/app/(admin)/booking/page.tsx
index 99b5c1c..d3dd3db 100644
--- a/app/(admin)/booking/page.tsx
+++ b/app/(admin)/booking/page.tsx
@@ -8,7 +8,7 @@ export default function Booking() {
       {/* Side Navigation */}
       <SideNav />
 
-      <div className="md:ml-[250px]">
+      <div className="md:ml-[200px]">
         <main className="p-4 sm:p-6 lg:p-8">
         </main>
       </div>
diff --git a/app/(admin)/dashboard/page.tsx b/app/(admin)/dashboard/page.tsx
index 93f8a4a..00938e6 100644
--- a/app/(admin)/dashboard/page.tsx
+++ b/app/(admin)/dashboard/page.tsx
@@ -8,7 +8,7 @@ export default function Dashboard() {
       {/* Side Navigation */}
       <SideNav />
 
-      <div className="md:ml-[250px]">
+      <div className="md:ml-[200px]">
         {/* Main Content */}
         <main className="p-4 sm:p-6 lg:p-8">
           <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 11f95cc..b20b935 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -51,7 +51,7 @@ export default function Login() {
         </Button>
 
         {/* Heading */}
-        <h1 className="text-3xl font-bold text-black mb-2">
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-rose-600 via-pink-600 to-rose-600 bg-clip-text text-transparent mb-2">
           Welcome back
         </h1>
 
@@ -112,7 +112,7 @@ export default function Login() {
           {/* Submit Button */}
           <Button
             type="submit"
-            className="w-full h-12 text-base font-semibold bg-[#4A90A4] hover:bg-[#3a7a8a] text-white"
+            className="w-full h-12 text-base font-semibold bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all"
           >
             Log in
           </Button>
@@ -124,7 +124,7 @@ export default function Login() {
                 type="checkbox"
                 checked={rememberMe}
                 onChange={(e) => setRememberMe(e.target.checked)}
-                className="w-4 h-4 rounded border-gray-300 text-[#4A90A4] focus:ring-2 focus:ring-[#4A90A4] cursor-pointer"
+                className="w-4 h-4 rounded border-gray-300 text-rose-600 focus:ring-2 focus:ring-rose-500 cursor-pointer"
               />
               <span className="text-black">Remember me</span>
             </label>