Basic projector styling with theme switching

Author: kurisu-dotto-komu

src/components/Event/EventProjectorOverlay.tsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { LuCalendar } from "react-icons/lu";
 
 import Brand from "@/components/Common/Brand";
+import ThemeToggle from "@/components/Common/ThemeToggle";
 import type { EventEnriched } from "@/content";
 import { formatDate, formatTime } from "@/utils/formatDate";
 
@@ -62,92 +63,80 @@ export default function EventProjectorOverlay({
   return (
     <div
       id="projector-overlay"
-      className="fixed inset-0 z-50 flex h-screen w-screen items-center justify-center bg-black"
-      data-theme="night"
+      className="bg-base-100 fixed inset-0 z-50 flex h-screen w-screen items-center justify-center"
       data-testid="projector-overlay"
     >
       <div
-        className="from-primary to-secondary text-base-100 relative flex bg-gradient-to-br"
+        className="relative flex"
         style={{
           width: "100vw",
           height: "calc(100vw * 9 / 16)",
           maxHeight: "100vh",
           maxWidth: "calc(100vh * 16 / 9)",
-          padding: "4vw",
-          fontSize: "1vw",
+          padding: "5vw",
         }}
       >
         {/* Left Column */}
-        <div className="flex flex-1 flex-col justify-between" style={{ paddingRight: "2vw" }}>
+        <div className="flex flex-1 flex-col justify-between" style={{ paddingRight: "3vw" }}>
           {/* Top: Title and Description */}
           <div className="flex flex-col" style={{ gap: "2vw" }}>
             <h1
-              className="line-clamp-3 leading-tight font-bold"
-              style={{ fontSize: "5vw" }}
+              className="text-base-content line-clamp-3 leading-tight font-bold"
+              style={{ fontSize: "4.5vw" }}
               data-testid="projector-title"
             >
               {event.data.title}
             </h1>
-
-            {event.data.topics && event.data.topics.length > 0 && (
-              <p
-                className="line-clamp-2 opacity-80"
-                style={{ fontSize: "2vw" }}
-                data-testid="projector-topics"
-              >
-                {event.data.topics.join(" • ")}
-              </p>
-            )}
           </div>
 
           {/* Bottom: Date/Time */}
           <div className="flex items-center" style={{ gap: "1.5vw" }}>
             <div
-              className="bg-base-100/20 rounded-box flex flex-shrink-0 items-center justify-center"
-              style={{ padding: "1vw" }}
+              className="bg-primary/10 rounded-box flex flex-shrink-0 items-center justify-center"
+              style={{ width: "4vw", height: "4vw" }}
             >
-              <LuCalendar className="text-base-100" style={{ width: "2vw", height: "2vw" }} />
+              <LuCalendar className="text-primary" style={{ width: "2vw", height: "2vw" }} />
+            </div>
+            <div className="flex flex-col" style={{ gap: "0.3vw" }}>
+              <span
+                className="text-base-content font-medium"
+                style={{ fontSize: "1.8vw" }}
+                data-testid="projector-datetime"
+              >
+                {formattedDate}
+              </span>
+              <span className="text-base-content/70" style={{ fontSize: "1.5vw" }}>
+                {formattedTime}
+                {event.data.duration && <span> • {event.data.duration / 60} hours</span>}
+              </span>
             </div>
-            <span
-              className="overflow-hidden font-medium text-ellipsis whitespace-nowrap"
-              style={{ fontSize: "2vw" }}
-              data-testid="projector-datetime"
-            >
-              {formattedDate} • {formattedTime}
-              {event.data.duration && (
-                <span className="opacity-70" style={{ fontSize: "1.5vw" }}>
-                  {" "}
-                  ({event.data.duration / 60} hours)
-                </span>
-              )}
-            </span>
           </div>
         </div>
 
         {/* Right Column */}
-        <div className="flex flex-shrink-0 flex-col justify-between" style={{ width: "25vw" }}>
+        <div className="flex flex-shrink-0 flex-col justify-between" style={{ width: "30vw" }}>
           {/* Top: Branding */}
           <div className="flex justify-end">
-            <div className="transform" style={{ scale: "calc(3vw / 48)" }}>
-              <Brand />
+            <div className="text-base-content" style={{ width: "20vw" }}>
+              <Brand className="w-full" />
             </div>
           </div>
 
           {/* Bottom: Venue Info */}
           {event.venue && (
-            <div className="self-end" style={{ width: "20vw" }}>
-              <div className="bg-base-100/20 rounded-box shadow-2xl" style={{ padding: "1.5vw" }}>
+            <div className="flex flex-col items-end">
+              <div className="bg-base-200 rounded-box" style={{ padding: "2vw", width: "25vw" }}>
                 <h3
-                  className="font-bold"
-                  style={{ fontSize: "1.5vw", marginBottom: "0.5vw" }}
+                  className="text-base-content font-bold"
+                  style={{ fontSize: "1.6vw", marginBottom: "0.5vw" }}
                   data-testid="projector-venue-title"
                 >
                   {event.venue.title}
                 </h3>
                 {event.venue.address && (
                   <p
-                    className="opacity-80"
-                    style={{ fontSize: "1.2vw" }}
+                    className="text-base-content/70"
+                    style={{ fontSize: "1.3vw", lineHeight: "1.6" }}
                     data-testid="projector-venue-address"
                   >
                     {event.venue.address}
@@ -158,6 +147,13 @@ export default function EventProjectorOverlay({
           )}
         </div>
       </div>
+
+      {/* Theme Switcher - appears on hover */}
+      <div className="group/theme-toggle absolute right-0 bottom-0 p-6">
+        <div className="opacity-0 transition-opacity duration-300 group-hover/theme-toggle:opacity-100">
+          <ThemeToggle testId="projector-theme-toggle" />
+        </div>
+      </div>
     </div>
   );
 }

src/styles/utils.css

@@ -60,11 +60,11 @@
   margin-top: calc(var(--gap) / 2);
   margin-bottom: calc(var(--gap) / 2);
 
-  &.first{
+  &.first {
     border-top-left-radius: var(--radius);
     margin-top: var(--gap);
   }
-  &.last{
+  &.last {
     border-bottom-left-radius: var(--radius);
     margin-bottom: var(--gap);
   }