feat: unify all colors

app/components/Attribute.tsx

@@ -54,7 +54,7 @@ export default function Attribute({
 							}, 1000);
 						}}
 					>
-						{value}
+						<p className="truncate">{value}</p>
 						<Check className="h-4.5 w-4.5 p-1 hidden data-[copied]:block" />
 						<Copy className="h-4.5 w-4.5 p-1 block data-[copied]:hidden" />
 					</button>

app/components/Link.tsx

@@ -1,14 +1,19 @@
-import { LinkExternalIcon } from '@primer/octicons-react';
+import { ExternalLink } from 'lucide-react';
 import cn from '~/utils/cn';
 
-interface Props {
+export interface LinkProps {
 	to: string;
 	name: string;
 	children: string;
 	className?: string;
 }
 
-export default function Link({ to, name: alt, children, className }: Props) {
+export default function Link({
+	to,
+	name: alt,
+	children,
+	className,
+}: LinkProps) {
 	return (
 		<a
 			href={to}
@@ -16,14 +21,14 @@ export default function Link({ to, name: alt, children, className }: Props) {
 			target="_blank"
 			rel="noreferrer"
 			className={cn(
-				'inline-flex items-center gap-x-1',
+				'inline-flex items-center gap-x-0.5',
 				'text-blue-500 hover:text-blue-700',
 				'dark:text-blue-400 dark:hover:text-blue-300',
 				className,
 			)}
 		>
 			{children}
-			<LinkExternalIcon className="h-3 w-3" />
+			<ExternalLink className="w-3.5" />
 		</a>
 	);
 }

app/components/Menu.tsx

@@ -97,7 +97,10 @@ function MenuSection<T>({ section, state }: MenuSectionProps<T>) {
 			{section.key !== state.collection.getFirstKey() ? (
 				<li
 					{...separatorProps}
-					className="border-t border-gray-300 mx-2 mt-1 mb-1"
+					className={cn(
+						'mx-2 mt-1 mb-1 border-t',
+						'border-headplane-200 dark:border-headplane-800',
+					)}
 				/>
 			) : undefined}
 			<li {...itemProps}>

app/components/Notice.tsx

@@ -1,23 +1,16 @@
-import { InfoIcon } from '@primer/octicons-react';
-import type { ReactNode } from 'react';
-import cn from '~/utils/cn';
+import { CircleSlash2 } from 'lucide-react';
+import React from 'react';
+import Card from '~/components/Card';
 
-interface Props {
-	className?: string;
-	children: ReactNode;
+export interface NoticeProps {
+	children: React.ReactNode;
 }
 
-export default function Notice({ children, className }: Props) {
+export default function Notice({ children }: NoticeProps) {
 	return (
-		<div
-			className={cn(
-				'p-4 rounded-md w-full flex items-center gap-3',
-				'bg-ui-200 dark:bg-ui-800',
-				className,
-			)}
-		>
-			<InfoIcon className="h-6 w-6 text-ui-700 dark:text-ui-200" />
+		<Card className="flex w-full max-w-full gap-4 font-semibold">
+			<CircleSlash2 />
 			{children}
-		</div>
+		</Card>
 	);
 }

app/components/Select.tsx

@@ -14,7 +14,9 @@ import { Item, ListState, Node, useComboBoxState } from 'react-stately';
 import Popover from '~/components/Popover';
 import cn from '~/utils/cn';
 
-export interface SelectProps extends AriaComboBoxProps<object> {}
+export interface SelectProps extends AriaComboBoxProps<object> {
+	className?: string;
+}
 
 function Select(props: SelectProps) {
 	const { contains } = useFilter({ sensitivity: 'base' });
@@ -45,7 +47,7 @@ function Select(props: SelectProps) {
 
 	const { buttonProps } = useButton(triggerProps, buttonRef);
 	return (
-		<div className="flex flex-col">
+		<div className={cn('flex flex-col', props.className)}>
 			<label
 				{...labelProps}
 				htmlFor={id}

app/components/Spinner.tsx

@@ -6,14 +6,13 @@ interface Props {
 
 export default function Spinner({ className }: Props) {
 	return (
-		<div className={clsx('mr-1.5 inline-block align-middle mb-0.5', className)}>
+		<div className={clsx('inline-block align-middle mb-0.5', className)}>
 			<div
 				className={clsx(
 					'animate-spin rounded-full w-full h-full',
 					'border-2 border-current border-t-transparent',
 					className,
 				)}
-				role="status"
 			>
 				<span className="sr-only">Loading...</span>
 			</div>

app/components/StatusCircle.tsx

@@ -1,23 +1,26 @@
-import clsx from 'clsx';
-import type { HTMLProps } from 'react';
+import cn from '~/utils/cn';
 
-type Props = HTMLProps<SVGElement> & {
-	readonly isOnline: boolean;
-};
+export interface StatusCircleProps {
+	isOnline: boolean;
+	className?: string;
+}
 
-// eslint-disable-next-line unicorn/no-keyword-prefix
-export default function StatusCircle({ isOnline, className }: Props) {
+export default function StatusCircle({
+	isOnline,
+	className,
+}: StatusCircleProps) {
 	return (
 		<svg
-			className={clsx(
-				className,
+			className={cn(
 				isOnline
-					? 'text-green-700 dark:text-green-400'
-					: 'text-gray-300 dark:text-gray-500',
+					? 'text-green-600 dark:text-green-500'
+					: 'text-headplane-200 dark:text-headplane-800',
+				className,
 			)}
 			viewBox="0 0 24 24"
 			fill="currentColor"
 		>
+			<title>{isOnline ? 'Online' : 'Offline'}</title>
 			<circle cx="12" cy="12" r="8" />
 		</svg>
 	);

app/components/TableList.tsx

@@ -1,11 +1,11 @@
-import clsx from 'clsx';
 import type { HTMLProps } from 'react';
+import cn from '~/utils/cn';
 
 function TableList(props: HTMLProps<HTMLDivElement>) {
 	return (
 		<div
 			{...props}
-			className={clsx(
+			className={cn(
 				'rounded-xl',
 				'border border-headplane-100 dark:border-headplane-800',
 				props.className,
@@ -20,7 +20,7 @@ function Item(props: HTMLProps<HTMLDivElement>) {
 	return (
 		<div
 			{...props}
-			className={clsx(
+			className={cn(
 				'flex items-center justify-between p-2 last:border-b-0',
 				'border-b border-headplane-100 dark:border-headplane-800',
 				props.className,

app/components/Title.tsx

@@ -8,6 +8,6 @@ export interface TitleProps {
 
 export default function Title({ children, className }: TitleProps) {
 	return (
-		<h3 className={cn('text-2xl font-bold mb-6', className)}>{children}</h3>
+		<h3 className={cn('text-2xl font-bold mb-2', className)}>{children}</h3>
 	);
 }

app/components/Tooltip.tsx

@@ -12,6 +12,7 @@ export interface TooltipProps extends AriaTooltipProps {
 	children: [React.ReactElement, React.ReactElement<TooltipBodyProps>];
 }
 
+// TODO: Fix Button accessibility outline + invoke
 function Tooltip(props: TooltipProps) {
 	const state = useTooltipTriggerState({
 		...props,