WIP: meeting members adjustments

src/App.vue

@@ -354,7 +354,7 @@
           </div>
 
           <div
-            v-if="notification.type === 'set-visibility-to-meeting-members'"
+            v-if="notification.type === 'set-visibility-meeting-members'"
             class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
           >
             <div

src/components/MembersList.vue

@@ -11,7 +11,7 @@
     <!-- Members List -->
 
     <div v-else>
-      <div class="text-center text-red-600 py-4">
+      <div class="text-center text-red-600 my-4">
         {{ decryptionErrorMessage() }}
       </div>
 
@@ -23,64 +23,70 @@
         to set it.
       </div>
 
-      <div>
+      <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
-        <span
+        <li
           v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
-          class="inline-flex items-center flex-wrap"
         >
-          <span class="inline-flex items-center">
+          Click
-            &bull; Click
           <span
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
+            class="inline-block w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-center"
           >
             <font-awesome icon="plus" class="text-sm" />
           </span>
           /
           <span
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
+            class="inline-block w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-center"
           >
             <font-awesome icon="minus" class="text-sm" />
           </span>
           to add/remove them to/from the meeting.
-          </span>
+        </li>
-        </span>
+        <li v-if="membersToShow().length > 0">
-      </div>
+          Click
-      <div>
-        <span
-          v-if="membersToShow().length > 0"
-          class="inline-flex items-center"
-        >
-          &bull; Click
           <span
-            class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
+            class="inline-block w-5 h-5 rounded-full bg-green-100 text-green-600 text-center"
           >
-            <font-awesome icon="circle-user" class="text-xl" />
+            <font-awesome icon="circle-user" class="text-sm" />
           </span>
           to add them to your contacts.
-        </span>
+        </li>
-      </div>
+      </ul>
 
-      <div class="flex justify-center">
+      <div class="flex justify-between">
         <!-- 
         always have at least one refresh button even without members in case the organizer 
          changes the password 
          -->
         <button
-          class="btn-action-refresh"
+          class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
           title="Refresh members list"
           @click="fetchMembers"
         >
           <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          Refresh <span class="text-xs">(10s)</span>
+        </button>
+
+        <button
+          class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
+          title="Set visibility for meeting members"
+          @click="showAddMembersNotification"
+        >
+          <font-awesome icon="eye" />
+          Set Visibility
         </button>
       </div>
-      <div
+      <ul
+        v-if="membersToShow().length > 0"
+        class="border-t border-slate-300 my-2"
+      >
+        <li
           v-for="member in membersToShow()"
           :key="member.member.memberId"
-        class="mt-2 p-4 bg-gray-50 rounded-lg"
+          class="border-b border-slate-300 py-1.5"
         >
           <div class="flex items-center justify-between">
-          <div class="flex items-center">
+            <div class="flex items-center overflow-hidden">
-            <h3 class="text-lg font-medium">
+              <h3 class="font-semibold truncate">
                 {{ member.name || unnamedMember }}
               </h3>
               <div
@@ -92,21 +98,9 @@
                   title="Add as contact"
                   @click="addAsContact(member)"
                 >
-                <font-awesome icon="circle-user" class="text-xl" />
+                  <font-awesome icon="circle-user" class="text-sm" />
                 </button>
               </div>
-            <button
-              v-if="member.did !== activeDid"
-              class="btn-info-contact"
-              title="Contact info"
-              @click="
-                informAboutAddingContact(
-                  getContactFor(member.did) !== undefined,
-                )
-              "
-            >
-              <font-awesome icon="circle-info" class="text-base" />
-            </button>
             </div>
             <div class="flex">
               <span
@@ -127,27 +121,27 @@
                     class="text-sm"
                   />
                 </button>
-              <button
-                class="btn-info-admission"
-                title="Admission info"
-                @click="informAboutAdmission()"
-              >
-                <font-awesome icon="circle-info" class="text-base" />
-              </button>
               </span>
             </div>
           </div>
-        <p class="text-sm text-gray-600 truncate">
+          <p class="text-xs text-gray-600 truncate">
             {{ member.did }}
           </p>
-      </div>
+        </li>
-      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
+      </ul>
+
+      <div v-if="membersToShow().length > 0" class="flex justify-between">
+        <!-- 
+        always have at least one refresh button even without members in case the organizer 
+         changes the password 
+         -->
         <button
-          class="btn-action-refresh"
+          class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
           title="Refresh members list"
           @click="fetchMembers"
         >
           <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          Refresh <span class="text-xs">(10s)</span>
         </button>
       </div>
 
@@ -508,6 +502,21 @@ export default class MembersList extends Vue {
       this.notify.error(message, TIMEOUTS.LONG);
     }
   }
+
+  showAddMembersNotification() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "set-visibility-meeting-members",
+        title: "Set Visibility for Meeting Members",
+        onYes: async () => {
+          // Handle the "Add Selected" action - you can implement the actual logic here
+          console.log("User confirmed adding selected members as contacts");
+        },
+      },
+      -1,
+    ); // -1 means no auto-dismiss, stays open until user acts
+  }
 }
 </script>
 
@@ -522,7 +531,7 @@ export default class MembersList extends Vue {
 
 .btn-add-contact {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
+  @apply ml-2 w-5 h-5 flex items-center justify-center rounded-full 
     bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
     transition-colors;
 }
@@ -536,14 +545,14 @@ export default class MembersList extends Vue {
 
 .btn-admission {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
+  @apply w-5 h-5 flex items-center justify-center rounded-full 
     bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
     transition-colors;
 }
 
 .btn-info-admission {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
+  @apply w-6 h-6 flex items-center justify-center rounded-full 
     bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
     transition-colors;
 }

src/views/OnboardMeetingMembersView.vue

@@ -7,7 +7,7 @@
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
-        Meeting Member<a href="#" @click="showAddMembersNotification">s</a>
+        Meeting Members
       </h1>
 
       <!-- Spacer (no Back button) -->
@@ -259,19 +259,5 @@ export default class OnboardMeetingMembersView extends Vue {
   handleError(message: string) {
     this.errorMessage = message;
   }
-
-  showAddMembersNotification() {
-    this.$notify(
-      {
-        group: "modal",
-        type: "set-visibility-to-meeting-members",
-        onYes: async () => {
-          // Handle the "Add Selected" action - you can implement the actual logic here
-          console.log("User confirmed adding selected members as contacts");
-        },
-      },
-      -1,
-    ); // -1 means no auto-dismiss, stays open until user acts
-  }
 }
 </script>

src/views/OnboardMeetingSetupView.vue

@@ -230,10 +230,11 @@
       class="mt-8 p-4 border rounded-lg bg-white shadow"
     >
       <div class="flex items-center justify-between">
-        <h2 class="text-2xl">Meeting Members</h2>
+        <h2 class="font-bold">Meeting Members</h2>
       </div>
-      <div class="mt-4">
+      <ul class="list-disc text-sm mt-4 mb-2 ps-4 space-y-2">
-        &bull; Page for Members
+        <li>
+          Page for Members:
           <span
             class="ml-4 cursor-pointer text-blue-600"
             title="Click to copy link for members"
@@ -249,7 +250,8 @@
           >
             <font-awesome icon="external-link" />
           </a>
-      </div>
+        </li>
+      </ul>
 
       <MembersList
         :password="currentMeeting.password || ''"