feat: continue moving older components to aria

app/routes/_data.acls._index/editor.tsx

@@ -87,9 +87,9 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 			</div>
 
 			<Button
-				variant='emphasized'
-				className='text-sm w-fit mr-2'
-				onClick={() => {
+				variant='heavy'
+				className='mr-2'
+				onPress={() => {
 					fetcher.submit({
 						acl
 					}, {
@@ -105,15 +105,9 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 				)}
 				Save
 			</Button>
-			<Button
-				variant='emphasized'
-				className={clsx(
-					'text-sm w-fit bg-gray-100 dark:bg-transparent',
-					'border border-gray-200 dark:border-gray-700'
-				)}
-				onClick={() => {
-					setAcl(data.currentAcl)
-				}}
+			<Button onPress={() => {
+				setAcl(data.currentAcl)
+			}}
 			>
 				Discard Changes
 			</Button>

app/routes/_data.acls._index/fallback.tsx

@@ -28,20 +28,12 @@ export default function Fallback({ acl, where }: FallbackProperties) {
 			{where === 'server' ? (
 				<>
 					<Button
-						disabled
-						variant='emphasized'
-						className='text-sm w-fit mr-2'
+						variant='heavy'
+						className='mr-2'
 					>
 						Save
 					</Button>
-					<Button
-						disabled
-						variant='emphasized'
-						className={clsx(
-							'text-sm w-fit bg-gray-100 dark:bg-transparent',
-							'border border-gray-200 dark:border-gray-700'
-						)}
-					>
+					<Button>
 						Discard Changes
 					</Button>
 				</>

app/routes/_data.dns._index/domains.tsx

@@ -17,13 +17,12 @@ import {
 import { CSS } from '@dnd-kit/utilities'
 import { LockIcon, ThreeBarsIcon } from '@primer/octicons-react'
 import { type FetcherWithComponents, useFetcher } from '@remix-run/react'
-import clsx from 'clsx'
 import { useEffect, useState } from 'react'
+import { Button, Input } from 'react-aria-components'
 
-import Button from '~/components/Button'
-import Input from '~/components/Input'
 import Spinner from '~/components/Spinner'
 import TableList from '~/components/TableList'
+import { cn } from '~/utils/cn'
 
 type Properties = {
 	readonly baseDomain?: string;
@@ -115,9 +114,8 @@ export default function Domains({ baseDomain, searchDomains, disabled }: Propert
 					{disabled ? undefined : (
 						<TableList.Item key='add-sd'>
 							<Input
-								variant='embedded'
 								type='text'
-								className='font-mono text-sm'
+								className='font-mono text-sm bg-transparent w-full mr-2'
 								placeholder='Search Domain'
 								value={newDomain}
 								onChange={event => {
@@ -126,9 +124,14 @@ export default function Domains({ baseDomain, searchDomains, disabled }: Propert
 							/>
 							{fetcher.state === 'idle' ? (
 								<Button
-									className='text-sm'
-									disabled={newDomain.length === 0}
-									onClick={() => {
+									className={cn(
+										'text-sm font-semibold',
+										'text-blue-600 dark:text-blue-400',
+										'hover:text-blue-700 dark:hover:text-blue-300',
+										newDomain.length === 0 && 'opacity-50 cursor-not-allowed'
+									)}
+									isDisabled={newDomain.length === 0}
+									onPress={() => {
 										fetcher.submit({
 										// eslint-disable-next-line @typescript-eslint/naming-convention
 											'dns_config.domains': [...localDomains, newDomain]
@@ -177,7 +180,7 @@ function Domain({ domain, id, localDomains, isDrag, disabled, fetcher }: DomainP
 	return (
 		<div
 			ref={setNodeRef}
-			className={clsx(
+			className={cn(
 				'flex items-center justify-between px-3 py-2',
 				'border-b border-gray-200 last:border-b-0 dark:border-zinc-800',
 				isDragging ? 'text-gray-400' : '',
@@ -200,10 +203,14 @@ function Domain({ domain, id, localDomains, isDrag, disabled, fetcher }: DomainP
 			</p>
 			{isDrag ? undefined : (
 				<Button
-					variant='destructive'
-					className='text-sm'
-					disabled={disabled}
-					onClick={() => {
+					className={cn(
+						'text-sm',
+						'text-red-600 dark:text-red-400',
+						'hover:text-red-700 dark:hover:text-red-300',
+						disabled && 'opacity-50 cursor-not-allowed'
+					)}
+					isDisabled={disabled}
+					onPress={() => {
 						fetcher.submit({
 							// eslint-disable-next-line @typescript-eslint/naming-convention
 							'dns_config.domains': localDomains.filter((_, index) => index !== id - 1)

app/routes/_data.dns._index/magic.tsx

@@ -2,7 +2,6 @@ import { useFetcher } from '@remix-run/react'
 
 import Dialog from '~/components/Dialog'
 import Spinner from '~/components/Spinner'
-import { cn } from '~/utils/cn'
 
 type Properties = {
 	readonly isEnabled: boolean;
@@ -15,14 +14,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 
 	return (
 		<Dialog>
-			<Dialog.Button
-				isDisabled={disabled}
-				className={cn(
-					'w-fit text-sm rounded-lg px-4 py-2',
-					'bg-main-700 dark:bg-main-800 text-white',
-					disabled && 'opacity-50 cursor-not-allowed'
-				)}
-			>
+			<Dialog.Button isDisabled={disabled}>
 				{fetcher.state === 'idle' ? undefined : (
 					<Spinner className='w-3 h-3'/>
 				)}

app/routes/_data.dns._index/rename.tsx

@@ -2,10 +2,10 @@
 /* eslint-disable unicorn/no-keyword-prefix */
 import { useFetcher } from '@remix-run/react'
 import { useState } from 'react'
+import { Input } from 'react-aria-components'
 
 import Code from '~/components/Code'
 import Dialog from '~/components/Dialog'
-import Input from '~/components/Input'
 import Spinner from '~/components/Spinner'
 import TextField from '~/components/TextField'
 import { cn } from '~/utils/cn'
@@ -35,7 +35,12 @@ export default function Modal({ name, disabled }: Properties) {
 			</p>
 			<Input
 				readOnly
-				className='font-mono text-sm my-4 w-1/2'
+				className={cn(
+					'block px-2.5 py-1.5 w-1/2 rounded-lg my-4',
+					'border border-ui-200 dark:border-ui-600',
+					'dark:bg-ui-800 dark:text-ui-300 text-sm',
+					'outline-none'
+				)}
 				type='text'
 				value={name}
 				onFocus={event => {
@@ -43,14 +48,7 @@ export default function Modal({ name, disabled }: Properties) {
 				}}
 			/>
 			<Dialog>
-				<Dialog.Button
-					isDisabled={disabled}
-					className={cn(
-						'w-fit text-sm rounded-lg px-4 py-2',
-						'bg-main-700 dark:bg-main-800 text-white',
-						disabled && 'opacity-50 cursor-not-allowed'
-					)}
-				>
+				<Dialog.Button isDisabled={disabled}>
 					{fetcher.state === 'idle' ? undefined : (
 						<Spinner className='w-3 h-3'/>
 					)}

app/routes/_data.dns._index/route.tsx

@@ -1,14 +1,14 @@
 import { type ActionFunctionArgs } from '@remix-run/node'
 import { json, useFetcher, useLoaderData } from '@remix-run/react'
 import { useState } from 'react'
+import { Button, Input } from 'react-aria-components'
 
-import Button from '~/components/Button'
 import Code from '~/components/Code'
-import Input from '~/components/Input'
 import Notice from '~/components/Notice'
 import Spinner from '~/components/Spinner'
 import Switch from '~/components/Switch'
 import TableList from '~/components/TableList'
+import { cn } from '~/utils/cn'
 import { getConfig, getContext, patchConfig } from '~/utils/config'
 import { restartHeadscale } from '~/utils/docker'
 import { getSession } from '~/utils/sessions'
@@ -119,10 +119,14 @@ export default function Page() {
 							<TableList.Item key={index}>
 								<p className='font-mono text-sm'>{ns}</p>
 								<Button
-									variant='destructive'
-									className='text-sm'
-									disabled={!data.hasConfigWrite}
-									onClick={() => {
+									className={cn(
+										'text-sm',
+										'text-red-600 dark:text-red-400',
+										'hover:text-red-700 dark:hover:text-red-300',
+										!data.hasConfigWrite && 'opacity-50 cursor-not-allowed'
+									)}
+									isDisabled={!data.hasConfigWrite}
+									onPress={() => {
 										fetcher.submit({
 											// eslint-disable-next-line @typescript-eslint/naming-convention
 											'dns_config.nameservers': data.nameservers.filter((_, index_) => index_ !== index)
@@ -139,9 +143,8 @@ export default function Page() {
 						{data.hasConfigWrite ? (
 							<TableList.Item>
 								<Input
-									variant='embedded'
 									type='text'
-									className='font-mono text-sm'
+									className='font-mono text-sm bg-transparent w-full mr-2'
 									placeholder='Nameserver'
 									value={ns}
 									onChange={event => {
@@ -150,9 +153,14 @@ export default function Page() {
 								/>
 								{fetcher.state === 'idle' ? (
 									<Button
-										className='text-sm'
-										disabled={ns.length === 0}
-										onClick={() => {
+										className={cn(
+											'text-sm font-semibold',
+											'text-blue-600 dark:text-blue-400',
+											'hover:text-blue-700 dark:hover:text-blue-300',
+											ns.length === 0 && 'opacity-50 cursor-not-allowed'
+										)}
+										isDisabled={ns.length === 0}
+										onPress={() => {
 											fetcher.submit({
 												// eslint-disable-next-line @typescript-eslint/naming-convention
 												'dns_config.nameservers': [...data.nameservers, ns]
@@ -185,7 +193,7 @@ export default function Page() {
 			<div className='flex flex-col w-2/3'>
 				<h1 className='text-2xl font-medium mb-4'>Magic DNS</h1>
 				<p className='text-gray-700 dark:text-gray-300 mb-4'>
-					Automaticall register domain names for each device
+					Automatically register domain names for each device
 					on the tailnet. Devices will be accessible at
 					{' '}
 					<Code>

app/routes/_data.machines.$id.tsx

@@ -42,7 +42,7 @@ export default function Page() {
 				</h1>
 				<StatusCircle isOnline={data.online} className='w-4 h-4'/>
 			</span>
-			<Card>
+			<Card variant='flat'>
 				<Attribute name='Creator' value={data.user.name}/>
 				<Attribute name='Node ID' value={data.id}/>
 				<Attribute name='Node Name' value={data.givenName}/>

app/routes/_data.users._index.tsx

@@ -44,7 +44,7 @@ export default function Page() {
 	return (
 		<div className='grid grid-cols-2 gap-4 auto-rows-min'>
 			{data.map(user => (
-				<Card key={user.id}>
+				<Card key={user.id} variant='flat'>
 					<div className='flex items-center gap-4'>
 						<PersonIcon className='w-6 h-6'/>
 						<span className='text-lg font-mono'>

app/routes/login.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react'
 import Button from '~/components/Button'
 import Card from '~/components/Card'
 import Code from '~/components/Code'
-import Input from '~/components/Input'
+import TextField from '~/components/TextField'
 import { type Key } from '~/types'
 import { getContext } from '~/utils/config'
 import { pull } from '~/utils/headscale'
@@ -108,11 +108,13 @@ export default function Page() {
 
 	return (
 		<div className='flex min-h-screen items-center justify-center'>
-			<Card className='w-96'>
-				<h1 className='text-2xl mb-8'>Login</h1>
+			<Card className='max-w-sm m-4 sm:m-0 rounded-2xl'>
+				<Card.Title>
+					Welcome to Headplane
+				</Card.Title>
 				{data.apiKey ? (
 					<Form method='post'>
-						<p className='text-sm text-gray-500 mb-4'>
+						<Card.Text className='mb-8 text-sm'>
 							Enter an API key to authenticate with Headplane. You can generate
 							one by running
 							{' '}
@@ -121,43 +123,40 @@ export default function Page() {
 							</Code>
 							{' '}
 							in your terminal.
-						</p>
+						</Card.Text>
 
 						{actionData?.error ? (
 							<p className='text-red-500 text-sm mb-2'>{actionData.error}</p>
 						) : undefined}
-						<Input
-							required
-							type='text'
+						<TextField
+							isRequired
+							label='API Key'
 							name='api-key'
-							id='api-key'
-							className='border rounded-md p-2 w-full'
 							placeholder='API Key'
 						/>
-
 						<Button
-							variant='emphasized'
+							className='w-full mt-2.5'
+							variant='heavy'
 							type='submit'
-							className='bg-gray-800 text-white rounded-md p-2 w-full mt-4'
 						>
 							Login
 						</Button>
 					</Form>
 				) : undefined}
 				{showOr ? (
-					<div className='flex items-center gap-x-2 py-2'>
-						<hr className='flex-1 dark:border-zinc-700'/>
-						<span className='text-gray-500'>or</span>
-						<hr className='flex-1 dark:border-zinc-700'/>
+					<div className='flex items-center gap-x-1.5 py-1'>
+						<hr className='flex-1 border-ui-300 dark:border-ui-800'/>
+						<span className='text-gray-500 text-sm'>or</span>
+						<hr className='flex-1 border-ui-300 dark:border-ui-800'/>
 					</div>
 				) : undefined}
 				{data.oidc ? (
 					<Form method='POST'>
 						<input type='hidden' name='oidc-start' value='true'/>
 						<Button
-							variant='emphasized'
+							className='w-full'
+							variant='heavy'
 							type='submit'
-							className='bg-gray-800 text-white rounded-md p-2 w-full'
 						>
 							Login with SSO
 						</Button>