Skip to content

fix(web): raise accessibility floor on text contrast and label sizes (#60) #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mimionly wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(web): raise accessibility floor on text contrast and label sizes (#60) #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions apps/web/src/components/CompletionScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>

Expand Down
12 changes: 6 additions & 6 deletions apps/web/src/components/ProgressScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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' && (
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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">
Expand Down
10 changes: 5 additions & 5 deletions apps/web/src/components/RatingScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand Down