From b9e1dcf23e29e0adb08119b92f91e81db23ebb26 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 24 Jun 2025 10:32:19 +0200
Subject: [PATCH] refactor: change button variant from 'ghost' to 'text' across
 multiple components for consistency

---
 apps/web/src/app/(auth)/login/page.tsx         |  2 +-
 apps/web/src/app/(auth)/signup/page.tsx        |  2 +-
 apps/web/src/components/auth-form.tsx          |  2 +-
 .../src/components/editor/preview-panel.tsx    |  2 +-
 apps/web/src/components/editor/timeline.tsx    | 18 +++++++++---------
 apps/web/src/components/header.tsx             |  2 +-
 apps/web/src/components/ui/button.tsx          |  2 +-
 apps/web/src/components/ui/calendar.tsx        |  2 +-
 apps/web/src/components/ui/input.tsx           |  2 +-
 apps/web/src/components/ui/pagination.tsx      |  2 +-
 apps/web/src/components/ui/sidebar.tsx         |  2 +-
 11 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
index 5f37ced..9935e15 100644
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -137,7 +137,7 @@ export default function LoginPage() {
   return (
     <div className="flex h-screen items-center justify-center relative">
       <Button
-        variant="ghost"
+        variant="text"
         onClick={() => router.back()}
         className="absolute top-6 left-6"
       >
diff --git a/apps/web/src/app/(auth)/signup/page.tsx b/apps/web/src/app/(auth)/signup/page.tsx
index d1feece..b28e222 100644
--- a/apps/web/src/app/(auth)/signup/page.tsx
+++ b/apps/web/src/app/(auth)/signup/page.tsx
@@ -159,7 +159,7 @@ export default function SignUpPage() {
   return (
     <div className="flex h-screen items-center justify-center relative">
       <Button
-        variant="ghost"
+        variant="text"
         onClick={() => router.back()}
         className="absolute top-6 left-6"
       >
diff --git a/apps/web/src/components/auth-form.tsx b/apps/web/src/components/auth-form.tsx
index 3dd5603..0c02496 100644
--- a/apps/web/src/components/auth-form.tsx
+++ b/apps/web/src/components/auth-form.tsx
@@ -313,7 +313,7 @@ export function AuthForm({ mode }: AuthFormProps) {
   return (
     <div className="flex h-screen items-center justify-center relative">
       <Button
-        variant="ghost"
+        variant="text"
         onClick={() => router.back()}
         className="absolute top-6 left-6"
       >
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 5c27da5..624a549 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -149,7 +149,7 @@ export function PreviewPanel() {
         {/* Debug Toggle - Only show in development */}
         {SHOW_DEBUG_INFO && (
           <Button
-            variant="ghost"
+            variant="text"
             size="sm"
             onClick={() => setShowDebug(!showDebug)}
             className="text-xs"
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index ce81f9e..9abb522 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -498,7 +498,7 @@ export function Timeline() {
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                variant="ghost"
+                variant="text"
                 size="icon"
                 onClick={toggle}
                 className="mr-2"
@@ -549,7 +549,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" onClick={handleSplitSelected}>
+              <Button variant="text" size="icon" onClick={handleSplitSelected}>
                 <Scissors className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -558,7 +558,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
+              <Button variant="text" size="icon">
                 <ArrowLeftToLine className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -567,7 +567,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
+              <Button variant="text" size="icon">
                 <ArrowRightToLine className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -576,7 +576,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
+              <Button variant="text" size="icon">
                 <SplitSquareHorizontal className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -585,7 +585,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" onClick={handleDuplicateSelected}>
+              <Button variant="text" size="icon" onClick={handleDuplicateSelected}>
                 <Copy className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -594,7 +594,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" onClick={handleFreezeSelected}>
+              <Button variant="text" size="icon" onClick={handleFreezeSelected}>
                 <Snowflake className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -603,7 +603,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" onClick={handleDeleteSelected}>
+              <Button variant="text" size="icon" onClick={handleDeleteSelected}>
                 <Trash2 className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -1625,7 +1625,7 @@ function TimelineTrackContent({
                     {/* Clip options menu */}
                     <div className="absolute top-1 right-1 z-10">
                       <Button
-                        variant="ghost"
+                        variant="text"
                         size="icon"
                         className="opacity-0 group-hover:opacity-100 transition-opacity"
                         onClick={() => setClipMenuOpen(clip.id)}
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index 9f842b2..4b12b6e 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -38,7 +38,7 @@ export function Header() {
     <nav className="flex items-center">
       <Link href="https://github.com/OpenCut-app/OpenCut" target="_blank">
         <Button
-          variant="ghost"
+          variant="text"
           className="flex items-center text-sm text-muted-foreground hover:text-foreground"
         >
           <span className="hidden sm:inline">GitHub</span>
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index f5863e2..d4406d5 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -17,7 +17,7 @@ const buttonVariants = cva(
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        text: "bg-transparent p-0 rounded-none hover:text-muted-foreground", // Instead of ghost (matches app better)
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/apps/web/src/components/ui/calendar.tsx b/apps/web/src/components/ui/calendar.tsx
index 2dca9b1..192643c 100644
--- a/apps/web/src/components/ui/calendar.tsx
+++ b/apps/web/src/components/ui/calendar.tsx
@@ -43,7 +43,7 @@ function Calendar({
             : "[&:has([aria-selected])]:rounded-md"
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
+          buttonVariants({ variant: "text" }),
           "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
         ),
         day_range_start: "day-range-start",
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 42f4c45..7231404 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -41,7 +41,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         {showPasswordToggle && (
           <Button
             type="button"
-            variant="ghost"
+            variant="text"
             size="icon"
             onClick={() => onShowPasswordChange?.(!showPassword)}
             className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground"
diff --git a/apps/web/src/components/ui/pagination.tsx b/apps/web/src/components/ui/pagination.tsx
index 79fd268..61766ce 100644
--- a/apps/web/src/components/ui/pagination.tsx
+++ b/apps/web/src/components/ui/pagination.tsx
@@ -49,7 +49,7 @@ const PaginationLink = ({
     aria-current={isActive ? "page" : undefined}
     className={cn(
       buttonVariants({
-        variant: isActive ? "outline" : "ghost",
+        variant: isActive ? "outline" : "text",
         size,
       }),
       className
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index e69d875..c158350 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -269,7 +269,7 @@ const SidebarTrigger = React.forwardRef<
     <Button
       ref={ref}
       data-sidebar="trigger"
-      variant="ghost"
+      variant="text"
       size="icon"
       className={cn("h-8 w-8", className)}
       onClick={(event) => {