From fe73bce834cdf9495af317d7ff5435b293d39d18 Mon Sep 17 00:00:00 2001
From: ectasy663 <namansingh4680@gmail.com>
Date: Tue, 7 Jul 2026 15:23:05 +0530
Subject: [PATCH] Fix: Correct logo light/dark switching - dark_background for
 light mode, light_background for dark mode

---
 src/app/admin/layout.tsx            | 13 ++--------
 src/app/cbt/[examId]/page.tsx       |  2 +-
 src/app/dashboard/layout.tsx        | 23 ++----------------
 src/app/dpp/review/[dppId]/page.tsx |  2 +-
 src/app/login/page.tsx              | 13 ++--------
 src/app/page.tsx                    |  4 ++--
 src/app/signup/page.tsx             | 13 ++--------
 src/components/Logo.tsx             | 37 +++++++++++++++++++++++++++++
 8 files changed, 49 insertions(+), 58 deletions(-)
 create mode 100644 src/components/Logo.tsx

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 840c4b5..78a7747 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -3,8 +3,8 @@
 import { ReactNode } from "react"
 import { LayoutDashboard, Users, Database, Terminal, Settings } from "lucide-react"
 import Link from "next/link"
-import Image from "next/image"
 import { usePathname } from "next/navigation"
+import { Logo } from "@/components/Logo"
 
 export default function AdminLayout({ children }: { children: ReactNode }) {
   const pathname = usePathname()
@@ -14,16 +14,7 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
       {/* Sidebar */}
       <aside className="w-64 border-r border-border bg-secondary/10 flex flex-col hidden md:flex">
         <div className="p-6 border-b border-border">
-          <Link href="/admin" className="block relative h-16 w-full hover:opacity-90 transition-opacity">
-            <Image 
-              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
-              alt="PragatiVeer Admin" fill className="object-contain object-left scale-135 origin-left dark:hidden" priority
-            />
-            <Image 
-              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
-              alt="PragatiVeer Admin" fill className="object-contain object-left scale-135 origin-left hidden dark:block" priority
-            />
-          </Link>
+          <Logo href="/admin" className="w-full" imageClassName="object-contain object-left" height={56} />
           <div className="mt-3 text-xs font-bold uppercase tracking-widest text-[#00F0FF]">Admin Panel</div>
         </div>
         <nav className="flex-1 px-4 space-y-1.5 mt-6">
diff --git a/src/app/cbt/[examId]/page.tsx b/src/app/cbt/[examId]/page.tsx
index 6e290fd..e6e08cc 100644
--- a/src/app/cbt/[examId]/page.tsx
+++ b/src/app/cbt/[examId]/page.tsx
@@ -292,7 +292,7 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
               alt="PragatiVeer" fill className="object-contain object-left scale-125 origin-left dark:hidden" priority
             />
             <Image 
-              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
+              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg" 
               alt="PragatiVeer" fill className="object-contain object-left scale-125 origin-left hidden dark:block" priority
             />
           </div>
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 3c80214..a8a0337 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -3,9 +3,9 @@
 import { ReactNode, useState, useEffect, useRef } from "react"
 import { BookOpen, LayoutDashboard, Settings, FileText, Activity, LineChart, Trophy, LogOut, User, ChevronUp, Lock } from "lucide-react"
 import Link from "next/link"
-import Image from "next/image"
 import { usePathname } from "next/navigation"
 import { LanguageToggle } from "@/components/LanguageToggle"
+import { Logo } from "@/components/Logo"
 import { ThemeToggle } from "@/components/ThemeToggle"
 import { TierBadge } from "@/components/TierBadge"
 import { StreakCounter } from "@/components/StreakCounter"
@@ -40,26 +40,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
       {/* Sidebar */}
       <aside className="w-64 border-r border-border bg-background flex flex-col hidden md:flex">
         <div className="px-6 py-5">
-          <Link href="/dashboard" className="block relative h-14 w-full hover:opacity-90 transition-opacity">
-            <div className="absolute inset-0 dark:hidden">
-              <Image 
-                src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
-                alt="PragatiVeer" 
-                fill
-                className="object-contain object-left scale-110 origin-left"
-                priority
-              />
-            </div>
-            <div className="absolute inset-0 hidden dark:block">
-              <Image 
-                src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
-                alt="PragatiVeer" 
-                fill
-                className="object-contain object-left scale-110 origin-left"
-                priority
-              />
-            </div>
-          </Link>
+          <Logo href="/dashboard" className="w-full" imageClassName="object-contain object-left scale-110 origin-left" height={56} />
         </div>
         <nav className="flex-1 px-4 space-y-1.5 mt-4 overflow-y-auto">
           <NavItem href="/dashboard" icon={<LayoutDashboard size={18} />} label="Overview" active={pathname === "/dashboard"} />
diff --git a/src/app/dpp/review/[dppId]/page.tsx b/src/app/dpp/review/[dppId]/page.tsx
index de31f4a..2c44f9b 100644
--- a/src/app/dpp/review/[dppId]/page.tsx
+++ b/src/app/dpp/review/[dppId]/page.tsx
@@ -21,7 +21,7 @@ export default function DPplayoutPage({ params }: { params: { dppId: string } })
                 className="object-contain object-left scale-135 origin-left dark:hidden"
               />
               <Image 
-                src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
+                src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg" 
                 alt="PragatiVeer" 
                 fill
                 className="object-contain object-left scale-135 origin-left hidden dark:block"
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 5143a64..66edbed 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -4,8 +4,8 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { ArrowLeft, Eye, EyeOff } from "lucide-react"
 import Link from "next/link"
-import Image from "next/image"
 import { useState } from "react"
+import { Logo } from "@/components/Logo"
 
 export default function LoginPage() {
   const [showPassword, setShowPassword] = useState(false)
@@ -17,16 +17,7 @@ export default function LoginPage() {
       
       <div className="w-full max-w-md space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-700">
         <div className="flex justify-center mb-8">
-          <div className="relative h-20 w-72">
-            <Image 
-              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
-              alt="PragatiVeer" fill className="object-contain scale-135 dark:hidden" priority
-            />
-            <Image 
-              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
-              alt="PragatiVeer" fill className="object-contain scale-135 hidden dark:block" priority
-            />
-          </div>
+          <Logo href="/" className="w-72" imageClassName="object-contain" height={80} />
         </div>
 
         <Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[#00F0FF]/5 rounded-[2rem] overflow-hidden">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d260db5..d879557 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -68,7 +68,7 @@ export default function MarketingPage() {
               alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left dark:hidden" priority
             />
             <Image 
-              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
+              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg" 
               alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left hidden dark:block" priority
             />
           </Link>
@@ -471,7 +471,7 @@ export default function MarketingPage() {
                   alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left dark:hidden"
                 />
                 <Image 
-                  src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
+                  src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg" 
                   alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left hidden dark:block"
                 />
               </div>
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index ee644bb..4f48983 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -4,9 +4,9 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { ArrowLeft, Eye, EyeOff, CheckCircle2 } from "lucide-react"
 import Link from "next/link"
-import Image from "next/image"
 import { useState } from "react"
 import { useRouter } from "next/navigation"
+import { Logo } from "@/components/Logo"
 
 export default function SignupPage() {
   const [step, setStep] = useState(1)
@@ -28,16 +28,7 @@ export default function SignupPage() {
       
       <div className="w-full max-w-md space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-700">
         <div className="flex justify-center mb-8">
-          <div className="relative h-20 w-72">
-            <Image 
-              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
-              alt="PragatiVeer" fill className="object-contain scale-135 dark:hidden" priority
-            />
-            <Image 
-              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
-              alt="PragatiVeer" fill className="object-contain scale-135 hidden dark:block" priority
-            />
-          </div>
+          <Logo href="/" className="w-72" imageClassName="object-contain" height={80} />
         </div>
 
         {/* Progress Bar */}
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..a2b8ef1
--- /dev/null
+++ b/src/components/Logo.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import Image from "next/image"
+import Link from "next/link"
+
+interface LogoProps {
+  href?: string
+  className?: string
+  imageClassName?: string
+  height?: number
+}
+
+/**
+ * PragatiVeer Logo - correctly switches between modes:
+ * - Light Mode: Rectangular_dark_background.svg (dark/gold text visible on white)
+ * - Dark Mode:  Rectangular_light_background.svg (white text visible on dark)
+ */
+export function Logo({ href = "/", className = "", imageClassName = "object-contain object-left", height = 56 }: LogoProps) {
+  return (
+    <Link href={href} className={`hover:opacity-90 transition-opacity block relative ${className}`} style={{ height }}>
+      <Image
+        src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg"
+        alt="PragatiVeer"
+        fill
+        className={`${imageClassName} dark:hidden`}
+        priority
+      />
+      <Image
+        src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
+        alt="PragatiVeer"
+        fill
+        className={`${imageClassName} hidden dark:block`}
+        priority
+      />
+    </Link>
+  )
+}