From 183743f7d5b3f54bd2ab49e1a54f3ada432640c4 Mon Sep 17 00:00:00 2001
From: Destroyer795 <ty.pranavkishan7905@gmail.com>
Date: Thu, 12 Mar 2026 01:07:30 +0530
Subject: [PATCH 1/2] Fix UI issues in light mode and high contrast

---
 frontend/src/i18n.ts                          |  3 ++-
 frontend/src/index.css                        | 16 ++++++++++++++
 .../src/pages/dashboard/AdminDashboard.tsx    |  8 +++----
 frontend/src/pages/dashboard/DiscoveryMap.tsx |  6 ++---
 frontend/src/pages/dashboard/DonorHome.tsx    |  2 +-
 .../src/pages/dashboard/FeedbackRatings.tsx   |  8 +++----
 frontend/src/pages/dashboard/History.tsx      |  8 +++----
 frontend/src/pages/dashboard/Impact.tsx       | 22 +++++++++----------
 .../src/pages/dashboard/NearExpiryAlerts.tsx  |  6 ++---
 .../src/pages/dashboard/Notifications.tsx     |  2 +-
 frontend/src/pages/dashboard/Preferences.tsx  | 16 +++++++-------
 frontend/src/pages/dashboard/Profile.tsx      | 12 +++++-----
 .../src/pages/dashboard/SupportTickets.tsx    |  6 ++---
 .../pages/dashboard/VolunteerDashboard.tsx    | 16 +++++++-------
 .../src/pages/dashboard/VolunteerTracking.tsx |  6 ++---
 15 files changed, 77 insertions(+), 60 deletions(-)

diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
index 3a7a8da..810f695 100644
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -1,4 +1,4 @@
-import i18n from 'i18next';
+import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import hiStrings from './locales/hi';
 import taStrings from './locales/ta';
@@ -607,6 +607,7 @@ export const enStrings: Record<string, string> = {
   minLabel: 'min',
   claimNow: 'Claim Now',
   alreadyClaimedStatus: 'Already Claimed',
+  noExpiringSoon: 'No donations expiring soon. All good!',
   // —— Leaderboards ——
   leaderboardsTitle: 'Leaderboards',
   leaderboardsDesc: 'Top contributors ranked by karma points and activity.',
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0795278..4021560 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -351,6 +351,11 @@
 }
 .a11y-contrast .card,
 .a11y-contrast .card-elevated {
+  border-color: rgba(0, 0, 0, 0.5) !important;
+  border-width: 2px !important;
+}
+.dark.a11y-contrast .card,
+.dark.a11y-contrast .card-elevated {
   border-color: rgba(255, 255, 255, 0.5) !important;
   border-width: 2px !important;
 }
@@ -358,10 +363,21 @@
 .a11y-contrast button {
   text-decoration-thickness: 2px;
   outline-offset: 3px;
+  outline-color: rgba(0,0,0,0.8);
+}
+.dark.a11y-contrast a,
+.dark.a11y-contrast button {
+  outline-color: rgba(255,255,255,0.8);
 }
 .a11y-contrast input,
 .a11y-contrast select,
 .a11y-contrast textarea {
+  border-color: rgba(0, 0, 0, 0.5) !important;
+  border-width: 2px !important;
+}
+.dark.a11y-contrast input,
+.dark.a11y-contrast select,
+.dark.a11y-contrast textarea {
   border-color: rgba(255, 255, 255, 0.5) !important;
   border-width: 2px !important;
 }
diff --git a/frontend/src/pages/dashboard/AdminDashboard.tsx b/frontend/src/pages/dashboard/AdminDashboard.tsx
index f4f84d6..83acaab 100644
--- a/frontend/src/pages/dashboard/AdminDashboard.tsx
+++ b/frontend/src/pages/dashboard/AdminDashboard.tsx
@@ -9,7 +9,7 @@ import {
   RefreshCw, MessageSquare,
 } from 'lucide-react';
 
-// ─── Types ───────────────────────────────────────────────────────────────────
+
 
 type AdminTab = 'notifications' | 'pending' | 'users' | 'donations' | 'flagged' | 'tickets';
 
@@ -43,7 +43,7 @@ interface FlaggedItem {
   createdAt: string;
 }
 
-// ─── Style Maps ──────────────────────────────────────────────────────────────
+
 
 const priorityStyle: Record<string, string> = {
   high: 'bg-red-500/10 text-red-400 border-red-500/20',
@@ -66,7 +66,7 @@ const statusStyle: Record<string, string> = {
   ESCALATED: 'bg-purple-500/10 text-purple-400 border-purple-500/20',
 };
 
-// ─── Ticket Modal ─────────────────────────────────────────────────────────────
+
 
 function TicketModal({ ticket, onClose, onUpdate }: {
   ticket: SupportTicket; onClose: () => void; onUpdate: () => void;
@@ -160,7 +160,7 @@ function TicketModal({ ticket, onClose, onUpdate }: {
   );
 }
 
-// ─── Main ─────────────────────────────────────────────────────────────────────
+
 
 export default function AdminDashboard() {
   const [activeTab, setActiveTab] = useState<AdminTab>('notifications');
diff --git a/frontend/src/pages/dashboard/DiscoveryMap.tsx b/frontend/src/pages/dashboard/DiscoveryMap.tsx
index f3f15e9..aca8f2c 100644
--- a/frontend/src/pages/dashboard/DiscoveryMap.tsx
+++ b/frontend/src/pages/dashboard/DiscoveryMap.tsx
@@ -284,7 +284,7 @@ export default function DiscoveryMap() {
                                         className="w-full h-full object-cover"
                                     />
                                     {/* Image Counter */}
-                                    <div className="absolute bottom-4 right-4 bg-black/60 text-gray-900 dark:text-white text-xs px-3 py-1 rounded-full">
+                                    <div className="absolute bottom-4 right-4 bg-black/60 text-white text-xs px-3 py-1 rounded-full">
                                         {currentImageIndex + 1} / {selectedDonation.imageUrls.length}
                                     </div>
                                     {/* Navigation Buttons */}
@@ -292,13 +292,13 @@ export default function DiscoveryMap() {
                                         <>
                                             <button
                                                 onClick={() => setCurrentImageIndex((prev) => (prev - 1 + selectedDonation.imageUrls.length) % selectedDonation.imageUrls.length)}
-                                                className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-gray-900 dark:text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                                                className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                                             >
                                                 <ChevronLeft className="w-5 h-5" />
                                             </button>
                                             <button
                                                 onClick={() => setCurrentImageIndex((prev) => (prev + 1) % selectedDonation.imageUrls.length)}
-                                                className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-gray-900 dark:text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                                                className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                                             >
                                                 <ChevronRight className="w-5 h-5" />
                                             </button>
diff --git a/frontend/src/pages/dashboard/DonorHome.tsx b/frontend/src/pages/dashboard/DonorHome.tsx
index 2de4231..066671c 100644
--- a/frontend/src/pages/dashboard/DonorHome.tsx
+++ b/frontend/src/pages/dashboard/DonorHome.tsx
@@ -279,7 +279,7 @@ export default function DonorHome() {
                     className="w-full h-full object-cover"
                   />
                   {/* Image Counter */}
-                  <div className="absolute bottom-4 right-4 bg-black/60 text-gray-900 dark:text-white text-xs px-3 py-1 rounded-full">
+                  <div className="absolute bottom-4 right-4 bg-black/60 text-white text-xs px-3 py-1 rounded-full">
                     {currentImageIndex + 1} / {selectedDonation.imageUrls.length}
                   </div>
                   {/* Navigation Buttons */}
diff --git a/frontend/src/pages/dashboard/FeedbackRatings.tsx b/frontend/src/pages/dashboard/FeedbackRatings.tsx
index 7ef1e71..263ea55 100644
--- a/frontend/src/pages/dashboard/FeedbackRatings.tsx
+++ b/frontend/src/pages/dashboard/FeedbackRatings.tsx
@@ -113,7 +113,7 @@ export default function FeedbackRatings() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-2xl font-semibold text-white">{t('ngoFeedbackRatings')}</h1>
+        <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">{t('ngoFeedbackRatings')}</h1>
         <p className="text-slate-400 mt-1">{t('feedbackDesc')}</p>
       </div>
 
@@ -141,7 +141,7 @@ export default function FeedbackRatings() {
               <div>
                 <p className="text-sm text-slate-400">{t('yourDonorRating')}</p>
                 <div className="flex items-center gap-3 mt-1">
-                  <span className="text-3xl font-bold text-white">{donorRating.averageScore.toFixed(1)}</span>
+                  <span className="text-3xl font-bold text-gray-900 dark:text-white">{donorRating.averageScore.toFixed(1)}</span>
                   <span className="text-amber-400 text-lg">{'★'.repeat(Math.round(donorRating.averageScore))}{'☆'.repeat(5 - Math.round(donorRating.averageScore))}</span>
                 </div>
                 <p className="text-xs text-slate-500 mt-1">{t('basedOnReviews', { count: donorRating.totalReviews })}</p>
@@ -151,7 +151,7 @@ export default function FeedbackRatings() {
         )}
         {isNGO && (
           <div className="card p-5 xl:col-span-1">
-            <h2 className="text-white font-semibold mb-4 flex items-center gap-2">
+            <h2 className="text-gray-900 dark:text-white font-semibold mb-4 flex items-center gap-2">
               <MessageCircle className="w-5 h-5 text-emerald-400" />
               {t('leaveReview')}
             </h2>
@@ -199,7 +199,7 @@ export default function FeedbackRatings() {
         {/* Rating Summary & Reviews */}
         <div className={`card p-5 space-y-4 ${isNGO ? 'xl:col-span-2' : 'xl:col-span-3'}`}>
           <div className="flex items-center justify-between">
-            <h2 className="text-white font-semibold">{t('ratingSummary')}</h2>
+            <h2 className="text-gray-900 dark:text-white font-semibold">{t('ratingSummary')}</h2>
             <span className="badge badge-success flex items-center gap-1">
               <Star className="w-3 h-3" />
               {avgRating.toFixed(1)} / 5
diff --git a/frontend/src/pages/dashboard/History.tsx b/frontend/src/pages/dashboard/History.tsx
index beea137..88cdff1 100644
--- a/frontend/src/pages/dashboard/History.tsx
+++ b/frontend/src/pages/dashboard/History.tsx
@@ -5,7 +5,7 @@ import type { Donation } from '../../services/api'
 import { socketService } from '../../services/socket'
 import { TrendingUp, BarChart2, Package } from 'lucide-react'
 
-// ─── Inline SVG Bar Chart ─────────────────────────────────────────────────────
+
 
 interface BarChartProps {
     data: { label: string; value: number; color?: string }[]
@@ -100,7 +100,7 @@ function BarChart({ data, height = 180, unit = '', title, subtitle, accentColor
     )
 }
 
-// ─── Line/Area Trend Chart ────────────────────────────────────────────────────
+
 
 interface LineChartProps {
     data: { label: string; value: number }[]
@@ -183,7 +183,7 @@ function LineChart({ data, title, subtitle, accentColor = '#6366f1' }: LineChart
     )
 }
 
-// ─── Monthly Data Helpers ─────────────────────────────────────────────────────
+
 
 const MONTH_ABBR = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 const LAST_6_MONTHS = Array.from({ length: 6 }, (_, i) => {
@@ -202,7 +202,7 @@ function aggregateByMonth(donations: Donation[], statusFilter?: string) {
     })
 }
 
-// ─── Main History Component ───────────────────────────────────────────────────
+
 
 const userRole = (): string => {
     try {
diff --git a/frontend/src/pages/dashboard/Impact.tsx b/frontend/src/pages/dashboard/Impact.tsx
index 1e73314..dd227ff 100644
--- a/frontend/src/pages/dashboard/Impact.tsx
+++ b/frontend/src/pages/dashboard/Impact.tsx
@@ -9,7 +9,7 @@ import {
     Award, Download, Leaf, Droplets, Globe
 } from 'lucide-react'
 
-// ─── BADGE CATALOG (mirrors backend BADGE_RULES exactly) ─────────────────────
+
 
 const BADGE_CATALOG_KEYS = [
     { threshold: 10, nameKey: 'newcomer', icon: '🌱', descKey: 'newcomerDesc' },
@@ -19,7 +19,7 @@ const BADGE_CATALOG_KEYS = [
     { threshold: 500, nameKey: 'superhero', icon: '💫', descKey: 'superheroDesc' },
 ]
 
-// ─── INLINE SVG BAR CHART ─────────────────────────────────────────────────────
+
 
 function SvgBarChart({
     data, title, subtitle, color = '#10b981',
@@ -137,7 +137,7 @@ function SvgLineChart({
     )
 }
 
-// ─── CERTIFICATE MODAL ────────────────────────────────────────────────────────
+
 
 function CertificateModal({ user, role, onClose }: { user: User; role: string; onClose: () => void }) {
     const { t } = useTranslation()
@@ -208,7 +208,7 @@ function CertificateModal({ user, role, onClose }: { user: User; role: string; o
             <div className="w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-auto max-h-[92vh]">
                 {/* Toolbar */}
                 <div className="flex justify-between items-center px-6 py-4 border-b border-slate-200 bg-slate-50 rounded-t-2xl">
-                    <h3 className="text-base font-semibold text-gray-200 dark:text-slate-800 flex items-center gap-2">
+                    <h3 className="text-base font-semibold text-gray-800 dark:text-slate-200 flex items-center gap-2">
                         <Award className="w-5 h-5 text-emerald-600" />
                         {t('certificateOfAppreciation')}
                     </h3>
@@ -218,7 +218,7 @@ function CertificateModal({ user, role, onClose }: { user: User; role: string; o
                             <Download className="w-4 h-4" />{t('printSavePDF')}
                         </button>
                         <button onClick={onClose}
-                            className="bg-slate-200 hover:bg-slate-300 text-gray-300 dark:text-slate-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                            className="bg-slate-200 hover:bg-slate-300 text-gray-700 dark:text-slate-300 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                             {t('close')}
                         </button>
                     </div>
@@ -275,12 +275,12 @@ function CertificateModal({ user, role, onClose }: { user: User; role: string; o
                             <div>
                                 <div style={{ width: 150, borderBottom: '1px solid #d1d5db', marginBottom: 5 }} />
                                 <p className="text-xs text-gray-500 dark:text-slate-500" style={{ fontFamily: 'sans-serif' }}>{t('platformDirector')}</p>
-                                <p className="text-xs font-semibold text-gray-300 dark:text-slate-700" style={{ fontFamily: 'sans-serif' }}>{t('surplusSyncNetwork')}</p>
+                                <p className="text-xs font-semibold text-gray-700 dark:text-slate-300" style={{ fontFamily: 'sans-serif' }}>{t('surplusSyncNetwork')}</p>
                             </div>
                             <div className="text-2xl">🏅</div>
                             <div className="text-right">
                                 <p className="text-xs text-gray-500 dark:text-slate-500" style={{ fontFamily: 'sans-serif' }}>{t('dateOfIssue')}</p>
-                                <p className="text-sm font-semibold text-gray-300 dark:text-slate-700" style={{ fontFamily: 'sans-serif' }}>{today}</p>
+                                <p className="text-sm font-semibold text-gray-700 dark:text-slate-300" style={{ fontFamily: 'sans-serif' }}>{today}</p>
                             </div>
                         </div>
                     </div>
@@ -290,7 +290,7 @@ function CertificateModal({ user, role, onClose }: { user: User; role: string; o
     )
 }
 
-// ─── GAMIFICATION: KARMA PROGRESS BAR ────────────────────────────────────────
+
 
 function KarmaProgress({ karma, badgeCatalog }: { karma: number; badgeCatalog?: { id: string; name: string; icon: string; description: string; earned: boolean; requirement: number }[] }) {
     const { t } = useTranslation()
@@ -373,7 +373,7 @@ function KarmaProgress({ karma, badgeCatalog }: { karma: number; badgeCatalog?:
     )
 }
 
-// ─── COMMUNITY COUNTERS ───────────────────────────────────────────────────────
+
 
 function CommunityCounters({ stats }: { stats: CommunityStats }) {
     const { t } = useTranslation()
@@ -412,7 +412,7 @@ function CommunityCounters({ stats }: { stats: CommunityStats }) {
     )
 }
 
-// ─── NGO GROWTH CHARTS ────────────────────────────────────────────────────────
+
 
 function NGOGrowthCharts({ monthly }: { monthly: MonthlyStatPoint[] }) {
     const { t } = useTranslation()
@@ -476,7 +476,7 @@ function NGOGrowthCharts({ monthly }: { monthly: MonthlyStatPoint[] }) {
     )
 }
 
-// ─── MAIN IMPACT PAGE ─────────────────────────────────────────────────────────
+
 
 export default function Impact() {
     const { t } = useTranslation()
diff --git a/frontend/src/pages/dashboard/NearExpiryAlerts.tsx b/frontend/src/pages/dashboard/NearExpiryAlerts.tsx
index 7aaf83d..1af39de 100644
--- a/frontend/src/pages/dashboard/NearExpiryAlerts.tsx
+++ b/frontend/src/pages/dashboard/NearExpiryAlerts.tsx
@@ -115,7 +115,7 @@ export default function NearExpiryAlerts() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-semibold text-white">{t('nearExpiryAlerts')}</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">{t('nearExpiryAlerts')}</h1>
           <p className="text-slate-400 mt-1">{t('nearExpiryDesc')}</p>
         </div>
         <button onClick={loadAlerts} className="btn-secondary py-2 px-3 text-sm flex items-center gap-2">
@@ -134,7 +134,7 @@ export default function NearExpiryAlerts() {
               key={f}
               type="button"
               onClick={() => setUrgency(f)}
-              className={`px-3 py-1.5 rounded-md text-sm capitalize ${urgency === f ? 'bg-emerald-500 text-white' : 'bg-slate-900 border border-slate-800 text-slate-300'}`}
+              className={`px-3 py-1.5 rounded-md text-sm capitalize ${urgency === f ? 'bg-emerald-500 text-white' : 'bg-gray-100 dark:bg-slate-900 border border-gray-200 dark:border-slate-800 text-gray-700 dark:text-slate-300'}`}
             >
               {f === 'all' ? t('all') : f === 'critical' ? t('critical') : t('warning')}
             </button>
@@ -149,7 +149,7 @@ export default function NearExpiryAlerts() {
             <div key={alert.id} className={`card p-4 border ${critical ? 'border-red-500/40' : 'border-amber-500/30'}`}>
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <p className="text-white font-medium flex items-center gap-2">
+                  <p className="text-gray-900 dark:text-white font-medium flex items-center gap-2">
                     <AlertTriangle className={`w-4 h-4 ${critical ? 'text-red-400' : 'text-amber-400'}`} />
                     {alert.food}
                   </p>
diff --git a/frontend/src/pages/dashboard/Notifications.tsx b/frontend/src/pages/dashboard/Notifications.tsx
index a8f5b48..453b4ac 100644
--- a/frontend/src/pages/dashboard/Notifications.tsx
+++ b/frontend/src/pages/dashboard/Notifications.tsx
@@ -128,7 +128,7 @@ export default function Notifications() {
                     <div className="text-center py-12 text-gray-500 dark:text-slate-500">{t('loadingNotifications')}</div>
                 ) : filtered.length === 0 ? (
                     <div className="text-center py-12">
-                        <Bell className="w-12 h-12 text-gray-300 dark:text-slate-700 mx-auto mb-3" />
+                        <Bell className="w-12 h-12 text-gray-700 dark:text-slate-300 mx-auto mb-3" />
                         <p className="text-gray-500 dark:text-slate-500">
                             {filter === 'unread' ? t('noUnreadNotifications') : t('noNotificationsYet')}
                         </p>
diff --git a/frontend/src/pages/dashboard/Preferences.tsx b/frontend/src/pages/dashboard/Preferences.tsx
index 08254ae..dc8748f 100644
--- a/frontend/src/pages/dashboard/Preferences.tsx
+++ b/frontend/src/pages/dashboard/Preferences.tsx
@@ -24,8 +24,8 @@ export default function Preferences() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-2xl font-semibold text-white">Accessibility</h1>
-        <p className="text-slate-400 mt-1">Configure keyboard navigation and readability settings.</p>
+        <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Preferences</h1>
+        <p className="text-gray-500 dark:text-slate-400 mt-1">Configure keyboard navigation and readability settings.</p>
       </div>
 
       <div className="card p-5 space-y-5">
@@ -59,12 +59,12 @@ export default function Preferences() {
       </div>
 
       {keyboardHints && (
-        <div className="card p-4 text-sm text-slate-300 space-y-2">
-          <div className="flex items-center gap-2 text-emerald-400 font-medium">
+        <div className="card p-4 text-sm text-gray-700 dark:text-slate-300 space-y-2">
+          <div className="flex items-center gap-2 text-emerald-600 dark:text-emerald-400 font-medium">
             <Accessibility className="w-4 h-4" />
             Keyboard Navigation
           </div>
-          <ul className="space-y-1 text-slate-400 ml-6 list-disc">
+          <ul className="space-y-1 text-gray-600 dark:text-slate-400 ml-6 list-disc">
             <li><kbd className="bg-slate-700 text-slate-200 px-1.5 py-0.5 rounded text-xs">Tab</kbd> — move focus forward</li>
             <li><kbd className="bg-slate-700 text-slate-200 px-1.5 py-0.5 rounded text-xs">Shift+Tab</kbd> — move focus backward</li>
             <li><kbd className="bg-slate-700 text-slate-200 px-1.5 py-0.5 rounded text-xs">Enter</kbd> / <kbd className="bg-slate-700 text-slate-200 px-1.5 py-0.5 rounded text-xs">Space</kbd> — activate buttons &amp; toggles</li>
@@ -88,18 +88,18 @@ function ToggleRow({ icon, label, desc, enabled, onToggle }: ToggleRowProps) {
   return (
     <div className="flex items-center justify-between gap-4">
       <div>
-        <p className="text-slate-200 flex items-center gap-2">
+        <p className="text-gray-900 dark:text-slate-200 flex items-center gap-2">
           {icon}
           {label}
         </p>
-        {desc && <p className="text-xs text-slate-500 mt-0.5 ml-6">{desc}</p>}
+        {desc && <p className="text-xs text-gray-500 dark:text-slate-400 mt-0.5 ml-6">{desc}</p>}
       </div>
       <button
         type="button"
         role="switch"
         aria-checked={enabled}
         onClick={onToggle}
-        className={`w-12 h-6 rounded-full p-1 transition ${enabled ? 'bg-emerald-500' : 'bg-slate-700'}`}
+        className={`w-12 h-6 rounded-full p-1 transition ${enabled ? 'bg-emerald-500' : 'bg-gray-300 dark:bg-slate-700'}`}
       >
         <span className={`block w-4 h-4 rounded-full bg-white transition ${enabled ? 'translate-x-6' : 'translate-x-0'}`} />
       </button>
diff --git a/frontend/src/pages/dashboard/Profile.tsx b/frontend/src/pages/dashboard/Profile.tsx
index 3d845e4..c92c50e 100644
--- a/frontend/src/pages/dashboard/Profile.tsx
+++ b/frontend/src/pages/dashboard/Profile.tsx
@@ -4,7 +4,7 @@ import { getUserProfile, updateUserProfile, type User } from '../../services/api
 import { User as UserIcon, Building, Phone, Mail, MapPin, Shield, Edit2, Check, Trophy, Star, AlertCircle, Loader2, Download, Award } from 'lucide-react'
 import { toast } from 'sonner'
 
-// ─── Certificate Modal (All Roles) ───────────────────────────────────────────
+
 
 interface CertificateProps {
     user: User
@@ -88,7 +88,7 @@ function CertificateModal({ user, onClose }: CertificateProps) {
 
                 {/* Toolbar */}
                 <div className="flex justify-between items-center px-6 py-4 border-b border-slate-200 bg-slate-50 rounded-t-2xl">
-                    <h3 className="text-lg font-semibold text-gray-200 dark:text-slate-800 flex items-center gap-2">
+                    <h3 className="text-lg font-semibold text-gray-800 dark:text-slate-200 flex items-center gap-2">
                         <Award className="w-5 h-5 text-emerald-600" />
                         {t('certificateOfAppreciation')}
                     </h3>
@@ -100,7 +100,7 @@ function CertificateModal({ user, onClose }: CertificateProps) {
                             <Download className="w-4 h-4" />
                             {t('printSavePDF')}
                         </button>
-                        <button onClick={onClose} className="bg-slate-200 hover:bg-slate-300 text-gray-300 dark:text-slate-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                        <button onClick={onClose} className="bg-slate-200 hover:bg-slate-300 text-gray-700 dark:text-slate-300 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                             {t('close')}
                         </button>
                     </div>
@@ -176,12 +176,12 @@ function CertificateModal({ user, onClose }: CertificateProps) {
                             <div>
                                 <div style={{ width: 160, borderBottom: '1px solid #d1d5db', marginBottom: 6 }} />
                                 <p className="text-xs text-gray-500 dark:text-slate-500" style={{ fontFamily: 'sans-serif' }}>{t('platformDirector')}</p>
-                                <p className="text-xs font-semibold text-gray-300 dark:text-slate-700" style={{ fontFamily: 'sans-serif' }}>{t('surplusSyncNetwork')}</p>
+                                <p className="text-xs font-semibold text-gray-700 dark:text-slate-300" style={{ fontFamily: 'sans-serif' }}>{t('surplusSyncNetwork')}</p>
                             </div>
                             <div className="text-2xl">🏅</div>
                             <div className="text-right">
                                 <p className="text-xs text-gray-500 dark:text-slate-500" style={{ fontFamily: 'sans-serif' }}>{t('dateOfIssue')}</p>
-                                <p className="text-sm font-semibold text-gray-300 dark:text-slate-700" style={{ fontFamily: 'sans-serif' }}>{today}</p>
+                                <p className="text-sm font-semibold text-gray-700 dark:text-slate-300" style={{ fontFamily: 'sans-serif' }}>{today}</p>
                             </div>
                         </div>
                     </div>
@@ -191,7 +191,7 @@ function CertificateModal({ user, onClose }: CertificateProps) {
     )
 }
 
-// ─── Main Profile Component ───────────────────────────────────────────────────
+
 
 export default function Profile() {
     const { t } = useTranslation()
diff --git a/frontend/src/pages/dashboard/SupportTickets.tsx b/frontend/src/pages/dashboard/SupportTickets.tsx
index 0b3963d..03802b1 100644
--- a/frontend/src/pages/dashboard/SupportTickets.tsx
+++ b/frontend/src/pages/dashboard/SupportTickets.tsx
@@ -90,7 +90,7 @@ export default function SupportTickets() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-semibold text-white">{t('supportTicketsTitle')}</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">{t('supportTicketsTitle')}</h1>
           <p className="text-slate-400 mt-1">{t('supportDesc')}</p>
         </div>
         <button onClick={load} disabled={loading} className="p-2 text-slate-400 hover:text-emerald-400 rounded-lg">
@@ -100,7 +100,7 @@ export default function SupportTickets() {
 
       <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
         <form onSubmit={submitTicket} className="xl:col-span-1 card p-5 space-y-4">
-          <h2 className="text-white font-semibold flex items-center gap-2">
+          <h2 className="text-gray-900 dark:text-white font-semibold flex items-center gap-2">
             <MessageSquare className="w-5 h-5 text-amber-400" />
             {t('createTicket')}
           </h2>
@@ -132,7 +132,7 @@ export default function SupportTickets() {
 
         <div className="xl:col-span-2 card p-5">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-white font-semibold">{t('ticketInbox')}</h2>
+            <h2 className="text-gray-900 dark:text-white font-semibold">{t('ticketInbox')}</h2>
             {isAdmin && (
               <span className="badge badge-info flex items-center gap-1">
                 <ShieldCheck className="w-3 h-3" />
diff --git a/frontend/src/pages/dashboard/VolunteerDashboard.tsx b/frontend/src/pages/dashboard/VolunteerDashboard.tsx
index 3fe93d9..6a70c62 100644
--- a/frontend/src/pages/dashboard/VolunteerDashboard.tsx
+++ b/frontend/src/pages/dashboard/VolunteerDashboard.tsx
@@ -20,7 +20,7 @@ import {
 } from 'lucide-react'
 import { toast } from 'sonner'
 
-// ─── Helpers ────────────────────────────────────────────────────────────────
+
 
 const VEHICLE_ICONS: Record<string, string> = {
   bike: '🏍️', car: '🚗', van: '🚐', bicycle: '🚲', walk: '🚶',
@@ -41,7 +41,7 @@ function openGoogleMaps(address: string, lat?: number, lng?: number) {
   window.open(`https://www.google.com/maps/dir/?api=1&destination=${dest}`, '_blank')
 }
 
-// ─── Sub-components ──────────────────────────────────────────────────────────
+
 
 function StatCard({ icon, label, value, accent }: {
   icon: React.ReactNode; label: string; value: string | number; accent: string
@@ -59,7 +59,7 @@ function StatCard({ icon, label, value, accent }: {
   )
 }
 
-// ─── Availability Toggle ──────────────────────────────────────────────────────
+
 
 function AvailabilityToggle({ isAvailable, onToggle, loading, t }: {
   isAvailable: boolean; onToggle: () => void; loading: boolean; t: (key: string) => string
@@ -86,7 +86,7 @@ function AvailabilityToggle({ isAvailable, onToggle, loading, t }: {
   )
 }
 
-// ─── Vehicle Profile Card ─────────────────────────────────────────────────────
+
 
 function VehicleProfile({ user, onSave, t }: { user: User; onSave: (data: { vehicleType?: string; vehicleNumber?: string }) => Promise<void>; t: (key: string) => string }) {
   const [editing, setEditing] = useState(false)
@@ -202,7 +202,7 @@ function VehicleProfile({ user, onSave, t }: { user: User; onSave: (data: { vehi
   )
 }
 
-// ─── Task Card ────────────────────────────────────────────────────────────────
+
 
 function TaskCard({
   donation,
@@ -308,7 +308,7 @@ function TaskCard({
   )
 }
 
-// ─── Completed Trips Tab ─────────────────────────────────────────────────────
+
 
 function CompletedTrips({ userId, t }: { userId: string; t: (key: string) => string }) {
   const [trips, setTrips] = useState<Donation[]>([])
@@ -364,7 +364,7 @@ function CompletedTrips({ userId, t }: { userId: string; t: (key: string) => str
   )
 }
 
-// ─── Detail Modal ─────────────────────────────────────────────────────────────
+
 
 function DetailModal({
   donation,
@@ -508,7 +508,7 @@ function DetailModal({
   )
 }
 
-// ─── Main Component ───────────────────────────────────────────────────────────
+
 
 export default function VolunteerDashboard() {
   const { t } = useTranslation()
diff --git a/frontend/src/pages/dashboard/VolunteerTracking.tsx b/frontend/src/pages/dashboard/VolunteerTracking.tsx
index 1816260..11a87dd 100644
--- a/frontend/src/pages/dashboard/VolunteerTracking.tsx
+++ b/frontend/src/pages/dashboard/VolunteerTracking.tsx
@@ -113,7 +113,7 @@ export default function VolunteerTracking() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-semibold text-white">Volunteer Location Tracking</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Volunteer Location Tracking</h1>
           <p className="text-slate-400 mt-1">Share live location and monitor route progress for active deliveries.</p>
         </div>
         <button onClick={load} disabled={loading} className="p-2 text-slate-400 hover:text-emerald-400 rounded-lg">
@@ -125,7 +125,7 @@ export default function VolunteerTracking() {
         {/* Map Panel */}
         <div className="xl:col-span-2 card p-5">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-white font-semibold flex items-center gap-2">
+            <h2 className="text-gray-900 dark:text-white font-semibold flex items-center gap-2">
               <Navigation2 className="w-5 h-5 text-emerald-400" />
               Live Location
             </h2>
@@ -171,7 +171,7 @@ export default function VolunteerTracking() {
 
         {/* Deliveries Panel */}
         <div className="card p-5">
-          <h2 className="text-white font-semibold mb-4 flex items-center gap-2">
+          <h2 className="text-gray-900 dark:text-white font-semibold mb-4 flex items-center gap-2">
             <Timer className="w-5 h-5 text-amber-400" />
             Active Deliveries
           </h2>

From 8bcc16ca4ba754cf865ddc7a2aac977fd791bf9c Mon Sep 17 00:00:00 2001
From: Destroyer795 <ty.pranavkishan7905@gmail.com>
Date: Thu, 12 Mar 2026 01:27:27 +0530
Subject: [PATCH 2/2] Fix Preferences test text matcher

---
 frontend/src/__tests__/pages/dashboard/Preferences.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/__tests__/pages/dashboard/Preferences.test.tsx b/frontend/src/__tests__/pages/dashboard/Preferences.test.tsx
index a7b3cfa..2af10ca 100644
--- a/frontend/src/__tests__/pages/dashboard/Preferences.test.tsx
+++ b/frontend/src/__tests__/pages/dashboard/Preferences.test.tsx
@@ -13,7 +13,7 @@ describe('Preferences', () => {
   it('renders accessibility settings without a language selector', () => {
     render(<Preferences />)
 
-    expect(screen.getByText('Accessibility')).toBeTruthy()
+    expect(screen.getByText('Preferences')).toBeTruthy()
     expect(screen.getByText('High contrast mode')).toBeTruthy()
     expect(screen.getByText('Large text mode')).toBeTruthy()
     expect(screen.queryByDisplayValue('English')).toBeNull()