From 7f631d266297d248364a6057e046ff140f112baa Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 22 Aug 2020 15:11:25 +0200
Subject: [PATCH] refactor: switch from Lato font to Inter

---
 client/src/assets/css/base.css                |   2 +-
 .../components/Form/SearchFormDropdown.vue    |   6 +-
 .../Match/DetailedMatchGlobalStats.vue        |   8 +-
 .../components/Match/DetailedMatchTeam.vue    | 124 +++++++++++-------
 .../Summoner/Champions/ChampionsTable.vue     |  36 +++--
 .../Summoner/Champions/FilterQueue.vue        |   2 +-
 .../Summoner/Overview/SummonerChampions.vue   |  10 +-
 .../Summoner/Overview/SummonerMates.vue       |   2 +-
 .../Summoner/Overview/SummonerStats.vue       |  46 +++----
 .../components/Summoner/SummonerRanked.vue    |  16 +--
 client/src/layouts/Default.vue                |  12 +-
 client/src/views/SummonerChampions.vue        |   2 +-
 client/src/views/SummonerRecords.vue          |   6 +-
 client/tailwind.config.js                     |   2 +-
 14 files changed, 147 insertions(+), 127 deletions(-)

diff --git a/client/src/assets/css/base.css b/client/src/assets/css/base.css
index 4c21413..be22dbb 100644
--- a/client/src/assets/css/base.css
+++ b/client/src/assets/css/base.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
 ::-webkit-scrollbar {
   width: 8px;
diff --git a/client/src/components/Form/SearchFormDropdown.vue b/client/src/components/Form/SearchFormDropdown.vue
index 8f61fb1..5ef2a60 100644
--- a/client/src/components/Form/SearchFormDropdown.vue
+++ b/client/src/components/Form/SearchFormDropdown.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     @mousedown="clickDropdown"
-    class="absolute z-30 w-full px-3 py-2 mt-2 bg-blue-900 rounded-lg shadow"
+    class="absolute z-30 w-full px-3 py-2 mt-2 bg-blue-900 border border-blue-800 rounded-lg shadow"
   >
     <div v-if="favorites.length">
-      <div class="text-base text-blue-100">favorites:</div>
+      <div class="text-base text-blue-100">Favorites:</div>
       <div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
         <SearchFormDropdownPlayer
           v-for="player in favorites"
@@ -16,7 +16,7 @@
       </div>
     </div>
     <div :class="{'mt-2': favorites.length}">
-      <div class="text-base text-blue-100">recent searches:</div>
+      <div class="text-base text-blue-100">Recent searches:</div>
       <div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
         <template v-if="recentSearches.length">
           <SearchFormDropdownPlayer
diff --git a/client/src/components/Match/DetailedMatchGlobalStats.vue b/client/src/components/Match/DetailedMatchGlobalStats.vue
index aaa617a..59d92c0 100644
--- a/client/src/components/Match/DetailedMatchGlobalStats.vue
+++ b/client/src/components/Match/DetailedMatchGlobalStats.vue
@@ -36,26 +36,26 @@
       <div>
         <div
           :class="textColor"
-          class="text-base font-semibold"
+          class="text-sm font-medium"
         >{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div>
         <div class="text-xs text-white">k / d / a</div>
       </div>
       <div :class="allyTeam ? 'ml-3' : 'mr-3'">
         <div
           :class="textColor"
-          class="text-base font-semibold"
+          class="text-sm font-medium"
         >{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div>
         <div class="text-xs text-white">gold</div>
       </div>
       <div :class="allyTeam ? 'ml-3' : 'mr-3'">
         <div
           :class="textColor"
-          class="text-base font-semibold"
+          class="text-sm font-medium"
         >{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div>
         <div class="text-xs text-white">dmg</div>
       </div>
       <div :class="allyTeam ? 'ml-3' : 'mr-3'" class="flex flex-col justify-end">
-        <div class="text-base font-semibold text-teal-400"></div>
+        <div class="text-sm font-medium text-teal-400"></div>
         <div class="flex text-xs text-white">
           <div :class="allyTeam ? '' : 'mr-2'">
             <span :class="textColor">{{ team.towers }}</span> towers
diff --git a/client/src/components/Match/DetailedMatchTeam.vue b/client/src/components/Match/DetailedMatchTeam.vue
index 6faac77..e0d6c8a 100644
--- a/client/src/components/Match/DetailedMatchTeam.vue
+++ b/client/src/components/Match/DetailedMatchTeam.vue
@@ -26,25 +26,29 @@
             </div>
           </div>
         </th>
-        <th class="px-2 py-5 text-sm w-kda">K</th>
-        <th class="px-2 py-5 text-sm w-kda">D</th>
-        <th class="px-2 py-5 text-sm w-kda">A</th>
-        <th class="px-2 py-5 text-sm w-minions">{{ statsFormat === 'stats' ? 'cs' : 'cs/m' }}</th>
-        <th class="px-2 py-5 text-sm w-vision">{{ statsFormat === 'stats' ? 'vs' : 'vs/m' }}</th>
-        <th class="px-2 py-5 text-sm w-gold-dmg-kp">gold</th>
-        <th class="px-2 py-5 text-sm w-gold-dmg-kp">
+        <th class="px-2 py-5 text-sm font-medium w-kda">K</th>
+        <th class="px-2 py-5 text-sm font-medium w-kda">D</th>
+        <th class="px-2 py-5 text-sm font-medium w-kda">A</th>
+        <th
+          class="px-2 py-5 text-sm font-medium w-minions"
+        >{{ statsFormat === 'stats' ? 'cs' : 'cs/m' }}</th>
+        <th
+          class="px-2 py-5 text-sm font-medium w-vision"
+        >{{ statsFormat === 'stats' ? 'vs' : 'vs/m' }}</th>
+        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">gold</th>
+        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
           dmg
           <br />champ
         </th>
-        <th class="px-2 py-5 text-sm w-gold-dmg-kp">
+        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
           dmg
           <br />obj
         </th>
-        <th class="px-2 py-5 text-sm w-gold-dmg-kp">
+        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
           dmg
           <br />taken
         </th>
-        <th class="px-2 py-5 text-sm w-gold-dmg-kp">kp</th>
+        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">kp</th>
       </tr>
     </thead>
     <tbody :class="{'border-b border-blue-700': allyTeam}" class="leading-none">
@@ -157,46 +161,66 @@
             </div>
           </div>
         </td>
-        <td
-          :style="bgColor(player, '71, 132, 116', 'kills')"
-          class="p-2 text-sm text-white"
-        >{{ player.stats.kills }}</td>
-        <td
-          :style="bgColor(player, '156, 71, 109', 'deaths')"
-          class="p-2 text-sm text-white"
-        >{{ player.stats.deaths }}</td>
-        <td
-          :style="bgColor(player, '146, 100, 79', 'assists')"
-          class="p-2 text-sm text-white"
-        >{{ player.stats.assists }}</td>
-        <td
-          class="p-2 text-sm text-white"
-          :style="bgColor(player, '140, 101, 182', 'minions')"
-        >{{ player[statsFormat].minions }}</td>
-        <td
-          class="p-2 text-sm text-white"
-          :style="bgColor(player, '55, 118, 179', 'vision')"
-        >{{ player[statsFormat].vision }}</td>
-        <td
-          class="p-2 text-sm text-white"
-          :style="bgColor(player, '146, 100, 79', 'gold')"
-        >{{ roundStats(player[statsFormat].gold) }}</td>
-        <td
-          :style="bgColor(player, '156, 71, 109', 'dmgChamp')"
-          class="p-2 text-sm text-white"
-        >{{ roundStats(player[statsFormat].dmgChamp) }}</td>
-        <td
-          :style="bgColor(player, '156, 71, 109', 'dmgObj')"
-          class="p-2 text-sm text-white text-red"
-        >{{ roundStats(player[statsFormat].dmgObj) }}</td>
-        <td
-          :style="bgColor(player, '146, 145, 106', 'dmgTaken')"
-          class="p-2 text-sm text-white"
-        >{{ roundStats(player[statsFormat].dmgTaken) }}</td>
-        <td
-          :style="bgColor(player, '71, 132, 116', 'kp')"
-          class="p-2 text-sm text-white"
-        >{{ player.stats.kp }}</td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '71, 132, 116', 'kills')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ player.stats.kills }}</div>
+        </td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '156, 71, 109', 'deaths')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ player.stats.deaths }}</div>
+        </td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '146, 100, 79', 'assists')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ player.stats.assists }}</div>
+        </td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '140, 101, 182', 'minions')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ player[statsFormat].minions }}</div>
+        </td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '55, 118, 179', 'vision')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ player[statsFormat].vision }}</div>
+        </td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '146, 100, 79', 'gold')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ roundStats(player[statsFormat].gold) }}</div>
+        </td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '156, 71, 109', 'dmgChamp')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ roundStats(player[statsFormat].dmgChamp) }}</div>
+        </td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '156, 71, 109', 'dmgObj')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ roundStats(player[statsFormat].dmgObj) }}</div>
+        </td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '146, 145, 106', 'dmgTaken')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ roundStats(player[statsFormat].dmgTaken) }}</div>
+        </td>
+        <td class="relative">
+          <div
+            :style="bgColor(player, '71, 132, 116', 'kp')"
+            class="absolute inset-0 flex items-center justify-center p-2 text-sm text-white"
+          >{{ player.stats.kp }}</div>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/client/src/components/Summoner/Champions/ChampionsTable.vue b/client/src/components/Summoner/Champions/ChampionsTable.vue
index 1d32c09..27c70e0 100644
--- a/client/src/components/Summoner/Champions/ChampionsTable.vue
+++ b/client/src/components/Summoner/Champions/ChampionsTable.vue
@@ -13,7 +13,7 @@
           @click="sortBy(heading.props)"
           v-html="heading.name"
           :class="[
-            {'rounded-tr-lg': index === headings.length - 1, 'w-name': heading.name === 'name'}, 
+            {'rounded-tr-lg': index === headings.length - 1, 'w-name': heading.name === 'Name'}, 
             sortedClasses(heading.props)
           ]"
           class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700"
@@ -28,7 +28,7 @@
       >
         <td
           :class="{'rounded-bl-lg': index === championsToDisplay.length - 1}"
-          class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table border-t-table-70"
+          class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table"
         >{{ champion.index + 1 }}</td>
         <td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table">
           <div class="flex items-center">
@@ -91,7 +91,7 @@
         >{{ champion.gameLength|secToTime }}</td>
         <td
           :class="{'rounded-br-lg': index === championsToDisplay.length - 1}"
-          class="px-2 py-3 text-sm text-white"
+          class="px-2 py-3 text-xs text-white"
         >{{ champion.lastPlayed }}</td>
       </tr>
     </tbody>
@@ -152,55 +152,55 @@ export default {
     return {
       headings: [
         {
-          name: 'name',
+          name: 'Name',
           props: 'champion.name'
         },
         {
-          name: 'win rate',
+          name: 'Win <br> rate',
           props: 'winrate'
         },
         {
-          name: 'play <br> rate',
+          name: 'Play <br> rate',
           props: 'playrate'
         },
         {
-          name: 'wins',
+          name: 'Wins',
           props: 'wins'
         },
         {
-          name: 'plays',
+          name: 'Plays',
           props: 'count'
         },
         {
-          name: 'kda',
+          name: 'KDA',
           props: 'kda'
         },
         {
-          name: 'kp',
+          name: 'KP',
           props: 'kp'
         },
         {
-          name: 'minions',
+          name: 'Minions',
           props: 'minions'
         },
         {
-          name: 'gold',
+          name: 'Gold',
           props: 'gold'
         },
         {
-          name: 'dmg <br> champ',
+          name: 'Dmg <br> champ',
           props: 'dmgChamp'
         },
         {
-          name: 'dmg <br> taken',
+          name: 'Dmg <br> taken',
           props: 'dmgTaken'
         },
         {
-          name: 'game <br> length',
+          name: 'Game <br> length',
           props: 'gameLength'
         },
         {
-          name: 'last played',
+          name: 'Last <br> played',
           props: 'date'
         }
       ],
@@ -303,10 +303,6 @@ export default {
   background-color: rgba(190, 227, 248, 0.2);
 }
 
-.border-t-table-70::after {
-  width: 70%;
-}
-
 .sorted::after {
   content: "";
   position: absolute;
diff --git a/client/src/components/Summoner/Champions/FilterQueue.vue b/client/src/components/Summoner/Champions/FilterQueue.vue
index ec92011..721bf89 100644
--- a/client/src/components/Summoner/Champions/FilterQueue.vue
+++ b/client/src/components/Summoner/Champions/FilterQueue.vue
@@ -3,7 +3,7 @@
     <select
       v-model="queue"
       @change="filterQueue"
-      class="block w-full px-4 py-2 pr-8 font-semibold lowercase bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
+      class="block w-full px-4 py-2 pr-8 font-semibold capitalize bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
     >
       <option v-for="(key) in Object.keys(choices)" :key="key" :value="key">{{ choices[key].name }}</option>
     </select>
diff --git a/client/src/components/Summoner/Overview/SummonerChampions.vue b/client/src/components/Summoner/Overview/SummonerChampions.vue
index 01c8c96..364cc4f 100644
--- a/client/src/components/Summoner/Overview/SummonerChampions.vue
+++ b/client/src/components/Summoner/Overview/SummonerChampions.vue
@@ -4,7 +4,7 @@
       <svg class="w-5 h-5" style="transform: rotate(-5deg);">
         <use xlink:href="#layers" />
       </svg>
-      <span class="mx-4 text-lg font-bold uppercase">CHAMPIONS</span>
+      <span class="mx-4 text-lg font-semibold uppercase">CHAMPIONS</span>
       <svg class="w-5 h-5" style="transform: rotate(5deg);">
         <use xlink:href="#layers" />
       </svg>
@@ -31,11 +31,11 @@
       </div>
     </div>
     <div v-if="stats.champion.length">
-      <div class="flex items-baseline px-4 mt-3 text-sm font-bold text-left text-blue-300">
+      <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-left text-blue-300 uppercase">
         <div class="ml-2 text-base text-blue-400 w-champion">Champion</div>
-        <div class="w-plays">plays</div>
-        <div class="w-winrate">winrate</div>
-        <div class="w-kda">kda</div>
+        <div class="w-plays">Plays</div>
+        <div class="w-winrate">Winrate</div>
+        <div class="w-kda">KDA</div>
       </div>
       <ul class="mt-1 text-sm text-left text-gray-100">
         <li
diff --git a/client/src/components/Summoner/Overview/SummonerMates.vue b/client/src/components/Summoner/Overview/SummonerMates.vue
index f8ea403..60904f3 100644
--- a/client/src/components/Summoner/Overview/SummonerMates.vue
+++ b/client/src/components/Summoner/Overview/SummonerMates.vue
@@ -5,7 +5,7 @@
         <svg class="w-5 h-5" style="transform: rotate(-5deg);">
           <use xlink:href="#people" />
         </svg>
-        <span class="mx-4 text-lg font-bold uppercase">FRIENDS</span>
+        <span class="mx-4 text-lg font-semibold uppercase">FRIENDS</span>
         <svg class="w-5 h-5" style="transform: rotate(5deg);">
           <use xlink:href="#people" />
         </svg>
diff --git a/client/src/components/Summoner/Overview/SummonerStats.vue b/client/src/components/Summoner/Overview/SummonerStats.vue
index 06f5a9b..ee8ae61 100644
--- a/client/src/components/Summoner/Overview/SummonerStats.vue
+++ b/client/src/components/Summoner/Overview/SummonerStats.vue
@@ -4,7 +4,7 @@
       <svg class="w-6 h-6">
         <use xlink:href="#graph" />
       </svg>
-      <span class="mx-4 text-lg font-bold uppercase">STATS</span>
+      <span class="mx-4 text-lg font-semibold uppercase">STATS</span>
       <svg class="w-6 h-6" style="transform: scaleX(-1);">
         <use xlink:href="#graph" />
       </svg>
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="py-2 text-sm text-center">
-      <div class="flex items-baseline px-4 text-sm font-bold text-blue-300 uppercase">
+      <div class="flex items-baseline px-4 text-xs font-semibold text-blue-300 uppercase">
         <div class="w-1/4 text-base text-left text-blue-400">Stat</div>
         <div class="w-1/4">Total</div>
         <div class="w-1/4">Per min</div>
@@ -91,31 +91,31 @@
           :class="{'bg-blue-760': index % 2 !== 0}"
           class="flex items-center justify-between px-4 py-1 leading-tight"
         >
-          <div class="w-1/4 text-left">{{ name }}</div>
+          <div class="w-1/4 text-left capitalize">{{ name }}</div>
           <div class="w-1/4">{{ stat }}</div>
           <div class="w-1/4">{{ stat / (stats.global.time / 60)|round }}</div>
           <div class="w-1/4">{{ stat / stats.global.count|round }}</div>
         </li>
         <li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
-          <div class="w-1/4 text-left whitespace-no-wrap">time</div>
+          <div class="w-1/4 text-left whitespace-no-wrap">Time</div>
           <div class="w-1/4">{{ (stats.global.time / 3600).toFixed(1) + 'h' }}</div>
           <div class="w-1/4"></div>
           <div class="w-1/4">{{ (stats.global.time / stats.global.count)|secToTime(true) }}</div>
         </li>
         <li class="flex items-center justify-between px-4 py-1 leading-tight">
-          <div class="w-1/4 text-left whitespace-no-wrap">kda</div>
+          <div class="w-1/4 text-left whitespace-no-wrap">KDA</div>
           <div
             class="w-1/4"
           >{{ (stats.global.kills + stats.global.assists) / stats.global.deaths|round }}</div>
         </li>
         <li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
-          <div class="w-1/4 text-left whitespace-no-wrap">kill participation</div>
+          <div class="w-1/4 text-left whitespace-no-wrap">Kill participation</div>
           <div class="w-1/4">{{ stats.global.kp|percent }}</div>
         </li>
       </ul>
       <template v-if="leagueStatsByType('Ranked').length">
-        <div class="flex items-baseline px-4 mt-3 text-sm font-bold text-blue-300 uppercase">
-          <div class="w-2/4 text-base text-left text-blue-400">Ranked Stats</div>
+        <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
+          <div class="w-2/4 text-base text-left text-blue-400">Ranked</div>
           <div class="w-1/4">Winrate</div>
           <div class="w-1/4">Record</div>
         </div>
@@ -126,7 +126,7 @@
             :class="{'bg-blue-760': index % 2 !== 0}"
             class="flex items-center justify-between px-4 py-1 leading-tight"
           >
-            <div class="w-2/4 text-left">{{ league.name.toLowerCase() }}</div>
+            <div class="w-2/4 text-left capitalize">{{ league.name.toLowerCase() }}</div>
             <div
               :class="calculateWinrate(league.wins, league.count).color"
               class="w-1/4"
@@ -134,20 +134,20 @@
             <div class="w-1/4">
               <span
                 :class="winLossColor(league.wins, league.losses).win"
-                class="font-bold"
+                class="font-semibold"
               >{{ league.wins }}</span>
-              <span class="mx-1 font-bold text-gray-400">-</span>
+              <span class="mx-1 font-semibold text-gray-400">-</span>
               <span
                 :class="winLossColor(league.wins, league.losses).loss"
-                class="font-bold"
+                class="font-semibold"
               >{{ league.losses }}</span>
             </div>
           </li>
         </ul>
       </template>
       <template v-if="leagueStatsByType('Normal').length">
-        <div class="flex items-baseline px-4 mt-3 text-sm font-bold text-blue-300 uppercase">
-          <div class="w-2/4 text-base text-left text-blue-400">Normal Stats</div>
+        <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
+          <div class="w-2/4 text-base text-left text-blue-400">Normal</div>
           <div class="w-1/4">Winrate</div>
           <div class="w-1/4">Record</div>
         </div>
@@ -158,7 +158,7 @@
             :class="{'bg-blue-760': index % 2 !== 0}"
             class="flex items-center justify-between px-4 py-1 leading-tight"
           >
-            <div class="w-2/4 text-left">{{ league.name.toLowerCase() }}</div>
+            <div class="w-2/4 text-left capitalize">{{ league.name.toLowerCase() }}</div>
             <div
               :class="calculateWinrate(league.wins, league.count).color"
               class="w-1/4"
@@ -166,20 +166,20 @@
             <div class="w-1/4">
               <span
                 :class="winLossColor(league.wins, league.losses).win"
-                class="font-bold"
+                class="font-semibold"
               >{{ league.wins }}</span>
-              <span class="mx-1 font-bold text-gray-400">-</span>
+              <span class="mx-1 font-semibold text-gray-400">-</span>
               <span
                 :class="winLossColor(league.wins, league.losses).loss"
-                class="font-bold"
+                class="font-semibold"
               >{{ league.losses }}</span>
             </div>
           </li>
         </ul>
       </template>
 
-      <div class="flex items-baseline px-4 mt-3 text-sm font-bold text-blue-300 uppercase">
-        <div class="w-2/4 text-base text-left text-blue-400">Stats by Class</div>
+      <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
+        <div class="w-2/4 text-base text-left text-blue-400">Class</div>
         <div class="w-1/4">Winrate</div>
         <div class="w-1/4">Record</div>
       </div>
@@ -198,12 +198,12 @@
           <div class="w-1/4">
             <span
               :class="winLossColor(championClass.wins, championClass.losses).win"
-              class="font-bold"
+              class="font-semibold"
             >{{ championClass.wins }}</span>
-            <span class="mx-1 font-bold text-gray-400">-</span>
+            <span class="mx-1 font-semibold text-gray-400">-</span>
             <span
               :class="winLossColor(championClass.wins, championClass.losses).loss"
-              class="font-bold"
+              class="font-semibold"
             >{{ championClass.losses }}</span>
           </div>
         </li>
diff --git a/client/src/components/Summoner/SummonerRanked.vue b/client/src/components/Summoner/SummonerRanked.vue
index 066fb3d..d3e9048 100644
--- a/client/src/components/Summoner/SummonerRanked.vue
+++ b/client/src/components/Summoner/SummonerRanked.vue
@@ -15,9 +15,9 @@
           </div>
         </div>
         <div
-          class="ml-2 text-3xl font-extrabold text-teal-500 uppercase"
+          class="ml-2 text-3xl font-bold text-teal-500 uppercase"
         >{{ selectedLeague.fullRank }}</div>
-        <div class="ml-4 text-2xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
+        <div class="ml-4 text-2xl font-bold">{{ selectedLeague.leaguePoints }} LP</div>
         <div
           v-if="selectedLeague.miniSeries"
           class="flex items-center p-2 ml-2 bg-blue-800 rounded"
@@ -34,7 +34,7 @@
         <div class="relative inline-block text-white">
           <select
             v-model="selectedKey"
-            class="block w-full px-4 py-2 pr-8 text-lg font-extrabold leading-tight bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
+            class="block w-full px-4 py-2 pr-8 text-lg font-bold leading-tight bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
           >
             <option
               v-for="(data, leagueName) in ranked"
@@ -51,13 +51,13 @@
           </div>
         </div>
         <div class="flex items-center p-2 ml-2 bg-blue-800 rounded">
-          <div class="text-base font-bold uppercase">Record</div>
-          <div class="ml-2 font-bold text-green-400">{{ selectedLeague.wins }}</div>
+          <div class="text-base font-semibold uppercase">Record</div>
+          <div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}</div>
           <span class="mx-1">-</span>
-          <div class="font-bold text-red-400">{{ selectedLeague.losses }}</div>
-          <div class="ml-3 text-base font-bold uppercase">Winrate</div>
+          <div class="font-semibold text-red-400">{{ selectedLeague.losses }}</div>
+          <div class="ml-3 text-base font-semibold uppercase">Winrate</div>
           <div
-            :class="['ml-2 text-base leading-tight font-bold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
+            :class="['ml-2 text-base leading-tight font-semibold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
           >{{ selectedLeague.winrate }}</div>
         </div>
       </div>
diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue
index eee4509..663e15f 100644
--- a/client/src/layouts/Default.vue
+++ b/client/src/layouts/Default.vue
@@ -35,8 +35,8 @@
                 />
               </svg>
               <span class="ml-8">
-                Join us
-                <span class="font-bold">on Discord</span>
+                Join
+                <span class="font-bold">our Discord</span>
               </span>
             </a>
           </div>
@@ -126,25 +126,25 @@
                 :class="isRouteActive('summoner')"
                 class="pb-2 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
                 exact
-              >overview</router-link>
+              >Overview</router-link>
               <router-link
                 :to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}"
                 :class="isRouteActive('summonerChampions')"
                 class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
                 exact
-              >champions</router-link>
+              >Champions</router-link>
               <router-link
                 :to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}"
                 :class="isRouteActive('summonerRecords')"
                 class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
                 exact
-              >records</router-link>
+              >Records</router-link>
               <router-link
                 :to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
                 :class="isRouteActive('summonerLive')"
                 class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
                 exact
-              >live game</router-link>
+              >Live game</router-link>
             </div>
 
             <!-- Select Season -->
diff --git a/client/src/views/SummonerChampions.vue b/client/src/views/SummonerChampions.vue
index a3c983a..73d5416 100644
--- a/client/src/views/SummonerChampions.vue
+++ b/client/src/views/SummonerChampions.vue
@@ -43,7 +43,7 @@ export default {
             [key]: gameModes[key]
           }
         }, {})
-      return { '-1': { type: 'Normal', name: 'ALL QUEUES' }, ...queues }
+      return { '-1': { type: 'Normal', name: 'All queues' }, ...queues }
     },
     ...mapGetters('summoner', ['summonerFound']),
     ...mapState({
diff --git a/client/src/views/SummonerRecords.vue b/client/src/views/SummonerRecords.vue
index fd25390..cbb5ac0 100644
--- a/client/src/views/SummonerRecords.vue
+++ b/client/src/views/SummonerRecords.vue
@@ -1,7 +1,7 @@
 <template>
   <div key="records">
     <template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
-      <div class="mx-4 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">basics</div>
+      <div class="mx-4 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Basics</div>
       <div class="flex flex-wrap -mx-2">
         <template v-if="recordsLoaded">
           <RecordCard
@@ -66,7 +66,7 @@
           </div>
         </template>
       </div>
-      <div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">game impact</div>
+      <div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Game impact</div>
       <div class="flex flex-wrap -mx-2">
         <template v-if="recordsLoaded">
           <RecordCard
@@ -113,7 +113,7 @@
           </div>
         </template>
       </div>
-      <div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">team work</div>
+      <div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Team work</div>
       <div class="flex flex-wrap -mx-2">
         <template v-if="recordsLoaded">
           <RecordCard
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index f7e69bb..57fcb0a 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -233,7 +233,7 @@ module.exports = {
     },
     fontFamily: {
       sans: [
-        'Lato',
+        'Inter',
         '-apple-system',
         'BlinkMacSystemFont',
         '"Segoe UI"',