Browse Source

Update AdmitPendingMembersDialog.vue

feat: add DID display to Pending Members dialog

- Restructure member display with better visual hierarchy
- Add DID display with responsive truncation for mobile
- Simplify button labels ("Admit + Add Contacts" and "Admit Only")
pull/211/head
Jose Olarte III 2 weeks ago
parent
commit
ad51c187aa
  1. 20
      src/components/AdmitPendingMembersDialog.vue

20
src/components/AdmitPendingMembersDialog.vue

@ -52,7 +52,21 @@
:checked="isMemberSelected(member.did)"
@change="toggleMemberSelection(member.did)"
/>
{{ member.name || SOMEONE_UNNAMED }}
<div class="">
<div class="text-sm font-semibold">
{{ member.name || SOMEONE_UNNAMED }}
</div>
<div
class="flex items-center gap-0.5 text-xs text-slate-500"
>
<span class="font-semibold sm:hidden">DID:</span>
<span
class="w-[35vw] sm:w-auto truncate text-left"
style="direction: rtl"
>{{ member.did }}</span
>
</div>
</div>
</label>
<!-- Contact indicator - only show if they are already a contact -->
@ -81,7 +95,7 @@
]"
@click="admitAndSetVisibility"
>
Admit Pending + Add Contacts
Admit + Add Contacts
</button>
<button
v-if="pendingMembersData && pendingMembersData.length > 0"
@ -94,7 +108,7 @@
]"
@click="admitOnly"
>
Admit Pending Only
Admit Only
</button>
<button
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"

Loading…
Cancel
Save