colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(swift): Update UI styles and animations for improved consistency

Browse Source 
- Changed background colors and text colors across various components to enhance readability and visual appeal.
- Updated animation properties for smoother transitions in CanvasArea and BlockContainer.
- Adjusted styles in FallbackPicker, OverdrachtBlock, and other components to align with the new design system.
- Improved accessibility by ensuring color contrasts meet standards.

This update aims to create a more cohesive user experience throughout the application.
This commit is contained in:
ikbenlit
2025-12-26 13:10:04 +01:00
parent d67405df5f
commit 5174b48f48
13 changed files with 513 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/swift/command-center/context-bar.tsx
View File

@@ -12,10 +12,10 @@ import { Sun, Moon, Sunrise, Sunset, X, User, ArrowLeft } from 'lucide-react';
import Link from 'next/link';
const SHIFT_CONFIG: Record<ShiftType, { icon: typeof Sun; label: string; color: string }> = {
nacht: { icon: Moon, label: 'Nachtdienst', color: 'text-indigo-400' },
ochtend: { icon: Sunrise, label: 'Ochtenddienst', color: 'text-amber-400' },
middag: { icon: Sun, label: 'Middagdienst', color: 'text-yellow-400' },
avond: { icon: Sunset, label: 'Avonddienst', color: 'text-orange-400' },
nacht: { icon: Moon, label: 'Nachtdienst', color: 'text-indigo-600' },
ochtend: { icon: Sunrise, label: 'Ochtenddienst', color: 'text-amber-600' },
middag: { icon: Sun, label: 'Middagdienst', color: 'text-yellow-600' },
avond: { icon: Sunset, label: 'Avonddienst', color: 'text-orange-600' },
};
export function ContextBar() {
@@ -24,19 +24,19 @@ export function ContextBar() {
const ShiftIcon = shiftConfig.icon;
return (
<header className="h-12 border-b border-slate-700 flex items-center px-4 justify-between shrink-0 bg-slate-900">
<header className="h-12 border-b border-slate-200 flex items-center px-4 justify-between shrink-0 bg-white">
{/* Left: Logo + Shift */}
<div className="flex items-center gap-4">
<Link
href="/epd"
className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors"
className="flex items-center gap-2 text-slate-600 hover:text-slate-900 transition-colors"
title="Terug naar EPD"
>
<ArrowLeft size={16} />
<span className="text-sm font-semibold tracking-tight">Swift</span>
</Link>
<div className="h-4 w-px bg-slate-700" />
<div className="h-4 w-px bg-slate-200" />
<div className={`flex items-center gap-1.5 ${shiftConfig.color}`}>
<ShiftIcon size={14} />
@@ -47,17 +47,17 @@ export function ContextBar() {
{/* Center: Active Patient */}
<div className="flex items-center">
{activePatient ? (
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800 border border-slate-600">
<div className="w-5 h-5 rounded-full bg-blue-600 flex items-center justify-center text-[10px] font-medium">
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 border border-slate-300">
<div className="w-5 h-5 rounded-full bg-blue-600 flex items-center justify-center text-[10px] font-medium text-white">
{activePatient.name_given[0]?.[0]}
{activePatient.name_family[0]}
</div>
<span className="text-sm text-white">
<span className="text-sm text-slate-900">
{activePatient.name_given.join(' ')} {activePatient.name_family}
</span>
<button
onClick={() => setActivePatient(null)}
className="p-0.5 rounded hover:bg-slate-700 text-slate-400 hover:text-white transition-colors"
className="p-0.5 rounded hover:bg-slate-200 text-slate-400 hover:text-slate-700 transition-colors"
title="Patiënt deselecteren"
>
<X size={14} />
@@ -70,7 +70,7 @@ export function ContextBar() {
{/* Right: User */}
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 text-slate-400">
<div className="flex items-center gap-2 text-slate-600">
<User size={16} />
<span className="text-xs hidden sm:block">Verpleegkundige</span>
</div>