From 3a2560f15291a60ed509cf8c32f5c699cda957e5 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Wed, 6 Sep 2023 03:08:18 +0800
Subject: [PATCH] fix(logs): table size

---
 src/pages/Connections.tsx | 30 ++++++------------------------
 src/pages/Logs.tsx        |  6 ++++--
 src/signals/config.ts     | 23 +++++++++++++++++++++++
 3 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index 6f553a3..b3e6573 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -36,10 +36,14 @@ import {
   CONNECTIONS_TABLE_ACCESSOR_KEY,
   CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
   CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
-  TAILWINDCSS_SIZE,
 } from '~/constants'
 import { formatTimeFromNow } from '~/helpers'
-import { secret, tableSize, useRequest, wsEndpointURL } from '~/signals'
+import {
+  secret,
+  tableSizeClassName,
+  useRequest,
+  wsEndpointURL,
+} from '~/signals'
 import type { Connection } from '~/types'
 
 type ConnectionWithSpeed = Connection & {
@@ -313,28 +317,6 @@ export default () => {
     getCoreRowModel: getCoreRowModel(),
   })
 
-  const tableSizeClassName = () => {
-    const size = tableSize()
-    let className = 'table-xs'
-
-    switch (size) {
-      case TAILWINDCSS_SIZE.XS:
-        className = 'table-xs'
-        break
-      case TAILWINDCSS_SIZE.SM:
-        className = 'table-sm'
-        break
-      case TAILWINDCSS_SIZE.MD:
-        className = 'table-md'
-        break
-      case TAILWINDCSS_SIZE.LG:
-        className = 'table-lg'
-        break
-    }
-
-    return className
-  }
-
   const tabs = () => [
     {
       type: ActiveTab.activeConnections,
diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx
index 62ca70d..31349f7 100644
--- a/src/pages/Logs.tsx
+++ b/src/pages/Logs.tsx
@@ -9,7 +9,7 @@ import {
 } from '@tanstack/solid-table'
 import { For, createEffect, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { secret, tableSize, wsEndpointURL } from '~/signals'
+import { secret, tableSizeClassName, wsEndpointURL } from '~/signals'
 import { Log } from '~/types'
 
 type LogWithSeq = Log & { seq: number }
@@ -76,7 +76,9 @@ export default () => {
       />
 
       <div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
-        <table class={twMerge(tableSize(), 'table relative rounded-none')}>
+        <table
+          class={twMerge(tableSizeClassName(), 'table relative rounded-none')}
+        >
           <thead class="sticky top-0 z-10">
             <For each={table.getHeaderGroups()}>
               {(headerGroup) => (
diff --git a/src/signals/config.ts b/src/signals/config.ts
index 60b0c69..5b21809 100644
--- a/src/signals/config.ts
+++ b/src/signals/config.ts
@@ -54,6 +54,29 @@ export const [tableSize, setTableSize] = makePersisted(
   createSignal<TAILWINDCSS_SIZE>(TAILWINDCSS_SIZE.XS),
   { name: 'tableSize', storage: localStorage },
 )
+
+export const tableSizeClassName = () => {
+  const size = tableSize()
+  let className = 'table-xs'
+
+  switch (size) {
+    case TAILWINDCSS_SIZE.XS:
+      className = 'table-xs'
+      break
+    case TAILWINDCSS_SIZE.SM:
+      className = 'table-sm'
+      break
+    case TAILWINDCSS_SIZE.MD:
+      className = 'table-md'
+      break
+    case TAILWINDCSS_SIZE.LG:
+      className = 'table-lg'
+      break
+  }
+
+  return className
+}
+
 export const [requestTimeoutDuration, setRequestTimeoutDuration] =
   makePersisted(createSignal(10000), {
     name: 'requestTimeoutDuration',