chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: replace hardcoded hex values with Tailwind semantic tokens

Browse Source 
3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 04:34:35 -04:00
parent 123fc50af9
commit 303a558432
251 changed files with 3310 additions and 3310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/pages/FeedbackPage.tsx
View File

@@ -137,34 +137,34 @@ export function FeedbackPage() {
{/* Page header */}
<div className="mb-8">
<div className="flex items-center gap-3">
<MessageSquareText className="h-8 w-8 text-[#848b9b]" />
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Send Feedback</h1>
<MessageSquareText className="h-8 w-8 text-muted-foreground" />
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Send Feedback</h1>
</div>
<p className="mt-2 text-[#848b9b]">
<p className="mt-2 text-muted-foreground">
Help us improve ResolutionFlow. Report bugs, request features, or share your thoughts.
</p>
</div>
<div className="max-w-2xl">
{submitted ? (
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-8 text-center">
<div className="bg-card border border-border rounded-xl p-8 text-center">
<CheckCircle2 className="mx-auto h-12 w-12 text-green-500 mb-4" />
<h2 className="text-xl font-semibold text-[#e2e5eb] mb-2">Thank you for your feedback!</h2>
<p className="text-[#848b9b] mb-6">
<h2 className="text-xl font-semibold text-foreground mb-2">Thank you for your feedback!</h2>
<p className="text-muted-foreground mb-6">
We've received your submission and will review it shortly. Check your email for a confirmation.
</p>
<button
onClick={handleNewFeedback}
className="bg-[#22d3ee] text-white font-medium px-6 py-2.5 rounded-lg hover:brightness-110 transition-opacity"
className="bg-primary text-white font-medium px-6 py-2.5 rounded-lg hover:brightness-110 transition-opacity"
>
Send More Feedback
</button>
</div>
) : (
<form onSubmit={handleSubmit} className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 space-y-5">
<form onSubmit={handleSubmit} className="bg-card border border-border rounded-xl p-4 sm:p-6 space-y-5">
{/* Email */}
<div>
<label htmlFor="feedback-email" className="block text-sm font-medium text-[#e2e5eb] mb-1.5">
<label htmlFor="feedback-email" className="block text-sm font-medium text-foreground mb-1.5">
Email Address
</label>
<input
@@ -174,14 +174,14 @@ export function FeedbackPage() {
onChange={e => setEmail(e.target.value)}
placeholder="your@email.com"
required
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden"
/>
<p className="mt-1 text-xs text-[#848b9b]">We'll reply to this address if we need more details.</p>
<p className="mt-1 text-xs text-muted-foreground">We'll reply to this address if we need more details.</p>
</div>
{/* Feedback Type — custom selector with descriptions */}
<div>
<label className="block text-sm font-medium text-[#e2e5eb] mb-1.5">
<label className="block text-sm font-medium text-foreground mb-1.5">
Feedback Type
</label>
<div className="relative">
@@ -196,8 +196,8 @@ export function FeedbackPage() {
onClick={() => setTypeDropdownOpen(!typeDropdownOpen)}
onKeyDown={handleDropdownKeyDown}
className={cn(
"w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden",
feedbackType ? "text-[#e2e5eb]" : "text-[#848b9b]"
"w-full rounded-lg border border-border bg-card px-3 py-2 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden",
feedbackType ? "text-foreground" : "text-muted-foreground"
)}
>
<span>{selectedType?.value ?? 'Select a type...'}</span>
@@ -208,7 +208,7 @@ export function FeedbackPage() {
ref={listboxRef}
id="feedback-type-listbox"
role="listbox"
className="absolute z-10 mt-1 w-full rounded-lg border border-[#1e2130] bg-[#14161d] shadow-lg overflow-hidden"
className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-lg overflow-hidden"
>
{FEEDBACK_TYPES.map((type, index) => (
<button
@@ -225,8 +225,8 @@ export function FeedbackPage() {
highlightedIndex === index && feedbackType !== type.value && "bg-accent/50"
)}
>
<div className="text-sm font-medium text-[#e2e5eb]">{type.value}</div>
<div className="text-xs text-[#848b9b] mt-0.5">{type.description}</div>
<div className="text-sm font-medium text-foreground">{type.value}</div>
<div className="text-xs text-muted-foreground mt-0.5">{type.description}</div>
</button>
))}
</div>
@@ -236,7 +236,7 @@ export function FeedbackPage() {
{/* Message */}
<div>
<label htmlFor="feedback-message" className="block text-sm font-medium text-[#e2e5eb] mb-1.5">
<label htmlFor="feedback-message" className="block text-sm font-medium text-foreground mb-1.5">
Your Feedback
</label>
<textarea
@@ -247,9 +247,9 @@ export function FeedbackPage() {
required
minLength={10}
rows={6}
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden resize-y"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden resize-y"
/>
<p className="mt-1 text-xs text-[#848b9b]">
<p className="mt-1 text-xs text-muted-foreground">
{message.trim().length < 10
? `Minimum 10 characters (${message.trim().length}/10)`
: `${message.trim().length} characters`}
@@ -264,8 +264,8 @@ export function FeedbackPage() {
className={cn(
"flex items-center gap-2 rounded-lg px-6 py-2.5 font-medium text-white transition-opacity",
canSubmit && !isSubmitting
? "bg-[#22d3ee] hover:brightness-110"
: "bg-[#22d3ee] opacity-50 cursor-not-allowed"
? "bg-primary hover:brightness-110"
: "bg-primary opacity-50 cursor-not-allowed"
)}
>
<Send size={16} />