diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx index b95f061d..4b68791b 100644 --- a/apps/web/src/app/projects/page.tsx +++ b/apps/web/src/app/projects/page.tsx @@ -399,7 +399,7 @@ function ProjectCard({ > {isSelectionMode && (
-
+
diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx index 1b43978e..d72ac0f6 100644 --- a/apps/web/src/components/onboarding.tsx +++ b/apps/web/src/components/onboarding.tsx @@ -1,6 +1,6 @@ "use client"; -import { Dialog, DialogContent } from "./ui/dialog"; +import { Dialog, DialogContent, DialogTitle } from "./ui/dialog"; import { Button } from "./ui/button"; import { ArrowRightIcon } from "lucide-react"; import { useState, useEffect } from "react"; @@ -26,6 +26,19 @@ export function Onboarding() { localStorage.setItem("hasSeenOnboarding", "true"); }; + const getStepTitle = () => { + switch (step) { + case 0: + return "Welcome to OpenCut Beta! 🎉"; + case 1: + return "⚠️ This is a super early beta!"; + case 2: + return "🦋 Have fun testing!"; + default: + return "OpenCut Onboarding"; + } + }; + const renderStepContent = () => { switch (step) { case 0: @@ -42,7 +55,7 @@ export function Onboarding() { return (
- + <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="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" /> </div> @@ -53,7 +66,7 @@ export function Onboarding() { return ( <div className="space-y-5"> <div className="space-y-3"> - <Title title="🦋 Have fun testing!" /> + <Title title={getStepTitle()} /> <Description description="Join our [Discord](https://discord.gg/zmR9N35cjK), chat with cool people and share feedback to help make OpenCut the best editor ever." /> </div> <NextButton onClick={handleClose}>Finish</NextButton> @@ -67,6 +80,9 @@ export function Onboarding() { return ( <Dialog open={isOpen} onOpenChange={handleClose}> <DialogContent className="sm:max-w-[425px] !outline-none"> + <DialogTitle> + <span className="sr-only">{getStepTitle()}</span> + </DialogTitle> {renderStepContent()} </DialogContent> </Dialog>