gsadmin/headplane
1
0
Fork 0
mirror of https://github.com/tale/headplane.git synced 2026-08-27 15:37:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: cleanup button + add correct focus rings

Browse Source
This commit is contained in:
Aarnav Tale
2026-03-09 00:17:39 -04:00
parent 0ce411e92b
commit 37d0080cba
16 changed files with 94 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Button.tsx
+25 -13
View File
@@ -4,7 +4,7 @@ import { type AriaButtonOptions, useButton } from "react-aria";
import cn from "~/utils/cn";
export interface ButtonProps extends AriaButtonOptions<"button"> {
variant?: "heavy" | "light" | "danger";
variant?: "heavy" | "light" | "danger" | "ghost";
className?: string;
children?: React.ReactNode;
ref?: React.RefObject<HTMLButtonElement | null>;
@@ -20,22 +20,34 @@ export default function Button({ variant = "light", ...props }: ButtonProps) {
ref={ref}
{...buttonProps}
className={cn(
"w-fit text-sm rounded-md px-3 py-2",
"focus:outline-hidden focus:ring-3",
props.isDisabled && "opacity-60 cursor-not-allowed",
"w-fit rounded-lg px-3.5 py-2 text-sm leading-tight",
"transition-colors duration-100",
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1",
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
props.isDisabled && "pointer-events-none opacity-50",
...(variant === "heavy"
? [
"bg-mist-900 dark:bg-mist-50 font-semibold",
"hover:bg-mist-900/90 dark:hover:bg-mist-50/90",
"text-mist-200 dark:text-mist-800",
"bg-indigo-500 font-semibold text-white",
"hover:bg-indigo-500/90",
"dark:bg-indigo-500/90 dark:hover:bg-indigo-500/80",
]
: variant === "danger"
? ["bg-red-500 text-white font-semibold", "hover:bg-red-500/90"]
: [
"bg-mist-100 dark:bg-mist-800/50 font-medium",
"border border-mist-200 dark:border-mist-700",
"hover:bg-mist-200/90 dark:hover:bg-mist-700/50",
]),
? [
"bg-red-600 font-semibold text-white",
"hover:bg-red-600/90",
"dark:bg-red-500 dark:hover:bg-red-500/90",
]
: variant === "ghost"
? [
"font-medium text-indigo-600 dark:text-indigo-400",
"hover:bg-indigo-50 dark:hover:bg-indigo-500/10",
]
: [
"border border-mist-200 bg-white font-medium",
"hover:bg-mist-50",
"dark:border-mist-700 dark:bg-mist-800/50",
"dark:hover:bg-mist-700/50",
]),
props.className,
)}
>