style: adjust the card styles of the proxy group and proxy providers. (…

…#1216)
MetaCubeX · Dec 4, 2024 · f6aecbc · f6aecbc
1 parent 61e2958
commit f6aecbc
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git a/src/components/ProxyPreviewBar.tsx b/src/components/ProxyPreviewBar.tsx
@@ -41,7 +41,7 @@ export const ProxyPreviewBar = (props: {
   )
 
   return (
-    <div class="flex items-center gap-2 py-2">
+    <div class="flex items-center gap-2">
       <div class="my-1 flex flex-1 items-center justify-center overflow-hidden rounded-2xl [&>*]:h-2">
         <div
           class="bg-success"

diff --git a/src/components/ProxyPreviewDots.tsx b/src/components/ProxyPreviewDots.tsx
@@ -44,7 +44,7 @@ export const ProxyPreviewDots = (props: {
   const { getLatencyByName } = useProxies()
 
   return (
-    <div class="flex items-center gap-2 py-2">
+    <div class="flex items-center gap-2">
       <div class="flex flex-1 flex-wrap items-center gap-1">
         <For
           each={props.proxyNameList.map((name): [string, number] => [

diff --git a/src/components/SubscriptionInfo.tsx b/src/components/SubscriptionInfo.tsx
@@ -11,7 +11,7 @@ const getSubscriptionsInfo = (subscriptionInfo: ISubscriptionInfo) => {
   const used = byteSize(Download + Upload, {
     units: 'iec',
   })
-  const percentage = toFinite((((Download + Upload) / Total) * 100).toFixed(2))
+  const percentage = Math.min(toFinite((((Download + Upload) / Total) * 100).toFixed(1)),999)
 
   const expirePrefix = () => {
     const [t] = useI18n()
@@ -49,14 +49,22 @@ export const SubscriptionInfo = (props: {
 
   return (
     <>
-      <progress class="progress" value={info.percentage} max="100" />
+      <div class="flex items-center gap-2 pt-1">
+        <progress class="progress" value={info.percentage} max="100" />
 
-      <div class="text-sm text-slate-500">
-        {`${info.used}`} / {`${info.total}`} ( {info.percentage}% )
+        <div class="badge badge-secondary badge-sm">
+          {info.percentage}%
+        </div>
       </div>
 
-      <div class="text-sm text-slate-500">
-        {info.expirePrefix()}: {info.expireStr()}
+      <div class="flex flex-wrap items-center justify-between">
+        <div class="text-sm text-slate-500">
+          {`${info.used}`} / {`${info.total}`}
+        </div>
+
+        <div class="text-sm text-slate-500">
+          {info.expirePrefix()}: {info.expireStr()}
+        </div>
       </div>
     </>
   )

diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
@@ -1,6 +1,7 @@
 import { makePersisted } from '@solid-primitives/storage'
 import {
   IconBrandSpeedtest,
+  IconChevronRight,
   IconReload,
   IconSettings,
 } from '@tabler/icons-solidjs'
@@ -274,8 +275,8 @@ export default () => {
                             {formatProxyType(proxyGroup.type)}
                           </span>
                           <Show when={proxyGroup.now?.length > 0}>
+                            <IconChevronRight size={18}/>
                             <span class="whitespace-nowrap">
-                              &nbsp;::&nbsp;
                               {proxyGroup.now}
                             </span>
                           </Show>
@@ -343,12 +344,16 @@ export default () => {
                   const title = (
                     <>
                       <div class="flex items-center justify-between pr-8">
-                        <div class="flex items-center gap-2">
-                          <span>{proxyProvider.name}</span>
+                        <div class="flex flex-wrap items-center gap-1">
+                          <span class="line-clamp-1 break-all">{proxyProvider.name}</span>
 
                           <div class="badge badge-sm">
                             {proxyProvider.proxies.length}
                           </div>
+
+                          <div class="badge badge-sm">
+                            {proxyProvider.vehicleType}
+                          </div>
                         </div>
 
                         <div class="flex items-center gap-2">
@@ -399,7 +404,7 @@ export default () => {
                       />
 
                       <div class="text-sm text-slate-500">
-                        {proxyProvider.vehicleType} :: {t('updated')}{' '}
+                        {t('updated')}{' '}
                         {formatTimeFromNow(proxyProvider.updatedAt)}
                       </div>