fix: Improve AnalyzePanel contrast and TLD matrix size
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
- Increase text contrast throughout (white/50 → white, white/30 → white/50) - Make TLD matrix full-width with larger tiles (h-10, text-sm) - Larger score display (16x16 → w-16 h-16, text-2xl) - Bigger header buttons with borders - Larger labels (text-sm instead of text-[11px]) - Better visual hierarchy
This commit is contained in:
@ -285,12 +285,12 @@ export function AnalyzePanel() {
|
||||
<div className="absolute right-0 top-0 bottom-0 w-full sm:w-[560px] lg:w-[640px] bg-[#030303] border-l border-white/[0.08] flex flex-col overflow-hidden">
|
||||
|
||||
{/* Header */}
|
||||
<div className="shrink-0 border-b border-white/[0.06]">
|
||||
<div className="shrink-0 border-b border-white/[0.08]">
|
||||
{/* Top Bar */}
|
||||
<div className="px-4 py-3 flex items-center justify-between gap-4">
|
||||
<div className="px-5 py-4 flex items-center justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[9px] font-mono text-white/30 uppercase tracking-wider mb-0.5">Analysis</div>
|
||||
<div className="text-base font-bold text-white font-mono truncate">
|
||||
<div className="text-[10px] font-mono text-white/50 uppercase tracking-wider mb-1">Domain Analysis</div>
|
||||
<div className="text-xl font-bold text-white font-mono truncate">
|
||||
{headerDomain}
|
||||
</div>
|
||||
</div>
|
||||
@ -303,33 +303,33 @@ export function AnalyzePanel() {
|
||||
setTimeout(() => setCopied(false), 1500)
|
||||
}}
|
||||
className={clsx(
|
||||
"w-8 h-8 flex items-center justify-center transition-all",
|
||||
copied ? "text-accent" : "text-white/30 hover:text-white"
|
||||
"w-9 h-9 flex items-center justify-center transition-all border border-white/[0.08]",
|
||||
copied ? "text-accent bg-accent/10" : "text-white/50 hover:text-white hover:bg-white/[0.05]"
|
||||
)}
|
||||
title="Copy domain"
|
||||
>
|
||||
{copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
|
||||
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
|
||||
</button>
|
||||
<a
|
||||
href={`https://${encodeURIComponent(headerDomain)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-8 h-8 flex items-center justify-center text-white/30 hover:text-white transition-colors"
|
||||
className="w-9 h-9 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/[0.05] transition-colors border border-white/[0.08]"
|
||||
title="Visit domain"
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
<button
|
||||
onClick={refresh}
|
||||
disabled={loading}
|
||||
className="w-8 h-8 flex items-center justify-center text-white/30 hover:text-white transition-colors disabled:opacity-50"
|
||||
className="w-9 h-9 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/[0.05] transition-colors border border-white/[0.08] disabled:opacity-50"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw className={clsx('w-3.5 h-3.5', loading && 'animate-spin')} />
|
||||
<RefreshCw className={clsx('w-4 h-4', loading && 'animate-spin')} />
|
||||
</button>
|
||||
<button
|
||||
onClick={close}
|
||||
className="w-8 h-8 flex items-center justify-center text-white/30 hover:text-white transition-colors"
|
||||
className="w-9 h-9 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/[0.05] transition-colors border border-white/[0.08]"
|
||||
title="Close (ESC)"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
@ -337,49 +337,53 @@ export function AnalyzePanel() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Score Bar - Compact */}
|
||||
{/* Score Bar */}
|
||||
{overallScore && !loading && (
|
||||
<div className="px-4 pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="px-5 pb-4">
|
||||
<div className="flex items-center gap-4 p-4 bg-white/[0.02] border border-white/[0.08]">
|
||||
<div
|
||||
className={clsx(
|
||||
"w-12 h-12 flex items-center justify-center border",
|
||||
overallScore.score >= 70 ? "border-accent/30 text-accent" :
|
||||
overallScore.score >= 40 ? "border-amber-400/30 text-amber-400" : "border-rose-500/30 text-rose-400"
|
||||
"w-16 h-16 flex items-center justify-center border-2",
|
||||
overallScore.score >= 70 ? "border-accent bg-accent/10 text-accent" :
|
||||
overallScore.score >= 40 ? "border-amber-400 bg-amber-400/10 text-amber-400" : "border-rose-500 bg-rose-500/10 text-rose-400"
|
||||
)}
|
||||
>
|
||||
<span className="text-xl font-bold font-mono">{overallScore.score}</span>
|
||||
<span className="text-2xl font-bold font-mono">{overallScore.score}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="h-1.5 bg-white/[0.05] overflow-hidden flex mb-2">
|
||||
<div className="text-sm font-bold text-white mb-2">Health Score</div>
|
||||
<div className="h-2 bg-white/[0.05] overflow-hidden flex mb-2">
|
||||
<div className="h-full bg-accent" style={{ width: `${(overallScore.pass / overallScore.total) * 100}%` }} />
|
||||
<div className="h-full bg-amber-400" style={{ width: `${(overallScore.warn / overallScore.total) * 100}%` }} />
|
||||
<div className="h-full bg-rose-500" style={{ width: `${(overallScore.fail / overallScore.total) * 100}%` }} />
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-[10px] font-mono text-white/40">
|
||||
<span className="text-accent">{overallScore.pass} ok</span>
|
||||
<span className="text-amber-400">{overallScore.warn} warn</span>
|
||||
<span className="text-rose-400">{overallScore.fail} fail</span>
|
||||
<div className="flex items-center gap-4 text-xs font-mono">
|
||||
<span className="text-accent">{overallScore.pass} passed</span>
|
||||
<span className="text-amber-400">{overallScore.warn} warnings</span>
|
||||
<span className="text-rose-400">{overallScore.fail} failed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Controls - Minimal */}
|
||||
<div className="px-4 pb-3 flex items-center gap-2">
|
||||
{/* Controls */}
|
||||
<div className="px-5 pb-3 flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setFastMode(!fastMode)}
|
||||
className={clsx(
|
||||
"flex items-center gap-1 px-2 py-1 text-[9px] font-mono uppercase transition-all",
|
||||
fastMode ? "text-accent" : "text-white/30 hover:text-white"
|
||||
"flex items-center gap-1.5 px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider border transition-all",
|
||||
fastMode ? "text-accent border-accent/30 bg-accent/10" : "text-white/50 border-white/[0.08] hover:text-white hover:bg-white/[0.05]"
|
||||
)}
|
||||
>
|
||||
<Zap className="w-3 h-3" />
|
||||
Fast
|
||||
<Zap className="w-3.5 h-3.5" />
|
||||
Fast Mode
|
||||
</button>
|
||||
{data?.cached && (
|
||||
<span className="text-[9px] font-mono text-white/20">cached</span>
|
||||
<span className="text-[10px] font-mono text-white/40 flex items-center gap-1.5">
|
||||
<Clock className="w-3 h-3" />
|
||||
Cached
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -419,31 +423,31 @@ export function AnalyzePanel() {
|
||||
{/* Section Header */}
|
||||
<button
|
||||
onClick={() => toggleSection(section.key)}
|
||||
className="w-full px-4 py-3 flex items-center justify-between transition-colors group hover:bg-white/[0.02]"
|
||||
className="w-full px-4 py-3 flex items-center justify-between transition-colors group hover:bg-white/[0.03]"
|
||||
title={(config as any).tooltip || ''}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<SectionIcon className="w-4 h-4 text-white/40" />
|
||||
<SectionIcon className="w-4 h-4 text-white/60" />
|
||||
<div className="text-left">
|
||||
<span className="text-[11px] font-bold uppercase tracking-wider text-white/70">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-white">
|
||||
{section.title}
|
||||
</span>
|
||||
<div className="text-[10px] font-mono text-white/30">
|
||||
<div className="text-[10px] font-mono text-white/50">
|
||||
{config.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{section.key !== 'vision' && section.items.length > 0 && (
|
||||
<span className="text-[10px] font-mono text-white/30">
|
||||
<span className="text-[10px] font-mono text-white/40">
|
||||
{section.items.length}
|
||||
</span>
|
||||
)}
|
||||
{section.key === 'vision' && (
|
||||
<span className="text-[9px] font-mono text-accent/70 uppercase">AI</span>
|
||||
<span className="text-[10px] font-mono text-accent uppercase">AI</span>
|
||||
)}
|
||||
<ChevronRight className={clsx(
|
||||
"w-4 h-4 text-white/20 transition-transform",
|
||||
"w-4 h-4 text-white/40 transition-transform",
|
||||
isExpanded && "rotate-90"
|
||||
)} />
|
||||
</div>
|
||||
@ -457,7 +461,7 @@ export function AnalyzePanel() {
|
||||
<VisionSection domain={headerDomain} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-white/[0.04]">
|
||||
<div className="divide-y divide-white/[0.05]">
|
||||
{section.items.map((item) => {
|
||||
const statusStyle = getStatusColor(item.status)
|
||||
const tooltip = getItemTooltip(item.key)
|
||||
@ -465,53 +469,62 @@ export function AnalyzePanel() {
|
||||
return (
|
||||
<div
|
||||
key={item.key}
|
||||
className="px-4 py-3 hover:bg-white/[0.02] transition-colors group"
|
||||
className="px-4 py-3.5 hover:bg-white/[0.02] transition-colors group"
|
||||
title={tooltip || undefined}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
{/* Label + Source */}
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-[11px] font-medium text-white/60 truncate">
|
||||
{isMatrix(item) ? (
|
||||
/* TLD Matrix - Full Width Layout */
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-medium text-white">
|
||||
{item.label}
|
||||
</span>
|
||||
{item.source && (
|
||||
<span className="text-[9px] font-mono text-white/20 uppercase shrink-0">
|
||||
<span className="text-[10px] font-mono text-white/40 uppercase">
|
||||
{item.source}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div className="shrink-0">
|
||||
{isMatrix(item) ? (
|
||||
<div className="flex gap-1">
|
||||
{(item.value as any[]).slice(0, 7).map((row: any) => (
|
||||
<div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
|
||||
{(item.value as any[]).slice(0, 12).map((row: any) => (
|
||||
<div
|
||||
key={String(row.domain)}
|
||||
className={clsx(
|
||||
"w-6 h-6 flex items-center justify-center text-[9px] font-mono",
|
||||
"h-10 flex items-center justify-center text-sm font-mono font-medium border",
|
||||
row.status === 'available'
|
||||
? "bg-accent/10 text-accent"
|
||||
: "bg-white/[0.03] text-white/20"
|
||||
? "bg-accent/10 text-accent border-accent/30"
|
||||
: "bg-white/[0.02] text-white/30 border-white/[0.06]"
|
||||
)}
|
||||
title={`${String(row.domain).split('.').pop()}: ${row.status === 'available' ? 'Available' : 'Taken'}`}
|
||||
>
|
||||
.{String(row.domain).split('.').pop()?.slice(0, 2)}
|
||||
.{String(row.domain).split('.').pop()}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className={clsx(
|
||||
"text-sm font-mono font-medium",
|
||||
item.status === 'pass' ? "text-accent" :
|
||||
item.status === 'warn' ? "text-amber-400" :
|
||||
item.status === 'fail' ? "text-rose-400" : "text-white/50"
|
||||
)}>
|
||||
{formatValue(item.value)}
|
||||
/* Regular Item - Row Layout */
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-sm font-medium text-white">
|
||||
{item.label}
|
||||
</span>
|
||||
{item.source && (
|
||||
<span className="text-[10px] font-mono text-white/40 uppercase shrink-0">
|
||||
{item.source}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={clsx(
|
||||
"text-base font-mono font-bold",
|
||||
item.status === 'pass' ? "text-accent" :
|
||||
item.status === 'warn' ? "text-amber-400" :
|
||||
item.status === 'fail' ? "text-rose-400" : "text-white/70"
|
||||
)}>
|
||||
{formatValue(item.value)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
@ -527,25 +540,25 @@ export function AnalyzePanel() {
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="shrink-0 border-t border-white/[0.06] px-4 py-2 bg-[#020202]">
|
||||
<div className="flex items-center justify-between text-[9px] font-mono text-white/20">
|
||||
<span>ESC to close</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="shrink-0 border-t border-white/[0.08] px-5 py-3 bg-[#020202]">
|
||||
<div className="flex items-center justify-between text-[11px] font-mono">
|
||||
<span className="text-white/40">Press ESC to close</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<a
|
||||
href={`https://who.is/whois/${encodeURIComponent(headerDomain)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-white/50 transition-colors"
|
||||
className="text-white/50 hover:text-white transition-colors"
|
||||
>
|
||||
WHOIS
|
||||
WHOIS →
|
||||
</a>
|
||||
<a
|
||||
href={`https://web.archive.org/web/*/${encodeURIComponent(headerDomain)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-white/50 transition-colors"
|
||||
className="text-white/50 hover:text-white transition-colors"
|
||||
>
|
||||
Archive
|
||||
Archive →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user