feat: unify all colors

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>
 	);