Skip to content

Commit 37d0080

Browse files
taletale
committed
feat: cleanup button + add correct focus rings
1 parent 0ce411e commit 37d0080

File tree

16 files changed

+94
-81
lines changed

16 files changed

+94
-81
lines changed

‎app/components/Button.tsx‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { type AriaButtonOptions, useButton } from "react-aria";
44
import cn from "~/utils/cn";
55

66
export interface ButtonProps extends AriaButtonOptions<"button"> {
7-
variant?: "heavy" | "light" | "danger";
7+
variant?: "heavy" | "light" | "danger" | "ghost";
88
className?: string;
99
children?: React.ReactNode;
1010
ref?: React.RefObject<HTMLButtonElement | null>;
@@ -20,22 +20,34 @@ export default function Button({ variant = "light", ...props }: ButtonProps) {
2020
ref={ref}
2121
{...buttonProps}
2222
className={cn(
23-
"w-fit text-sm rounded-md px-3 py-2",
24-
"focus:outline-hidden focus:ring-3",
25-
props.isDisabled && "opacity-60 cursor-not-allowed",
23+
"w-fit rounded-lg px-3.5 py-2 text-sm leading-tight",
24+
"transition-colors duration-100",
25+
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1",
26+
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
27+
props.isDisabled && "pointer-events-none opacity-50",
2628
...(variant === "heavy"
2729
? [
28-
"bg-mist-900 dark:bg-mist-50 font-semibold",
29-
"hover:bg-mist-900/90 dark:hover:bg-mist-50/90",
30-
"text-mist-200 dark:text-mist-800",
30+
"bg-indigo-500 font-semibold text-white",
31+
"hover:bg-indigo-500/90",
32+
"dark:bg-indigo-500/90 dark:hover:bg-indigo-500/80",
3133
]
3234
: variant === "danger"
33-
? ["bg-red-500 text-white font-semibold", "hover:bg-red-500/90"]
34-
: [
35-
"bg-mist-100 dark:bg-mist-800/50 font-medium",
36-
"border border-mist-200 dark:border-mist-700",
37-
"hover:bg-mist-200/90 dark:hover:bg-mist-700/50",
38-
]),
35+
? [
36+
"bg-red-600 font-semibold text-white",
37+
"hover:bg-red-600/90",
38+
"dark:bg-red-500 dark:hover:bg-red-500/90",
39+
]
40+
: variant === "ghost"
41+
? [
42+
"font-medium text-indigo-600 dark:text-indigo-400",
43+
"hover:bg-indigo-50 dark:hover:bg-indigo-500/10",
44+
]
45+
: [
46+
"border border-mist-200 bg-white font-medium",
47+
"hover:bg-mist-50",
48+
"dark:border-mist-700 dark:bg-mist-800/50",
49+
"dark:hover:bg-mist-700/50",
50+
]),
3951
props.className,
4052
)}
4153
>

‎app/components/Footer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ export default function Footer({ url, debug, healthy }: FooterProps) {
4242
tabIndex={0} // Allows keyboard focus
4343
className={cn(
4444
"blur-sm hover:blur-none focus:blur-none transition",
45-
"focus:outline-hidden focus:ring-2 rounded-xs",
45+
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1 rounded-xs",
46+
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
4647
)}
4748
>
4849
{url}

‎app/components/Header.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ function TabLink({ name, to, icon }: TabLinkProps) {
4242
"after:absolute after:bottom-0 after:left-3 after:right-3",
4343
"after:h-0.5 after:bg-mist-900 dark:after:bg-mist-200",
4444
"hover:bg-mist-200 dark:hover:bg-mist-900",
45-
"focus:outline-hidden focus:ring-3",
45+
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1",
46+
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
4647
isActive ? "after:visible" : "after:invisible",
4748
)
4849
}
@@ -60,7 +61,8 @@ function Link({ href, text }: LinkProps) {
6061
<a
6162
className={cn(
6263
"hidden sm:block hover:underline text-sm",
63-
"focus:outline-hidden focus:ring-3 rounded-md",
64+
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1 rounded-md",
65+
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
6466
)}
6567
href={href}
6668
rel="noreferrer"

‎app/components/IconButton.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,18 @@ export default function IconButton({ variant = "light", ...props }: IconButtonPr
2222
{...buttonProps}
2323
aria-label={props.label}
2424
className={cn(
25-
"rounded-full flex items-center justify-center p-1",
26-
"focus:outline-hidden focus:ring-3",
27-
props.isDisabled && "opacity-60 cursor-not-allowed",
25+
"flex items-center justify-center rounded-full p-1",
26+
"transition-colors duration-100",
27+
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1",
28+
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
29+
props.isDisabled && "pointer-events-none opacity-50",
2830
...(variant === "heavy"
2931
? [
30-
"bg-mist-900 dark:bg-mist-50 font-semibold",
31-
"hover:bg-mist-900/90 dark:hover:bg-mist-50/90",
32-
"text-mist-200 dark:text-mist-800",
32+
"bg-indigo-500 font-semibold text-white",
33+
"hover:bg-indigo-500/90",
34+
"dark:bg-indigo-500/90 dark:hover:bg-indigo-500/80",
3335
]
34-
: [
35-
"bg-mist-100 dark:bg-mist-700/30 font-medium",
36-
"hover:bg-mist-200/90 dark:hover:bg-mist-800/30",
37-
]),
36+
: ["bg-mist-100 dark:bg-mist-700/30", "hover:bg-mist-200/90 dark:hover:bg-mist-800/30"]),
3837
props.className,
3938
)}
4039
>

‎app/components/Input.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ export default function Input(props: InputProps) {
5454
{...inputProps}
5555
className={cn(
5656
"rounded-md px-3 py-2",
57-
"focus:outline-hidden focus:ring-3",
57+
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1",
58+
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
5859
"bg-white dark:bg-mist-900",
5960
"border border-mist-100 dark:border-mist-800",
6061
className,

‎app/components/Link.tsx‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,32 @@
1-
import { ExternalLink } from 'lucide-react';
2-
import cn from '~/utils/cn';
1+
import { ExternalLink } from "lucide-react";
2+
3+
import cn from "~/utils/cn";
34

45
export interface LinkProps {
5-
to: string;
6-
name: string;
7-
children: string;
8-
className?: string;
6+
to: string;
7+
name: string;
8+
children: string;
9+
className?: string;
910
}
1011

11-
export default function Link({
12-
to,
13-
name: alt,
14-
children,
15-
className,
16-
}: LinkProps) {
17-
return (
18-
<a
19-
href={to}
20-
aria-label={alt}
21-
target="_blank"
22-
rel="noreferrer"
23-
className={cn(
24-
'inline-flex items-center gap-x-0.5',
25-
'text-blue-500 hover:text-blue-700',
26-
'dark:text-blue-400 dark:hover:text-blue-300',
27-
'focus:outline-hidden focus:ring-3 rounded-md',
28-
className,
29-
)}
30-
>
31-
{children}
32-
<ExternalLink className="w-3.5" />
33-
</a>
34-
);
12+
export default function Link({ to, name: alt, children, className }: LinkProps) {
13+
return (
14+
<a
15+
href={to}
16+
aria-label={alt}
17+
target="_blank"
18+
rel="noreferrer"
19+
className={cn(
20+
"inline-flex items-center gap-x-0.5",
21+
"text-blue-500 hover:text-blue-700",
22+
"dark:text-blue-400 dark:hover:text-blue-300",
23+
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1 rounded-md",
24+
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
25+
className,
26+
)}
27+
>
28+
{children}
29+
<ExternalLink className="w-3.5" />
30+
</a>
31+
);
3532
}

‎app/components/NumberInput.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ export default function NumberInput(props: InputProps) {
4343
{...groupProps}
4444
className={cn(
4545
"flex items-center gap-1 rounded-md pr-1",
46-
"focus-within:outline-hidden focus-within:ring-3",
46+
"focus-within:outline-hidden focus-within:ring-2 focus-within:ring-indigo-500/40 focus-within:ring-offset-1",
47+
"dark:focus-within:ring-indigo-400/40 dark:focus-within:ring-offset-mist-900",
4748
"bg-white dark:bg-mist-900",
4849
"border border-mist-100 dark:border-mist-800",
4950
)}

‎app/components/Options.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ function Option({ item, state }: OptionsOptionProps) {
4343
className={cn(
4444
"pl-0.5 pr-2 py-0.5 rounded-md cursor-pointer",
4545
"aria-selected:bg-mist-100 dark:aria-selected:bg-mist-950",
46-
"focus:outline-hidden focus:ring-3 z-10",
46+
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1 z-10",
47+
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
4748
"border border-mist-100 dark:border-mist-800",
4849
)}
4950
>

‎app/components/RadioGroup.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,9 @@ function Radio({ children, label, className, ...props }: RadioProps) {
6262
className={cn(
6363
"w-5 h-5 aspect-square rounded-full p-1 border-2",
6464
"border border-mist-600 dark:border-mist-300",
65-
isFocusVisible ? "ring-4" : "",
65+
isFocusVisible
66+
? "ring-2 ring-indigo-500/40 ring-offset-1 dark:ring-indigo-400/40 dark:ring-offset-mist-900"
67+
: "",
6668
isDisabled ? "opacity-50 cursor-not-allowed" : "",
6769
isSelected ? "border-[6px] border-mist-900 dark:border-mist-100" : "",
6870
className,

‎app/components/Select.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ function Select(props: SelectProps) {
5858
</label>
5959
<div
6060
className={cn(
61-
"flex rounded-md focus:outline-hidden focus-within:ring-3",
61+
"flex rounded-md focus:outline-hidden focus-within:ring-2 focus-within:ring-indigo-500/40 focus-within:ring-offset-1",
62+
"dark:focus-within:ring-indigo-400/40 dark:focus-within:ring-offset-mist-900",
6263
"bg-white dark:bg-mist-900",
6364
"border border-mist-100 dark:border-mist-800",
6465
props.isInvalid && "ring-red-400",

0 commit comments

Comments
 (0)