refactor: replace button elements with Button component for improved consistency and styling across additional UI components

This commit is contained in:
Anish Sarkar 2026-05-14 15:02:46 +05:30
parent 13b2e874f6
commit c77babf39b
25 changed files with 148 additions and 92 deletions

View file

@ -2,6 +2,7 @@
import { Search, X } from "lucide-react";
import type { FC } from "react";
import { Button } from "@/components/ui/button";
import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";
@ -76,14 +77,16 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
onChange={(e) => onSearchChange(e.target.value)}
/>
{searchQuery && (
<button
<Button
variant="ghost"
size="icon"
type="button"
onClick={() => onSearchChange("")}
className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground hover:text-accent-foreground transition-colors"
className="absolute right-1.5 top-1/2 size-7 -translate-y-1/2 text-muted-foreground transition-colors hover:bg-transparent hover:text-accent-foreground"
aria-label="Clear search"
>
<X className="size-4" />
</button>
<X data-icon="inline-start" />
</Button>
)}
</div>
</div>

View file

@ -3,6 +3,7 @@
import { AlertTriangle, X } from "lucide-react";
import type { FC } from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
interface ConnectorWarningBannerProps {
@ -42,14 +43,16 @@ export const ConnectorWarningBanner: FC<ConnectorWarningBannerProps> = ({
)}
</div>
{onDismiss && (
<button
<Button
variant="ghost"
size="icon"
type="button"
onClick={handleDismiss}
className="shrink-0 p-0.5 rounded hover:bg-yellow-500/20 transition-colors"
className="size-6 shrink-0 rounded p-0 transition-colors hover:bg-yellow-500/20"
aria-label="Dismiss warning"
>
<X className="size-3.5 text-yellow-700 dark:text-yellow-300" />
</button>
<X data-icon="inline-start" className="text-yellow-700 dark:text-yellow-300" />
</Button>
)}
</div>
);

View file

@ -90,14 +90,15 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
{/* Header */}
<div className="flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
<button
<Button
variant="ghost"
type="button"
onClick={onBack}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground mb-6 w-fit"
className="mb-6 h-auto w-fit justify-start gap-2 px-0 py-0 text-xs text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
<ArrowLeft className="size-4" />
<ArrowLeft data-icon="inline-start" />
Back to connectors
</button>
</Button>
<div className="flex items-center gap-4 mb-6">
<div className="flex h-14 w-14 items-center justify-center rounded-xl border border-slate-400/30">

View file

@ -206,14 +206,15 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
)}
>
{/* Back button */}
<button
<Button
variant="ghost"
type="button"
onClick={onBack}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground mb-6 w-fit"
className="mb-6 h-auto w-fit justify-start gap-2 px-0 py-0 text-xs text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
<ArrowLeft className="size-4" />
<ArrowLeft data-icon="inline-start" />
Back to connectors
</button>
</Button>
{/* Connector header */}
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">

View file

@ -128,14 +128,15 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
>
{/* Back button - only show if not from OAuth */}
{!isFromOAuth && (
<button
<Button
variant="ghost"
type="button"
onClick={onSkip}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground mb-6 w-fit"
className="mb-6 h-auto w-fit justify-start gap-2 px-0 py-0 text-xs text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
<ArrowLeft className="size-4" />
<ArrowLeft data-icon="inline-start" />
Back to connectors
</button>
</Button>
)}
{/* Success header */}

View file

@ -216,14 +216,15 @@ export const YouTubeCrawlerView: FC<YouTubeCrawlerViewProps> = ({ searchSpaceId,
<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
{/* Header */}
<div className="shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
<button
<Button
variant="ghost"
type="button"
onClick={onBack}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground mb-6 w-fit"
className="mb-6 h-auto w-fit justify-start gap-2 px-0 py-0 text-xs text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
<ArrowLeft className="size-4" />
<ArrowLeft data-icon="inline-start" />
Back to connectors
</button>
</Button>
<div className="flex items-center gap-4 mb-6">
<div className="flex h-14 w-14 items-center justify-center rounded-xl border border-slate-400/30">