chore: Update styles in settings pages (#11070)

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
Sivin Varghese
2025-03-19 03:10:02 +05:30
committed by GitHub
parent 9d49b69f2e
commit 8066b36ebf
101 changed files with 1320 additions and 1273 deletions

View File

@@ -2,12 +2,14 @@
import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
WootDropdownItem,
WootDropdownMenu,
Thumbnail,
NextButton,
},
props: {
@@ -85,37 +87,33 @@ export default {
<div class="w-full max-h-[10rem]">
<WootDropdownMenu>
<WootDropdownItem v-for="option in filteredOptions" :key="option.id">
<woot-button
class="multiselect-dropdown--item"
:variant="isActive(option) ? 'hollow' : 'clear'"
color-scheme="secondary"
:class="{
active: isActive(option),
}"
<NextButton
slate
:variant="isActive(option) ? 'faded' : 'ghost'"
trailing-icon
:icon="isActive(option) ? 'i-lucide-check' : ''"
class="w-full !px-2.5"
@click="() => onclick(option)"
>
<div class="flex items-center gap-1.5">
<Thumbnail
v-if="hasThumbnail"
:src="option.thumbnail"
size="24px"
:username="option.name"
:status="option.availability_status"
has-border
/>
<div
class="flex items-center justify-between w-full min-w-0 gap-2"
<div
class="flex items-center justify-between w-full min-w-0 gap-2"
>
<span
class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
:title="option.name"
>
<span
class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
:title="option.name"
>
{{ option.name }}
</span>
<fluent-icon v-if="isActive(option)" icon="checkmark" />
</div>
{{ option.name }}
</span>
</div>
</woot-button>
<Thumbnail
v-if="hasThumbnail"
:src="option.thumbnail"
size="24px"
:username="option.name"
:status="option.availability_status"
has-border
/>
</NextButton>
</WootDropdownItem>
</WootDropdownMenu>
<h4