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

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

Browse source
This commit is contained in:
Anish Sarkar 2026-05-14 13:49:33 +05:30
parent 198c38b335
commit f98bde1e04
7 changed files with 125 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

31
surfsense_web/components/ui/equation-node.tsx
View file

@ -6,6 +6,7 @@ import type { TEquationElement } from "platejs";
import { PlateElement, type PlateElementProps, useSelected } from "platejs/react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
export function EquationElement({ children, ...props }: PlateElementProps<TEquationElement>) {
@ -74,20 +75,23 @@ export function EquationElement({ children, ...props }: PlateElementProps<TEquat
{...inputProps}
/>
<div className="mt-1 flex justify-end gap-1">
<button
className="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent"
<Button
variant="ghost"
size="sm"
className="h-auto px-2 py-1 text-xs text-muted-foreground"
onClick={onDismiss}
type="button"
>
Cancel
</button>
<button
className="rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:bg-primary/90"
</Button>
<Button
size="sm"
className="h-auto px-2 py-1 text-xs"
onClick={onSubmit}
type="button"
>
Done
</button>
</Button>
</div>
</div>
)}
@ -162,20 +166,23 @@ export function InlineEquationElement({ children, ...props }: PlateElementProps<
{...inputProps}
/>
<span className="mt-1 flex justify-end gap-1">
<button
className="rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent"
<Button
variant="ghost"
size="sm"
className="h-auto px-2 py-0.5 text-xs text-muted-foreground"
onClick={onDismiss}
type="button"
>
Cancel
</button>
<button
className="rounded bg-primary px-2 py-0.5 text-xs text-primary-foreground hover:bg-primary/90"
</Button>
<Button
size="sm"
className="h-auto px-2 py-0.5 text-xs"
onClick={onSubmit}
type="button"
>
Done
</button>
</Button>
</span>
</span>
)}

35
surfsense_web/components/ui/hero-carousel.tsx
View file

@ -3,7 +3,8 @@
import { ChevronLeft, ChevronRight } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect, useRef, useState } from "react";
import { ExpandedGifOverlay, useExpandedGif } from "@/components/ui/expanded-gif-overlay";
import { Button } from "@/components/ui/button";
import { ExpandedMediaOverlay, useExpandedMedia } from "@/components/ui/expanded-gif-overlay";
const carouselItems = [
{
@ -70,7 +71,7 @@ function HeroCarouselCard({
src: string;
onExpandedChange?: (expanded: boolean) => void;
}) {
const { expanded, open, close } = useExpandedGif();
const { expanded, open, close } = useExpandedMedia();
const videoRef = useRef<HTMLVideoElement>(null);
const [hasLoaded, setHasLoaded] = useState(false);
@ -147,7 +148,7 @@ function HeroCarouselCard({
</div>
<AnimatePresence>
{expanded && <ExpandedGifOverlay src={src} alt={title} onClose={close} />}
{expanded && <ExpandedMediaOverlay src={src} alt={title} onClose={close} />}
</AnimatePresence>
</>
);
@ -204,22 +205,26 @@ function HeroCarousel() {
</div>
<div className="relative z-5 mt-4 flex items-center justify-center gap-2">
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => !isGifExpanded && goToPrev()}
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
className="size-11 rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Previous slide"
>
<ChevronLeft className="size-5" />
</button>
</Button>
<div className="flex items-center">
{carouselItems.map((_, i) => (
<button
key={`dot_${i}`}
{carouselItems.map((carouselItem, i) => (
<Button
key={carouselItem.src}
type="button"
variant="ghost"
size="icon"
onClick={() => !isGifExpanded && goTo(i)}
className="flex h-11 min-w-[28px] items-center justify-center touch-manipulation"
className="h-11 min-w-[28px] bg-transparent p-0 hover:bg-transparent touch-manipulation"
aria-label={`Go to slide ${i + 1}`}
>
<span
@ -229,18 +234,20 @@ function HeroCarousel() {
: "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
}`}
/>
</button>
</Button>
))}
</div>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => !isGifExpanded && goToNext()}
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
className="size-11 rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Next slide"
>
<ChevronRight className="size-5" />
</button>
</Button>
</div>
</div>
);