feat: update the overall look of the app

src/App.tsx

@@ -47,7 +47,7 @@ export const App = () => {
     >
       <Header />
 
-      <div class="flex-1 overflow-y-auto overflow-x-hidden p-2 sm:p-4">
+      <div class="flex-1 overflow-y-auto p-2 sm:p-4">
         <Routes>
           <Show when={selectedEndpoint()}>
             <Route path={ROUTES.Overview} component={Overview} />

src/components/Header.tsx

@@ -62,7 +62,7 @@ const ThemeSwitcher = () => (
 
 const LogoText = () => (
   <a
-    class="flex gap-2 whitespace-nowrap text-xl font-bold uppercase"
+    class="text-md flex gap-2 whitespace-nowrap font-bold uppercase sm:text-xl"
     href="https://github.com/metacubex/metacubexd"
     target="_blank"
   >
@@ -111,7 +111,7 @@ export const Header = () => {
   const [openedDrawer, setOpenedDrawer] = createSignal(false)
 
   return (
-    <ul class="navbar rounded-box sticky inset-x-0 top-2 z-50 mx-2 mt-2 flex w-auto items-center justify-center bg-base-300 px-4">
+    <ul class="navbar rounded-box sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
       <div class="navbar-start gap-4">
         <div class={twMerge('drawer w-auto lg:hidden', '')}>
           <input

src/pages/Connections.tsx

@@ -306,7 +306,7 @@ export default () => {
   ]
 
   return (
-    <div class="flex h-full flex-col gap-4 overflow-y-auto p-1">
+    <div class="flex h-full flex-col gap-4 p-1">
       <div class="tabs-boxed tabs gap-2">
         <For each={tabs()}>
           {(tab) => (

src/pages/Logs.tsx

@@ -60,7 +60,7 @@ export default () => {
   })
 
   return (
-    <div class="flex h-full flex-col gap-4 overflow-y-auto p-1">
+    <div class="flex h-full flex-col gap-4 p-1">
       <input
         class="input input-primary flex-shrink-0"
         placeholder={t('search')}

src/pages/Overview.tsx

@@ -91,7 +91,7 @@ export default () => {
   }>('connections')
 
   return (
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
       <div class="stats stats-vertical w-full grid-cols-2 bg-primary shadow lg:stats-horizontal lg:flex">
         <TrafficWidget label={t('upload')}>
           {byteSize(traffic()?.up || 0).toString()}/s

src/pages/Proxies.tsx

@@ -145,7 +145,13 @@ export default () => {
             const title = (
               <>
                 <div class="mr-8 flex items-center justify-between">
-                  <span>{proxyProvider.name}</span>
+                  <div class="flex items-center gap-2">
+                    <span>{proxyProvider.name}</span>
+                    <div class="badge badge-sm">
+                      {proxyProvider.proxies.length}
+                    </div>
+                  </div>
+
                   <div>
                     <Button
                       class="btn btn-circle btn-sm mr-2"
@@ -176,13 +182,16 @@ export default () => {
                     </Button>
                   </div>
                 </div>
+
                 <SubscriptionInfo
                   subscriptionInfo={proxyProvider.subscriptionInfo}
                 />
+
                 <div class="text-sm text-slate-500">
                   {proxyProvider.vehicleType} :: {t('updated')}{' '}
                   {formatTimeFromNow(proxyProvider.updatedAt)}
                 </div>
+
                 <Show when={!collapsedMap()[proxyProvider.name]}>
                   <ProxyNodePreview proxyNameList={sortedProxyNames} />
                 </Show>
@@ -223,7 +232,11 @@ export default () => {
             const title = (
               <>
                 <div class="mr-8 flex items-center justify-between">
-                  <span>{proxy.name}</span>
+                  <div class="flex items-center gap-2">
+                    <span>{proxy.name}</span>
+                    <div class="badge badge-sm">{proxy.all?.length}</div>
+                  </div>
+
                   <Button
                     class="btn-circle btn-sm"
                     disabled={latencyTestingMap()[proxy.name]}

src/pages/Rules.tsx

@@ -56,11 +56,11 @@ export default () => {
         >
           {(rule) => (
             <div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
-              <div class="break-all">
+              <div class="flex items-center gap-2">
-                {rule.payload}
+                <span class="break-all">{rule.payload}</span>
-                {typeof rule.size === 'number' &&
+                <Show when={typeof rule.size === 'number' && rule.size !== -1}>
-                  rule.size !== -1 &&
+                  <div class="badge badge-sm">{rule.size}</div>
-                  ` (${rule.size})`}
+                </Show>
               </div>
               <div class="text-xs text-slate-500">
                 {rule.type} :: {rule.proxy}
@@ -90,13 +90,16 @@ export default () => {
           <For each={rulesProviders()}>
             {(rulesProvider) => (
               <div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
-                <div class="break-all pr-8">
+                <div class="flex items-center gap-2 pr-8">
-                  {rulesProvider.name} ({rulesProvider.ruleCount})
+                  <span class="break-all">{rulesProvider.name}</span>
+                  <div class="badge badge-sm">{rulesProvider.ruleCount}</div>
                 </div>
+
                 <div class="text-xs text-slate-500">
                   {rulesProvider.vehicleType} / {rulesProvider.behavior} /
                   {t('updated')} {formatTimeFromNow(rulesProvider.updatedAt)}
                 </div>
+
                 <Button
                   class="btn-circle btn-sm absolute right-2 top-2 mr-2 h-4"
                   disabled={updatingMap()[rulesProvider.name]}