1 files changed, 26 insertions, 15 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index d2333417..3a7ee3a0 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -29,6 +29,7 @@ import { useRouter } from "next/navigation";
 import { FaDiscord } from "react-icons/fa6";
 import { useTheme } from "next-themes";
 import { usePlaybackStore } from "@/stores/playback-store";
+import { TransitionUpIcon } from "./icons";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
@@ -39,13 +40,6 @@ export function EditorHeader() {
   const router = useRouter();
   const { theme, setTheme } = useTheme();
 
-  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");
-  };
-
   const handleNameSave = async (newName: string) => {
     console.log("handleNameSave", newName);
     if (activeProject && newName.trim() && newName !== activeProject.name) {
@@ -148,14 +142,7 @@ export function EditorHeader() {
   const rightContent = (
     <nav className="flex items-center gap-2">
       <KeyboardShortcutsHelp />
-      <Button
-        size="sm"
-        className="h-8 text-xs !bg-linear-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity"
-        onClick={handleExport}
-      >
-        <Download className="h-4 w-4" />
-        <span className="text-sm pr-1">Export</span>
-      </Button>
+      <ExportButton />
       <Button
         size="icon"
         variant="text"
@@ -177,3 +164,27 @@ export function EditorHeader() {
     />
   );
 }
+
+function ExportButton() {
+  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");
+  };
+
+  return (
+    <button
+      className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.1rem] py-[0.1rem] cursor-pointer hover:brightness-95 transition-all duration-200"
+      onClick={handleExport}
+    >
+      <div className="flex items-center gap-1.5 bg-linear-270 from-[#37B6F7] to-[#2567EC] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.45)]">
+        <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%-6px)] h-[calc(100%-4px)] top-0.5 bg-linear-270 from-[#37B6F7] to-[#2567EC] z-50 rounded-lg"></div>
+        </div>
+      </div>
+    </button>
+  );
+}