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
This commit is contained in:
wukko
2024-06-29 22:51:24 +06:00
parent c7befcb100
commit ad6539e3bd
9 changed files with 139 additions and 120 deletions

View File

@@ -2,7 +2,7 @@
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import { themeOptions } from "$lib/types/settings";
</script>
@@ -18,13 +18,13 @@
</SettingsCategory>
<SettingsCategory title="accessibility">
<SettingsCheckbox
<SettingsToggle
settingContext="accessibility"
settingId="reduceTransparency"
title="reduce visual transparency"
description="disables blur effects and reduces transparency of surfaces."
/>
<SettingsCheckbox
<SettingsToggle
settingContext="accessibility"
settingId="reduceAnimations"
title="reduce animations"

View File

@@ -2,7 +2,7 @@
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import { audioFormatOptions } from "$lib/types/settings";
@@ -24,7 +24,7 @@
</SettingsCategory>
<SettingsCategory title="youtube">
<SettingsCheckbox
<SettingsToggle
settingContext="save"
settingId="youtubeDubBrowserLang"
title="use browser language for dubbed videos"
@@ -33,7 +33,7 @@
</SettingsCategory>
<SettingsCategory title="tiktok">
<SettingsCheckbox
<SettingsToggle
settingContext="save"
settingId="tiktokFullAudio"
title="use original sound"

View File

@@ -2,7 +2,7 @@
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import { filenameStyleOptions } from "$lib/types/settings";
</script>
@@ -22,7 +22,7 @@
</SettingsCategory>
<SettingsCategory title="file metadata">
<SettingsCheckbox
<SettingsToggle
settingContext="save"
settingId="disableMetadata"
title="disable file metadata"
@@ -31,7 +31,7 @@
</SettingsCategory>
<SettingsCategory title="saving method">
<SettingsCheckbox
<SettingsToggle
settingContext="save"
settingId="downloadPopup"
title="ask how to save"

View File

@@ -2,7 +2,7 @@
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
import Switcher from "$components/buttons/Switcher.svelte";
import SettingsButton from "$components/buttons/SettingsButton.svelte";
import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import { videoQualityOptions } from "$lib/types/settings";
import { youtubeVideoCodecOptions } from "$lib/types/settings";
@@ -40,7 +40,7 @@
</SettingsCategory>
<SettingsCategory title="twitter">
<SettingsCheckbox
<SettingsToggle
settingContext="save"
settingId="twitterGif"
title="convert looping videos to GIF"
@@ -49,7 +49,7 @@
</SettingsCategory>
<SettingsCategory title="tiktok">
<SettingsCheckbox
<SettingsToggle
settingContext="save"
settingId="tiktokH265"
title="prefer HEVC/H265 format"