feat: unify all colors

app/routes/machines/dialogs/rename.tsx

@@ -23,7 +23,7 @@ export default function Rename({
 		<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
 			<Dialog.Panel>
 				<Dialog.Title>Edit machine name for {machine.givenName}</Dialog.Title>
-				<Dialog.Text>
+				<Dialog.Text className="mb-6">
 					This name is shown in the admin panel, in Tailscale clients, and used
 					when generating MagicDNS names.
 				</Dialog.Text>
@@ -38,7 +38,7 @@ export default function Rename({
 				/>
 				{magic ? (
 					name.length > 0 && name !== machine.givenName ? (
-						<p className="text-sm text-gray-500 dark:text-gray-300 leading-tight">
+						<p className="text-sm text-headplane-600 dark:text-headplane-300 leading-tight mt-2">
 							This machine will be accessible by the hostname{' '}
 							<Code className="text-sm">
 								{name.toLowerCase().replaceAll(/\s+/g, '-')}
@@ -48,7 +48,7 @@ export default function Rename({
 							will no longer point to this machine.
 						</p>
 					) : (
-						<p className="text-sm text-gray-500 dark:text-gray-300 leading-tight">
+						<p className="text-sm text-headplane-600 dark:text-headplane-300 leading-tight mt-2">
 							This machine is accessible by the hostname{' '}
 							<Code className="text-sm">{machine.givenName}</Code>.
 						</p>

app/routes/machines/dialogs/routes.tsx

@@ -1,8 +1,10 @@
+import { GlobeLock, RouteOff } from 'lucide-react';
 import { useMemo } from 'react';
 import { useFetcher } from 'react-router';
 import Dialog from '~/components/Dialog';
 import Link from '~/components/Link';
 import Switch from '~/components/Switch';
+import TableList from '~/components/TableList';
 import type { Machine, Route } from '~/types';
 import cn from '~/utils/cn';
 
@@ -59,32 +61,17 @@ export default function Routes({
 						Learn More
 					</Link>
 				</Dialog.Text>
-				<div
-					className={cn(
-						'rounded-lg overflow-y-auto my-2',
-						'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
-						'border border-zinc-200 dark:border-zinc-700',
-					)}
-				>
+				<TableList className="mt-4">
 					{subnet.length === 0 ? (
-						<div
-							className={cn(
-								'flex py-4 px-4 bg-ui-100 dark:bg-ui-800',
-								'items-center justify-center',
-								'text-ui-600 dark:text-ui-300',
-							)}
-						>
-							<p>No routes are advertised on this machine.</p>
-						</div>
+						<TableList.Item className="flex flex-col items-center gap-2.5 py-4 opacity-70">
+							<RouteOff />
+							<p className="font-semibold">
+								No routes are advertised by this machine
+							</p>
+						</TableList.Item>
 					) : undefined}
 					{subnet.map((route) => (
-						<div
-							key={route.id}
-							className={cn(
-								'flex py-2 px-4 bg-ui-100 dark:bg-ui-800',
-								'items-center justify-between',
-							)}
-						>
+						<TableList.Item key={route.id}>
 							<p>{route.prefix}</p>
 							<Switch
 								defaultSelected={route.enabled}
@@ -101,9 +88,9 @@ export default function Routes({
 									});
 								}}
 							/>
-						</div>
+						</TableList.Item>
 					))}
-				</div>
+				</TableList>
 				<Dialog.Text className="font-bold mt-8">Exit nodes</Dialog.Text>
 				<Dialog.Text>
 					Allow your network to route internet traffic through this machine.{' '}
@@ -114,30 +101,14 @@ export default function Routes({
 						Learn More
 					</Link>
 				</Dialog.Text>
-				<div
-					className={cn(
-						'rounded-lg overflow-y-auto my-2',
-						'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
-						'border border-zinc-200 dark:border-zinc-700',
-					)}
-				>
+				<TableList className="mt-4">
 					{exit.length === 0 ? (
-						<div
-							className={cn(
-								'flex py-4 px-4 bg-ui-100 dark:bg-ui-800',
-								'items-center justify-center',
-								'text-ui-600 dark:text-ui-300',
-							)}
-						>
-							<p>This machine is not an exit node.</p>
-						</div>
+						<TableList.Item className="flex flex-col items-center gap-2.5 py-4 opacity-70">
+							<GlobeLock />
+							<p className="font-semibold">This machine is not an exit node</p>
+						</TableList.Item>
 					) : (
-						<div
-							className={cn(
-								'flex py-2 px-4 bg-ui-100 dark:bg-ui-800',
-								'items-center justify-between',
-							)}
-						>
+						<TableList.Item>
 							<p>Use as exit node</p>
 							<Switch
 								defaultSelected={exitEnabled}
@@ -154,9 +125,9 @@ export default function Routes({
 									});
 								}}
 							/>
-						</div>
+						</TableList.Item>
 					)}
-				</div>
+				</TableList>
 			</Dialog.Panel>
 		</Dialog>
 	);

app/routes/machines/dialogs/tags.tsx

@@ -1,4 +1,4 @@
-import { Plus, X } from 'lucide-react';
+import { Plus, TagsIcon, X } from 'lucide-react';
 import { useState } from 'react';
 import Button from '~/components/Button';
 import Dialog from '~/components/Dialog';
@@ -38,15 +38,10 @@ export default function Tags({ machine, isOpen, setIsOpen }: TagsProps) {
 				<input type="hidden" name="tags" value={tags.join(',')} />
 				<TableList className="mt-4">
 					{tags.length === 0 ? (
-						<div
-							className={cn(
-								'flex py-4 px-4 bg-ui-100 dark:bg-ui-800',
-								'items-center justify-center rounded-t-lg',
-								'text-ui-600 dark:text-ui-300',
-							)}
-						>
-							<p>No tags are set on this machine.</p>
-						</div>
+						<TableList.Item className="flex flex-col items-center gap-2.5 py-4 opacity-70">
+							<TagsIcon />
+							<p className="font-semibold">No tags are set on this machine</p>
+						</TableList.Item>
 					) : (
 						tags.map((item) => (
 							<TableList.Item className="font-mono" key={item} id={item}>