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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user