some more icons fixed

renamed "role" to "character"

src/components/Player.vue

@@ -135,6 +135,7 @@ export default {
 .circle .player {
   margin-bottom: 10px;
   padding-top: $token + 6px;
+  padding-bottom: 5px;
 
   .shroud {
     top: 0;
@@ -273,13 +274,19 @@ export default {
   span.screenshot,
   span.remove {
     display: none;
-    margin: 0 5px;
-    flex-shrink: 0;
-    flex-grow: 0;
+    position: absolute;
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
     #app.screenshot & {
       display: none;
     }
   }
+  span.screenshot {
+    right: 100%;
+  }
+  span.remove {
+    left: 100%;
+  }
+
   span.name {
     flex-shrink: 1;
     text-overflow: ellipsis;

src/components/RoleSelectionModal.vue

@@ -5,7 +5,7 @@
     @close="close()"
     v-if="nontravelerPlayers >= 5"
   >
-    <h3>Select the roles for {{ nontravelerPlayers }} players:</h3>
+    <h3>Select the characters for {{ nontravelerPlayers }} players:</h3>
     <ul
       class="tokens"
       v-for="(teamRoles, team) in roleSelection"
@@ -25,8 +25,8 @@
       </li>
     </ul>
     <div class="warning" v-if="hasSelectedSetupRoles">
-      Warning: there are roles selected that modify the game setup! The
-      randomizer does not account for these roles.
+      Warning: there are characters selected that modify the game setup! The
+      randomizer does not account for these characters.
     </div>
     <div class="button-group">
       <div
@@ -36,10 +36,12 @@
           disabled: selectedRoles > nontravelerPlayers || !selectedRoles
         }"
       >
-        Assign {{ selectedRoles }} roles randomly
+        <font-awesome-icon icon="people-arrows" />
+        Assign {{ selectedRoles }} characters randomly
       </div>
       <div class="button" @click="selectRandomRoles">
-        Randomize roles
+        <font-awesome-icon icon="random" />
+        Shuffle roles
       </div>
     </div>
   </Modal>

src/components/TownSquare.vue

@@ -61,7 +61,7 @@
       </ul>
     </Modal>
     <Modal v-show="availableRoles.length && selectedPlayer" @close="closeModal">
-      <h3>Choose a new role:</h3>
+      <h3>Choose a new character:</h3>
       <ul class="tokens">
         <li
           v-for="role in availableRoles"

src/main.js

@@ -15,7 +15,9 @@ import {
   faUsers,
   faVoteYea,
   faCheckSquare,
-  faSquare
+  faSquare,
+  faRandom,
+  faPeopleArrows
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
@@ -33,7 +35,9 @@ library.add(
   faUsers,
   faVoteYea,
   faCheckSquare,
-  faSquare
+  faSquare,
+  faRandom,
+  faPeopleArrows
 );
 
 Vue.component("font-awesome-icon", FontAwesomeIcon);