From 50ee46fc1acb422877de8e0d4ff94e7d1676c8b1 Mon Sep 17 00:00:00 2001
From: mimionly <diasminora2613@gmail.com>
Date: Tue, 13 Oct 2026 15:09:22 +0530
Subject: [PATCH] fix: improve contrast in web screens

---
 apps/web/src/components/CompletionScreen.tsx |  8 ++++----
 apps/web/src/components/Footer.tsx           |  4 ++--
 apps/web/src/components/ProgressScreen.tsx   | 12 ++++++------
 apps/web/src/components/RatingScreen.tsx     | 10 +++++-----
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/CompletionScreen.tsx b/apps/web/src/components/CompletionScreen.tsx
index 0a6a4bb..547da78 100644
--- a/apps/web/src/components/CompletionScreen.tsx
+++ b/apps/web/src/components/CompletionScreen.tsx
@@ -67,11 +67,11 @@ export default function CompletionScreen({
                 <CheckCircle2 className="w-7 h-7 text-[#8B5CF6]" />
               </div>
               <div className="flex-1 min-w-0">
-                <span className="text-[10px] font-bold uppercase tracking-widest text-[#8B5CF6] block mb-1 font-display">VOTED</span>
+                <span className="text-xs font-bold uppercase tracking-widest text-[#8B5CF6] block mb-1 font-display">VOTED</span>
                 <div className="flex items-baseline gap-1">
                   <span className="text-3xl font-black text-slate-800">11/11</span>
                 </div>
-                <span className="text-[11px] font-medium text-slate-400">Rating Success</span>
+                <span className="text-xs font-medium text-slate-600">Rating Success</span>
               </div>
             </motion.div>
           </div>
@@ -101,7 +101,7 @@ export default function CompletionScreen({
           <div className="flex flex-col items-center gap-6 relative z-10 w-full shrink-0">
             {/* Powered By Section */}
             <div className="flex flex-col items-center">
-              <span className="text-[10px] uppercase tracking-[0.2em] font-bold opacity-30 text-center font-display mb-3">
+              <span className="text-xs uppercase tracking-[0.2em] font-bold opacity-60 text-center font-display mb-3">
                 Powered By
               </span>
               <a
@@ -120,7 +120,7 @@ export default function CompletionScreen({
 
             {/* In Collaboration Section */}
             <div className="flex flex-col items-center">
-              <span className="text-[10px] uppercase tracking-[0.2em] font-bold opacity-30 text-center font-display mb-3">
+              <span className="text-xs uppercase tracking-[0.2em] font-bold opacity-60 text-center font-display mb-3">
                 In Collaboration with
               </span>
               <div className="flex items-center justify-center gap-6 sm:gap-8">
diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
index 78a7439..842f12e 100644
--- a/apps/web/src/components/Footer.tsx
+++ b/apps/web/src/components/Footer.tsx
@@ -20,7 +20,7 @@ export default function Footer({
 
         {/* POWERED BY */}
         <div className="flex flex-col items-center">
-          <span className="text-[10px] sm:text-[12px] uppercase tracking-[0.2em] font-bold opacity-70 text-center mb-2">
+          <span className="text-xs uppercase tracking-[0.2em] font-bold opacity-70 text-center mb-2">
             Powered By
           </span>
 
@@ -40,7 +40,7 @@ export default function Footer({
 
         {/* COLLAB */}
         <div className="flex flex-col items-center">
-          <span className="text-[10px] sm:text-[12px] uppercase tracking-[0.2em] font-bold opacity-70 text-center mb-2 sm:mb-3">
+          <span className="text-xs uppercase tracking-[0.2em] font-bold opacity-70 text-center mb-2 sm:mb-3">
             In Collaboration With
           </span>
 
diff --git a/apps/web/src/components/ProgressScreen.tsx b/apps/web/src/components/ProgressScreen.tsx
index 62e9720..febb6d6 100644
--- a/apps/web/src/components/ProgressScreen.tsx
+++ b/apps/web/src/components/ProgressScreen.tsx
@@ -81,7 +81,7 @@ export default function ProgressScreen({
                 <h3 className="text-xl font-bold font-display text-white/90">Item Directory</h3>
                 <div className="flex items-center gap-2">
                   <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-                  <span className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Live Updates</span>
+                  <span className="text-xs font-bold text-white/60 uppercase tracking-widest">Live Updates</span>
                 </div>
               </div>
 
@@ -99,14 +99,14 @@ export default function ProgressScreen({
                       className={cn(
                         "aspect-square rounded-xl flex flex-col items-center justify-center border transition-all relative overflow-hidden",
                         status === 'locked'
-                          ? 'bg-white/5 border-white/5 opacity-40'
+                          ? 'bg-white/5 border-white/5 opacity-60'
                           : 'bg-white/10 border-white/20 shadow-lg'
                       )}
                     >
                       {status === 'rated' ? (
                         <CheckCircle2 className="w-5 h-5 text-[#00E5FF] drop-shadow-[0_0_8px_rgba(0,229,255,0.4)]" />
                       ) : (
-                        <Lock className="w-4 h-4 text-white/20" />
+                        <Lock className="w-4 h-4 text-white/60" />
                       )}
 
                       {status === 'rated' && (
@@ -131,7 +131,7 @@ export default function ProgressScreen({
               className="flex items-center justify-center gap-3 mb-6"
             >
               <span className="text-amber-400 text-sm leading-none drop-shadow-[0_0_8px_rgba(251,191,36,0.6)]">⚠️</span>
-              <p className="text-white/70 text-[11px] font-medium leading-none m-0">
+              <p className="text-white/70 text-xs font-medium leading-none m-0">
                 Your votes will be counted only if you rate <span className="text-white font-bold">all 11 items</span>.
               </p>
             </motion.div>
@@ -160,7 +160,7 @@ export default function ProgressScreen({
             <div className="mt-4 flex flex-col items-center gap-5 relative z-10">
               {/* Powered By Section */}
               <div className="flex flex-col items-center">
-                <span className="text-[10px] uppercase tracking-[0.2em] font-bold opacity-40 text-center font-display mb-3">
+                <span className="text-xs uppercase tracking-[0.2em] font-bold opacity-60 text-center font-display mb-3">
                   Powered By
                 </span>
                 <a
@@ -179,7 +179,7 @@ export default function ProgressScreen({
 
               {/* In Collaboration Section */}
               <div className="flex flex-col items-center mb-4">
-                <span className="text-[10px] uppercase tracking-[0.2em] font-bold opacity-40 text-center font-display mb-4">
+                <span className="text-xs uppercase tracking-[0.2em] font-bold opacity-60 text-center font-display mb-4">
                   In Collaboration with
                 </span>
                 <div className="flex items-center justify-center gap-5 sm:gap-8">
diff --git a/apps/web/src/components/RatingScreen.tsx b/apps/web/src/components/RatingScreen.tsx
index ba0342b..1a839f3 100644
--- a/apps/web/src/components/RatingScreen.tsx
+++ b/apps/web/src/components/RatingScreen.tsx
@@ -63,7 +63,7 @@ export default function RatingScreen({ itemData, onSubmitSuccess }: RatingScreen
           {/* CURRENT ITEM */}
           <div className="flex items-center gap-4 justify-center mb-3 mt-4">
             <div className="h-[1px] w-12 bg-gradient-to-r from-transparent to-blue-400/60" />
-            <span className="text-[11px] uppercase tracking-[0.25em] font-semibold text-blue-100/90 shadow-blue-500 max-w-min text-center whitespace-nowrap">Current Item</span>
+            <span className="text-xs uppercase tracking-[0.25em] font-semibold text-blue-100/90 shadow-blue-500 max-w-min text-center whitespace-nowrap">Current Item</span>
             <div className="h-[1px] w-12 bg-gradient-to-l from-transparent to-blue-400/60" />
           </div>
 
@@ -177,7 +177,7 @@ export default function RatingScreen({ itemData, onSubmitSuccess }: RatingScreen
                   ? `bg-white text-black shadow-2xl`
                   : isSubmitted
                     ? 'bg-emerald-500 text-white'
-                    : 'bg-white/5 border border-white/10 text-white/30 cursor-not-allowed backdrop-blur-sm'}
+                    : 'bg-white/5 border border-white/10 text-white/60 cursor-not-allowed backdrop-blur-sm'}
               `}
               style={{
                 minWidth: "220px"
@@ -195,7 +195,7 @@ export default function RatingScreen({ itemData, onSubmitSuccess }: RatingScreen
           <div className="mt-4 flex flex-col items-center gap-5 relative z-10">
             {/* Powered By Section */}
             <div className="flex flex-col items-center">
-              <span className="text-[10px] uppercase tracking-[0.2em] font-bold opacity-40 text-center font-display mb-3">
+              <span className="text-xs uppercase tracking-[0.2em] font-bold opacity-60 text-center font-display mb-3">
                 Powered By
               </span>
               <a
@@ -214,7 +214,7 @@ export default function RatingScreen({ itemData, onSubmitSuccess }: RatingScreen
 
             {/* In Collaboration Section */}
             <div className="flex flex-col items-center mb-4">
-              <span className="text-[10px] uppercase tracking-[0.2em] font-bold opacity-40 text-center font-display mb-4">
+              <span className="text-xs uppercase tracking-[0.2em] font-bold opacity-60 text-center font-display mb-4">
                 In Collaboration with
               </span>
               <div className="flex items-center justify-center gap-5 sm:gap-8">
@@ -263,7 +263,7 @@ export default function RatingScreen({ itemData, onSubmitSuccess }: RatingScreen
             <div className="bg-white/[0.03] backdrop-blur-xl rounded-2xl border border-white/20 p-6 relative shadow-lg">
               <div className="flex items-center gap-4 justify-center mb-5">
                 <div className="h-[1px] w-10 bg-gradient-to-r from-transparent to-white/30" />
-                <span className="text-[10px] uppercase tracking-[0.2em] font-semibold text-white/50">About this Startup</span>
+                <span className="text-xs uppercase tracking-[0.2em] font-semibold text-white/60">About this Startup</span>
                 <div className="h-[1px] w-10 bg-gradient-to-l from-transparent to-white/30" />
               </div>
               <p className="text-white/70 text-[13px] sm:text-sm leading-relaxed text-center">