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

- 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.

components/swift/command-center/canvas-area.tsx

@@ -33,22 +33,50 @@ export function CanvasArea() {
     }
   }
 
+  // Block animations volgens UX specificatie (sectie 11.1):
+  // Openen: Slide up + fade in (200ms), Scale: 0.95 → 1.0
+  // Sluiten: Slide down + fade out (200ms), Scale: 1.0 → 0.95
   const blockAnimations = {
     initial: { opacity: 0, y: 20, scale: 0.95 },
-    animate: { opacity: 1, y: 0, scale: 1 },
-    exit: { opacity: 0, y: -20, scale: 0.95 },
-    transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] as [number, number, number, number] },
+    animate: { 
+      opacity: 1, 
+      y: 0, 
+      scale: 1,
+      transition: {
+        duration: 0.2,
+        ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
+      },
+    },
+    exit: { 
+      opacity: 0, 
+      y: 20, // Slide down (niet omhoog)
+      scale: 0.95,
+      transition: {
+        duration: 0.2,
+        ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
+      },
+    },
   };
 
   return (
     <main className="flex-1 flex items-center justify-center p-4 overflow-auto">
-      <AnimatePresence mode="wait">
+      <AnimatePresence mode="wait" initial={false}>
         {activeBlock ? (
-          <motion.div key={activeBlock} {...blockAnimations}>
+          <motion.div 
+            key={activeBlock} 
+            initial={blockAnimations.initial}
+            animate={blockAnimations.animate}
+            exit={blockAnimations.exit}
+          >
             {renderBlock(activeBlock, prefillData)}
           </motion.div>
         ) : activePatient ? (
-          <motion.div key="patient-context" {...blockAnimations}>
+          <motion.div 
+            key="patient-context"
+            initial={blockAnimations.initial}
+            animate={blockAnimations.animate}
+            exit={blockAnimations.exit}
+          >
             <PatientContextCard />
           </motion.div>
         ) : (
@@ -57,6 +85,7 @@ export function CanvasArea() {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
           >
             <EmptyState />
           </motion.div>
@@ -70,7 +99,7 @@ function EmptyState() {
   return (
     <div className="text-center max-w-md">
       <div className="mb-6">
-        <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-slate-800 flex items-center justify-center">
+        <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="32"
@@ -81,14 +110,14 @@ function EmptyState() {
             strokeWidth="1.5"
             strokeLinecap="round"
             strokeLinejoin="round"
-            className="text-slate-500"
+            className="text-slate-400"
           >
             <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
             <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
             <line x1="12" x2="12" y1="19" y2="22" />
           </svg>
         </div>
-        <h2 className="text-xl font-medium text-slate-300 mb-2">Wat wil je doen?</h2>
+        <h2 className="text-xl font-medium text-slate-700 mb-2">Wat wil je doen?</h2>
         <p className="text-sm text-slate-500">
           Typ of spreek je intentie
         </p>
@@ -100,8 +129,8 @@ function EmptyState() {
         <ExampleCommand icon="📋" text="overdracht" />
       </div>
 
-      <p className="mt-6 text-xs text-slate-600">
-        <kbd className="px-1.5 py-0.5 rounded bg-slate-800 text-slate-400">⌘K</kbd> om te focussen
+      <p className="mt-6 text-xs text-slate-500">
+        <kbd className="px-1.5 py-0.5 rounded bg-white border border-slate-200 text-slate-600 shadow-sm">⌘K</kbd> om te focussen
       </p>
     </div>
   );
@@ -109,9 +138,9 @@ function EmptyState() {
 
 function ExampleCommand({ icon, text }: { icon: string; text: string }) {
   return (
-    <div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-slate-800/50 text-sm">
+    <div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-white border border-slate-200 shadow-sm text-sm">
       <span>{icon}</span>
-      <span className="text-slate-400">&quot;{text}&quot;</span>
+      <span className="text-slate-600">&quot;{text}&quot;</span>
     </div>
   );
 }