fix: respect system ui font & better looking (maybe) for proxy card (#844)

auto-imports.d.ts

@@ -135,6 +135,7 @@ declare global {
   const useMatch: (typeof import('@solidjs/router'))['useMatch']
   const useNavigate: (typeof import('@solidjs/router'))['useNavigate']
   const useParams: (typeof import('@solidjs/router'))['useParams']
+  const usePreloadRoute: (typeof import('@solidjs/router'))['usePreloadRoute']
   const useResolvedPath: (typeof import('@solidjs/router'))['useResolvedPath']
   const useRouteData: (typeof import('@solidjs/router'))['useRouteData']
   const useRoutes: (typeof import('@solidjs/router'))['useRoutes']

src/components/Latency.tsx

@@ -2,7 +2,7 @@ import { LATENCY_QUALITY_MAP_HTTP } from '~/constants'
 import { useI18n } from '~/i18n'
 import { latencyQualityMap, useProxies } from '~/signals'
 
-export const Latency = (props: { name?: string }) => {
+export const Latency = (props: { name?: string; class?: string }) => {
   const [t] = useI18n()
   const { latencyMap } = useProxies()
   const [textClassName, setTextClassName] = createSignal('')
@@ -25,7 +25,9 @@ export const Latency = (props: { name?: string }) => {
         latency() !== LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED
       }
     >
-      <span class={`whitespace-nowrap text-xs ${textClassName()}`}>
+      <span
+        class={`whitespace-nowrap text-xs ${textClassName()} ${props.class}`}
+      >
         {latency()}
         {t('ms')}
       </span>

src/components/ProxyNodeCard.tsx

@@ -26,7 +26,8 @@ export const ProxyNodeCard = (props: {
     <div
       class={twMerge(
         'border-neutral-focus card card-bordered tooltip-bottom flex flex-col justify-between gap-1 bg-neutral p-2 text-neutral-content',
-        isSelected && 'border-primary bg-primary-content text-primary',
+        isSelected &&
+          'bg-gradient-to-br from-primary to-secondary text-primary-content',
         onClick && 'cursor-pointer',
       )}
       onClick={onClick}
@@ -61,7 +62,7 @@ export const ProxyNodeCard = (props: {
         <div
           class={twMerge(
             'text-xs text-slate-500',
-            isSelected && 'text-primary',
+            isSelected && 'text-primary-content',
           )}
         >
           {formatProxyType(proxyNode()?.type)}
@@ -69,9 +70,10 @@ export const ProxyNodeCard = (props: {
           <Show when={specialType()}>{` :: ${specialType()}`}</Show>
         </div>
 
-        <div class="text-xs">
-          <Latency name={props.proxyName} />
-        </div>
+        <Latency
+          name={props.proxyName}
+          class={twMerge(isSelected && 'badge badge-sm px-1')}
+        />
       </div>
     </div>
   )

tailwind.config.ts

@@ -7,8 +7,8 @@ export default {
   daisyui: { themes: true },
   theme: {
     fontFamily: {
-      twemoji: ['Fira Sans', 'Twemoji Mozilla', 'system-ui', 'monospace'],
-      'no-twemoji': ['Fira Sans', 'system-ui', 'monospace'],
+      twemoji: ['system-ui', 'Twemoji Mozilla', 'Fira Sans', 'monospace'],
+      'no-twemoji': ['system-ui', 'Fira Sans', 'monospace'],
     },
   },
 } as Config