fix: delay dot class import

src/components/ConnectionsModal.tsx

@@ -13,7 +13,7 @@ import {
   useDragDropContext,
 } from '@thisbeyond/solid-dnd'
 import { For, createSignal } from 'solid-js'
-import { AccessorKey } from '~/config/connection'
+import { AccessorKey } from '~/config/enum'
 
 type ColumnVisibility = Partial<Record<AccessorKey, boolean>>
 type ColumnOrder = AccessorKey[]

src/components/ProxyNodeCard.tsx

@@ -1,7 +1,7 @@
 import { createMemo } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { DELAY } from '~/config/enum'
 import { useProxies } from '~/signals/proxies'
-import { getClassNameByDelay } from '~/utils/proxies'
 
 export default (props: {
   proxyName: string
@@ -13,12 +13,17 @@ export default (props: {
   const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
 
   const Delay = (delay: number | undefined) => {
-    if (typeof delay !== 'number' || delay === 0) {
+    if (typeof delay !== 'number' || delay === DELAY.NOT_CONNECTED) {
       return ''
     }
 
-    const color = getClassNameByDelay(delay)
-    const textClassName = `text-${color}`
+    let textClassName = 'text-success'
+
+    if (delay > DELAY.HIGH) {
+      textClassName = 'text-error'
+    } else if (delay > DELAY.MEDIUM) {
+      textClassName = 'text-warning'
+    }
 
     return <span class={textClassName}>{delay}ms</span>
   }

src/components/ProxyNodeDots.tsx

@@ -1,18 +1,26 @@
 import { For } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { DELAY } from '~/config/enum'
 import { useProxies } from '~/signals/proxies'
-import { getClassNameByDelay } from '~/utils/proxies'
 
 const Delay = (p: { delay: number | undefined; selected: boolean }) => {
-  const color = getClassNameByDelay(p.delay)
-  const bgClassName = `bg-${color}`
-  const isSelected = p.selected && `border-2 border-primary`
+  let dotClassName = p.selected
+    ? 'bg-white border-4 border-success'
+    : 'bg-success'
 
-  return (
-    <div
-      class={twMerge('m-1 h-4 w-4 rounded-full', bgClassName, isSelected)}
-    ></div>
-  )
+  if (typeof p.delay !== 'number' || p.delay === DELAY.NOT_CONNECTED) {
+    dotClassName = p.selected
+      ? 'bg-white border-4 border-neutral'
+      : 'bg-neutral'
+  } else if (p.delay > DELAY.HIGH) {
+    dotClassName = p.selected ? 'bg-white border-4 border-error' : 'bg-error'
+  } else if (p.delay > DELAY.MEDIUM) {
+    dotClassName = p.selected
+      ? 'bg-white border-4 border-warning'
+      : 'bg-warning'
+  }
+
+  return <div class={twMerge('m-1 h-4 w-4 rounded-full', dotClassName)}></div>
 }
 
 export default (props: { proxyNameList: string[]; now?: string }) => {

src/config/connection.ts → src/config/enum.ts

@@ -13,3 +13,9 @@ export enum AccessorKey {
   Source = 'Source',
   Destination = 'Destination',
 }
+
+export enum DELAY {
+  NOT_CONNECTED = 0,
+  MEDIUM = 200,
+  HIGH = 500,
+}

src/utils/proxies.ts

@@ -6,17 +6,3 @@ dayjs.extend(relativeTime)
 export function formatTimeFromNow(time: number | string) {
   return dayjs(time).fromNow()
 }
-
-export function getClassNameByDelay(delay: number | undefined) {
-  let name = 'green-500'
-
-  if (typeof delay !== 'number' || delay === 0) {
-    name = 'base-100'
-  } else if (delay > 500) {
-    name = 'red-500'
-  } else if (delay > 200) {
-    name = 'yellow-500'
-  }
-
-  return name
-}