Fix remaining dark theme pages: thread detail and halal monitor

forum/[threadId]/page.tsx and halal-monitor/page.tsx were missed in
the initial light theme pass — now fully converted to white cards,
emerald buttons, and light backgrounds.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/halal-monitor/page.tsx

@@ -27,24 +27,24 @@ interface MapCenter {
 
 function UpgradeCTA() {
   return (
-    <div className="max-w-6xl mx-auto p-8 flex flex-col items-center justify-center min-h-[60vh] text-center space-y-4">
-      <Crown size={48} className="text-[#D4AF37]" />
-      <h1 className="text-2xl font-bold text-[#D4AF37]">Halal Monitor</h1>
-      <p className="text-gray-400 max-w-md">
+    <div className="min-h-dvh bg-[#f5f4f0] pb-24 flex flex-col items-center justify-center px-6 text-center space-y-4">
+      <div className="w-16 h-16 rounded-2xl bg-amber-50 flex items-center justify-center">
+        <Crown size={32} className="text-amber-500" />
+      </div>
+      <h1 className="text-2xl font-bold text-gray-900">Halal Monitor</h1>
+      <p className="text-gray-500 max-w-md text-sm">
         Find mosques and halal restaurants anywhere in the world. Available to Premium members.
       </p>
-      <div className="bg-[#111118] border border-gray-800 rounded-lg p-6 max-w-sm w-full space-y-3">
-        <Crown size={32} className="text-[#D4AF37] mx-auto" />
-        <h2 className="font-bold">Upgrade to Premium</h2>
-        <ul className="text-sm text-gray-400 space-y-1 text-left">
-          <li>• Mosques and prayer spaces worldwide</li>
-          <li>• Halal restaurants near you</li>
-          <li>• Bookmark favourite places</li>
-          <li>• City search anywhere in the world</li>
+      <div className="bg-white border border-gray-100 shadow-md rounded-3xl p-6 max-w-sm w-full space-y-3">
+        <ul className="text-sm text-gray-500 space-y-2 text-left">
+          <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> Mosques and prayer spaces worldwide</li>
+          <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> Halal restaurants near you</li>
+          <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> Bookmark favourite places</li>
+          <li className="flex items-center gap-2"><span className="text-emerald-500">✓</span> City search anywhere in the world</li>
         </ul>
         <a
           href="/upgrade"
-          className="block w-full bg-[#D4AF37] text-[#0a0a0f] py-2 rounded font-semibold hover:bg-[#C9A84C] transition text-center"
+          className="block w-full bg-emerald-600 text-white py-3.5 rounded-2xl font-bold active:scale-[0.97] transition-transform text-center"
         >
           Upgrade Now
         </a>
@@ -55,15 +55,17 @@ function UpgradeCTA() {
 
 function LoginGate() {
   return (
-    <div className="max-w-6xl mx-auto p-8 flex flex-col items-center justify-center min-h-[60vh] text-center space-y-4">
-      <Lock size={48} className="text-gray-600" />
-      <h1 className="text-2xl font-bold text-[#D4AF37]">Halal Monitor</h1>
-      <p className="text-gray-400 max-w-md">
+    <div className="min-h-dvh bg-[#f5f4f0] pb-24 flex flex-col items-center justify-center px-6 text-center space-y-4">
+      <div className="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center">
+        <Lock size={32} className="text-gray-400" />
+      </div>
+      <h1 className="text-2xl font-bold text-gray-900">Halal Monitor</h1>
+      <p className="text-gray-500 max-w-md text-sm">
         Sign in to access the global halal map — mosques, prayer spaces, and halal restaurants near you.
       </p>
       <a
         href="/login"
-        className="inline-flex items-center gap-2 bg-[#D4AF37] text-[#0a0a0f] px-6 py-2 rounded font-semibold hover:bg-[#C9A84C] transition"
+        className="inline-flex items-center gap-2 bg-emerald-600 text-white px-8 py-4 rounded-2xl font-bold active:scale-[0.97] transition-transform"
       >
         Sign In
       </a>
@@ -190,7 +192,11 @@ export default function HalalMonitorPage() {
   }
 
   if (authLoading) {
-    return <div className="p-8 text-center text-gray-500 animate-pulse">Loading...</div>
+    return (
+      <div className="min-h-dvh bg-[#f5f4f0] pb-24 flex items-center justify-center">
+        <div className="w-8 h-8 rounded-full border-2 border-emerald-300 border-t-emerald-600 animate-spin" />
+      </div>
+    )
   }
   if (!token || !user) return <LoginGate />
   if (!user.isPremium && !user.isPro) return <UpgradeCTA />
@@ -201,35 +207,35 @@ export default function HalalMonitorPage() {
   return (
     <div className="flex flex-col h-[calc(100vh-3.5rem)]">
       {/* Toolbar */}
-      <div className="bg-[#111118] border-b border-gray-800 px-4 py-2 flex items-center gap-3 shrink-0 flex-wrap">
-        <div className="flex items-center gap-2">
-          <Crown size={16} className="text-[#D4AF37]" />
-          <span className="text-sm font-semibold text-[#D4AF37]">Halal Monitor</span>
+      <div className="bg-white border-b border-gray-100 px-4 py-2.5 flex items-center gap-3 shrink-0 flex-wrap">
+        <div className="flex items-center gap-1.5">
+          <Crown size={15} className="text-amber-500" />
+          <span className="text-sm font-semibold text-gray-900">Halal Monitor</span>
         </div>
         <form onSubmit={handleCitySearch} className="flex gap-2 flex-1 max-w-sm">
           <div className="relative flex-1">
-            <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500" />
+            <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" />
             <input
               type="text"
               placeholder="Search city..."
               value={citySearch}
               onChange={e => setCitySearch(e.target.value)}
-              className="w-full bg-[#0a0a0f] border border-gray-700 rounded pl-8 pr-3 py-1.5 text-xs focus:border-[#D4AF37] outline-none"
+              className="w-full bg-gray-50 border border-gray-200 rounded-xl pl-8 pr-3 py-1.5 text-xs text-gray-900 placeholder-gray-400 focus:border-emerald-400 outline-none"
             />
           </div>
-          <button type="submit" className="bg-[#D4AF37] text-[#0a0a0f] px-3 py-1.5 rounded text-xs font-semibold hover:bg-[#C9A84C] transition">
+          <button type="submit" className="bg-emerald-600 text-white px-3 py-1.5 rounded-xl text-xs font-semibold active:scale-[0.97] transition-transform">
             Go
           </button>
         </form>
         <button
           onClick={handleGeolocate}
-          className="flex items-center gap-1 text-xs text-gray-400 hover:text-[#D4AF37] transition"
+          className="flex items-center gap-1 text-xs text-gray-500 active:text-emerald-600 transition"
         >
-          <Navigation size={14} /> Near me
+          <Navigation size={13} /> Near me
         </button>
-        {loading && <Loader2 size={14} className="animate-spin text-[#D4AF37]" />}
+        {loading && <Loader2 size={14} className="animate-spin text-emerald-600" />}
         {places.length > 0 && (
-          <span className="text-xs text-gray-500 ml-auto">
+          <span className="text-xs text-gray-400 ml-auto">
             {mosques.length} mosques · {restaurants.length} restaurants
           </span>
         )}
@@ -237,8 +243,8 @@ export default function HalalMonitorPage() {
 
       {/* Error bar */}
       {error && (
-        <div className="bg-red-900/20 border-b border-red-800 px-4 py-2 flex items-center justify-between shrink-0">
-          <span className="text-xs text-red-400">{error}</span>
+        <div className="bg-red-50 border-b border-red-100 px-4 py-2 flex items-center justify-between shrink-0">
+          <span className="text-xs text-red-600">{error}</span>
           <button onClick={() => setError(null)}><X size={14} className="text-red-400" /></button>
         </div>
       )}
@@ -246,12 +252,12 @@ export default function HalalMonitorPage() {
       {/* Map */}
       <div className="flex-1 relative">
         {!center ? (
-          <div className="absolute inset-0 flex flex-col items-center justify-center text-center space-y-4">
-            <MapPin size={40} className="text-gray-700" />
+          <div className="absolute inset-0 flex flex-col items-center justify-center text-center space-y-4 bg-[#f5f4f0]">
+            <MapPin size={40} className="text-gray-300" />
             <p className="text-gray-500 text-sm">Search a city or use your location to find halal places.</p>
             <button
               onClick={handleGeolocate}
-              className="flex items-center gap-2 bg-[#D4AF37] text-[#0a0a0f] px-4 py-2 rounded text-sm font-semibold hover:bg-[#C9A84C] transition"
+              className="flex items-center gap-2 bg-emerald-600 text-white px-5 py-3 rounded-2xl text-sm font-semibold active:scale-[0.97] transition-transform"
             >
               <Navigation size={16} /> Use My Location
             </button>