From a4e3697f24ec439da690090342c39e63eb589252 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 4 Nov 2019 17:47:05 +0100
Subject: [PATCH] refactor: display allyTeam in blue and enemyTeam in red

---
 client/src/components/Match/DetailedMatch.vue | 23 +++++--------------
 .../components/Match/DetailedMatchTeam.vue    | 11 +++++----
 client/tailwind.config.js                     |  1 +
 3 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Match/DetailedMatch.vue b/client/src/components/Match/DetailedMatch.vue
index e241f46..08a93a2 100644
--- a/client/src/components/Match/DetailedMatch.vue
+++ b/client/src/components/Match/DetailedMatch.vue
@@ -9,16 +9,15 @@
             <div
               v-for="ban in allyTeam.bans"
               :key="'ban-' + ban.pickTurn"
-              :class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}, banColorChampion(allyTeam.color)]"
-              class="relative ban inline-block border-2 rounded-full"
+              :class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}]"
+              class="relative ban ban-blue inline-block border-2 border-teal-500 rounded-full"
             >
               <div
                 :style="[ban.champion.id ? {backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ban.champion.id}.png')`} : '']"
                 class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
               ></div>
               <div
-                :class="banColorPickOrder(allyTeam.color)"
-                class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
+                class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs text-teal-100 bg-teal-500 font-bold rounded-full"
               >{{ ban.pickTurn }}</div>
             </div>
           </div>
@@ -27,16 +26,15 @@
             <div
               v-for="ban in enemyTeam.bans"
               :key="'ban-' + ban.pickTurn"
-              :class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}, banColorChampion(enemyTeam.color)]"
-              class="relative ban inline-block border-2 rounded-full"
+              :class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}]"
+              class="relative ban ban-red inline-block border-2 border-red-500 rounded-full"
             >
               <div
                 :style="[ban.champion.id ? {backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${ban.champion.id}.png')`} : '']"
                 class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
               ></div>
               <div
-                :class="banColorPickOrder(enemyTeam.color)"
-                class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
+                class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs text-red-100 bg-red-500 font-bold rounded-full"
               >{{ ban.pickTurn }}</div>
             </div>
           </div>
@@ -77,15 +75,6 @@ export default {
       return this.data.blueTeam.players.some(p => p.name.toLowerCase() === this.$route.params.name.toLowerCase()) ? this.data.redTeam : this.data.blueTeam
     },
     ...mapGetters('ddragon', ['version']),
-  },
-
-  methods: {
-    banColorChampion(colorTeam) {
-      return colorTeam === 'Blue' ? 'ban-blue border-teal-500' : 'ban-red border-red-500'
-    },
-    banColorPickOrder(colorTeam) {
-      return colorTeam === 'Blue' ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500'
-    }
   }
 }
 </script>
diff --git a/client/src/components/Match/DetailedMatchTeam.vue b/client/src/components/Match/DetailedMatchTeam.vue
index e8613d5..9c1dc3c 100644
--- a/client/src/components/Match/DetailedMatchTeam.vue
+++ b/client/src/components/Match/DetailedMatchTeam.vue
@@ -5,9 +5,9 @@
         <th class="py-5 border-r border-blue-700">
           <div class="flex justify-between">
             <span
-              :class="data.color === 'Blue' ? 'text-teal-400' : 'text-red-400'"
+              :class="allyTeam ? 'text-teal-400' : 'text-red-400'"
               class="pl-2"
-            >{{ data.color }} Team</span>
+            >{{ allyTeam ? 'Ally' : 'Enemy' }} Team</span>
             <span>{{ `${data.teamStats.kills}/${data.teamStats.deaths}/${data.teamStats.assists}` }}</span>
             <div class="flex pr-2">
               <svg class="w-4 h-4 items-center">
@@ -55,9 +55,10 @@
                 class="ml-3 relative w-8 h-8 bg-cover bg-center bg-blue-1000 rounded-full"
               >
                 <div
-                  class="absolute level-position bottom-0 w-5 h-5 bg-blue-900 rounded-full text-teal-100 text-xs"
+                  :class="allyTeam ? 'bg-teal-500 text-teal-100' : 'bg-red-500 text-red-100'"
+                  class="absolute level-position bottom-0 flex items-center justify-center w-4 h-4 rounded-full text-xxs"
                 >
-                  <span class="leading-relaxed">{{ player.level }}</span>
+                  <span>{{ player.level }}</span>
                 </div>
               </div>
               <div class="ml-1 flex flex-col justify-around">
@@ -253,6 +254,6 @@ export default {
 }
 
 .level-position {
-  left: -10px;
+  left: -5px;
 }
 </style>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index bd82830..1b7cecc 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -258,6 +258,7 @@ module.exports = {
       ],
     },
     fontSize: {
+      xxs: '0.625rem',
       xs: '0.75rem',
       sm: '0.875rem',
       base: '1rem',