Fix jitter when toggling "adapt to system theme"

This patch makes the border around the "dark" and "light" radio button to always be present.
Previously it was not present when the button were disabled because using the system theme,
which caused it to make the elements larger and made them move when toggling "adapt to system theme"

To keep the same meaning as previously, the border is only colored when the button is activated

Fix #1339
This commit is contained in:
Sosthène Guédon 2023-08-13 16:06:28 +02:00
parent 22e3e30f8f
commit d037642f55

View file

@ -23,8 +23,8 @@
<fieldset>
<legend class="sr-only">{{ t("Theme") }}</legend>
<o-radio
:class="{ 'border-mbz-bluegreen border-2': theme === 'light' }"
class="p-4 bg-white text-zinc-800 rounded-md mt-2 mr-2"
:class="{ 'border-mbz-bluegreen': theme === 'light' }"
class="p-4 bg-white text-zinc-800 rounded-md mt-2 mr-2 border-2"
:disabled="systemTheme"
v-model="theme"
name="theme"
@ -32,8 +32,8 @@
>{{ t("Light") }}</o-radio
>
<o-radio
:class="{ 'border-mbz-bluegreen border-2': theme === 'dark' }"
class="p-4 bg-zinc-800 rounded-md text-white mt-2 ml-2"
:class="{ 'border-mbz-bluegreen': theme === 'dark' }"
class="p-4 bg-zinc-800 rounded-md text-white mt-2 ml-2 border-2"
:disabled="systemTheme"
v-model="theme"
name="theme"