Redesign organizer picker with tailwind

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/OrganizerPicker.vue

@@ -5,14 +5,33 @@
       :placeholder="$t('Filter by profile or group name')"
       v-model="actorFilter"
     />
-    <b-radio-button
+    <transition-group
-      v-model="selectedActor"
+      tag="ul"
-      :native-value="availableActor"
+      class="grid grid-cols-1 gap-y-3 m-5 max-w-md mx-auto"
-      class="list-item"
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="transform opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="transform opacity-0"
+    >
+      <li
+        class="relative focus-within:shadow-lg"
         v-for="availableActor in actualFilteredAvailableActors"
         :key="availableActor.id"
       >
-      <div class="media" dir="auto">
+        <input
+          class="sr-only peer"
+          type="radio"
+          :value="availableActor"
+          name="availableActors"
+          v-model="selectedActor"
+          :id="`availableActor-${availableActor.id}`"
+        />
+        <label
+          class="flex flex-wrap p-3 bg-white border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
+          :for="`availableActor-${availableActor.id}`"
+        >
           <figure class="image is-48x48" v-if="availableActor.avatar">
             <img
               class="image is-rounded"
@@ -20,18 +39,14 @@
               alt=""
             />
           </figure>
-        <b-icon
+          <b-icon v-else size="is-large" icon="account-circle" />
-          class="media-left"
+          <div>
-          v-else
-          size="is-large"
-          icon="account-circle"
-        />
-        <div class="media-content">
             <h3>{{ availableActor.name }}</h3>
             <small>{{ `@${availableActor.preferredUsername}` }}</small>
           </div>
-      </div>
+        </label>
-    </b-radio-button>
+      </li>
+    </transition-group>
   </div>
 </template>
 <script lang="ts">

js/src/components/Event/OrganizerPickerWrapper.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="organizer-picker" v-if="selectedActor">
+  <div
+    class="bg-white border border-gray-300 rounded-lg cursor-pointer"
+    v-if="selectedActor"
+  >
     <!-- If we have a current actor (inline) -->
     <div
       v-if="inline && selectedActor.id"