fix: tab style for conns and proxies

This commit is contained in:
Zephyruso 2023-09-07 14:02:10 +08:00
parent 1471e02158
commit 842ce9e00f
2 changed files with 41 additions and 39 deletions

View File

@ -307,47 +307,49 @@ export default () => {
return (
<div class="flex h-full flex-col gap-2 p-1">
<div class="tabs-boxed tabs gap-2">
<For each={tabs()}>
{(tab) => (
<button
class={twMerge(
activeTab() === tab.type && 'tab-active',
'tab gap-2',
)}
onClick={() => setActiveTab(tab.type)}
>
<span>{tab.name}</span>
<div class="badge badge-sm">{tab.count}</div>
</button>
)}
</For>
</div>
<div class="flex w-full flex-wrap items-center gap-2">
<input
class="input input-primary input-sm flex-1"
placeholder={t('search')}
onInput={(e) => setSearch(e.target.value)}
/>
<div class="tabs-boxed tabs gap-2">
<For each={tabs()}>
{(tab) => (
<button
class={twMerge(
activeTab() === tab.type && 'tab-active',
'tab gap-2 px-2',
)}
onClick={() => setActiveTab(tab.type)}
>
<span>{tab.name}</span>
<div class="badge badge-sm">{tab.count}</div>
</button>
)}
</For>
</div>
<Button
class="btn-circle btn-sm"
onClick={() => setPaused((paused) => !paused)}
>
{paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
</Button>
<div class="flex w-full items-center gap-2 md:flex-1">
<input
class="input input-primary input-sm flex-1"
placeholder={t('search')}
onInput={(e) => setSearch(e.target.value)}
/>
<Button
class="btn-circle btn-sm"
onClick={() => request.delete('connections')}
>
<IconCircleX />
</Button>
<Button
class="btn-circle btn-sm"
onClick={() => setPaused((paused) => !paused)}
>
{paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
</Button>
<label for="connection-modal" class="btn btn-circle btn-sm">
<IconSettings />
</label>
<Button
class="btn-circle btn-sm"
onClick={() => request.delete('connections')}
>
<IconCircleX />
</Button>
<label for="connection-modal" class="btn btn-circle btn-sm">
<IconSettings />
</label>
</div>
<ConnectionsTableOrderingModal
order={columnOrder()}

View File

@ -92,8 +92,8 @@ export default () => {
return (
<div class="flex h-full flex-col gap-2">
<Show when={proxyProviders().length > 0}>
<div class="flex items-center justify-between gap-2">
<div class="tabs-boxed tabs gap-2">
<div class="flex items-center gap-2">
<div class="tabs tabs-boxed gap-2">
<For each={tabs()}>
{(tab) => (
<button