[pull] main from OpenCut-app:main

apps/web/src/components/editor-header.tsx

@@ -21,6 +21,7 @@ import { FaDiscord } from "react-icons/fa6";
 import { useTheme } from "next-themes";
 import { TransitionUpIcon } from "./icons";
 import { PanelPresetSelector } from "./panel-preset-selector";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
 
 export function EditorHeader() {
   const { activeProject, renameProject, deleteProject } = useProjectStore();
@@ -139,25 +140,39 @@ export function EditorHeader() {
 }
 
 function ExportButton() {
+  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
+
   const handleExport = () => {
-    // TODO: Implement export functionality
-    // NOTE: This is already being worked on
-    console.log("Export project");
-    window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
+    setIsExportDialogOpen(true);
   };
 
   return (
-    <button
-      className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.12rem] py-[0.12rem] cursor-pointer hover:brightness-95 transition-all duration-200"
-      onClick={handleExport}
-    >
-      <div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
-        <TransitionUpIcon className="z-50" />
-        <span className="text-[0.875rem] z-50">Export</span>
-        <div className="absolute w-full h-full left-0 top-0 bg-linear-to-t from-white/0 to-white/50 z-10 rounded-[0.8rem] flex items-center justify-center">
-          <div className="absolute w-[calc(100%-2px)] h-[calc(100%-2px)] top-[0.08rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-[0.8rem]"></div>
+    <>
+      <button
+        className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.12rem] py-[0.12rem] cursor-pointer hover:brightness-95 transition-all duration-200"
+        onClick={handleExport}
+      >
+        <div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
+          <TransitionUpIcon className="z-50" />
+          <span className="text-[0.875rem] z-50">Export (soon)</span>
+          <div className="absolute w-full h-full left-0 top-0 bg-linear-to-t from-white/0 to-white/50 z-10 rounded-[0.8rem] flex items-center justify-center">
+            <div className="absolute w-[calc(100%-2px)] h-[calc(100%-2px)] top-[0.08rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-[0.8rem]"></div>
+          </div>
         </div>
-      </div>
-    </button>
+      </button>
+      <Dialog open={isExportDialogOpen} onOpenChange={setIsExportDialogOpen}>
+        <DialogContent className="p-6">
+          <DialogHeader>
+            <DialogTitle>Export Project</DialogTitle>
+          </DialogHeader>
+          <div>
+            <p className="text-muted-foreground">
+              Export functionality is not ready yet. We're currently working on
+              a custom pipeline to make this possible.
+            </p>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

apps/web/src/components/editor/properties-panel/text-properties.tsx

@@ -6,7 +6,8 @@ import { useTimelineStore } from "@/stores/timeline-store";
 import { Slider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { useState } from "react";
+import { Switch } from "@/components/ui/switch"; // Add Switch import
+import { useState, useRef } from "react";
 import {
   PropertyItem,
   PropertyItemLabel,
@@ -30,6 +31,9 @@ export function TextProperties({
     Math.round(element.opacity * 100).toString()
   );
 
+  // Track the last selected color for toggling
+  const lastSelectedColor = useRef("#000000");
+
   const parseAndValidateNumber = (
     value: string,
     min: number,
@@ -86,6 +90,20 @@ export function TextProperties({
     updateTextElement(trackId, element.id, { opacity: opacityPercent / 100 });
   };
 
+  // Update last selected color when a new color is picked
+  const handleColorChange = (color: string) => {
+    if (color !== "transparent") {
+      lastSelectedColor.current = color;
+    }
+    updateTextElement(trackId, element.id, { backgroundColor: color });
+  };
+
+  // Toggle between transparent and last selected color
+  const handleTransparentToggle = (isTransparent: boolean) => {
+    const newColor = isTransparent ? "transparent" : lastSelectedColor.current;
+    updateTextElement(trackId, element.id, { backgroundColor: newColor });
+  };
+
   return (
     <div className="space-y-6 p-5">
       <Textarea
@@ -220,21 +238,31 @@ export function TextProperties({
           />
         </PropertyItemValue>
       </PropertyItem>
-      <PropertyItem direction="row">
-        <PropertyItemLabel>Background</PropertyItemLabel>
+      <PropertyItem direction="column">
+        <div className="flex items-center justify-between">
+          <PropertyItemLabel>Background</PropertyItemLabel>
+          <div className="flex items-center space-x-2">
+            <Switch
+              id="transparent-bg-toggle"
+              checked={element.backgroundColor === "transparent"}
+              onCheckedChange={handleTransparentToggle}
+            />
+            <label htmlFor="transparent-bg-toggle" className="text-sm font-medium">
+              Transparent
+            </label>
+          </div>
+        </div>
         <PropertyItemValue>
           <Input
             type="color"
             value={
               element.backgroundColor === "transparent"
-                ? "#000000"
+                ? lastSelectedColor.current
                 : element.backgroundColor || "#000000"
             }
-            onChange={(e) => {
-              const backgroundColor = e.target.value;
-              updateTextElement(trackId, element.id, { backgroundColor });
-            }}
+            onChange={(e) => handleColorChange(e.target.value)}
             className="w-full cursor-pointer rounded-full"
+            disabled={element.backgroundColor === "transparent"}
           />
         </PropertyItemValue>
       </PropertyItem>

apps/web/src/components/footer.tsx

@@ -36,7 +36,13 @@ export function Footer() {
           {/* Brand Section */}
           <div className="md:col-span-1 max-w-sm">
             <div className="flex justify-start items-center gap-2 mb-4">
-              <Image src="/logo.svg" alt="OpenCut" width={24} height={24} />
+              <Image 
+                src="/logo.svg" 
+                alt="OpenCut" 
+                width={24} 
+                height={24}
+                className="invert dark:invert-0"
+              />
               <span className="font-bold text-lg">OpenCut</span>
             </div>
             <p className="text-sm md:text-left text-muted-foreground mb-5">

apps/web/src/components/onboarding.tsx

@@ -57,6 +57,7 @@ export function Onboarding() {
             <div className="space-y-3">
               <Title title={getStepTitle()} />
               <Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
+              <Description description="A lot of features are still missing, like the export functionality. We're working hard to build them out!" />
               <Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" />
             </div>
             <NextButton onClick={handleNext}>Next</NextButton>
@@ -79,7 +80,7 @@ export function Onboarding() {
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[425px] !outline-none">
+      <DialogContent className="sm:max-w-[425px] !outline-none pt-2">
         <DialogTitle>
           <span className="sr-only">{getStepTitle()}</span>
         </DialogTitle>

apps/web/src/components/ui/dialog.tsx

@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-150 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-lg",
+        "fixed left-[50%] top-[50%] p-6 z-150 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-lg",
         className
       )}
       onCloseAutoFocus={(e) => {