feat: better styling for username display

src/components/UserAvatar.vue

@@ -2,7 +2,9 @@
   <div v-if="avatar" class="img-container">
     <img :alt="altText" :src="avatar" :height="size" :width="size" />
   </div>
-  <i v-else :class="`gdrico-${icon}`"></i>
+  <div v-else class="text-center">
+    <i :class="`gdrico-${icon}`"></i>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -37,5 +39,9 @@ onMounted(() => {
     object-fit: cover;
     border-radius: 1rem;
   }
+
+  i {
+    text-align: center;
+  }
 }
 </style>

src/components/UserAvatarAndName.vue

@@ -3,8 +3,8 @@
     <UserAvatar
       :user="props.user"
       :icon="type === 'gamemaster' ? 'user-tie' : 'user'"
-      :size="avatarSize"
-      :style="'width: ${avatarSize}px'" />
+      :size="20"
+      :style="'width: 20px'" />
     <span>{{ props.user.displayName() }}</span>
   </div>
 </template>
@@ -17,12 +17,10 @@ import { computed } from 'vue';
 const props = defineProps<{
   user: SimpleUser;
   type?: 'gamemaster' | 'player';
-  avatarSize?: number;
   align?: 'right' | 'center' | 'left';
 }>();
 
 const type = computed(() => props.type ?? 'player');
-const avatarSize = computed(() => props.avatarSize ?? 20);
 const align = computed(() => props.align ?? 'center');
 </script>
 

src/views/CreateCampaignView.vue

@@ -15,7 +15,7 @@
       <legend class="highlight" for="players" autocomplete="off">Joueurs</legend>
       <div v-for="user in users" :key="user.id" class="player">
         <input type="checkbox" v-model="players" :name="user.id" :value="user.id" :id="user.id" />
-        <label :for="user.id">{{ user.displayName() }}</label>
+        <label :for="user.id"><UserAvatarAndName :user="user" :align="'left'" /></label>
       </div>
     </fieldset>
     <div class="buttons gap-1rem">
@@ -31,6 +31,7 @@ import router from '@/router';
 import { usePocketbaseStore } from '@/stores/pocketbase';
 import { type NewCampaign } from '@/models/Campaign';
 import { type SimpleUser } from '@/models/User';
+import UserAvatarAndName from '@/components/UserAvatarAndName.vue';
 
 const pbStore = usePocketbaseStore();
 const users = ref<SimpleUser[]>([]);