Skip to content

fix: impeccable review - a11y, performance, design quality #26

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

Merged
m4cd4r4 merged 1 commit into from
Mar 16, 2026
Merged

fix: impeccable review - a11y, performance, design quality #26

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
2 changes: 1 addition & 1 deletion demo-video/src/BrightClauseDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const SLIDE_T = 20;

export const BrightClauseDemo: React.FC = () => {
return (
<AbsoluteFill style={{ backgroundColor: "#06060a" }}>
<AbsoluteFill style={{ backgroundColor: "#0d0b08" }}>
<TransitionSeries>
{/* Intro */}
<TransitionSeries.Sequence durationInFrames={INTRO} premountFor={30}>
Expand Down
6 changes: 3 additions & 3 deletions demo-video/src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { CSSProperties } from "react";

export const colors = {
bg: "#06060a",
bgCard: "#0d0d14",
bgCardHover: "#12121c",
bg: "#0d0b08",
bgCard: "#14120e",
bgCardHover: "#1c1a15",
border: "#1a1a2e",
borderLight: "#252540",
accent: "#c9a227",
Expand Down
50 changes: 25 additions & 25 deletions frontend/src/app/analytics/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export default function AnalyticsPage() {
className="col-span-2 lg:col-span-1 card p-6"
>
<div className="text-center">
<div className="text-[10px] font-mono uppercase tracking-widest text-ink-500 mb-3">
<div className="text-[11px] font-mono uppercase tracking-widest text-ink-500 mb-3">
Portfolio Health
</div>
<div className="relative w-24 h-24 mx-auto">
Expand All @@ -249,7 +249,7 @@ export default function AnalyticsPage() {
</span>
</div>
</div>
<p className="text-[10px] text-ink-500 mt-2 font-mono uppercase">
<p className="text-[11px] text-ink-500 mt-2 font-mono uppercase">
{portfolioStats.healthScore >= 70 ? 'Good Standing' : portfolioStats.healthScore >= 40 ? 'Needs Review' : 'At Risk'}
</p>
</div>
Expand Down Expand Up @@ -282,7 +282,7 @@ export default function AnalyticsPage() {
<p className={`text-2xl font-bold font-mono ${riskConfig[level].color}`}>
{portfolioStats[level]}
</p>
<p className="text-[10px] text-ink-500 font-mono uppercase tracking-wide mt-1">
<p className="text-[11px] text-ink-500 font-mono uppercase tracking-wide mt-1">
{riskConfig[level].label} Risk
</p>
</motion.div>
Expand All @@ -304,7 +304,7 @@ export default function AnalyticsPage() {
Clause types vs. documents &middot; {loadingAnalyses ? 'Loading...' : `${docAnalyses.length} contracts`}
</p>
</div>
<div className="flex items-center gap-3 text-[10px] font-mono uppercase">
<div className="flex items-center gap-3 text-[11px] font-mono uppercase">
{(['critical', 'high', 'medium', 'low'] as RiskLevel[]).map(level => (
<div key={level} className="flex items-center gap-1.5">
<div className={`w-3 h-3 rounded-sm ${riskCellColors[level]}`} />
Expand All @@ -323,17 +323,17 @@ export default function AnalyticsPage() {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-ink-800/30">
<th className="sticky left-0 bg-ink-950 z-10 px-4 py-3 text-left text-[10px] font-mono uppercase tracking-widest text-ink-500 min-w-[180px]">
<th className="sticky left-0 bg-ink-950 z-10 px-4 py-3 text-left text-[11px] font-mono uppercase tracking-widest text-ink-500 min-w-[180px]">
Document
</th>
{allClauseTypes.map(type => (
<th key={type} className="px-2 py-3 text-center min-w-[70px]">
<span className="text-[9px] font-mono uppercase tracking-wide text-ink-500 whitespace-nowrap">
<span className="text-[11px] font-mono uppercase tracking-wide text-ink-500 whitespace-nowrap">
{formatClauseType(type)}
</span>
</th>
))}
<th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-ink-500">
<th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-ink-500">
Overall
</th>
</tr>
Expand All @@ -359,7 +359,7 @@ export default function AnalyticsPage() {
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ delay: rowIdx * 0.02 + allClauseTypes.indexOf(type) * 0.01 }}
className={`w-8 h-8 rounded-md mx-auto flex items-center justify-center text-[10px] font-mono font-bold
className={`w-8 h-8 rounded-md mx-auto flex items-center justify-center text-[11px] font-mono font-bold
${topRisk ? riskCellColors[topRisk] : riskCellColors.none}
${topRisk ? 'text-ink-100' : 'text-ink-700'}`}
title={clauseData ? `${clauseData.total} clause(s) - ${topRisk || 'unknown'} risk` : 'Not found'}
Expand All @@ -370,7 +370,7 @@ export default function AnalyticsPage() {
)
})}
<td className="px-4 py-3 text-center">
<span className={`inline-flex px-2.5 py-1 rounded-md text-[10px] font-mono font-bold uppercase tracking-wide
<span className={`inline-flex px-2.5 py-1 rounded-md text-[11px] font-mono font-bold uppercase tracking-wide
${summary?.overall_risk ? riskConfig[summary.overall_risk]?.color : 'text-ink-500'}
${summary?.overall_risk ? riskConfig[summary.overall_risk]?.bg + '/10' : 'bg-ink-800/30'}`}>
{summary?.overall_risk || '?'}
Expand Down Expand Up @@ -415,18 +415,18 @@ export default function AnalyticsPage() {
<div className="flex items-center justify-between mb-1">
<span className="text-xs font-medium text-ink-300">{formatClauseType(type)}</span>
<div className="flex items-center gap-2">
<span className={`text-[10px] font-mono ${topRisk ? riskConfig[topRisk]?.color : 'text-ink-500'}`}>
<span className={`text-[11px] font-mono ${topRisk ? riskConfig[topRisk]?.color : 'text-ink-500'}`}>
{topRisk?.toUpperCase() || 'N/A'}
</span>
<span className="text-xs font-mono text-ink-400">{data.total}</span>
</div>
</div>
<div className="h-2 bg-ink-800/50 rounded-full overflow-hidden">
<motion.div
initial={{ width: 0 }}
animate={{ width: `${pct}%` }}
initial={{ scaleX: 0 }}
animate={{ scaleX: pct / 100 }}
transition={{ delay: 0.4 + i * 0.03, duration: 0.5 }}
className={`h-full rounded-full ${topRisk ? riskConfig[topRisk]?.bg : 'bg-ink-600'}`}
className={`h-full w-full rounded-full origin-left ${topRisk ? riskConfig[topRisk]?.bg : 'bg-ink-600'}`}
style={{ opacity: 0.6 }}
/>
</div>
Expand Down Expand Up @@ -480,7 +480,7 @@ export default function AnalyticsPage() {
<span className="text-xs font-semibold uppercase tracking-wide text-ink-200">
{formatClauseType(highlight.clause_type)}
</span>
<span className={`text-[9px] font-mono uppercase px-1.5 py-0.5 rounded ${
<span className={`text-[11px] font-mono uppercase px-1.5 py-0.5 rounded ${
highlight.risk_level === 'critical'
? 'bg-red-500/15 text-red-400'
: 'bg-orange-500/15 text-orange-400'
Expand Down Expand Up @@ -542,7 +542,7 @@ export default function AnalyticsPage() {
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-ink-800/50 text-ink-400">
<span className="px-2 py-0.5 rounded text-[11px] font-mono uppercase bg-ink-800/50 text-ink-400">
{entity.entity_type}
</span>
<span className="text-sm font-medium text-ink-200">{entity.normalized_name}</span>
Expand Down Expand Up @@ -598,15 +598,15 @@ export default function AnalyticsPage() {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-ink-800/30">
<th className="px-6 py-3 text-left text-[10px] font-mono uppercase tracking-widest text-ink-500">Document</th>
<th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-ink-500">Clauses</th>
<th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-red-400/70">Crit</th>
<th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-orange-400/70">High</th>
<th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-amber-400/70">Med</th>
<th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-emerald-400/70">Low</th>
<th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-ink-500">Overall</th>
<th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-ink-500">Risk Bar</th>
<th className="px-4 py-3 text-right text-[10px] font-mono uppercase tracking-widest text-ink-500"></th>
<th className="px-6 py-3 text-left text-[11px] font-mono uppercase tracking-widest text-ink-500">Document</th>
<th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-ink-500">Clauses</th>
<th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-red-400/70">Crit</th>
<th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-orange-400/70">High</th>
<th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-amber-400/70">Med</th>
<th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-emerald-400/70">Low</th>
<th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-ink-500">Overall</th>
<th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-ink-500">Risk Bar</th>
<th className="px-4 py-3 text-right text-[11px] font-mono uppercase tracking-widest text-ink-500"></th>
</tr>
</thead>
<tbody className="divide-y divide-ink-800/20">
Expand Down Expand Up @@ -634,7 +634,7 @@ export default function AnalyticsPage() {
<td className="px-4 py-3 text-center text-xs font-mono text-amber-400">{summary?.risk_summary.medium || 0}</td>
<td className="px-4 py-3 text-center text-xs font-mono text-emerald-400">{summary?.risk_summary.low || 0}</td>
<td className="px-4 py-3 text-center">
<span className={`inline-flex px-2 py-0.5 rounded text-[10px] font-mono font-bold uppercase
<span className={`inline-flex px-2 py-0.5 rounded text-[11px] font-mono font-bold uppercase
${summary?.overall_risk ? riskConfig[summary.overall_risk]?.color : 'text-ink-500'}
${summary?.overall_risk ? riskConfig[summary.overall_risk]?.bg + '/10' : 'bg-ink-800/30'}`}>
{summary?.overall_risk || '?'}
Expand Down
24 changes: 12 additions & 12 deletions frontend/src/app/compare/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ function ComparePageContent() {
)}
<span className="text-sm text-ink-200 font-medium max-w-[200px] truncate">{cd.doc.filename}</span>
{cd.summary && (
<span className={`text-[10px] font-mono uppercase px-1.5 py-0.5 rounded
<span className={`text-[11px] font-mono uppercase px-1.5 py-0.5 rounded
${cd.summary.overall_risk ? riskConfig[cd.summary.overall_risk]?.color : 'text-ink-500'}
${cd.summary.overall_risk ? riskConfig[cd.summary.overall_risk]?.bg + '/15' : 'bg-ink-800/30'}`}>
{cd.summary.overall_risk}
Expand Down Expand Up @@ -251,7 +251,7 @@ function ComparePageContent() {
<FileText className="w-4 h-4 text-ink-500 shrink-0" />
<div className="flex-1 min-w-0">
<p className="text-sm text-ink-200 truncate">{doc.filename}</p>
<p className="text-[10px] text-ink-500 font-mono">
<p className="text-[11px] text-ink-500 font-mono">
{doc.page_count ? `${doc.page_count} pages` : 'Unknown pages'} &middot; {doc.chunk_count} chunks
</p>
</div>
Expand Down Expand Up @@ -333,17 +333,17 @@ function ComparePageContent() {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-ink-800/30">
<th className="sticky left-0 bg-ink-950 z-10 px-6 py-3 text-left text-[10px] font-mono uppercase tracking-widest text-ink-500 min-w-[160px]">
<th className="sticky left-0 bg-ink-950 z-10 px-6 py-3 text-left text-[11px] font-mono uppercase tracking-widest text-ink-500 min-w-[160px]">
Clause Type
</th>
{compareDocs.map(cd => (
<th key={cd.doc.id} className="px-4 py-3 text-center min-w-[180px]">
<div className="flex flex-col items-center gap-1">
<span className="text-[10px] font-mono text-ink-400 truncate max-w-[160px]">
<span className="text-[11px] font-mono text-ink-400 truncate max-w-[160px]">
{cd.doc.filename}
</span>
{cd.summary && (
<span className={`text-[9px] font-mono uppercase px-1.5 py-0.5 rounded
<span className={`text-[11px] font-mono uppercase px-1.5 py-0.5 rounded
${riskConfig[cd.summary.overall_risk]?.color}
${riskConfig[cd.summary.overall_risk]?.bg}/15`}>
{cd.summary.overall_risk}
Expand Down Expand Up @@ -384,12 +384,12 @@ function ComparePageContent() {
cellData.topRisk === 'medium' ? 'bg-amber-500/40' :
'bg-emerald-500/30'
}`} />
<span className="text-[10px] font-mono font-bold uppercase">{cellData.topRisk}</span>
<span className="text-[11px] font-mono font-bold uppercase">{cellData.topRisk}</span>
</div>
<span className="text-[10px] text-ink-500 font-mono">{cellData.breakdown.total} clause(s)</span>
<span className="text-[11px] text-ink-500 font-mono">{cellData.breakdown.total} clause(s)</span>
</button>
) : (
<span className="inline-flex items-center gap-1 text-[10px] text-ink-600 font-mono">
<span className="inline-flex items-center gap-1 text-[11px] text-ink-600 font-mono">
<span className="w-2 h-2 rounded-sm bg-ink-800/50" />
Not found
</span>
Expand All @@ -412,7 +412,7 @@ function ComparePageContent() {
{cellData.clauses.slice(0, 3).map((clause) => (
<div key={clause.id} className="p-2.5 bg-ink-800/30 rounded-lg">
{clause.risk_level && (
<span className={`text-[9px] font-mono uppercase px-1.5 py-0.5 rounded mb-1.5 inline-block
<span className={`text-[11px] font-mono uppercase px-1.5 py-0.5 rounded mb-1.5 inline-block
${riskConfig[clause.risk_level as RiskLevel]?.color}
${riskConfig[clause.risk_level as RiskLevel]?.bg}/15`}>
{clause.risk_level}
Expand All @@ -426,7 +426,7 @@ function ComparePageContent() {
</div>
<Link
href={`/documents/${cd.doc.id}`}
className="flex items-center justify-center gap-1.5 mt-3 text-[10px] text-accent hover:text-accent-light transition-colors"
className="flex items-center justify-center gap-1.5 mt-3 text-[11px] text-accent hover:text-accent-light transition-colors"
>
<Eye className="w-3 h-3" />
View Full Document
Expand Down Expand Up @@ -483,15 +483,15 @@ function ComparePageContent() {
<div className="flex items-center gap-2 mb-3">
<AlertTriangle className="w-4 h-4 text-amber-400" />
<span className="text-sm font-medium text-ink-200">{doc.filename}</span>
<span className="text-[10px] text-ink-500 font-mono">
<span className="text-[11px] text-ink-500 font-mono">
missing {missing.length} clause type{missing.length !== 1 ? 's' : ''}
</span>
</div>
<div className="flex flex-wrap gap-2">
{missing.map(type => (
<span
key={type}
className="text-[10px] font-mono px-2.5 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md text-amber-400"
className="text-[11px] font-mono px-2.5 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md text-amber-400"
>
{formatClauseType(type)}
</span>
Expand Down
Loading
Loading