feat: better styling for campaign creation and inputs

src/assets/components/inputs.less

@@ -0,0 +1,39 @@
+@import '../_mixins';
+@import '../_theme';
+
+input[type='checkbox'] {
+  -webkit-appearance: none;
+  appearance: none;
+  padding: 0.6rem;
+  .themed(background-color, @light-background, @dark-background);
+  border: none;
+  border-radius: 1rem;
+  display: inline-block;
+  transition: all 0.2s ease;
+  display: inline-block;
+  position: relative;
+
+  &:checked {
+    .themed(background-color, @light-primary-500, @dark-primary);
+    .themed(color, @light-background, @dark-background);
+    transition: all 0.2s ease;
+  }
+}
+
+input[type='text'] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  padding: 1rem;
+  border: none;
+  border-bottom: solid 1px;
+  .themed(border-bottom-color, @light-gray-10, @dark-gray-10);
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:focus {
+    .themed(background-color, @light-primary-300, @dark-primary-300);
+    outline: none;
+    transition: all 0.2s ease;
+  }
+}

src/assets/main.less

@@ -10,6 +10,7 @@
 @import 'components/cards';
 @import 'components/highlight';
 @import 'components/links';
+@import 'components/inputs';
 
 body {
   font-family: 'Roboto', sans-serif;

src/views/CreateCampaignView.vue

@@ -1,20 +1,23 @@
 <template>
   <h1>Création d’une campagne</h1>
   <form @submit.prevent="createCampaign" class="flex-col gap-2rem card" autocomplete="off">
-    <label for="campaign-name" class="flex-col gap-1rem">Nom de la nouvelle campagne</label>
+    <label for="campaign-name">Nom de la nouvelle campagne</label>
+    <div>
       <input
         name="campaign-name"
         type="text"
         v-model="campaign.name"
+        autocomplete="off"
         placeholder="Nom de la nouvelle campagne" />
+    </div>
 
-    <label class="flex-col gap-1rem" for="players" autocomplete="off">Joueurs (2 à 10)</label>
+    <fieldset class="player-selection">
-    <select id="players" name="players" multiple v-model="campaign.players">
+      <legend class="highlight" for="players" autocomplete="off">Joueurs</legend>
-      <option v-for="user in users" :key="user.id" :value="user.id">
+      <div v-for="user in users" :key="user.id" class="player">
-        {{ user.displayName() }}
+        <input type="checkbox" v-model="players" :name="user.id" :value="user.id" :id="user.id" />
-      </option>
+        <label :for="user.id">{{ user.displayName() }}</label>
-    </select>
+      </div>
-
+    </fieldset>
     <div class="buttons gap-1rem">
       <RouterLink :to="{ name: 'home' }" class="button faded">Annuler</RouterLink>
       <button type="submit">Envoyer</button>
@@ -31,6 +34,7 @@ import { type SimpleUser } from '@/models/User';
 
 const pbStore = usePocketbaseStore();
 const users = ref<SimpleUser[]>([]);
+const players = ref([]);
 
 const campaign = ref<NewCampaign>({
   name: null,
@@ -39,6 +43,7 @@ const campaign = ref<NewCampaign>({
 });
 
 const createCampaign = () => {
+  campaign.value.players = [...players.value];
   pbStore.campaigns.create(campaign.value).subscribe({
     next: () => {
       router.push({ name: 'home' });
@@ -57,7 +62,22 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
+@import '@/assets/main';
+
 form {
   min-width: 90%;
 }
+
+.player-selection {
+  border: none;
+  .card;
+  .more;
+  .flex-col;
+  .gap-1rem;
+}
+
+.player {
+  .flex-row;
+  gap: 0.5rem;
+}
 </style>