Skip to content

fix(web): unpin colors from the RayHealth teal and fix contrast failures #205

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
SishirP17 merged 1 commit into from
Aug 18, 2026
Merged

fix(web): unpin colors from the RayHealth teal and fix contrast failures #205

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
10 changes: 5 additions & 5 deletions packages/web/src/components/RouteErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,24 +35,24 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
<div style={{ maxWidth: 560, margin: '3rem auto', padding: '0 1rem' }}>
<div
style={{
background: 'var(--color-accent-bg, var(--color-danger-bg))',
border: '1px solid var(--color-accent, var(--color-danger-border))',
background: 'var(--color-danger-bg)',
border: '1px solid var(--color-danger-border)',
borderRadius: 12,
padding: '1.25rem 1.4rem',
}}
>
<h2 style={{ margin: '0 0 0.4rem', fontSize: '1.05rem', color: 'var(--color-accent, var(--color-danger-text))' }}>
<h2 style={{ margin: '0 0 0.4rem', fontSize: '1.05rem', color: 'var(--color-danger-text)' }}>
Something went wrong on this page
</h2>
<p style={{ margin: '0 0 1rem', fontSize: '0.9rem', color: 'var(--color-text, var(--color-text))', lineHeight: 1.5 }}>
<p style={{ margin: '0 0 1rem', fontSize: '0.9rem', color: 'var(--color-text)', lineHeight: 1.5 }}>
This page failed to render. The rest of the app is still available, try reloading, or pick
another page from the menu.
</p>
<button
type="button"
onClick={() => window.location.reload()}
style={{
background: 'var(--color-primary, var(--color-primary))',
background: 'var(--color-primary)',
border: 'none',
borderRadius: 8,
color: 'var(--color-surface)',
Expand Down
4 changes: 2 additions & 2 deletions packages/web/src/features/agency/AgencySetupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,15 +426,15 @@ export function AgencySetupPage() {
</h2>
<p style={{ margin: '0 0 1.1rem', fontSize: '0.8125rem', color: 'var(--color-text-muted)', lineHeight: 1.6 }}>
Your billing-provider identity for X12 837P claims. Required fields (marked&nbsp;
<span style={{ color: 'var(--color-danger)' }}>*</span>) must be complete before an 837 can be generated
<span style={{ color: 'var(--color-danger-text)' }}>*</span>) must be complete before an 837 can be generated
for a payer or clearinghouse.
</p>
<form onSubmit={handleBillingSubmit}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1rem' }}>
{BILLING_FIELDS.map(f => (
<div key={f.key} style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
<label htmlFor={f.key} className="label">
{f.label}{f.required ? <span style={{ color: 'var(--color-danger)' }}> *</span> : null}
{f.label}{f.required ? <span style={{ color: 'var(--color-danger-text)' }}> *</span> : null}
</label>
<input
id={f.key}
Expand Down
30 changes: 15 additions & 15 deletions packages/web/src/features/agency/GoLiveReadinessPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,8 @@ export function computeReadinessChecklist(input: ReadinessInputs): ChecklistItem
}

const card: React.CSSProperties = {
background: 'var(--color-surface, var(--color-surface))',
border: '1px solid var(--color-border, var(--color-border))',
background: 'var(--color-surface)',
border: '1px solid var(--color-border)',
borderRadius: 12,
padding: '1rem 1.25rem',
marginBottom: '0.75rem',
Expand All @@ -138,8 +138,8 @@ function StatusDot({ done }: { done: boolean }) {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: done ? 'var(--color-success-bg, var(--color-success-bg))' : 'var(--color-accent-bg, var(--color-danger-bg))',
color: done ? 'var(--color-success, var(--color-success-text))' : 'var(--color-accent, var(--color-danger-text))',
background: done ? 'var(--color-success-bg)' : 'var(--color-danger-bg)',
color: done ? 'var(--color-success-text)' : 'var(--color-danger-text)',
}}
>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
Expand Down Expand Up @@ -189,27 +189,27 @@ export function GoLiveReadinessPage() {

return (
<div style={{ maxWidth: 760, margin: '0 auto', padding: '1.5rem' }}>
<p style={{ color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', margin: 0 }}>
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', margin: 0 }}>
Onboarding
</p>
<h1 style={{ margin: '0.25rem 0 0.5rem', fontSize: '1.6rem', color: 'var(--color-text, var(--color-text))' }}>Go-Live Readiness</h1>
<p style={{ margin: '0 0 1.25rem', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.95rem' }}>
<h1 style={{ margin: '0.25rem 0 0.5rem', fontSize: '1.6rem', color: 'var(--color-text)' }}>Go-Live Readiness</h1>
<p style={{ margin: '0 0 1.25rem', color: 'var(--color-text-muted)', fontSize: '0.95rem' }}>
Everything an agency must finish before it can run verified visits and bill them. Each unfinished item links to where you fix it.
</p>

{error && (
<div style={{ background: 'var(--color-accent-bg, var(--color-danger-bg))', color: 'var(--color-accent, var(--color-danger-text))', borderRadius: 8, padding: '0.75rem 1rem' }}>{error}</div>
<div style={{ background: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', borderRadius: 8, padding: '0.75rem 1rem' }}>{error}</div>
)}

{items === null && !error && <p style={{ color: 'var(--color-text-muted, var(--color-text-muted))' }}>Checking your setup…</p>}
{items === null && !error && <p style={{ color: 'var(--color-text-muted)' }}>Checking your setup…</p>}

{items !== null && (
<>
<div
style={{
background: ready ? 'var(--color-success-bg, var(--color-success-bg))' : 'var(--color-primary-bg, var(--color-info-bg))',
color: ready ? 'var(--color-success, var(--color-success-text))' : 'var(--color-primary-dark, var(--color-primary-dark))',
border: `1px solid ${ready ? 'var(--color-success, var(--color-success-text))' : 'var(--color-border, var(--color-border))'}`,
background: ready ? 'var(--color-success-bg)' : 'var(--color-info-bg)',
color: ready ? 'var(--color-success-text)' : 'var(--color-primary-dark)',
border: `1px solid ${ready ? 'var(--color-success-text)' : 'var(--color-border)'}`,
borderRadius: 12,
padding: '1rem 1.25rem',
marginBottom: '1.25rem',
Expand All @@ -226,14 +226,14 @@ export function GoLiveReadinessPage() {
<StatusDot done={item.done} />
<div style={{ flex: 1 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', alignItems: 'baseline' }}>
<h3 style={{ margin: 0, fontSize: '1rem', color: 'var(--color-text, var(--color-text))' }}>{item.title}</h3>
<h3 style={{ margin: 0, fontSize: '1rem', color: 'var(--color-text)' }}>{item.title}</h3>
{!item.done && (
<Link to={item.fixTo} style={{ color: 'var(--color-primary, var(--color-primary))', fontWeight: 700, fontSize: '0.85rem', textDecoration: 'none', whiteSpace: 'nowrap' }}>
<Link to={item.fixTo} style={{ color: 'var(--color-primary)', fontWeight: 700, fontSize: '0.85rem', textDecoration: 'none', whiteSpace: 'nowrap' }}>
{item.fixLabel} →
</Link>
)}
</div>
<p style={{ margin: '0.35rem 0 0', color: 'var(--color-text-muted, var(--color-text-muted))', fontSize: '0.85rem', lineHeight: 1.5 }}>{item.detail}</p>
<p style={{ margin: '0.35rem 0 0', color: 'var(--color-text-muted)', fontSize: '0.85rem', lineHeight: 1.5 }}>{item.detail}</p>
</div>
</div>
))}
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/features/audit/AuditEventsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useMemo, useState } from 'react';
import { getJson } from '../../lib/api-client.js';
import { tint } from '../../lib/color.js';

/**
* Admin-only audit events timeline.
Expand Down Expand Up @@ -325,7 +326,7 @@ export function AuditEventsPage() {
display: 'inline-flex',
alignItems: 'center',
gap: '0.4rem',
background: 'rgba(16, 116, 128,0.2)',
background: tint('var(--color-primary)', 20),
color: 'var(--color-primary-light)',
borderRadius: '6px',
padding: '0.3rem 0.75rem',
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/features/audit/AuditRetentionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import { getJson } from '../../lib/api-client.js';
import { tint } from '../../lib/color.js';

/**
* Admin-only HIPAA audit-retention evidence dashboard.
Expand Down Expand Up @@ -139,7 +140,7 @@ export function AuditRetentionPage() {
display: 'inline-flex',
alignItems: 'center',
gap: '0.4rem',
background: 'rgba(16, 116, 128,0.2)',
background: tint('var(--color-primary)', 20),
color: 'var(--color-primary-light)',
borderRadius: '6px',
padding: '0.3rem 0.75rem',
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/features/auth/AcceptInvitePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { tint } from '../../lib/color.js';

interface InviteInfo {
token: string;
Expand Down Expand Up @@ -135,7 +136,7 @@ export function AcceptInvitePage() {
right: '-20%',
width: '60%',
height: '60%',
background: 'radial-gradient(circle, rgba(16, 116, 128,0.18) 0%, transparent 70%)',
background: `radial-gradient(circle, ${tint('var(--color-primary)', 18)} 0%, transparent 70%)`,
pointerEvents: 'none',
}}
/>
Expand Down
9 changes: 5 additions & 4 deletions packages/web/src/features/auth/CaregiverPortalPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Navigate } from 'react-router-dom';
import { useAuth } from '../../lib/AuthContext.js';
import { tint } from '../../lib/color.js';

const ADMIN_ROLES = new Set(['admin', 'coordinator']);

Expand Down Expand Up @@ -53,8 +54,8 @@ export function CaregiverPortalPage() {
width: '52px',
height: '52px',
borderRadius: '14px',
background: 'rgba(16, 116, 128,0.15)',
border: '1px solid rgba(16, 116, 128,0.25)',
background: tint('var(--color-primary)', 15),
border: `1px solid ${tint('var(--color-primary)', 25)}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
Expand All @@ -80,8 +81,8 @@ export function CaregiverPortalPage() {

<div
style={{
backgroundColor: 'rgba(16, 116, 128,0.08)',
border: '1px solid rgba(16, 116, 128,0.15)',
backgroundColor: tint('var(--color-primary)', 8),
border: `1px solid ${tint('var(--color-primary)', 15)}`,
borderRadius: '10px',
padding: '1rem',
display: 'flex',
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/features/auth/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { useAuth } from '../../lib/AuthContext.js';
import { BrandLogo } from '../../components/brand/BrandLogo.js';
import { tint } from '../../lib/color.js';

const ADMIN_ROLES = new Set(['admin', 'coordinator']);

Expand Down Expand Up @@ -112,7 +113,7 @@ export function LoginPage() {
right: '-20%',
width: '60%',
height: '60%',
background: 'radial-gradient(circle, rgba(16,116,128,0.22) 0%, transparent 70%)',
background: `radial-gradient(circle, ${tint('var(--color-primary)', 22)} 0%, transparent 70%)`,
pointerEvents: 'none',
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/features/auth/ResetPasswordPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function ResetPasswordPage() {
if (!token) {
return (
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }}>
<p style={{ color: 'var(--color-danger)' }}>
<p style={{ color: 'var(--color-danger-text)' }}>
Invalid reset link.{' '}
<Link to="/forgot-password" style={{ color: 'var(--color-primary)' }}>Request a new one.</Link>
</p>
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/features/auth/SignupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { tint } from '../../lib/color.js';

const steps = ['Agency info', 'Admin account'];

Expand Down Expand Up @@ -82,7 +83,7 @@ export function SignupPage() {
right: '-20%',
width: '60%',
height: '60%',
background: 'radial-gradient(circle, rgba(16, 116, 128,0.18) 0%, transparent 70%)',
background: `radial-gradient(circle, ${tint('var(--color-primary)', 18)} 0%, transparent 70%)`,
pointerEvents: 'none',
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/features/caregiver/CaregiverDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function StatusBadge({ status }: { status: string }) {
const map: Record<string, { bg: string; color: string; border: string; label: string }> = {
verified: { bg: 'var(--color-success-bg)', color: 'var(--color-success)', border: 'var(--color-success-border)', label: 'Verified' },
pending: { bg: 'var(--color-warning-bg)', color: 'var(--color-warning)', border: 'var(--color-warning-border)', label: 'Pending' },
flagged: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Flagged' },
flagged: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Flagged' },
corrected: { bg: 'var(--color-info-bg)', color: 'var(--color-primary)', border: 'var(--color-info-border)', label: 'Corrected' },
};
const fallback = { bg: 'var(--color-surface-soft)', color: 'var(--color-text-secondary)', border: 'var(--color-border)', label: status || 'Unknown' };
Expand Down
10 changes: 5 additions & 5 deletions packages/web/src/features/caregiver/CaregiverLearningHubPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ const CADENCE_LABEL: Record<string, string> = {
const STATUS_MAP = {
completed: { bg: 'var(--color-success-bg)', color: 'var(--color-success)', border: 'var(--color-success-border)', label: 'Completed' },
in_progress: { bg: 'var(--color-info-bg)', color: 'var(--color-primary)', border: 'var(--color-info-border)', label: 'In Progress' },
overdue: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Overdue' },
expired: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Expired' },
overdue: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Overdue' },
expired: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Expired' },
not_started: { bg: 'var(--color-bg)', color: 'var(--color-text-muted)', border: 'var(--color-border)', label: 'Not Started' },
};

Expand Down Expand Up @@ -123,7 +123,7 @@ export function CaregiverLearningHubPage() {
borderRadius: '6px',
border: 'none',
cursor: 'pointer',
background: active ? 'var(--color-primary, var(--color-primary))' : 'transparent',
background: active ? 'var(--color-primary)' : 'transparent',
color: active ? 'var(--color-surface)' : 'var(--color-text-muted)',
});

Expand All @@ -140,7 +140,7 @@ export function CaregiverLearningHubPage() {
</div>
<Link
to="/portal/training"
style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-primary, var(--color-primary))', textDecoration: 'none' }}
style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-primary)', textDecoration: 'none' }}
>
My Training →
</Link>
Expand Down Expand Up @@ -266,7 +266,7 @@ export function CaregiverLearningHubPage() {
fontSize: '0.8125rem',
fontWeight: 600,
color: 'var(--color-surface)',
background: status === 'completed' ? 'var(--color-text-muted)' : 'var(--color-primary, var(--color-primary))',
background: status === 'completed' ? 'var(--color-text-muted)' : 'var(--color-primary)',
borderRadius: '8px',
textDecoration: 'none',
whiteSpace: 'nowrap',
Expand Down
12 changes: 6 additions & 6 deletions packages/web/src/features/caregiver/CaregiverTrainingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ type TrainingTab = 'all' | 'required' | 'in_progress' | 'completed' | 'overdue';
const STATUS_CONFIG = {
completed: { bg: 'var(--color-success-bg)', color: 'var(--color-success)', border: 'var(--color-success-border)', label: 'Completed' },
in_progress: { bg: 'var(--color-info-bg)', color: 'var(--color-primary)', border: 'var(--color-info-border)', label: 'In Progress' },
overdue: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Overdue' },
expired: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger)', border: 'var(--color-danger-border)', label: 'Expired' },
overdue: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Overdue' },
expired: { bg: 'var(--color-danger-bg)', color: 'var(--color-danger-text)', border: 'var(--color-danger-border)', label: 'Expired' },
not_started: { bg: 'var(--color-bg)', color: 'var(--color-text-muted)', border: 'var(--color-border)', label: 'Not Started' },
};

Expand All @@ -64,7 +64,7 @@ function ProgressBar({ pct }: { pct: number }) {
<div style={{
height: '100%',
width: `${pct}%`,
background: pct === 100 ? 'var(--color-success)' : 'var(--color-primary, var(--color-primary))',
background: pct === 100 ? 'var(--color-success)' : 'var(--color-primary)',
borderRadius: '100px',
transition: 'width 0.3s',
}} />
Expand Down Expand Up @@ -141,7 +141,7 @@ export function CaregiverTrainingPage() {
borderRadius: '6px',
border: 'none',
cursor: 'pointer',
background: active ? 'var(--color-primary, var(--color-primary))' : 'transparent',
background: active ? 'var(--color-primary)' : 'transparent',
color: active ? 'var(--color-surface)' : 'var(--color-text-muted)',
});

Expand Down Expand Up @@ -186,7 +186,7 @@ export function CaregiverTrainingPage() {
)}

{error && (
<div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger)' }}>
<div style={{ background: 'var(--color-danger-bg)', border: '1px solid var(--color-danger-border)', borderRadius: '8px', padding: '0.75rem', marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--color-danger-text)' }}>
{error}
</div>
)}
Expand Down Expand Up @@ -265,7 +265,7 @@ export function CaregiverTrainingPage() {
fontSize: '0.8125rem',
fontWeight: 600,
color: isCompleted ? 'var(--color-text-muted)' : 'var(--color-surface)',
background: isCompleted ? 'var(--color-bg)' : 'var(--color-primary, var(--color-primary))',
background: isCompleted ? 'var(--color-bg)' : 'var(--color-primary)',
border: isCompleted ? '1px solid var(--color-border)' : 'none',
borderRadius: '6px',
cursor: 'pointer',
Expand Down
Loading
Loading