From 154fc3e2f6e4fbff91286714676feeca384f287d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Tue, 4 Jun 2024 11:59:26 +0200
Subject: [PATCH] Increase size between user-groups in
 AddresseeSelectorComponent.vue

---
 .../components/AddresseeSelectorComponent.vue     | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
index aebb21895..7d2652c90 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="row">
         <div class="col-12 col-lg-6 col-md-6 text-center">
-            <div class="mb-2">
+            <div class="mb-5 level-line">
                 <span
                     v-for="userGroupItem in userGroups.filter(
                         (userGroup) => userGroup.excludeKey == 'level'
                     )"
                     :key="userGroupItem.id"
-                    class="m-1"
+                    class="m-2 as-user-group"
                 >
                     <input
                         type="radio"
@@ -34,13 +34,13 @@
                     </label>
                 </span>
             </div>
-            <div class="mb-2">
+            <div class="mb-2 level-line">
                 <span
                     v-for="userGroupItem in userGroups.filter(
                         (userGroup) => userGroup.excludeKey == ''
                     )"
                     :key="userGroupItem.id"
-                    class="m-1"
+                    class="m-2"
                 >
                     <input
                         type="checkbox"
@@ -146,7 +146,8 @@ export default defineComponent({
 
         function getUserGroupBtnColor(userGroup: UserGroup) {
             return [
-                `.btn-check:checked + .btn-${userGroup.id} {
+                `color: ${userGroup.foregroundColor};
+                .btn-check:checked + .btn-${userGroup.id} {
                 color: ${userGroup.foregroundColor};
                 background-color: ${userGroup.backgroundColor};
                 }`,
@@ -238,4 +239,8 @@ export default defineComponent({
     box-shadow: 0 0 0 0.2rem var(--bs-chill-green);
     outline: 0;
 }
+
+.as-user-group {
+    display: inline-block;
+}
 </style>