feat: redesign buttons and share them in dialogs

app/components/Button.tsx

@@ -1,16 +1,15 @@
 import type { Dispatch, SetStateAction } from 'react';
 import React, { useRef } from 'react';
-import { Button as AriaButton } from 'react-aria-components';
-import { useButton } from 'react-aria';
+import { useButton, type AriaButtonOptions } from 'react-aria';
 import { cn } from '~/utils/cn';
 
-export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
-	variant?: 'heavy'
-	isDisabled?: boolean
+export interface ButtonProps extends AriaButtonOptions<'button'> {
+	variant?: 'heavy' | 'light'
+	className?: string
 	children?: React.ReactNode
 }
 
-export default function Button({ variant = 'light', ...props }: Props) {
+export default function Button({ variant = 'light', ...props }: ButtonProps) {
 	const ref = useRef<HTMLButtonElement | null>(null);
 	const { buttonProps } = useButton(props, ref);
 

app/components/Card.tsx

@@ -1,17 +1,8 @@
 import React from 'react';
 import Title from '~/components/Title';
+import Text from '~/components/Text';
 import { cn } from '~/utils/cn';
 
-function Text(props: React.HTMLProps<HTMLParagraphElement>) {
-	return (
-		<p {...props} className={cn('text-base leading-6 my-0', props.className)} />
-	);
-}
-
-type Props = React.HTMLProps<HTMLDivElement> & {
-	variant?: 'raised' | 'flat';
-};
-
 interface Props extends React.HTMLProps<HTMLDivElement> {
 	variant?: 'raised' | 'flat';
 }

app/components/Dialog.tsx

@@ -1,17 +1,17 @@
 import React, { Dispatch, ReactNode, SetStateAction } from 'react';
 import Button, { ButtonProps } from '~/components/Button';
 import Title from '~/components/Title';
+import Text from '~/components/Text';
+import Card from '~/components/Card';
 import {
-	Button as AriaButton,
 	Dialog as AriaDialog,
 	DialogTrigger,
-	Heading as AriaHeading,
 	Modal,
 	ModalOverlay,
 } from 'react-aria-components';
 import { cn } from '~/utils/cn';
 
-interface ActionProps extends ButtonProps {
+interface ActionProps extends Omit<ButtonProps, 'variant'> {
 	variant: 'cancel' | 'confirm';
 }
 
@@ -25,10 +25,16 @@ function Action(props: ActionProps) {
 	);
 }
 
-function Text(props: React.HTMLProps<HTMLParagraphElement>) {
+interface GutterProps {
+	children: ReactNode;
+}
+
+function Gutter({ children }: GutterProps) {
 	return (
-		<p {...props} className={cn('text-base leading-6 my-0', props.className)} />
-	);
+		<div className="mt-6 flex justify-end gap-2 mt-6">
+			{children}
+		</div>
+	)
 }
 
 interface PanelProps {
@@ -42,29 +48,28 @@ function Panel({ children, control, className }: PanelProps) {
 		<ModalOverlay
 			aria-hidden="true"
 			className={cn(
-				'fixed inset-0 h-screen w-screen z-50 bg-black/30',
-				'flex items-center justify-center dark:bg-black/70',
+				'fixed inset-0 h-screen w-screen z-50',
+				'flex items-center justify-center',
+				'bg-headplane-900/15 dark:bg-headplane-900/30',
 				'entering:animate-in exiting:animate-out',
-				'entering:fade-in entering:duration-200 entering:ease-out',
-				'exiting:fade-out exiting:duration-100 exiting:ease-in',
+				'entering:fade-in entering:duration-100 entering:ease-out',
+				'exiting:fade-out exiting:duration-50 exiting:ease-in',
 				className,
 			)}
 			isOpen={control ? control[0] : undefined}
 			onOpenChange={control ? control[1] : undefined}
 		>
-			<Modal
-				className={cn(
-					'w-full max-w-md overflow-hidden rounded-2xl p-4',
-					'bg-ui-50 dark:bg-ui-900 shadow-lg',
-					'entering:animate-in exiting:animate-out',
-					'dark:border dark:border-ui-700',
-					'entering:zoom-in-95 entering:ease-out entering:duration-200',
-					'exiting:zoom-out-95 exiting:ease-in exiting:duration-100',
-				)}
-			>
-				<AriaDialog role="alertdialog" className="outline-none relative">
-					{({ close }) => children(close)}
-				</AriaDialog>
+			<Modal className={cn(
+				'bg-white dark:bg-headplane-900 rounded-3xl w-full max-w-lg',
+				'entering:animate-in exiting:animate-out',
+				'entering:zoom-in-95 entering:ease-out entering:duration-100',
+				'exiting:zoom-out-95 exiting:ease-in exiting:duration-50',
+			)}>
+				<Card variant="flat" className="w-full max-w-lg">
+					<AriaDialog role="alertdialog" className="outline-none">
+						{({ close }) => children(close)}
+					</AriaDialog>
+				</Card>
 			</Modal>
 		</ModalOverlay>
 	);
@@ -83,4 +88,11 @@ function Dialog({ children, control }: DialogProps) {
 	return <DialogTrigger>{children}</DialogTrigger>;
 }
 
-export default Object.assign(Dialog, { Button, Title, Text, Panel, Action });
+export default Object.assign(Dialog, {
+	Action,
+	Button,
+	Gutter,
+	Panel,
+	Title,
+	Text,
+});

app/components/IconButton.tsx

@@ -1,17 +1,16 @@
 import type { Dispatch, SetStateAction } from 'react';
 import React, { useRef } from 'react';
-import { Button as AriaButton } from 'react-aria-components';
-import { useButton } from 'react-aria';
+import { useButton, type AriaButtonOptions } from 'react-aria';
 import { cn } from '~/utils/cn';
 
-interface Props extends React.HTMLProps<HTMLButtonElement> {
-	variant?: 'heavy'
-	isDisabled?: boolean
+export interface IconButtonProps extends AriaButtonOptions<'button'> {
+	variant?: 'heavy' | 'light'
+	className?: string
 	children: React.ReactNode
 	label: string
 }
 
-export default function IconButton({ variant = 'light', ...props }: Props) {
+export default function IconButton({ variant = 'light', ...props }: IconButtonProps) {
 	const ref = useRef<HTMLButtonElement | null>(null);
 	const { buttonProps } = useButton(props, ref);
 

app/components/Text.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { cn } from '~/utils/cn';
+
+export interface TextProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export default function Text({ children, className }: TextProps) {
+	return (
+		<p className={cn('text-md my-0', className)}>
+			{children}
+		</p>
+	);
+}

app/components/Title.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
+import { cn } from '~/utils/cn';
 
 export interface TitleProps {
 	children: React.ReactNode;
+	className?: string;
 }
 
-export default function Title({ children }: TitleProps) {
+export default function Title({ children, className }: TitleProps) {
 	return (
-		<h3 className="text-2xl font-bold mb-6">
+		<h3 className={cn('text-2xl font-bold mb-6', className)}>
 			{children}
 		</h3>
 	);

app/routes/machines/components/machine.tsx

@@ -111,9 +111,12 @@ export default function MachineRow({ machine, routes, magic, users, stats }: Pro
 				<div className="flex items-center gap-x-1">
 					{machine.ipAddresses[0]}
 					<Menu>
-						<Menu.Button>
+						<Menu.IconButton
+							className="bg-transparent"
+							label="IP Addresses"
+						>
 							<ChevronDownIcon className="w-4 h-4" />
-						</Menu.Button>
+						</Menu.IconButton>
 						<Menu.Items>
 							{machine.ipAddresses.map((ip) => (
 								<Menu.ItemButton

app/routes/machines/machine.tsx

@@ -64,7 +64,7 @@ export async function action({ request }: ActionFunctionArgs) {
 
 export default function Page() {
 	const { machine, magic, routes, users } = useLoaderData<typeof loader>();
-	const routesState = useState(false);
+	const [showRouting, setShowRouting] = useState(false);
 	useLiveData({ interval: 1000 });
 
 	const expired =
@@ -201,7 +201,11 @@ export default function Page() {
 				</div>
 			</div>
 			<h2 className="text-xl font-medium mb-4 mt-8">Subnets & Routing</h2>
-			<Routes machine={machine} routes={routes} state={routesState} />
+			<Routes
+				machine={machine}
+				routes={routes}
+				state={[showRouting, setShowRouting]}
+			/>
 			<div className="flex items-center justify-between mb-4">
 				<p>
 					Subnets let you expose physical network routes onto Tailscale.{' '}
@@ -212,7 +216,7 @@ export default function Page() {
 						Learn More
 					</Link>
 				</p>
-				<Button variant="light" control={routesState}>
+				<Button onPress={() => setShowRouting(true)}>
 					Review
 				</Button>
 			</div>
@@ -247,13 +251,11 @@ export default function Page() {
 						)}
 					</div>
 					<Button
+						onPress={() => setShowRouting(true)}
 						className={cn(
-							'p-0 rounded-sm bg-transparent mt-1',
+							'px-1.5 py-0.5 rounded-md mt-1.5',
 							'text-blue-500 dark:text-blue-400',
-							'hover:bg-transparent',
-							'hover:text-blue-600 dark:hover:text-blue-500',
 						)}
-						control={routesState}
 					>
 						Edit
 					</Button>
@@ -283,13 +285,11 @@ export default function Page() {
 						)}
 					</div>
 					<Button
+						onPress={() => setShowRouting(true)}
 						className={cn(
-							'p-0 rounded-sm bg-transparent mt-1',
+							'px-1.5 py-0.5 rounded-md mt-1.5',
 							'text-blue-500 dark:text-blue-400',
-							'hover:bg-transparent',
-							'hover:text-blue-600 dark:hover:text-blue-500',
 						)}
-						control={routesState}
 					>
 						Edit
 					</Button>
@@ -322,13 +322,11 @@ export default function Page() {
 						)}
 					</div>
 					<Button
+						onPress={() => setShowRouting(true)}
 						className={cn(
-							'p-0 rounded-sm bg-transparent mt-1',
+							'px-1.5 py-0.5 rounded-md mt-1.5',
 							'text-blue-500 dark:text-blue-400',
-							'hover:bg-transparent',
-							'hover:text-blue-600 dark:hover:text-blue-500',
 						)}
-						control={routesState}
 					>
 						Edit
 					</Button>

app/routes/users/dialogs/remove.tsx

@@ -1,8 +1,8 @@
-import { XIcon } from '@primer/octicons-react';
+import { X } from 'lucide-react';
 import { Form, useSubmit } from 'react-router';
 import { useState } from 'react';
 
-import Button from '~/components/Button';
+import IconButton from '~/components/IconButton';
 import Code from '~/components/Code';
 import Dialog from '~/components/Dialog';
 
@@ -12,19 +12,18 @@ interface Props {
 
 export default function Remove({ username }: Props) {
 	const submit = useSubmit();
-	const dialogState = useState(false);
+	const [dialog, setDialog] = useState(false);
 
 	return (
 		<>
-			<Button
-				variant="light"
-				control={dialogState}
-				className="rounded-full p-0 w-8 h-8 flex items-center justify-center"
+			<IconButton
+				label={`Delete ${username}`}
+				onPress={() => setDialog(true)}
 			>
-				<XIcon className="w-4 h-4" />
-			</Button>
-			<Dialog control={dialogState}>
-				<Dialog.Panel control={dialogState}>
+				<X className="p-0.5" />
+			</IconButton>
+			<Dialog control={[dialog, setDialog]}>
+				<Dialog.Panel control={[dialog, setDialog]}>
 					{(close) => (
 						<>
 							<Dialog.Title>Delete {username}?</Dialog.Title>

app/routes/users/dialogs/rename.tsx

@@ -1,8 +1,8 @@
-import { PencilIcon } from '@primer/octicons-react';
+import { Pencil } from 'lucide-react';
 import { Form, useSubmit } from 'react-router';
 import { useState } from 'react';
 
-import Button from '~/components/Button';
+import IconButton from '~/components/IconButton';
 import Dialog from '~/components/Dialog';
 import TextField from '~/components/TextField';
 
@@ -13,20 +13,19 @@ interface Props {
 
 export default function Rename({ username, magic }: Props) {
 	const submit = useSubmit();
-	const dialogState = useState(false);
+	const [dialog, setDialog] = useState(false);
 	const [newName, setNewName] = useState(username);
 
 	return (
 		<>
-			<Button
-				variant="light"
-				control={dialogState}
-				className="rounded-full p-0 w-8 h-8 flex items-center justify-center"
+			<IconButton
+				label={`Rename ${username}`}
+				onPress={() => setDialog(true)}
 			>
-				<PencilIcon className="w-4 h-4" />
-			</Button>
-			<Dialog control={dialogState}>
-				<Dialog.Panel control={dialogState}>
+				<Pencil className="p-1" />
+			</IconButton>
+			<Dialog control={[dialog, setDialog]}>
+				<Dialog.Panel control={[dialog, setDialog]}>
 					{(close) => (
 						<>
 							<Dialog.Title>Rename {username}?</Dialog.Title>