From 4d2225c994935c1bdfbb41b403e6d4d5803281e9 Mon Sep 17 00:00:00 2001
From: Dave <d.garnar@uk.cdw.com>
Date: Wed, 3 Mar 2021 22:23:22 +0000
Subject: [PATCH] tweaking styles and adding pronouns icon to name bar if the
 player has pronouns set, made the name bar slighlty wider to allow for the
 same number of charachtersfor this and moved the player menu slightly to
 account for it.

---
 src/components/Player.vue     | 22 +++++++++++++++++-----
 src/components/TownSquare.vue | 27 ++++++++++++++++++---------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index e4b3242..2f86725 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -102,6 +102,10 @@
         @click="isMenuOpen = !isMenuOpen"
         :class="{ active: isMenuOpen }"
       >
+        <font-awesome-icon
+          icon="venus-mars"
+          v-if="player.pronouns && player.pronouns !== ''"
+        />
         <span>{{ player.name }}</span>
         <div class="pronouns" v-if="player.pronouns && player.pronouns !== ''">
           <span>{{ player.pronouns }}</span>
@@ -652,13 +656,14 @@ li.move:not(.from) .player .overlay svg.move {
 
 /***** Player name *****/
 .player > .name {
-  display: inline-flex;
+  right: 10%;
+  display: flex;
   justify-content: center;
   font-size: 120%;
   line-height: 120%;
   cursor: pointer;
   white-space: nowrap;
-  width: 100%;
+  width: 120%;
   background: rgba(0, 0, 0, 0.5);
   border: 3px solid black;
   border-radius: 10px;
@@ -666,6 +671,11 @@ li.move:not(.from) .player .overlay svg.move {
   box-shadow: 0 0 5px black;
   padding: 0 4px;
 
+  svg {
+    top: 3px;
+    margin-right: 10px;
+  }
+
   span {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -683,9 +693,9 @@ li.move:not(.from) .player .overlay svg.move {
   }
 
   .pronouns {
-    display: inline-flex;
+    display: flex;
     position: absolute;
-    right: 120%;
+    right: 110%;
     max-width: 250px;
     z-index: 25;
     background: rgba(0, 0, 0, 0.5);
@@ -696,6 +706,8 @@ li.move:not(.from) .player .overlay svg.move {
     pointer-events: none;
     opacity: 0;
     transition: opacity 200ms ease-in-out;
+    padding: 0 4px;
+    bottom: -3px;
 
     &:before {
       content: " ";
@@ -717,7 +729,7 @@ li.move:not(.from) .player .overlay svg.move {
 /***** Player menu *****/
 .player > .menu {
   position: absolute;
-  left: 100%;
+  left: 110%;
   bottom: -5px;
   text-align: left;
   white-space: nowrap;
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index aea812e..80a838b 100644
--- a/src/components/TownSquare.vue
+++ b/src/components/TownSquare.vue
@@ -264,7 +264,7 @@ export default {
         // open menu on the left
         .player > .menu {
           left: auto;
-          right: 100%;
+          right: 110%;
           margin-right: 15px;
           &:before {
             border-left-color: black;
@@ -293,14 +293,23 @@ export default {
           }
         }
 
-        .pronouns {
-          left: 120%;
-          right: auto;
-          &:before {
-            border-left-color: transparent;
-            border-right-color: black;
-            left: auto;
-            right: 100%;
+        .name {
+          flex-direction: row-reverse;
+
+          svg {
+            margin-left: 10px;
+            margin-right: 2px;
+          }
+
+          .pronouns {
+            left: 110%;
+            right: auto;
+            &:before {
+              border-left-color: transparent;
+              border-right-color: black;
+              left: auto;
+              right: 100%;
+            }
           }
         }
       } @else {