add label to toggle connection button in configure connect modal

This commit is contained in:
Sine Jespersen 2025-06-13 11:56:36 +02:00
parent a1034a4ca3
commit 15efb07961
2 changed files with 6 additions and 1 deletions

View File

@ -296,8 +296,11 @@
</Tooltip>
<div class="flex flex-col shrink-0 self-end">
<label class="sr-only" for="toggle-connection"
>{$i18n.t('Toggle whether current connection is active.')}</label
>
<Tooltip content={enable ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
<Switch bind:state={enable} />
<Switch id="toggle-connection" bind:state={enable} />
</Tooltip>
</div>
</div>

View File

@ -2,6 +2,7 @@
import { createEventDispatcher, tick } from 'svelte';
import { Switch } from 'bits-ui';
export let state = true;
export let id = '';
const dispatch = createEventDispatcher();
@ -10,6 +11,7 @@
<Switch.Root
bind:checked={state}
{id}
class="flex h-5 min-h-5 w-9 shrink-0 cursor-pointer items-center rounded-full px-[3px] mx-[1px] transition {state
? ' bg-emerald-600'
: 'bg-gray-200 dark:bg-transparent'} outline outline-1 outline-gray-100 dark:outline-gray-800"