wukko ad6539e3bd
web/settings: replace checkbox with toggle
- equal font size & padding for all subtexts in settings
- equal padding & border radius for all settings components

it just looks way better now
2024-06-29 22:51:24 +06:00

34 lines
1.2 KiB
Svelte

<script lang="ts">
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import { themeOptions } from "$lib/types/settings";
</script>
<SettingsCategory title="theme">
<Switcher big={true}>
{#each themeOptions as value}
<SettingsButton settingContext="appearance" settingId="theme" settingValue={value}>
{value}
</SettingsButton>
{/each}
</Switcher>
</SettingsCategory>
<SettingsCategory title="accessibility">
<SettingsToggle
settingContext="accessibility"
settingId="reduceTransparency"
title="reduce visual transparency"
description="disables blur effects and reduces transparency of surfaces."
/>
<SettingsToggle
settingContext="accessibility"
settingId="reduceAnimations"
title="reduce animations"
description="replaces rapid animations with smooth transitions."
/>
</SettingsCategory>