Improve kiosk readability with updated fonts and background

marcselman · marcselman · commit c15c34be709b · 2026-02-25T20:37:49.000Z
Update kiosk page styling: remove session dimming, add food/drink background, and increase font sizes. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9b278ad5-3a45-420e-ba83-0847baf9924f Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: defdd27b-b90e-4ea6-895e-b433fe80f9e6 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/04133160-d2cd-42c9-82f0-4e08d800b951/9b278ad5-3a45-420e-ba83-0847baf9924f/R7QqjaK Replit-Helium-Checkpoint-Created: true
diff --git a/client/src/pages/Kiosk.tsx b/client/src/pages/Kiosk.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
-import { Clock, MapPin, User, Monitor } from "lucide-react";
+import { Clock, MapPin, User, Monitor, Utensils } from "lucide-react";
+import foodDrinkBg from "@assets/image_1768474260490.png";
 
 interface KioskSession {
   id: string;
@@ -84,15 +85,6 @@ const DUMMY_SESSIONS: KioskSession[] = [
     speakers: [{ name: "Ruben Visser" }],
     categories: ["Deepdive"],
   },
-  {
-    id: "9",
-    title: "Retrospective & Borrel",
-    room: "Zaal 2 — Workshopruimte",
-    startTime: "2026-04-16T17:00:00",
-    endTime: "2026-04-16T18:00:00",
-    speakers: [],
-    categories: ["Feedback"],
-  },
   {
     id: "10",
     title: "Diner",
@@ -117,6 +109,10 @@ function formatTime(iso: string) {
   return new Date(iso).toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" });
 }
 
+function isFoodDrinkSession(categories: string[]): boolean {
+  return categories.some(c => c.toLowerCase() === "eten & drinken");
+}
+
 type SessionStatus = "now" | "next" | "later";
 
 function getSessionStatus(session: KioskSession, now: Date): SessionStatus {
@@ -155,70 +151,81 @@ function SessionBlock({
 }) {
   const isNow = status === "now";
   const isNext = status === "next";
-  const isLater = status === "later";
-  const isCompact = heightPx < 120;
+  const isCompact = heightPx < 140;
+  const isFoodDrink = isFoodDrinkSession(session.categories);
 
   return (
     <div
       className={`
-        rounded-2xl border-2 p-4 overflow-hidden flex flex-col justify-between transition-all
+        rounded-2xl border-2 p-5 overflow-hidden flex flex-col justify-between transition-all relative
         ${isNow
           ? "border-green-400 bg-green-50 dark:bg-green-950/30 dark:border-green-600 shadow-lg shadow-green-100 dark:shadow-green-900/20"
           : isNext
             ? "border-amber-400 bg-amber-50 dark:bg-amber-950/30 dark:border-amber-600 shadow-md shadow-amber-100 dark:shadow-amber-900/20"
-            : "border-border/40 bg-muted/30 opacity-70"
+            : "border-border bg-card"
         }
       `}
       style={{ height: `${heightPx}px`, minHeight: "60px" }}
       data-testid={`kiosk-session-${session.id}`}
     >
-      <div>
-        <div className="flex items-center gap-2 mb-1">
+      {isFoodDrink && (
+        <div
+          className="absolute inset-0 pointer-events-none opacity-[0.12] dark:opacity-[0.10]"
+          style={{
+            backgroundImage: `url(${foodDrinkBg})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        />
+      )}
+      <div className="relative z-10">
+        <div className="flex items-center gap-2 mb-1.5">
           {isNow && (
-            <span className="inline-flex items-center gap-1.5 rounded-full bg-green-600 px-2.5 py-0.5 text-xs font-bold text-white animate-pulse" data-testid="badge-now">
-              <span className="h-1.5 w-1.5 rounded-full bg-white" />
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-green-600 px-3 py-1 text-sm font-bold text-white animate-pulse" data-testid="badge-now">
+              <span className="h-2 w-2 rounded-full bg-white" />
               NU BEZIG
             </span>
           )}
           {isNext && (
-            <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-500 px-2.5 py-0.5 text-xs font-bold text-white" data-testid="badge-next">
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-500 px-3 py-1 text-sm font-bold text-white" data-testid="badge-next">
               AANKOMEND
             </span>
           )}
-          {isLater && (
-            <span className="inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
+          {status === "later" && (
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
               LATER
             </span>
           )}
           {session.categories.length > 0 && (
-            <span className={`text-xs font-medium ${isLater ? "text-muted-foreground/70" : "text-muted-foreground"}`}>
+            <span className="text-sm font-medium text-muted-foreground">
+              {isFoodDrink && <Utensils className="inline mr-1 h-3.5 w-3.5" />}
               {session.categories.join(", ")}
             </span>
           )}
         </div>
 
         <h3
           className={`font-bold leading-tight mb-1 ${
-            isNow ? "text-xl" : isNext ? "text-lg" : "text-base text-muted-foreground/70"
+            isNow ? "text-2xl" : isNext ? "text-xl" : "text-lg"
           } ${isCompact ? "line-clamp-1" : "line-clamp-2"}`}
           data-testid={`kiosk-title-${session.id}`}
         >
           {session.title}
         </h3>
 
         {session.speakers.length > 0 && !isCompact && (
-          <div className={`flex items-center gap-1.5 ${isLater ? "text-muted-foreground/60" : "text-muted-foreground"}`}>
-            <User className="h-3.5 w-3.5 shrink-0" />
-            <span className="text-sm truncate">
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <User className="h-4 w-4 shrink-0" />
+            <span className="text-base truncate">
               {session.speakers.map(s => s.name).join(", ")}
             </span>
           </div>
         )}
       </div>
 
-      <div className={`flex items-center gap-1.5 mt-1 ${isLater ? "text-muted-foreground/60" : "text-muted-foreground"}`}>
-        <Clock className="h-3.5 w-3.5 shrink-0" />
-        <span className="text-xs font-medium">
+      <div className="flex items-center gap-2 mt-1 text-muted-foreground relative z-10">
+        <Clock className="h-4 w-4 shrink-0" />
+        <span className="text-sm font-medium">
           {formatTime(session.startTime)} – {formatTime(session.endTime)}
         </span>
       </div>
@@ -266,33 +273,33 @@ export default function Kiosk() {
 
   return (
     <div className="fixed inset-0 z-[100] flex flex-col bg-background overflow-hidden" data-testid="kiosk-container">
-      <header className="flex items-center justify-between px-8 py-4 border-b bg-[hsl(var(--primary))] text-primary-foreground shrink-0">
-        <div className="flex items-center gap-4">
-          <img src="/logo.svg" alt="Caesar Forum" className="h-10 brightness-0 invert" data-testid="kiosk-logo" />
-          <div className="h-8 w-px bg-primary-foreground/30" />
-          <h1 className="text-2xl font-bold tracking-tight" data-testid="kiosk-title">Sessierooster</h1>
+      <header className="flex items-center justify-between px-8 py-5 border-b bg-[hsl(var(--primary))] text-primary-foreground shrink-0">
+        <div className="flex items-center gap-5">
+          <img src="/logo.svg" alt="Caesar Forum" className="h-12 brightness-0 invert" data-testid="kiosk-logo" />
+          <div className="h-9 w-px bg-primary-foreground/30" />
+          <h1 className="text-3xl font-bold tracking-tight" data-testid="kiosk-title">Sessierooster</h1>
         </div>
-        <div className="flex items-center gap-3 text-primary-foreground/80">
-          <Monitor className="h-5 w-5" />
-          <time className="text-xl font-mono font-semibold tabular-nums" data-testid="kiosk-clock">
+        <div className="flex items-center gap-4 text-primary-foreground/80">
+          <Monitor className="h-6 w-6" />
+          <time className="text-2xl font-mono font-semibold tabular-nums" data-testid="kiosk-clock">
             {now.toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" })}
           </time>
-          <span className="text-lg">
+          <span className="text-xl">
             {now.toLocaleDateString("nl-NL", { weekday: "long", day: "numeric", month: "long" })}
           </span>
         </div>
       </header>
 
       <main className="flex-1 overflow-auto p-6">
         <div className="flex gap-4 h-full">
-          <div className="w-16 shrink-0 relative" style={{ height: `${timelineHeightPx}px` }}>
+          <div className="w-20 shrink-0 relative" style={{ height: `${timelineHeightPx}px` }}>
             {timeMarkers.map((marker, i) => (
               <div
                 key={i}
                 className="absolute right-0 flex items-center gap-1 -translate-y-1/2"
                 style={{ top: `${marker.offset}px` }}
               >
-                <span className="text-xs font-mono text-muted-foreground font-medium">
+                <span className="text-sm font-mono text-muted-foreground font-semibold">
                   {marker.time.toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" })}
                 </span>
               </div>
@@ -310,9 +317,9 @@ export default function Kiosk() {
 
               return (
                 <div key={room} className="flex flex-col min-w-0">
-                  <div className="flex items-center gap-2 rounded-xl bg-[hsl(var(--primary))] px-4 py-2.5 text-primary-foreground shrink-0 mb-4">
-                    <MapPin className="h-4 w-4 shrink-0" />
-                    <h2 className="text-sm font-bold truncate" data-testid={`kiosk-room-name-${room}`}>{room}</h2>
+                  <div className="flex items-center gap-2 rounded-xl bg-[hsl(var(--primary))] px-5 py-3 text-primary-foreground shrink-0 mb-4">
+                    <MapPin className="h-5 w-5 shrink-0" />
+                    <h2 className="text-base font-bold truncate" data-testid={`kiosk-room-name-${room}`}>{room}</h2>
                   </div>
 
                   <div className="relative" style={{ height: `${timelineHeightPx}px` }}>
