From f3fbc5142c875a9f4f5ce258545e281443fb2105 Mon Sep 17 00:00:00 2001 From: Michael Chihlas Date: Sun, 8 Mar 2026 01:35:51 -0500 Subject: [PATCH] refactor: replace hardcoded rgba/hex colors with Tailwind tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - rgba(255,255,255,0.xx) → bg-white/[0.xx], border-white/[0.xx] - rgba(6,182,212,0.3) → border-primary/30 (focus states) - #0a0a0a → bg-background - Inline style hex colors → var(--color-primary), var(--color-brand-gradient-to) - 28 files updated, zero hardcoded rgba() patterns remaining Co-Authored-By: Claude Opus 4.6 --- .../components/account/DeleteAccountModal.tsx | 2 +- .../components/account/LeaveAccountModal.tsx | 2 +- .../account/TransferOwnershipModal.tsx | 2 +- .../src/components/assistant/ChatMessage.tsx | 4 +- .../src/components/assistant/ChatSidebar.tsx | 6 +-- .../assistant/ConcludeSessionModal.tsx | 14 +++--- .../assistant/SuggestedFlowCard.tsx | 2 +- .../src/components/copilot/CopilotPanel.tsx | 6 +-- .../components/editor-ai/AIPromptDialog.tsx | 4 +- frontend/src/components/editor-ai/ChatTab.tsx | 6 +-- .../components/editor-ai/SuggestionsTab.tsx | 2 +- .../components/library/ImportFlowModal.tsx | 2 +- .../components/procedural/IntakeFormModal.tsx | 2 +- .../src/components/session/SessionFilters.tsx | 2 +- .../components/session/StepRatingModal.tsx | 2 +- frontend/src/components/ui/Button.tsx | 2 +- frontend/src/components/ui/Input.tsx | 2 +- frontend/src/components/ui/Skeleton.tsx | 2 +- frontend/src/components/ui/Textarea.tsx | 2 +- frontend/src/pages/AssistantChatPage.tsx | 4 +- frontend/src/pages/LoginPage.tsx | 4 +- frontend/src/pages/SurveyPage.tsx | 46 +++++++++---------- frontend/src/pages/SurveyThankYouPage.tsx | 4 +- frontend/src/pages/VerifyEmailPage.tsx | 4 +- .../account/ChatRetentionSettingsPage.tsx | 4 +- .../src/pages/account/ProfileSettingsPage.tsx | 6 +-- .../src/pages/admin/SurveyInvitesPage.tsx | 10 ++-- .../src/pages/admin/SurveyResponsesPage.tsx | 10 ++-- 28 files changed, 79 insertions(+), 79 deletions(-) diff --git a/frontend/src/components/account/DeleteAccountModal.tsx b/frontend/src/components/account/DeleteAccountModal.tsx index 97e93774..53f5b275 100644 --- a/frontend/src/components/account/DeleteAccountModal.tsx +++ b/frontend/src/components/account/DeleteAccountModal.tsx @@ -69,7 +69,7 @@ export function DeleteAccountModal({ onClose }: Props) { onClick={onClose} className={cn( 'rounded-[10px] px-4 py-2 text-sm font-medium', - 'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground' + 'bg-white/[0.04] border border-brand-border text-foreground' )} > Cancel diff --git a/frontend/src/components/account/LeaveAccountModal.tsx b/frontend/src/components/account/LeaveAccountModal.tsx index d993b477..b8a8e22a 100644 --- a/frontend/src/components/account/LeaveAccountModal.tsx +++ b/frontend/src/components/account/LeaveAccountModal.tsx @@ -45,7 +45,7 @@ export function LeaveAccountModal({ accountName, onClose }: Props) { onClick={onClose} className={cn( 'rounded-[10px] px-4 py-2 text-sm font-medium', - 'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground' + 'bg-white/[0.04] border border-brand-border text-foreground' )} > Cancel diff --git a/frontend/src/components/account/TransferOwnershipModal.tsx b/frontend/src/components/account/TransferOwnershipModal.tsx index a7626c90..ff2120df 100644 --- a/frontend/src/components/account/TransferOwnershipModal.tsx +++ b/frontend/src/components/account/TransferOwnershipModal.tsx @@ -90,7 +90,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop onClick={onClose} className={cn( 'rounded-[10px] px-4 py-2 text-sm font-medium', - 'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground' + 'bg-white/[0.04] border border-brand-border text-foreground' )} > Cancel diff --git a/frontend/src/components/assistant/ChatMessage.tsx b/frontend/src/components/assistant/ChatMessage.tsx index ce8f1ca9..142c7b36 100644 --- a/frontend/src/components/assistant/ChatMessage.tsx +++ b/frontend/src/components/assistant/ChatMessage.tsx @@ -17,7 +17,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps) className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${ role === 'assistant' ? 'bg-primary/15 text-primary' - : 'bg-[rgba(255,255,255,0.08)] text-muted-foreground' + : 'bg-white/[0.08] text-muted-foreground' }`} > {role === 'assistant' ? : } @@ -29,7 +29,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps) className={`rounded-2xl px-4 py-3 text-[0.875rem] leading-relaxed ${ role === 'user' ? 'bg-primary/15 text-foreground' - : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-brand-border' + : 'bg-white/[0.04] text-foreground border border-brand-border' }`} > diff --git a/frontend/src/components/assistant/ChatSidebar.tsx b/frontend/src/components/assistant/ChatSidebar.tsx index 49aa24b8..14c5f6f3 100644 --- a/frontend/src/components/assistant/ChatSidebar.tsx +++ b/frontend/src/components/assistant/ChatSidebar.tsx @@ -103,7 +103,7 @@ function ChatItem({ 'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors', isActive ? 'bg-primary/10 text-foreground' - : 'text-muted-foreground hover:bg-[rgba(255,255,255,0.04)] hover:text-foreground' + : 'text-muted-foreground hover:bg-white/[0.04] hover:text-foreground' )} > @@ -116,14 +116,14 @@ function ChatItem({
@@ -346,7 +346,7 @@ export function ConcludeSessionModal({ <> @@ -407,7 +407,7 @@ export function ConcludeSessionModal({ diff --git a/frontend/src/components/assistant/SuggestedFlowCard.tsx b/frontend/src/components/assistant/SuggestedFlowCard.tsx index f81a67ed..3e630e14 100644 --- a/frontend/src/components/assistant/SuggestedFlowCard.tsx +++ b/frontend/src/components/assistant/SuggestedFlowCard.tsx @@ -18,7 +18,7 @@ export function SuggestedFlowCard({ flow }: SuggestedFlowCardProps) { return ( diff --git a/frontend/src/components/editor-ai/ChatTab.tsx b/frontend/src/components/editor-ai/ChatTab.tsx index 78dff9eb..7d760bd0 100644 --- a/frontend/src/components/editor-ai/ChatTab.tsx +++ b/frontend/src/components/editor-ai/ChatTab.tsx @@ -50,7 +50,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${ msg.role === 'user' ? 'bg-primary/15 text-foreground' - : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-brand-border' + : 'bg-white/[0.04] text-foreground border border-brand-border' }`} > @@ -59,7 +59,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C ))} {isLoading && (
-
+
@@ -77,7 +77,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C onKeyDown={handleKeyDown} placeholder="Ask AI to help..." rows={1} - className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]" + className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30" style={{ borderColor: 'var(--glass-border)' }} disabled={isLoading} /> diff --git a/frontend/src/components/editor-ai/SuggestionsTab.tsx b/frontend/src/components/editor-ai/SuggestionsTab.tsx index 4da91dce..64202564 100644 --- a/frontend/src/components/editor-ai/SuggestionsTab.tsx +++ b/frontend/src/components/editor-ai/SuggestionsTab.tsx @@ -26,7 +26,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) { const config = STATUS_CONFIG[s.status] const StatusIcon = config.icon return ( -
+
{s.action_type.replace(/_/g, ' ')} diff --git a/frontend/src/components/library/ImportFlowModal.tsx b/frontend/src/components/library/ImportFlowModal.tsx index 45f6aad0..6b6ad309 100644 --- a/frontend/src/components/library/ImportFlowModal.tsx +++ b/frontend/src/components/library/ImportFlowModal.tsx @@ -122,7 +122,7 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) { 'flex flex-col items-center justify-center rounded-lg border-2 border-dashed px-4 py-8 text-center transition-colors cursor-pointer', isDragging ? 'border-primary/50 bg-primary/5' - : 'border-border hover:border-[rgba(255,255,255,0.12)]' + : 'border-border hover:border-white/[0.12]' )} onClick={() => fileInputRef.current?.click()} onDragOver={(e) => { e.preventDefault(); setIsDragging(true) }} diff --git a/frontend/src/components/procedural/IntakeFormModal.tsx b/frontend/src/components/procedural/IntakeFormModal.tsx index 19fae7ff..99260669 100644 --- a/frontend/src/components/procedural/IntakeFormModal.tsx +++ b/frontend/src/components/procedural/IntakeFormModal.tsx @@ -213,7 +213,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel } return (
-
+
{/* Header */}

Project Information

diff --git a/frontend/src/components/session/SessionFilters.tsx b/frontend/src/components/session/SessionFilters.tsx index 7f82b263..2548a062 100644 --- a/frontend/src/components/session/SessionFilters.tsx +++ b/frontend/src/components/session/SessionFilters.tsx @@ -160,7 +160,7 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil {showDatePicker && ( -
+
{/* Date Type Toggle */}
@@ -577,11 +577,11 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues className="flex items-start gap-3 px-3.5 py-3 sm:px-4 rounded-[9px] text-left text-[13px] sm:text-sm transition-all duration-150 select-none" style={{ background: selected ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)', - border: `1px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`, + border: `1px solid ${selected ? 'var(--color-primary)' : 'var(--glass-border)'}`, color: selected ? 'var(--color-foreground)' : 'var(--color-muted-foreground)', }} > -
+
{'\u2713'}
{opt} @@ -605,7 +605,7 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues background: 'rgba(16, 17, 20, 0.6)', border: '1px solid var(--glass-border)', }} - onFocus={e => { e.currentTarget.style.borderColor = 'rgba(6, 182, 212, 0.4)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(6, 182, 212, 0.1)' }} + onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(6, 182, 212, 0.1)' }} onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)'; e.currentTarget.style.boxShadow = 'none' }} /> )} @@ -621,7 +621,7 @@ function RangeInput({ question: q, value, onChange }: { question: SurveyQuestion const numVal = value ? parseInt(value) : q.min || 0 return (
-
+
{numVal}{q.suffix || ''}
onChange(e.target.value + (q.suffix || ''))} className="w-full h-2 sm:h-1 rounded-full appearance-none cursor-pointer touch-none" style={{ - background: `linear-gradient(to right, #06b6d4 0%, #06b6d4 ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) 100%)`, + background: `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) 100%)`, }} />
@@ -730,7 +730,7 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri className="flex items-center gap-2.5 sm:gap-3 px-3 py-3 sm:px-4 sm:py-2.5 rounded-[9px] text-[13px] sm:text-sm transition-all duration-150 select-none" style={{ background: overIdx === idx ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)', - border: `1px solid ${overIdx === idx || draggingIdx === idx ? '#06b6d4' : 'var(--glass-border)'}`, + border: `1px solid ${overIdx === idx || draggingIdx === idx ? 'var(--color-primary)' : 'var(--glass-border)'}`, opacity: draggingIdx === idx ? 0.5 : 1, cursor: 'grab', color: 'var(--color-muted-foreground)', @@ -739,7 +739,7 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
-
{idx + 1}
+
{idx + 1}
{item}
))} diff --git a/frontend/src/pages/SurveyThankYouPage.tsx b/frontend/src/pages/SurveyThankYouPage.tsx index 49398454..79b795de 100644 --- a/frontend/src/pages/SurveyThankYouPage.tsx +++ b/frontend/src/pages/SurveyThankYouPage.tsx @@ -29,7 +29,7 @@ export default function SurveyThankYouPage() {
{/* Success icon */}
- +
@@ -52,7 +52,7 @@ export default function SurveyThankYouPage() { className="glass-card-static p-6 text-center max-w-[480px] mx-auto" >
- + diff --git a/frontend/src/pages/VerifyEmailPage.tsx b/frontend/src/pages/VerifyEmailPage.tsx index eb6e5ebb..d93175b0 100644 --- a/frontend/src/pages/VerifyEmailPage.tsx +++ b/frontend/src/pages/VerifyEmailPage.tsx @@ -55,8 +55,8 @@ export function VerifyEmailPage() { Go to Dashboard diff --git a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx index 83e3cd53..56b52822 100644 --- a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx +++ b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx @@ -73,7 +73,7 @@ export default function ChatRetentionSettingsPage() { onChange={e => setRetentionDays(e.target.value)} min={1} max={365} - className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]" + className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30" style={{ borderColor: 'var(--glass-border)' }} />

@@ -91,7 +91,7 @@ export default function ChatRetentionSettingsPage() { onChange={e => setMaxCount(e.target.value)} min={10} max={10000} - className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]" + className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30" style={{ borderColor: 'var(--glass-border)' }} />

diff --git a/frontend/src/pages/account/ProfileSettingsPage.tsx b/frontend/src/pages/account/ProfileSettingsPage.tsx index 33169e53..cb64b364 100644 --- a/frontend/src/pages/account/ProfileSettingsPage.tsx +++ b/frontend/src/pages/account/ProfileSettingsPage.tsx @@ -10,7 +10,7 @@ import type { UserUpdate } from '@/types' const inputClass = cn( 'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2', 'text-foreground placeholder:text-muted-foreground', - 'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20' + 'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20' ) export function ProfileSettingsPage() { @@ -145,8 +145,8 @@ export function ProfileSettingsPage() { to="/change-password" className={cn( 'inline-flex items-center rounded-[10px] px-4 py-2 text-sm font-medium', - 'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground', - 'hover:border-[rgba(255,255,255,0.12)]' + 'bg-white/[0.04] border border-brand-border text-foreground', + 'hover:border-white/[0.12]' )} > Change Password diff --git a/frontend/src/pages/admin/SurveyInvitesPage.tsx b/frontend/src/pages/admin/SurveyInvitesPage.tsx index 2928df50..d36fb402 100644 --- a/frontend/src/pages/admin/SurveyInvitesPage.tsx +++ b/frontend/src/pages/admin/SurveyInvitesPage.tsx @@ -82,7 +82,7 @@ export default function SurveyInvitesPage() { value={name} onChange={e => setName(e.target.value)} placeholder="John Smith" - className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden" + className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/30 focus:outline-hidden" />

@@ -94,7 +94,7 @@ export default function SurveyInvitesPage() { value={email} onChange={e => setEmail(e.target.value)} placeholder="john@example.com" - className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden" + className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/30 focus:outline-hidden" />
@@ -109,7 +109,7 @@ export default function SurveyInvitesPage() {