style: Adjust some styles. (#1103)

This commit is contained in:
Plutonium141 2024-10-16 22:41:08 +08:00 committed by GitHub
parent 5823f03a05
commit 249880d9e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 14 additions and 15 deletions

View File

@ -25,7 +25,7 @@ export const Button: ParentComponent<
return ( return (
<button <button
class={twMerge( class={twMerge(
'btn flex items-center', 'btn flex items-center leading-8',
local.loading ? 'btn-disabled' : local.class, local.loading ? 'btn-disabled' : local.class,
)} )}
{...others} {...others}

View File

@ -19,10 +19,10 @@ export const Latency: ParentComponent<Props> = (props) => {
return ( return (
<span <span
class={twMerge('badge whitespace-nowrap', textClassName(), local.class)} class={twMerge('badge w-11 whitespace-nowrap', textClassName(), local.class)}
{...others} {...others}
> >
{latency() || '-'} {latency() || '---'}
</span> </span>
) )
} }

View File

@ -49,26 +49,25 @@ export const ProxyNodeCard = (props: {
class={twMerge( class={twMerge(
'card bg-neutral text-neutral-content', 'card bg-neutral text-neutral-content',
isSelected && isSelected &&
'bg-gradient-to-b from-primary to-secondary text-primary-content', 'bg-gradient-to-br from-primary to-secondary text-primary-content',
onClick && 'cursor-pointer', onClick && 'cursor-pointer',
)} )}
title={title()} title={title()}
> >
<Tooltip.Trigger> <Tooltip.Trigger>
<div class="card-body space-y-1 p-2.5" onClick={onClick}> <div class="card-body gap-1 space-y-1 p-2.5" onClick={onClick}>
<h2 class="card-title line-clamp-1 break-all text-start text-sm"> <h2 class="card-title line-clamp-1 break-all text-start text-sm">
{proxyName} {proxyName}
</h2> </h2>
<div class="card-actions items-center justify-between"> <div class="card-actions items-center justify-between gap-1">
<div class="badge badge-secondary badge-sm font-bold uppercase"> <div class="badge badge-secondary px-1 text-xs font-bold capitalize">
{formatProxyType(proxyNode()?.type)} {formatProxyType(proxyNode()?.type)}
</div> </div>
<Latency <Latency
proxyName={props.proxyName} proxyName={props.proxyName}
class={twMerge( class={twMerge(
isSelected && 'badge-primary',
proxyLatencyTestingMap()[proxyName] && 'animate-pulse', proxyLatencyTestingMap()[proxyName] && 'animate-pulse',
)} )}
onClick={(e) => { onClick={(e) => {
@ -85,10 +84,10 @@ export const ProxyNodeCard = (props: {
<Tooltip.Content class="z-50"> <Tooltip.Content class="z-50">
<Tooltip.Arrow class="text-neutral" /> <Tooltip.Arrow class="text-neutral" />
<div class="flex flex-col items-center gap-2 rounded-box bg-neutral p-2.5 text-neutral-content"> <div class="flex flex-col items-center gap-2 rounded-box bg-neutral bg-gradient-to-br from-primary to-secondary p-2.5 text-primary-content shadow-lg">
<h2 class="text-lg font-bold">{proxyName}</h2> <h2 class="text-lg font-bold">{proxyName}</h2>
<div class="w-full text-xs text-neutral-content"> <div class="w-full text-xs uppercase">
{specialTypes()} {specialTypes()}
</div> </div>
@ -113,7 +112,7 @@ export const ProxyNodeCard = (props: {
getLatencyClassName(latencyTestResult.delay), getLatencyClassName(latencyTestResult.delay),
)} )}
> >
{latencyTestResult.delay || '-'} {latencyTestResult.delay || '---'}
</div> </div>
</div> </div>

View File

@ -5,15 +5,15 @@ export const formatProxyType = (type = '') => {
const t = type.toLowerCase() const t = type.toLowerCase()
if (t.includes('shadowsocks')) { if (t.includes('shadowsocks')) {
return t.replace('shadowsocks', 'ss') // for both ss and ssr return t.replace('shadowsocks', 'SS') // for both ss and ssr
} }
if (t.includes('hysteria')) { if (t.includes('hysteria')) {
return t.replace('hysteria', 'hy') return t.replace('hysteria', 'HY')
} }
if (t === 'wireguard') { if (t === 'wireguard') {
return 'wg' return 'WG'
} }
return t return t
@ -25,7 +25,7 @@ export const getLatencyClassName = (latency: LATENCY_QUALITY_MAP_HTTP) => {
} else if (latency > latencyQualityMap().MEDIUM) { } else if (latency > latencyQualityMap().MEDIUM) {
return 'text-warning' return 'text-warning'
} else if (latency === LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED) { } else if (latency === LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED) {
return 'text-neutral-content' return 'text-gray'
} else { } else {
return 'text-success' return 'text-success'
} }