✨ Update design

src/components/pdf-menu.tsx

@@ -3,11 +3,14 @@ import type { PDFDocumentProxy, RenderTask } from 'pdfjs-dist'
 
 type Props = {
   src: string
+  background?: string
+  spinnerTrackColor?: string
+  spinnerAccentColor?: string
 }
 
 // pdfjs-dist touches the DOM/Canvas at import time, so it's loaded lazily inside
 // the effect below instead of at module scope — this file also runs during SSR.
-export function PdfMenu({ src }: Props) {
+export function PdfMenu({ src, background, spinnerTrackColor, spinnerAccentColor }: Props) {
   const containerRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const pdfRef = useRef<PDFDocumentProxy | null>(null)
@@ -148,11 +151,19 @@ export function PdfMenu({ src }: Props) {
 
   return (
     <div className="pdf-menu" ref={containerRef}>
-      <div className="pdf-menu-viewport">
+      <div className="pdf-menu-viewport" style={background ? { background } : undefined}>
         <canvas className="pdf-menu-page" ref={canvasRef} />
         {numPages === 0 && (
           <div className="pdf-menu-loading" role="status">
-            <div className="pdf-menu-spinner" aria-hidden="true" />
+            <div
+              className="pdf-menu-spinner"
+              aria-hidden="true"
+              style={
+                spinnerTrackColor || spinnerAccentColor
+                  ? { borderColor: spinnerTrackColor, borderTopColor: spinnerAccentColor }
+                  : undefined
+              }
+            />
             <p>Die Karte wird aufgetischt …</p>
           </div>
         )}

src/components/reservation-confirmed-modal.tsx

@@ -12,14 +12,12 @@ type Props = {
   onClose: () => void
 }
 
-function FlameBadgeIcon() {
+function SparkleBadgeIcon() {
   return (
-    <svg className="reservation-confirmed-flame" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <svg className="reservation-confirmed-sparkle" viewBox="0 0 24 24" aria-hidden="true">
       <path
-        d="M12 2c1 3-3 4-3 7.5A3.5 3.5 0 0 0 12 13a3.5 3.5 0 0 0 3-5.3c1.5 1 2.5 3 2.5 5a5.5 5.5 0 1 1-11 0C6.5 8.5 9.5 6 12 2Z"
+        d="M12 2c0.6 3.2 1.2 5.8 2.7 7.3S18.8 11.4 22 12c-3.2 0.6-5.8 1.2-7.3 2.7S12.6 18.8 12 22c-0.6-3.2-1.2-5.8-2.7-7.3S5.2 12.6 2 12c3.2-0.6 5.8-1.2 7.3-2.7S11.4 5.2 12 2Z"
-        stroke="currentColor"
+        fill="currentColor"
-        strokeWidth="1.4"
-        strokeLinejoin="round"
       />
     </svg>
   )
@@ -62,13 +60,13 @@ export function ReservationConfirmedModal({
         aria-labelledby="reservation-confirmed-title"
         onClick={(event) => event.stopPropagation()}
       >
-        <FlameBadgeIcon />
+        <SparkleBadgeIcon />
 
         <h2 id="reservation-confirmed-title" className="reservation-confirmed-title">
           Tisch reserviert!
         </h2>
         <p className="reservation-confirmed-message">
-          Bis bald, {customerName}! Wir halten Ihnen den Platz warm und legen schon mal Kohle nach.
+          Bis bald, {customerName}! Wir halten Ihnen den Platz warm und freuen uns auf Ihren Besuch.
         </p>
 
         <dl className="detail-list">

src/routes/index.tsx

@@ -228,11 +228,21 @@ function Home() {
             <div className="menu-stack">
               <div>
                 <h3 className="menu-stack-heading">Speisen</h3>
-                <PdfMenu src="/speisekarte.pdf" />
+                <PdfMenu
+                  src="/speisekarte.pdf"
+                  background="#fef8de"
+                  spinnerTrackColor="rgba(97, 16, 30, 0.2)"
+                  spinnerAccentColor="#61101e"
+                />
               </div>
               <div>
                 <h3 className="menu-stack-heading">Getränke</h3>
-                <PdfMenu src="/getraenkekarte.pdf" />
+                <PdfMenu
+                  src="/getraenkekarte.pdf"
+                  background="#b19e76"
+                  spinnerTrackColor="rgba(87, 23, 23, 0.3)"
+                  spinnerAccentColor="#571717"
+                />
               </div>
             </div>
           </div>

src/styles.css

@@ -911,7 +911,7 @@ a {
     animation: none;
   }
 
-  .reservation-confirmed-flame {
+  .reservation-confirmed-sparkle {
     animation: none;
   }
 }
@@ -1796,15 +1796,15 @@ a {
   text-align: center;
 }
 
-.reservation-confirmed-flame {
+.reservation-confirmed-sparkle {
   width: 3.25rem;
   height: 3.25rem;
   margin: 0 auto 1rem;
   color: var(--ember);
-  animation: reservation-confirmed-flicker 2.2s ease-in-out infinite;
+  animation: reservation-confirmed-twinkle 2.2s ease-in-out infinite;
 }
 
-@keyframes reservation-confirmed-flicker {
+@keyframes reservation-confirmed-twinkle {
   0%,
   100% {
     transform: rotate(0deg) scale(1);