0fdaedc7ff
Updates all remaining frontend components to use the new Barclays design system color tokens: - brand-dark-blue → primary-blue (#1A2142) - brand-accent → active-blue (#006DE3) - brand-light-blue → cyan-brand (#00AEEF) - brand-gray → grey-100 (#F6F6F6) Components updated: - CampaignDetail and ProofDetailView in Campaigns.tsx - Projects.tsx (full component migration) - StatusDashboard.tsx (status tiles and colors) - CreateProjectModal.tsx (modal styling) - FeedbackReport.tsx (remaining brand colors) - Login.tsx and Profile.tsx - WIPReviewer.tsx and CopyGenAI.tsx - Header, LoadingVisual, ToggleSwitch - AssetPreview, ProofPreview, AssetUpload - ProofTypeManager Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
28 lines
No EOL
978 B
TypeScript
Executable file
28 lines
No EOL
978 B
TypeScript
Executable file
import React from 'react';
|
|
|
|
interface ToggleSwitchProps {
|
|
enabled: boolean;
|
|
onChange: (enabled: boolean) => void;
|
|
}
|
|
|
|
export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ enabled, onChange }) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-active-blue focus:ring-offset-2 ${
|
|
enabled ? 'bg-active-blue' : 'bg-gray-300'
|
|
}`}
|
|
role="switch"
|
|
aria-checked={enabled}
|
|
onClick={() => onChange(!enabled)}
|
|
>
|
|
<span className="sr-only">Use setting</span>
|
|
<span
|
|
aria-hidden="true"
|
|
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
|
|
enabled ? 'translate-x-5' : 'translate-x-0'
|
|
}`}
|
|
/>
|
|
</button>
|
|
);
|
|
}; |