From 0ef34ca3a1623b0e3fbe0335eb62487755c8f159 Mon Sep 17 00:00:00 2001
From: Dave <d.garnar@uk.cdw.com>
Date: Mon, 25 Jan 2021 14:42:27 +0000
Subject: [PATCH] moving button group to the bototm of the modal, as it is not
 priority information, swapped out the active CSS for the existing .townsfolt
 class took the button group out of the UL and surounded in a div.

---
 src/components/modals/RoleModal.vue | 74 +++++++++++++----------------
 1 file changed, 32 insertions(+), 42 deletions(-)

diff --git a/src/components/modals/RoleModal.vue b/src/components/modals/RoleModal.vue
index 1dd5f6c..f6a59bc 100644
--- a/src/components/modals/RoleModal.vue
+++ b/src/components/modals/RoleModal.vue
@@ -8,42 +8,40 @@
           : "bluffing"
       }}
     </h3>
-    <ul>
-      <li class="button-group" v-if="isBluffs()">
-        <span
-          class="button"
-          :class="{ active: tab === 'editionRoles' }"
-          @click="tab = 'editionRoles'"
-          >Edtition Roles</span
-        >
-        <span
-          class="button"
-          :class="{ active: tab === 'otherTravellers' }"
-          @click="tab = 'otherTravellers'"
-          >Other Travellers</span
-        >
+    <ul class="tokens" v-if="tab === 'editionRoles'">
+      <li
+        v-for="role in availableRoles"
+        :class="[role.team]"
+        :key="role.id"
+        @click="setRole(role)"
+      >
+        <Token :role="role" />
       </li>
-      <ul class="tokens" v-if="tab === 'editionRoles'">
-        <li
-          v-for="role in availableRoles"
-          :class="[role.team]"
-          :key="role.id"
-          @click="setRole(role)"
-        >
-          <Token :role="role" />
-        </li>
-      </ul>
-      <ul class="tokens" v-if="tab === 'otherTravellers'">
-        <li
-          v-for="role in extraTravellers"
-          :class="[role.team]"
-          :key="role.id"
-          @click="setRole(role)"
-        >
-          <Token :role="role" />
-        </li>
-      </ul>
     </ul>
+    <ul class="tokens" v-if="tab === 'otherTravellers'">
+      <li
+        v-for="role in extraTravellers"
+        :class="[role.team]"
+        :key="role.id"
+        @click="setRole(role)"
+      >
+        <Token :role="role" />
+      </li>
+    </ul>
+    <div class="button-group" v-if="isBluffs()">
+      <span
+        class="button"
+        :class="{ townsfolk: tab === 'editionRoles' }"
+        @click="tab = 'editionRoles'"
+        >Edtition Roles</span
+      >
+      <span
+        class="button"
+        :class="{ townsfolk: tab === 'otherTravellers' }"
+        @click="tab = 'otherTravellers'"
+        >Other Travellers</span
+      >
+    </div>
   </Modal>
 </template>
 
@@ -145,14 +143,6 @@ ul.tokens li {
   }
 }
 
-.button.active {
-  background: linear-gradient(
-    to bottom,
-    $townsfolk 0%,
-    rgba(0, 0, 0, 0.7) 100%
-  );
-}
-
 #townsquare.spectator ul.tokens li.traveler {
   display: none;
 }