xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: change button variant from 'ghost' to 'text' across multiple components for consistency

Browse Source
This commit is contained in:
Maze Winther
2025-06-24 10:32:19 +02:00
parent 75ee0fb637
commit b9e1dcf23e
11 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/(auth)/login/page.tsx
View File

@ -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"
>

2
apps/web/src/app/(auth)/signup/page.tsx
View File

@ -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"
>

2
apps/web/src/components/auth-form.tsx
View File

@ -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"
>

2
apps/web/src/components/editor/preview-panel.tsx
View File

@ -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"

18
apps/web/src/components/editor/timeline.tsx
View File

@ -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)}

2
apps/web/src/components/header.tsx
View File

@ -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>

2
apps/web/src/components/ui/button.tsx
View File

@ -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: {

2
apps/web/src/components/ui/calendar.tsx
View File

@ -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",

2
apps/web/src/components/ui/input.tsx
View File

@ -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"

2
apps/web/src/components/ui/pagination.tsx
View File

@ -49,7 +49,7 @@ const PaginationLink = ({
aria-current={isActive ? "page" : undefined}
className={cn(
buttonVariants({
variant: isActive ? "outline" : "ghost",
variant: isActive ? "outline" : "text",
size,
}),
className

2
apps/web/src/components/ui/sidebar.tsx
View File

@ -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) => {