refactor: soften slot phase timeline colors (#292)

Replace harsh solid color blocks with subtle bottom borders (50% opacity) and neutral backgrounds. Update timeline cursor to col-resize for better UX. Improves visual hierarchy and reduces eye strain.

Author: samcm

src/components/Ethereum/SlotTimeline/SlotTimeline.tsx

@@ -129,7 +129,7 @@ function SlotTimelineComponent({
         <div
           className={clsx(
             'relative flex overflow-hidden rounded-sm border border-border',
-            onTimeClick && 'cursor-pointer touch-none select-none',
+            onTimeClick && 'cursor-col-resize touch-none select-none',
             isDragging && 'cursor-grabbing'
           )}
           style={{ height: `${height}px` }}

src/utils/beacon.ts

@@ -41,22 +41,22 @@ export const DEFAULT_BEACON_SLOT_PHASES: SlotPhase[] = [
   {
     label: 'Block',
     duration: ATTESTATION_DEADLINE_MS,
-    className: 'bg-cyan-500',
-    textClassName: 'text-cyan-200 font-bold',
+    className: 'bg-surface border-b-4 border-b-cyan-500/50',
+    textClassName: 'text-cyan-600 dark:text-cyan-400 font-bold',
     description: 'Proposer broadcasts block',
   },
   {
     label: 'Attestations',
     duration: 4000,
-    className: 'bg-green-500',
-    textClassName: 'text-green-200 font-bold',
+    className: 'bg-surface border-b-4 border-b-green-500/50',
+    textClassName: 'text-green-600 dark:text-green-400 font-bold',
     description: 'Validators attest to block',
   },
   {
     label: 'Aggregations',
     duration: 4000,
-    className: 'bg-amber-500',
-    textClassName: 'text-amber-200 font-bold',
+    className: 'bg-surface border-b-4 border-b-amber-500/50',
+    textClassName: 'text-amber-600 dark:text-amber-400 font-bold',
     description: 'Attestations aggregated',
   },
 ];