From df1e80b5287ff71867bad1a1bfebb102cef7d5bf Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 13:15:09 -0400
Subject: Lay groundwork for Tailwind v4 upgrade

---
 apps/web/src/components/editor/preview-panel.tsx | 26 ++++++++++++------------
 1 file changed, 13 insertions(+), 13 deletions(-)

(limited to 'apps/web/src/components/editor/preview-panel.tsx')

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 639858d0..2c6cbf96 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -274,7 +274,7 @@ export function PreviewPanel() {
   const renderBlurBackground = () => {
     if (
       !activeProject?.backgroundType ||
-      activeProject.backgroundType !== "blur" ||
+      activeProject.backgroundType !== "blur-sm" ||
       blurBackgroundElements.length === 0
     ) {
       return null;
@@ -392,7 +392,7 @@ export function PreviewPanel() {
         return (
           <div
             key={element.id}
-            className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
+            className="absolute inset-0 bg-linear-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
           >
             <div className="text-center">
               <div className="text-2xl mb-2">🎬</div>
@@ -474,7 +474,7 @@ export function PreviewPanel() {
                 width: previewDimensions.width,
                 height: previewDimensions.height,
                 backgroundColor:
-                  activeProject?.backgroundType === "blur"
+                  activeProject?.backgroundType === "blur-sm"
                     ? "transparent"
                     : activeProject?.backgroundColor || "#000000",
               }}
@@ -489,7 +489,7 @@ export function PreviewPanel() {
                   renderElement(elementData, index)
                 )
               )}
-              {activeProject?.backgroundType === "blur" &&
+              {activeProject?.backgroundType === "blur-sm" &&
                 blurBackgroundElements.length === 0 &&
                 activeElements.length > 0 && (
                   <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -675,7 +675,7 @@ function FullscreenToolbar({
             style={{ width: `${progress}%` }}
           />
           <div
-            className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-sm bg-white border border-black/20"
+            className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-xs bg-white border border-black/20"
             style={{ left: `${progress}%` }}
           />
         </div>
@@ -684,11 +684,11 @@ function FullscreenToolbar({
       <Button
         variant="text"
         size="icon"
-        className="!size-4 text-white/80 hover:text-white"
+        className="size-4! text-white/80 hover:text-white"
         onClick={onToggleExpanded}
         title="Exit fullscreen (Esc)"
       >
-        <Expand className="!size-4" />
+        <Expand className="size-4!" />
       </Button>
     </div>
   );
@@ -722,7 +722,7 @@ function FullscreenPreview({
   getTotalDuration: () => number;
 }) {
   return (
-    <div className="fixed inset-0 z-[9999] flex flex-col">
+    <div className="fixed inset-0 z-9999 flex flex-col">
       <div className="flex-1 flex items-center justify-center bg-background">
         <div
           className="relative overflow-hidden border border-border m-3"
@@ -730,7 +730,7 @@ function FullscreenPreview({
             width: previewDimensions.width,
             height: previewDimensions.height,
             backgroundColor:
-              activeProject?.backgroundType === "blur"
+              activeProject?.backgroundType === "blur-sm"
                 ? "#1a1a1a"
                 : activeProject?.backgroundColor || "#1a1a1a",
           }}
@@ -745,7 +745,7 @@ function FullscreenPreview({
               renderElement(elementData, index)
             )
           )}
-          {activeProject?.backgroundType === "blur" &&
+          {activeProject?.backgroundType === "blur-sm" &&
             blurBackgroundElements.length === 0 &&
             activeElements.length > 0 && (
               <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -868,7 +868,7 @@ function PreviewToolbar({
           <DropdownMenuTrigger asChild>
             <Button
               size="sm"
-              className="!bg-panel-accent text-foreground/85 text-[0.70rem] h-4 rounded-none border border-muted-foreground px-0.5 py-0 font-light"
+              className="bg-panel-accent! text-foreground/85 text-[0.70rem] h-4 rounded-none border border-muted-foreground px-0.5 py-0 font-light"
               disabled={!hasAnyElements}
             >
               {getDisplayName()}
@@ -899,11 +899,11 @@ function PreviewToolbar({
         <Button
           variant="text"
           size="icon"
-          className="!size-4 text-muted-foreground"
+          className="size-4! text-muted-foreground"
           onClick={onToggleExpanded}
           title="Enter fullscreen"
         >
-          <Expand className="!size-4" />
+          <Expand className="size-4!" />
         </Button>
       </div>
     </div>
-- 
cgit v1.3.1