apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-23 19:05:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
surfsense_web/features/chat-messages/hitl/edit-panel/fields/calendar-field.tsx
View file

@ -4,6 +4,7 @@ import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import type React from "react";
import { useCallback, useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@ -81,16 +82,17 @@ export function DateTimePickerField({
<div className="flex gap-2">
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
<Button
variant="outline"
id={id}
type="button"
className="flex-1 flex items-center gap-2 h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring"
className="h-9 flex-1 justify-start gap-2 bg-transparent px-3 py-1 text-sm"
>
<CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
<CalendarIcon data-icon="inline-start" className="text-muted-foreground" />
<span className={selectedDate ? "text-foreground" : "text-muted-foreground"}>
{displayLabel}
</span>
</button>
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar

11
surfsense_web/features/chat-messages/timeline/timeline.tsx
View file

@ -3,6 +3,7 @@
import { ChevronRightIcon } from "lucide-react";
import { type FC, useEffect, useMemo, useState } from "react";
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { Button } from "@/components/ui/button";
import { getToolDisplayName } from "@/contracts/enums/toolIcons";
import { HitlApprovalCard, usePendingInterrupt } from "@/features/chat-messages/hitl";
import { cn } from "@/lib/utils";
@ -98,11 +99,12 @@ export const Timeline: FC<{
return (
<div className="mx-auto w-full max-w-(--thread-max-width) px-2 py-2">
<div className="rounded-lg">
<button
<Button
variant="ghost"
type="button"
onClick={() => setIsOpen((prev) => !prev)}
className={cn(
"flex w-full items-center gap-1.5 text-left text-sm transition-colors",
"h-auto w-full justify-start gap-1.5 p-0 text-left text-sm font-normal transition-colors hover:bg-transparent",
"text-muted-foreground hover:text-accent-foreground"
)}
>
@ -112,9 +114,10 @@ export const Timeline: FC<{
<span>{headerText}</span>
)}
<ChevronRightIcon
className={cn("size-4 transition-transform duration-200", isOpen && "rotate-90")}
data-icon="inline-end"
className={cn("transition-transform duration-200", isOpen && "rotate-90")}
/>
</button>
</Button>
<div
className={cn(

7
surfsense_web/features/chat-messages/timeline/tool-registry/fallback/default-fallback-card.tsx
View file

@ -97,10 +97,11 @@ export const DefaultFallbackCard: TimelineToolComponent = ({
>
<div className="flex items-stretch transition-colors hover:bg-accent hover:text-accent-foreground">
<CollapsibleTrigger asChild>
<button
<Button
variant="ghost"
type="button"
className={cn(
"flex flex-1 min-w-0 items-center gap-3 py-4 pl-5 pr-2 text-left",
"h-auto flex-1 min-w-0 justify-start gap-3 rounded-none py-4 pl-5 pr-2 text-left font-normal hover:bg-transparent",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
"disabled:cursor-default"
)}
@ -148,7 +149,7 @@ export const DefaultFallbackCard: TimelineToolComponent = ({
</p>
)}
</div>
</button>
</Button>
</CollapsibleTrigger>
<div className="flex shrink-0 items-center gap-2 pl-2 pr-5">