Skip to content

Commit 3d7f53c

Browse files
Chaithra0206Chaithra0206
committed
reduced size of stall directory
1 parent 9fc091a commit 3d7f53c

1 file changed

Lines changed: 32 additions & 35 deletions

File tree

‎apps/web/src/components/ProgressScreen.tsx‎

Lines changed: 32 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,19 @@ interface ProgressScreenProps {
2121
ratedStalls?: Array<{ stallId: number, stallName: string, rating: number }>;
2222
totalCount?: number;
2323
serverProgress?: number;
24+
allStalls?: Array<{ id: number, name: string }>;
2425
}
2526

2627
export default function ProgressScreen({
2728
onScanNext,
2829
ratings = {},
2930
totalCount = 11,
30-
serverProgress = 0
31+
serverProgress = 0,
32+
allStalls = []
3133
}: ProgressScreenProps) {
32-
// Always use the server's synced progress as the ultimate source of truth, fallback to local if 0
34+
// Always use the server's synced progress as the ultimate source of truth
3335
const localRatedCount = Object.keys(ratings).length;
34-
const ratedCount = Math.max(serverProgress, localRatedCount);
36+
const ratedCount = serverProgress > 0 ? serverProgress : localRatedCount;
3537

3638
return (
3739
<div className="fixed inset-0 overflow-y-auto overflow-x-hidden bg-[#070014]">
@@ -67,6 +69,13 @@ export default function ProgressScreen({
6769
</div>
6870
{/* Directory Section */}
6971
<div className="pb-8">
72+
<div className="bg-white/5 border border-white/10 rounded-2xl p-3 flex items-center gap-3 relative z-10 mb-6">
73+
<span className="text-lg leading-none drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]">🏆</span>
74+
<p className="text-white/90 text-xs font-medium leading-none">
75+
You are voting for the People's Choice Award.
76+
</p>
77+
</div>
78+
7079
<div className="mb-6 flex items-center justify-between">
7180
<h3 className="text-xl font-bold font-display text-white/90">Stall Directory</h3>
7281
<div className="flex items-center gap-2">
@@ -75,36 +84,37 @@ export default function ProgressScreen({
7584
</div>
7685
</div>
7786

78-
<div className="grid grid-cols-4 gap-3">
87+
<div className="grid grid-cols-6 gap-2">
7988
{Array.from({ length: totalCount }).map((_, index) => {
80-
const status = ratings[String(index + 1)] !== undefined ? 'rated' : 'locked';
89+
const stallId = index + 1;
90+
const status = index < ratedCount ? 'rated' : 'locked';
8191

8292
return (
8393
<motion.div
84-
key={`slot-${index}`}
94+
key={`slot-${stallId}`}
8595
initial={{ opacity: 0, scale: 0.8 }}
8696
animate={{ opacity: 1, scale: 1 }}
87-
transition={{ delay: index * 0.03 }}
97+
transition={{ delay: index * 0.02 }}
8898
className={cn(
89-
"aspect-square rounded-2xl flex flex-col items-center justify-center border transition-all relative overflow-hidden",
99+
"aspect-square rounded-xl flex flex-col items-center justify-center border transition-all relative overflow-hidden",
90100
status === 'locked'
91101
? 'bg-white/5 border-white/5 opacity-40'
92102
: 'bg-white/10 border-white/20 shadow-lg'
93103
)}
94104
>
95105
{status === 'rated' ? (
96-
<CheckCircle2 className="w-6 h-6 text-[#00E5FF] drop-shadow-[0_0_8px_rgba(0,229,255,0.4)]" />
106+
<CheckCircle2 className="w-5 h-5 text-[#00E5FF] drop-shadow-[0_0_8px_rgba(0,229,255,0.4)]" />
97107
) : (
98-
<Lock className="w-5 h-5 text-white/20" />
108+
<Lock className="w-4 h-4 text-white/20" />
99109
)}
100110

101111
{status === 'rated' && (
102112
<motion.div
103113
initial={{ scale: 0 }}
104114
animate={{ scale: 1 }}
105-
className="absolute top-0 right-0 w-4 h-4 bg-[#00E5FF] rounded-bl-lg flex items-center justify-center"
115+
className="absolute top-0 right-0 w-3 h-3 bg-[#00E5FF] rounded-bl-md flex items-center justify-center"
106116
>
107-
<div className="w-1.5 h-1.5 bg-black rounded-full" />
117+
<div className="w-1 h-1 bg-black rounded-full" />
108118
</motion.div>
109119
)}
110120
</motion.div>
@@ -117,25 +127,12 @@ export default function ProgressScreen({
117127
<motion.div
118128
initial={{ opacity: 0, y: 20 }}
119129
animate={{ opacity: 1, y: 0 }}
120-
className="bg-white/[0.04] backdrop-blur-xl border border-white/20 rounded-[32px] p-8 shadow-[0_8px_32px_rgba(0,0,0,0.5)] mb-6 relative overflow-hidden"
130+
className="flex items-center justify-center gap-3 mb-6"
121131
>
122-
{/* Inner subtle glow */}
123-
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.08] to-transparent pointer-events-none" />
124-
<div className="bg-white/5 border border-white/10 rounded-2xl p-4 flex flex-col gap-3 relative z-10">
125-
<div className="flex items-start gap-4">
126-
<span className="text-xl leading-none pt-0.5 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]">🏆</span>
127-
<p className="text-white/90 text-sm font-medium leading-snug">
128-
You are voting for the People's Choice Award.
129-
</p>
130-
</div>
131-
132-
<div className="flex items-start gap-3 bg-white/5 border border-white/10 rounded-xl p-3">
133-
<span className="text-amber-400 text-sm leading-none pt-1 drop-shadow-[0_0_8px_rgba(251,191,36,0.6)]">⚠️</span>
134-
<p className="text-white/70 text-xs font-medium leading-relaxed">
135-
Your votes will be counted only if you rate <span className="text-white font-bold">all 11 stalls</span>.
136-
</p>
137-
</div>
138-
</div>
132+
<span className="text-amber-400 text-sm leading-none drop-shadow-[0_0_8px_rgba(251,191,36,0.6)]">⚠️</span>
133+
<p className="text-white/70 text-[11px] font-medium leading-none m-0">
134+
Your votes will be counted only if you rate <span className="text-white font-bold">all 11 stalls</span>.
135+
</p>
139136
</motion.div>
140137

141138
{/* Scan Button / Completion Action */}
@@ -171,11 +168,11 @@ export default function ProgressScreen({
171168
rel="noopener noreferrer"
172169
className="flex items-center justify-center gap-3 hover:opacity-80 transition-opacity"
173170
>
174-
<img
175-
src="/Consortium Logo.svg"
176-
alt="DK24"
177-
className="h-15 sm:h-15 w-auto object-contain"
178-
/>
171+
<img
172+
src="/Consortium Logo.svg"
173+
alt="DK24"
174+
className="h-15 sm:h-15 w-auto object-contain"
175+
/>
179176
</a>
180177
</div>
181178

0 commit comments

Comments
 (0)