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

refactor: migrate page components to Design System v4

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
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-muted-foreground" />
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Send Feedback</h1>
<MessageSquareText className="h-8 w-8 text-[#848b9b]" />
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Send Feedback</h1>
</div>
<p className="mt-2 text-muted-foreground">
<p className="mt-2 text-[#848b9b]">
Help us improve ResolutionFlow. Report bugs, request features, or share your thoughts.
</p>
</div>
<div className="max-w-2xl">
{submitted ? (
<div className="bg-card border border-border rounded-xl p-8 text-center">
<div className="bg-[#14161d] border border-[#1e2130] 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-foreground mb-2">Thank you for your feedback!</h2>
<p className="text-muted-foreground mb-6">
<h2 className="text-xl font-semibold text-[#e2e5eb] mb-2">Thank you for your feedback!</h2>
<p className="text-[#848b9b] mb-6">
We've received your submission and will review it shortly. Check your email for a confirmation.
</p>
<button
onClick={handleNewFeedback}
className="bg-gradient-brand text-white font-medium px-6 py-2.5 rounded-lg shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
className="bg-[#22d3ee] 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-card border border-border rounded-xl p-4 sm:p-6 space-y-5">
<form onSubmit={handleSubmit} className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 space-y-5">
{/* Email */}
<div>
<label htmlFor="feedback-email" className="block text-sm font-medium text-foreground mb-1.5">
<label htmlFor="feedback-email" className="block text-sm font-medium text-[#e2e5eb] 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-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"
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"
/>
<p className="mt-1 text-xs text-muted-foreground">We'll reply to this address if we need more details.</p>
<p className="mt-1 text-xs text-[#848b9b]">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-foreground mb-1.5">
<label className="block text-sm font-medium text-[#e2e5eb] 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-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"
"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]"
)}
>
<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-border bg-card shadow-lg overflow-hidden"
className="absolute z-10 mt-1 w-full rounded-lg border border-[#1e2130] bg-[#14161d] 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-foreground">{type.value}</div>
<div className="text-xs text-muted-foreground mt-0.5">{type.description}</div>
<div className="text-sm font-medium text-[#e2e5eb]">{type.value}</div>
<div className="text-xs text-[#848b9b] 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-foreground mb-1.5">
<label htmlFor="feedback-message" className="block text-sm font-medium text-[#e2e5eb] 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-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"
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"
/>
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-xs text-[#848b9b]">
{message.trim().length < 10
? `Minimum 10 characters (${message.trim().length}/10)`
: `${message.trim().length} characters`}
@@ -262,10 +262,10 @@ export function FeedbackPage() {
type="submit"
disabled={!canSubmit || isSubmitting}
className={cn(
"flex items-center gap-2 rounded-lg px-6 py-2.5 font-medium text-white shadow-lg shadow-primary/20 transition-opacity",
"flex items-center gap-2 rounded-lg px-6 py-2.5 font-medium text-white transition-opacity",
canSubmit && !isSubmitting
? "bg-gradient-brand hover:opacity-90"
: "bg-gradient-brand opacity-50 cursor-not-allowed"
? "bg-[#22d3ee] hover:brightness-110"
: "bg-[#22d3ee] opacity-50 cursor-not-allowed"
)}
>
<Send size={16} />