From 58c27324f85c52e926191caa32d65b54f56f4bb3 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Thu, 11 Jun 2020 20:55:39 +0200
Subject: [PATCH] refactor: reorder tailwind css classes with headwind
 extension

---
 client/src/App.vue                            |  8 +-
 client/src/assets/css/transition.css          |  4 +-
 client/src/components/Common/DotsLoader.vue   |  8 +-
 .../components/Common/LazyBackgroundImage.vue | 10 +--
 client/src/components/Common/Ripple.vue       |  2 +-
 client/src/components/Common/Tooltip.vue      |  2 +-
 client/src/components/Form/LoadingButton.vue  |  2 +-
 client/src/components/Form/SearchForm.vue     | 21 ++---
 .../components/Form/SearchFormDropdown.vue    | 10 +--
 .../Form/SearchFormDropdownPlayer.vue         | 10 +--
 client/src/components/Form/SwitchToggle.vue   | 12 +--
 .../Global/NotificationsContainer.vue         |  4 +-
 .../components/Global/PopupNotification.vue   |  6 +-
 client/src/components/Match/DetailedMatch.vue |  4 +-
 .../Match/DetailedMatchGlobalStats.vue        | 20 ++---
 .../components/Match/DetailedMatchTeam.vue    | 90 +++++++++----------
 client/src/components/Match/LiveMatch.vue     | 14 +--
 client/src/components/Match/Match.vue         | 66 +++++++-------
 client/src/components/Match/MatchItems.vue    | 10 +--
 .../Summoner/Champions/ChampionsSearch.vue    |  4 +-
 .../Summoner/Champions/ChampionsTable.vue     | 38 ++++----
 .../Summoner/Champions/FilterQueue.vue        |  6 +-
 .../src/components/Summoner/FilterSeason.vue  | 13 ++-
 .../src/components/Summoner/HeaderLoader.vue  |  4 +-
 .../src/components/Summoner/Live/LiveTeam.vue | 46 +++++-----
 .../Summoner/Overview/OverviewLoader.vue      | 12 +--
 .../Summoner/Overview/SummonerChampions.vue   | 32 +++----
 .../Summoner/Overview/SummonerMates.vue       | 12 +--
 .../Summoner/Overview/SummonerStats.vue       | 58 ++++++------
 .../components/Summoner/RecentActivity.vue    | 34 +++----
 .../Summoner/Records/RecordCard.vue           |  6 +-
 .../components/Summoner/SummonerRanked.vue    | 30 +++----
 client/src/views/Home.vue                     | 10 +--
 client/src/views/SummonerLive.vue             | 10 +--
 client/src/views/SummonerRecords.vue          | 22 +++--
 35 files changed, 323 insertions(+), 317 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 3ab911e..8a5ae2b 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="font-sans bg-blue-900 antialiased min-h-screen">
+  <div id="app" class="min-h-screen font-sans antialiased bg-blue-900">
     <SVGContainer />
     <NotificationsContainer />
     <component :is="layout">
@@ -31,9 +31,9 @@ export default {
 
   created() {
     this.updatePercent()
-    this.updateSettings({name: 'region'})
-    this.updateSettings({name: 'recentSearches', isJson: true})
-    this.updateSettings({name: 'favorites', isJson: true})
+    this.updateSettings({ name: 'region' })
+    this.updateSettings({ name: 'recentSearches', isJson: true })
+    this.updateSettings({ name: 'favorites', isJson: true })
   },
 
   methods: {
diff --git a/client/src/assets/css/transition.css b/client/src/assets/css/transition.css
index 917d8c7..56a1975 100644
--- a/client/src/assets/css/transition.css
+++ b/client/src/assets/css/transition.css
@@ -80,12 +80,12 @@
 
 .scale-fade-enter,
 .scale-fade-leave-to {
-  @apply opacity-0 scale-90;
+  @apply scale-90 opacity-0;
 }
 
 .scale-fade-enter-to,
 .scale-fade-leave {
-  @apply opacity-100 scale-100;
+  @apply scale-100 opacity-100;
 }
 
 /* Grow transition (ripples) */
diff --git a/client/src/components/Common/DotsLoader.vue b/client/src/components/Common/DotsLoader.vue
index dfa1fb9..c1a80d6 100644
--- a/client/src/components/Common/DotsLoader.vue
+++ b/client/src/components/Common/DotsLoader.vue
@@ -1,8 +1,8 @@
 <template>
-  <div :style="{width: width}" class="spinner text-center">
-    <div :style="dotStyle" class="bounce1 inline-block rounded-full"></div>
-    <div :style="dotStyle" class="bounce2 inline-block rounded-full"></div>
-    <div :style="dotStyle" class="bounce3 inline-block rounded-full"></div>
+  <div :style="{width: width}" class="text-center spinner">
+    <div :style="dotStyle" class="inline-block rounded-full bounce1"></div>
+    <div :style="dotStyle" class="inline-block rounded-full bounce2"></div>
+    <div :style="dotStyle" class="inline-block rounded-full bounce3"></div>
   </div>
 </template>
 
diff --git a/client/src/components/Common/LazyBackgroundImage.vue b/client/src/components/Common/LazyBackgroundImage.vue
index 4b47c91..4b2212b 100644
--- a/client/src/components/Common/LazyBackgroundImage.vue
+++ b/client/src/components/Common/LazyBackgroundImage.vue
@@ -38,7 +38,7 @@ export default {
     }
   },
 
-  data () {
+  data() {
     return {
       imageState: 'loading',
       asyncImage: new Image()
@@ -46,7 +46,7 @@ export default {
   },
 
   computed: {
-    computedStyle () {
+    computedStyle() {
       if (this.imageState === 'loaded') {
         return `background-image: ${this.moreBackgrounds} url(${this.asyncImage.src}); background-size: ${this.backgroundSize}`
       }
@@ -54,19 +54,19 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
       this.fetchImage()
     })
   },
 
   methods: {
-    fetchImage () {
+    fetchImage() {
       this.asyncImage.onload = this.imageOnLoad
       this.imageState = 'loading'
       this.asyncImage.src = this.imageSource
     },
-    imageOnLoad () {
+    imageOnLoad() {
       this.imageState = 'loaded'
     }
   }
diff --git a/client/src/components/Common/Ripple.vue b/client/src/components/Common/Ripple.vue
index 9b80f0a..8cbb00e 100644
--- a/client/src/components/Common/Ripple.vue
+++ b/client/src/components/Common/Ripple.vue
@@ -8,7 +8,7 @@
       <div
         v-for="ripple in ripples"
         :key="ripple.id"
-        class="absolute w-full h-full opacity-0 rounded-full pointer-events-none"
+        class="absolute w-full h-full rounded-full opacity-0 pointer-events-none"
         :style="{
           top: ripple.top,
           left: ripple.left,
diff --git a/client/src/components/Common/Tooltip.vue b/client/src/components/Common/Tooltip.vue
index b7be143..7f865f4 100644
--- a/client/src/components/Common/Tooltip.vue
+++ b/client/src/components/Common/Tooltip.vue
@@ -16,7 +16,7 @@
     <div
       v-show="isOpen"
       ref="content"
-      class="fixed z-40 bg-blue-1000 py-2 rounded-md shadow"
+      class="fixed z-40 py-2 rounded-md shadow bg-blue-1000"
       :style="{ ...position }"
     >
       <slot></slot>
diff --git a/client/src/components/Form/LoadingButton.vue b/client/src/components/Form/LoadingButton.vue
index 5a1e473..108803b 100644
--- a/client/src/components/Form/LoadingButton.vue
+++ b/client/src/components/Form/LoadingButton.vue
@@ -38,7 +38,7 @@ export default {
       default: false
     }
   },
-  
+
   methods: {
     btnClicked() {
       this.$emit('clicked')
diff --git a/client/src/components/Form/SearchForm.vue b/client/src/components/Form/SearchForm.vue
index fafe4bb..3cad23f 100644
--- a/client/src/components/Form/SearchForm.vue
+++ b/client/src/components/Form/SearchForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="formSubmit" :class="formClasses" class="flex text-teal-100 text-lg w-full">
+  <form @submit.prevent="formSubmit" :class="formClasses" class="flex w-full text-lg text-teal-100">
     <div class="relative w-full">
       <button
         ref="submit"
@@ -7,7 +7,7 @@
         class="absolute z-30 h-full hover:text-teal-200"
         type="submit"
       >
-        <svg class="absolute vertical-center horizontal-center w-4 h-4">
+        <svg class="absolute w-4 h-4 vertical-center horizontal-center">
           <use xlink:href="#search" />
         </svg>
       </button>
@@ -15,9 +15,10 @@
         ref="input"
         v-model="summoner"
         @focus="selected = true"
-        type="text"
         :class="[inputClasses]"
-        class="summoner-input w-full outline-none font-bold"
+        class="w-full font-bold outline-none summoner-input"
+        spellcheck="false"
+        type="text"
       />
       <transition name="scale-fade">
         <SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
@@ -26,15 +27,15 @@
       <div ref="region-dropdown">
         <div
           :class="{'mr-12': size === 'xl'}"
-          class="absolute right-0 z-30 vertical-center flex items-center h-full"
+          class="absolute right-0 z-30 flex items-center h-full vertical-center"
         >
           <div
             @click="dropdown = !dropdown"
             :class="[selectRegionClasses]"
-            class="border-2 border-transparent cursor-pointer flex items-center rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
+            class="flex items-center transition-all border-2 border-transparent rounded cursor-pointer transition-fast ease-in-quad ease-out-quad hover:text-white"
           >
-            <span class="selected font-bold uppercase select-none">{{ selectedRegion }}</span>
-            <svg class="ml-1 -mr-1 w-4 h-4">
+            <span class="font-bold uppercase select-none selected">{{ selectedRegion }}</span>
+            <svg class="w-4 h-4 ml-1 -mr-1">
               <use xlink:href="#caret-down" />
             </svg>
           </div>
@@ -50,11 +51,11 @@
               :key="region"
               @click="updateSettings({name: 'region', value: region.toLowerCase()})"
               :class="classRegions(index)"
-              class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 select-none hover:bg-blue-800"
+              class="relative py-1 pl-5 pr-2 text-xs text-right select-none bg-blue-1000 hover:bg-blue-800"
             >
               <svg
                 v-if="region.toLowerCase() === selectedRegion"
-                class="absolute vertical-center offsetIcon w-3 h-3 fill-current"
+                class="absolute w-3 h-3 fill-current vertical-center offsetIcon"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 512 512"
               >
diff --git a/client/src/components/Form/SearchFormDropdown.vue b/client/src/components/Form/SearchFormDropdown.vue
index f271fd5..8f61fb1 100644
--- a/client/src/components/Form/SearchFormDropdown.vue
+++ b/client/src/components/Form/SearchFormDropdown.vue
@@ -1,11 +1,11 @@
 <template>
   <div
     @mousedown="clickDropdown"
-    class="mt-2 absolute z-30 w-full px-3 py-2 bg-blue-900 rounded-lg shadow"
+    class="absolute z-30 w-full px-3 py-2 mt-2 bg-blue-900 rounded-lg shadow"
   >
     <div v-if="favorites.length">
       <div class="text-base text-blue-100">favorites:</div>
-      <div class="-mx-1 flex items-center flex-wrap text-xs leading-none">
+      <div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
         <SearchFormDropdownPlayer
           v-for="player in favorites"
           :key="player.name"
@@ -17,7 +17,7 @@
     </div>
     <div :class="{'mt-2': favorites.length}">
       <div class="text-base text-blue-100">recent searches:</div>
-      <div class="-mx-1 flex items-center flex-wrap text-xs leading-none">
+      <div class="flex flex-wrap items-center -mx-1 text-xs leading-none">
         <template v-if="recentSearches.length">
           <SearchFormDropdownPlayer
             v-for="player in recentSearches"
@@ -27,10 +27,10 @@
           />
         </template>
         <template v-else>
-          <svg class="ml-4 mt-1 w-4 h-4 text-blue-200">
+          <svg class="w-4 h-4 mt-1 ml-4 text-blue-200">
             <use xlink:href="#info" />
           </svg>
-          <div class="ml-1 mt-1 text-sm text-blue-200">Example :</div>
+          <div class="mt-1 ml-1 text-sm text-blue-200">Example :</div>
           <SearchFormDropdownPlayer
             :player="{name: 'Alderiate', icon: 1150, region: 'euw'}"
             :favorite="false"
diff --git a/client/src/components/Form/SearchFormDropdownPlayer.vue b/client/src/components/Form/SearchFormDropdownPlayer.vue
index 5b1f3d1..a2d6cf5 100644
--- a/client/src/components/Form/SearchFormDropdownPlayer.vue
+++ b/client/src/components/Form/SearchFormDropdownPlayer.vue
@@ -2,14 +2,14 @@
   <router-link
     :to="{ name: 'summoner', params: { region: player.region, name: player.name }}"
     :title="player.name"
-    class="mt-1 ml-1 flex items-center bg-blue-1000 p-1 text-blue-200 hover:bg-blue-800 cursor-pointer select-none"
+    class="flex items-center p-1 mt-1 ml-1 text-blue-200 cursor-pointer select-none bg-blue-1000 hover:bg-blue-800"
   >
-    <div class="bg-blue-800 p-1 text-xxs text-white font-bold uppercase rounded">{{ player.region }}</div>
+    <div class="p-1 font-bold text-white uppercase bg-blue-800 rounded text-xxs">{{ player.region }}</div>
     <div
       :style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${player.icon}.jpg')`}"
-      class="ml-1 w-5 h-5 bg-center bg-cover rounded"
+      class="w-5 h-5 ml-1 bg-center bg-cover rounded"
     ></div>
-    <div class="ml-1 max-w-12 truncate">{{ player.name }}</div>
+    <div class="ml-1 truncate max-w-12">{{ player.name }}</div>
     <svg
       @click.prevent="favoriteClick"
       :class="favorite ? 'text-yellow-400' : 'hover:text-yellow-400 cursor-pointer'"
@@ -17,7 +17,7 @@
     >
       <use xlink:href="#star" />
     </svg>
-    <svg @click.prevent="closeClick" class="ml-2 w-3p5 h-3p5 hover:text-white cursor-pointer">
+    <svg @click.prevent="closeClick" class="ml-2 cursor-pointer w-3p5 h-3p5 hover:text-white">
       <use xlink:href="#times" />
     </svg>
   </router-link>
diff --git a/client/src/components/Form/SwitchToggle.vue b/client/src/components/Form/SwitchToggle.vue
index 1389992..6c79f13 100644
--- a/client/src/components/Form/SwitchToggle.vue
+++ b/client/src/components/Form/SwitchToggle.vue
@@ -1,32 +1,32 @@
 <template>
-  <div class="switch relative z-10 text-teal-400 text-sm select-none leading-tight">
+  <div class="relative z-10 text-sm leading-tight text-teal-400 select-none switch">
     <input
       v-model="selected"
       id="toggle-on"
-      class="toggle toggle-left hidden"
+      class="hidden toggle toggle-left"
       :value="true"
       type="radio"
     />
     <label
       :class="{'selected-label': selected}"
       for="toggle-on"
-      class="inline-block py-1 rounded-l-full border-t-2 border-r border-b-2 border-l-2 border-teal-500 cursor-pointer"
+      class="inline-block py-1 border-t-2 border-b-2 border-l-2 border-r border-teal-500 rounded-l-full cursor-pointer"
     >{{ leftLabel }}</label>
     <input
       v-model="selected"
       id="toggle-off"
-      class="toggle toggle-right hidden"
+      class="hidden toggle toggle-right"
       :value="false"
       type="radio"
     />
     <label
       :class="{'selected-label': !selected}"
       for="toggle-off"
-      class="inline-block py-1 rounded-r-full border-t-2 border-r-2 border-b-2 border-l border-teal-500 cursor-pointer"
+      class="inline-block py-1 border-t-2 border-b-2 border-l border-r-2 border-teal-500 rounded-r-full cursor-pointer"
     >{{ rightLabel }}</label>
     <div
       :class="selected ? 'left-checked' : 'right-checked'"
-      class="selector absolute w-1/2 inset-0 bg-teal-500"
+      class="absolute inset-0 w-1/2 bg-teal-500 selector"
     ></div>
   </div>
 </template>
diff --git a/client/src/components/Global/NotificationsContainer.vue b/client/src/components/Global/NotificationsContainer.vue
index 6b78d73..baf8766 100644
--- a/client/src/components/Global/NotificationsContainer.vue
+++ b/client/src/components/Global/NotificationsContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pr-2 pb-2 fixed bottom-0 right-0 z-50">
+  <div class="fixed bottom-0 right-0 z-50 pb-2 pr-2">
     <PopupNotification
       v-for="notification in notifications"
       :key="notification.id"
@@ -10,7 +10,7 @@
 
 <script>
 import PopupNotification from '@/components/Global/PopupNotification.vue'
-import { mapState } from 'vuex' 
+import { mapState } from 'vuex'
 
 export default {
   components: {
diff --git a/client/src/components/Global/PopupNotification.vue b/client/src/components/Global/PopupNotification.vue
index a460ae7..b490a02 100644
--- a/client/src/components/Global/PopupNotification.vue
+++ b/client/src/components/Global/PopupNotification.vue
@@ -5,14 +5,14 @@
         'bg-red-500': notification.type === 'error',
         'bg-green-500': notification.type === 'success'
       }"
-      class="mt-2 relative rounded-lg shadow-md p-6 pr-10 text-white"
+      class="relative p-6 pr-10 mt-2 text-white rounded-lg shadow-md"
       style="min-width: 240px"
     >
       <button
         @click="deleteNotification"
-        class="cursor-pointer block absolute top-0 right-0 border border-transparent rounded-full py-1 px-1 my-1 mx-1 focus:outline-none hover:border-white"
+        class="absolute top-0 right-0 block px-1 py-1 mx-1 my-1 border border-transparent rounded-full cursor-pointer focus:outline-none hover:border-white"
       >
-        <svg class="fill-current w-3 h-3" viewBox="0 0 20 20">
+        <svg class="w-3 h-3 fill-current" viewBox="0 0 20 20">
           <path
             d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
           />
diff --git a/client/src/components/Match/DetailedMatch.vue b/client/src/components/Match/DetailedMatch.vue
index c690f80..e10c8a9 100644
--- a/client/src/components/Match/DetailedMatch.vue
+++ b/client/src/components/Match/DetailedMatch.vue
@@ -7,7 +7,7 @@
         :ally-team="true"
       />
 
-      <div class="px-3 py-2 flex justify-between items-start">
+      <div class="flex items-start justify-between px-3 py-2">
         <DetailedMatchGlobalStats :team="allyTeam" :ally-team="true" />
         <SwitchToggle
           @updateValue="updatePercent"
@@ -26,7 +26,7 @@
       />
     </div>
     <div v-else-if="data.status === 'loading' && detailsOpen">
-      <p class="bg-blue-800 py-5 text-blue-100 text-lg font-semibold">Loading...</p>
+      <p class="py-5 text-lg font-semibold text-blue-100 bg-blue-800">Loading...</p>
     </div>
   </transition>
 </template>
diff --git a/client/src/components/Match/DetailedMatchGlobalStats.vue b/client/src/components/Match/DetailedMatchGlobalStats.vue
index 119b6a5..aaa617a 100644
--- a/client/src/components/Match/DetailedMatchGlobalStats.vue
+++ b/client/src/components/Match/DetailedMatchGlobalStats.vue
@@ -10,20 +10,20 @@
         <template v-slot:trigger>
           <div
             :class="[allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
-            class="relative ban border-2 rounded-full cursor-pointer"
+            class="relative border-2 rounded-full cursor-pointer ban"
           >
             <div
               :style="[ban.champion.id ? {backgroundImage: `url('${ban.champion.icon}')`} : '']"
-              class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
+              class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000"
             ></div>
             <div
               :class="[textLightColor, bgColor]"
-              class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
+              class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order"
             >{{ ban.pickTurn }}</div>
           </div>
         </template>
         <template v-slot:default>
-          <div class="px-2 text-white text-center text-xs leading-tight select-none">
+          <div class="px-2 text-xs leading-tight text-center text-white select-none">
             <div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div>
           </div>
         </template>
@@ -31,32 +31,32 @@
     </div>
     <div
       :class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
-      class="mt-2 flex leading-tight"
+      class="flex mt-2 leading-tight"
     >
       <div>
         <div
           :class="textColor"
           class="text-base font-semibold"
         >{{ `${team.teamStats.kills}/${team.teamStats.deaths}/${team.teamStats.assists}` }}</div>
-        <div class="text-white text-xs">k / d / a</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"
         >{{ +(team.teamStats.gold / 1000).toFixed(1) + 'k' }}</div>
-        <div class="text-white text-xs">gold</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"
         >{{ +(team.teamStats.dmgChamp / 1000).toFixed(1) + 'k' }}</div>
-        <div class="text-white text-xs">dmg</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 text-teal-400 font-semibold"></div>
-        <div class="flex text-white text-xs">
+        <div class="text-base font-semibold text-teal-400"></div>
+        <div class="flex text-xs text-white">
           <div :class="allyTeam ? '' : 'mr-2'">
             <span :class="textColor">{{ team.towers }}</span> towers
           </div>
diff --git a/client/src/components/Match/DetailedMatchTeam.vue b/client/src/components/Match/DetailedMatchTeam.vue
index 2ada4d6..6faac77 100644
--- a/client/src/components/Match/DetailedMatchTeam.vue
+++ b/client/src/components/Match/DetailedMatchTeam.vue
@@ -3,12 +3,12 @@
     :class="[{'rounded-b-lg overflow-hidden': !allyTeam}, data.result]"
     class="w-full table-fixed"
   >
-    <thead class="heading-detailed leading-none">
+    <thead class="leading-none heading-detailed">
       <tr
         :style="getHeadingColor(data.result)"
-        class="relative heading-row text-blue-200 font-semibold"
+        class="relative font-semibold text-blue-200 heading-row"
       >
-        <th class="w-players py-5">
+        <th class="py-5 w-players">
           <div class="flex justify-between">
             <span
               :class="allyTeam ? 'text-teal-400' : 'text-red-400'"
@@ -19,38 +19,38 @@
               :class="allyTeam ? 'text-teal-400' : 'text-red-400'"
               class="flex pr-2"
             >
-              <svg class="w-4 h-4 items-center">
+              <svg class="items-center w-4 h-4">
                 <use xlink:href="#award" />
               </svg>
               <span class="ml-2px">VICTORY</span>
             </div>
           </div>
         </th>
-        <th class="w-kda px-2 py-5 text-sm">K</th>
-        <th class="w-kda px-2 py-5 text-sm">D</th>
-        <th class="w-kda px-2 py-5 text-sm">A</th>
-        <th class="w-minions px-2 py-5 text-sm">{{ statsFormat === 'stats' ? 'cs' : 'cs/m' }}</th>
-        <th class="w-vision px-2 py-5 text-sm">{{ statsFormat === 'stats' ? 'vs' : 'vs/m' }}</th>
-        <th class="w-gold-dmg-kp px-2 py-5 text-sm">gold</th>
-        <th class="w-gold-dmg-kp px-2 py-5 text-sm">
+        <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">
           dmg
           <br />champ
         </th>
-        <th class="w-gold-dmg-kp px-2 py-5 text-sm">
+        <th class="px-2 py-5 text-sm w-gold-dmg-kp">
           dmg
           <br />obj
         </th>
-        <th class="w-gold-dmg-kp px-2 py-5 text-sm">
+        <th class="px-2 py-5 text-sm w-gold-dmg-kp">
           dmg
           <br />taken
         </th>
-        <th class="w-gold-dmg-kp px-2 py-5 text-sm">kp</th>
+        <th class="px-2 py-5 text-sm w-gold-dmg-kp">kp</th>
       </tr>
     </thead>
     <tbody :class="{'border-b border-blue-700': allyTeam}" class="leading-none">
       <tr v-for="(player, index) in data.players" :key="player.name + index">
         <td class="py-2 border-r border-blue-700">
-          <div class="px-1 flex justify-between">
+          <div class="flex justify-between px-1">
             <div class="flex">
               <div class="flex items-center">
                 <div
@@ -61,33 +61,33 @@
               </div>
               <div
                 :style="{backgroundImage: `url('${player.champion.icon}')`}"
-                class="ml-2 relative w-8 h-8 bg-cover bg-center bg-blue-1000 rounded-full"
+                class="relative w-8 h-8 ml-2 bg-center bg-cover rounded-full bg-blue-1000"
               >
                 <div
                   :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"
+                  class="absolute bottom-0 flex items-center justify-center w-4 h-4 rounded-full level-position text-xxs"
                 >
                   <span>{{ player.level }}</span>
                 </div>
               </div>
-              <div class="ml-1 flex flex-col justify-around">
+              <div class="flex flex-col justify-around ml-1">
                 <Tooltip>
                   <template v-slot:trigger>
                     <div
                       :style="{backgroundImage: `url(${player.firstSum ? player.firstSum.icon : null})`}"
                       :class="{'cursor-pointer': player.firstSum}"
-                      class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
+                      class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
                     ></div>
                   </template>
                   <template v-if="player.firstSum" v-slot:default>
-                    <div class="flex max-w-sm p-2 text-white text-left text-xs select-none">
+                    <div class="flex max-w-sm p-2 text-xs text-left text-white select-none">
                       <div
                         :style="{backgroundImage: `url('${player.firstSum.icon}')`}"
-                        class="ml-1 w-12 h-12 flex-shrink-0 rounded-md bg-blue-1000 bg-center bg-cover"
+                        class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
                       ></div>
                       <div class="ml-2 leading-tight">
                         <div class="text-base leading-none">{{ player.firstSum.name }}</div>
-                        <div class="mt-1 text-blue-200 font-light">{{ player.firstSum.description }}</div>
+                        <div class="mt-1 font-light text-blue-200">{{ player.firstSum.description }}</div>
                       </div>
                     </div>
                   </template>
@@ -97,52 +97,52 @@
                     <div
                       :style="{backgroundImage: `url(${player.secondSum ? player.secondSum.icon : null})`}"
                       :class="{'cursor-pointer': player.secondSum}"
-                      class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
+                      class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
                     ></div>
                   </template>
                   <template v-if="player.secondSum" v-slot:default>
-                    <div class="flex max-w-sm p-2 text-white text-left text-xs select-none">
+                    <div class="flex max-w-sm p-2 text-xs text-left text-white select-none">
                       <div
                         :style="{backgroundImage: `url('${player.secondSum.icon}')`}"
-                        class="ml-1 w-12 h-12 flex-shrink-0 rounded-md bg-blue-1000 bg-center bg-cover"
+                        class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
                       ></div>
                       <div class="ml-2 leading-tight">
                         <div class="text-base leading-none">{{ player.secondSum.name }}</div>
                         <div
-                          class="mt-1 text-blue-200 font-light"
+                          class="mt-1 font-light text-blue-200"
                         >{{ player.secondSum.description }}</div>
                       </div>
                     </div>
                   </template>
                 </Tooltip>
               </div>
-              <div class="ml-2px flex flex-col justify-around">
+              <div class="flex flex-col justify-around ml-2px">
                 <div
                   :style="[player.primaryRune ? {background: `url(${player.primaryRune}) center/cover`} : '']"
-                  class="w-4 h-4 bg-blue-1000 rounded-md"
+                  class="w-4 h-4 rounded-md bg-blue-1000"
                 ></div>
                 <div
                   :style="[player.secondaryRune ? {background: `url(${player.secondaryRune}) center/cover`} : '']"
-                  class="w-4 h-4 bg-blue-1000 rounded-md"
+                  class="w-4 h-4 rounded-md bg-blue-1000"
                 ></div>
               </div>
-              <div class="ml-1 flex flex-col items-start justify-center leading-none">
+              <div class="flex flex-col items-start justify-center ml-1 leading-none">
                 <router-link
                   v-if="player.firstSum"
                   :to="{ name: 'summoner', params: { region: $route.params.region, name: player.name }}"
                   :class="{'font-semibold text-yellow-400': account.id === player.summonerId}"
-                  class="w-22 text-xs text-white text-left overflow-hidden text-overflow whitespace-no-wrap hover:text-blue-200"
+                  class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow hover:text-blue-200"
                 >{{ player.name }}</router-link>
                 <div
                   v-else
-                  class="w-22 text-xs text-white text-left overflow-hidden text-overflow whitespace-no-wrap"
+                  class="overflow-hidden text-xs text-left text-white whitespace-no-wrap w-22 text-overflow"
                 >{{ player.name }}</div>
-                <div class="text-xxs text-teal-500">{{ player.champion.name }}</div>
+                <div class="text-teal-500 text-xxs">{{ player.champion.name }}</div>
               </div>
             </div>
             <div class="flex items-center">
               <div v-if="player.rank">
-                <svg class="ml-auto w-5 h-5">
+                <svg class="w-5 h-5 ml-auto">
                   <use :xlink:href="`#rank-${player.rank.tier.toLowerCase()}`" />
                 </svg>
                 <div class="text-blue-300 text-xxs">{{ player.rank.shortName }}</div>
@@ -151,7 +151,7 @@
                 <DotsLoader width="30px" dot-width="10px" />
               </div>
               <div v-else class="w-5 h-5">
-                <div class="-mt-1 text-blue-300 text-2xl">-</div>
+                <div class="-mt-1 text-2xl text-blue-300">-</div>
               </div>
               <MatchItems :items="player.items" :one-row="true" />
             </div>
@@ -159,43 +159,43 @@
         </td>
         <td
           :style="bgColor(player, '71, 132, 116', 'kills')"
-          class="p-2 text-white text-sm"
+          class="p-2 text-sm text-white"
         >{{ player.stats.kills }}</td>
         <td
           :style="bgColor(player, '156, 71, 109', 'deaths')"
-          class="p-2 text-white text-sm"
+          class="p-2 text-sm text-white"
         >{{ player.stats.deaths }}</td>
         <td
           :style="bgColor(player, '146, 100, 79', 'assists')"
-          class="p-2 text-white text-sm"
+          class="p-2 text-sm text-white"
         >{{ player.stats.assists }}</td>
         <td
-          class="p-2 text-white text-sm"
+          class="p-2 text-sm text-white"
           :style="bgColor(player, '140, 101, 182', 'minions')"
         >{{ player[statsFormat].minions }}</td>
         <td
-          class="p-2 text-white text-sm"
+          class="p-2 text-sm text-white"
           :style="bgColor(player, '55, 118, 179', 'vision')"
         >{{ player[statsFormat].vision }}</td>
         <td
-          class="p-2 text-white text-sm"
+          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-white text-sm"
+          class="p-2 text-sm text-white"
         >{{ roundStats(player[statsFormat].dmgChamp) }}</td>
         <td
           :style="bgColor(player, '156, 71, 109', 'dmgObj')"
-          class="p-2 text-white text-sm text-red"
+          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-white text-sm"
+          class="p-2 text-sm text-white"
         >{{ roundStats(player[statsFormat].dmgTaken) }}</td>
         <td
           :style="bgColor(player, '71, 132, 116', 'kp')"
-          class="p-2 text-white text-sm"
+          class="p-2 text-sm text-white"
         >{{ player.stats.kp }}</td>
       </tr>
     </tbody>
diff --git a/client/src/components/Match/LiveMatch.vue b/client/src/components/Match/LiveMatch.vue
index babec85..0787e27 100644
--- a/client/src/components/Match/LiveMatch.vue
+++ b/client/src/components/Match/LiveMatch.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="ml-4 bg-blue-800 rounded-lg overflow-hidden text-sm">
-    <div class="relative w-full flex justify-between">
-      <div class="absolute horizontal-center h-full flex flex-col items-center justify-between">
-        <div class="text-blue-200 text-base leading-loose">{{ gamemode.name }}</div>
-        <div class="vs flex flex-col text-2xl font-bold leading-none">
+  <div class="ml-4 overflow-hidden text-sm bg-blue-800 rounded-lg">
+    <div class="relative flex justify-between w-full">
+      <div class="absolute flex flex-col items-center justify-between h-full horizontal-center">
+        <div class="text-base leading-loose text-blue-200">{{ gamemode.name }}</div>
+        <div class="flex flex-col text-2xl font-bold leading-none vs">
           <span>V</span>
           <span class="ml-4 -mt-3">S</span>
         </div>
@@ -18,7 +18,7 @@
         >
           <div
             :style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${ally.championId}.png')`}"
-            class="w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
+            class="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
           ></div>
           <router-link
             v-if="!ally.bot"
@@ -42,7 +42,7 @@
           >{{ enemy.summonerName }}</router-link>
           <div
             :style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${enemy.championId}.png')`}"
-            class="ml-2 w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
+            class="w-6 h-6 ml-2 bg-center bg-cover rounded-full bg-blue-1000"
           ></div>
         </li>
       </ul>
diff --git a/client/src/components/Match/Match.vue b/client/src/components/Match/Match.vue
index 446cca6..c0db467 100644
--- a/client/src/components/Match/Match.vue
+++ b/client/src/components/Match/Match.vue
@@ -1,59 +1,59 @@
 <template>
-  <li class="ml-4 relative">
+  <li class="relative ml-4">
     <Ripple
       @click.native="displayDetails"
       color="rgba(43, 108, 176, 0.7)"
       :class="[data.result, showDetails ? 'rounded-t-lg' : 'rounded-lg', {'mt-4': indexMatch !== 0 }]"
-      class="match relative bg-blue-800 text-white text-base cursor-pointer hover:shadow-xl"
+      class="relative text-base text-white bg-blue-800 cursor-pointer match hover:shadow-xl"
     >
       <div class="relative flex flex-wrap px-5 py-3">
         <div
           v-if="data.newMatch"
-          class="new-match absolute right-0 top-0 px-2 text-xxs rounded-full"
+          class="absolute top-0 right-0 px-2 rounded-full new-match text-xxs"
           style="margin: 0.35rem 0.35rem 0 0; background-color: rgba(99,179,237, .2);"
         >New</div>
-        <div class="first w-4/12 text-left">
+        <div class="w-4/12 text-left first">
           <div>
             <div
-              class="h-6 text-lg text-teal-500 font-extrabold uppercase leading-none"
+              class="h-6 text-lg font-extrabold leading-none text-teal-500 uppercase"
             >{{ data.champion.name }}</div>
 
             <div class="flex">
-              <div class="flex flex-col justify-end items-center">
+              <div class="flex flex-col items-center justify-end">
                 <div
                   v-if="data.role !== 'NONE'"
                   :style="{backgroundImage: `url(${require('@/assets/img/roles/' + data.role + '.png')})`}"
                   class="w-10 h-10 bg-center bg-cover"
                 ></div>
                 <div
-                  class="w-10 text-center text-xs text-teal-500 font-extrabold"
+                  class="w-10 text-xs font-extrabold text-center text-teal-500"
                 >LVL {{ data.level }}</div>
               </div>
               <div
                 :style="{backgroundImage: `url('${data.champion.icon}')`}"
-                class="ml-2 w-16 h-16 crop-champion bg-blue-1000 rounded-lg"
+                class="w-16 h-16 ml-2 rounded-lg crop-champion bg-blue-1000"
               ></div>
-              <div class="ml-2 flex flex-col justify-around">
+              <div class="flex flex-col justify-around ml-2">
                 <div
                   :style="{backgroundImage: `url(${data.firstSum})`}"
-                  class="w-6 h-6 bg-blue-1000 rounded-md bg-center bg-cover"
+                  class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
                 ></div>
                 <div
                   :style="{backgroundImage: `url(${data.secondSum})`}"
-                  class="w-6 h-6 bg-blue-1000 rounded-md bg-center bg-cover"
+                  class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
                 ></div>
               </div>
-              <div class="ml-1 flex flex-col justify-around">
+              <div class="flex flex-col justify-around ml-1">
                 <div
                   :style="[data.primaryRune ? {background: `url(${data.primaryRune}) center/cover`} : '']"
-                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  class="w-6 h-6 rounded-md bg-blue-1000"
                 ></div>
                 <div
                   :style="[data.secondaryRune ? {background: `url(${data.secondaryRune}) center/cover`} : '']"
-                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  class="w-6 h-6 rounded-md bg-blue-1000"
                 ></div>
               </div>
-              <div class="mx-auto flex flex-col justify-center items-center leading-none">
+              <div class="flex flex-col items-center justify-center mx-auto leading-none">
                 <div class="text-xl font-extrabold text-teal-500">
                   <span class>{{ data.stats.kills }}</span>
                   <span class>/</span>
@@ -62,18 +62,18 @@
                   <span class>{{ data.stats.assists }}</span>
                 </div>
                 <div
-                  class="relative z-30 mt-2 text-white text-xs font-extrabold"
+                  class="relative z-30 mt-2 text-xs font-extrabold text-white"
                 >{{ data.stats.kda }} KDA</div>
               </div>
             </div>
 
             <div
-              class="relative z-30 h-6 flex items-end text-sm text-white font-extrabold leading-none"
+              class="relative z-30 flex items-end h-6 text-sm font-extrabold leading-none text-white"
             >{{ data.gamemode.name }}</div>
           </div>
         </div>
 
-        <div class="second w-3/12 py-6 flex items-center">
+        <div class="flex items-center w-3/12 py-6 second">
           <MatchItems :items="data.items" />
 
           <div class="relative z-30 ml-4 leading-none">
@@ -81,7 +81,7 @@
               <svg style="width: 15px; height: 15px;">
                 <use xlink:href="#creeps" />
               </svg>
-              <div class="ml-1 text-teal-300 text-sm font-bold">
+              <div class="ml-1 text-sm font-bold text-teal-300">
                 {{ data.stats.minions }}
                 <span class="font-normal">cs</span>
               </div>
@@ -90,64 +90,64 @@
               <svg style="width: 15px; height: 15px;">
                 <use xlink:href="#gold" />
               </svg>
-              <div class="ml-1 gold text-sm font-bold">{{ data.stats.gold|kilo }}</div>
+              <div class="ml-1 text-sm font-bold gold">{{ data.stats.gold|kilo }}</div>
             </div>
             <div class="flex items-center">
               <svg style="width: 15px; height: 15px;">
                 <use xlink:href="#damage" />
               </svg>
-              <div class="ml-1 damage text-sm font-bold">{{ data.stats.dmgChamp|kilo }}</div>
+              <div class="ml-1 text-sm font-bold damage">{{ data.stats.dmgChamp|kilo }}</div>
             </div>
             <div class="flex items-center">
               <svg style="width: 15px; height: 15px;">
                 <use xlink:href="#kill-participation" />
               </svg>
-              <div class="ml-1 kp text-sm font-bold">{{ data.stats.kp|percent }}</div>
+              <div class="ml-1 text-sm font-bold kp">{{ data.stats.kp|percent }}</div>
             </div>
           </div>
         </div>
 
-        <div class="relative z-30 third w-5/12 py-1 flex items-center">
+        <div class="relative z-30 flex items-center w-5/12 py-1 third">
           <div v-if="data.allyTeam.length > 1">
             <div
               v-for="(ally, index) in data.allyTeam"
               :key="'player-' + index"
-              class="ml-4 flex items-center leading-none"
+              class="flex items-center ml-4 leading-none"
             >
               <div
                 :class="isSummonerProfile(ally.account_id)"
-                class="w-16 text-right overflow-hidden text-overflow whitespace-no-wrap text-xs text-blue-200 font-medium"
+                class="w-16 overflow-hidden text-xs font-medium text-right text-blue-200 whitespace-no-wrap text-overflow"
               >{{ ally.name }}</div>
               <div
                 :class="index !== 0 ? '-mt-1': ''"
                 :style="{backgroundImage: `url('${ally.champion.icon}')`}"
-                class="ml-1 w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full overflow-hidden"
+                class="w-6 h-6 ml-1 overflow-hidden bg-center bg-cover rounded-full bg-blue-1000"
               ></div>
               <div
-                class="mx-3 w-4 h-4 bg-center bg-cover"
+                class="w-4 h-4 mx-3 bg-center bg-cover"
                 :style="{backgroundImage: `url(${require('@/assets/img/roles/' + roles[index] + '.png')})`}"
               ></div>
               <div
                 :class="index !== 0 ? '-mt-1' : ''"
                 :style="{backgroundImage: `url('${data.enemyTeam[index].champion.icon}')`}"
-                class="w-6 h-6 bg-blue-1000 bg-center bg-cover rounded-full"
+                class="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
               ></div>
               <div
-                class="ml-1 w-16 text-left overflow-hidden text-overflow whitespace-no-wrap text-xs text-blue-200 font-medium"
+                class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-no-wrap text-overflow"
               >{{ data.enemyTeam[index].name }}</div>
             </div>
           </div>
-          <div class="ml-auto flex flex-col items-center justify-center">
+          <div class="flex flex-col items-center justify-center ml-auto">
             <svg class="w-5 h-5 text-blue-200">
               <use xlink:href="#stopwatch" />
             </svg>
-            <div class="text-lg text-teal-400 font-medium">{{ data.time|secToTime }}</div>
+            <div class="text-lg font-medium text-teal-400">{{ data.time|secToTime }}</div>
             <Tooltip>
               <template v-slot:trigger>
-                <div class="text-xs text-white font-medium">{{ data.date }}</div>
+                <div class="text-xs font-medium text-white">{{ data.date }}</div>
               </template>
               <template v-slot:default>
-                <div class="px-2 text-white text-center text-xs leading-tight select-none">
+                <div class="px-2 text-xs leading-tight text-center text-white select-none">
                   <svg class="w-4 h-4 mx-auto text-teal-400">
                     <use xlink:href="#time" />
                   </svg>
diff --git a/client/src/components/Match/MatchItems.vue b/client/src/components/Match/MatchItems.vue
index e9b3728..89c1e3d 100644
--- a/client/src/components/Match/MatchItems.vue
+++ b/client/src/components/Match/MatchItems.vue
@@ -5,22 +5,22 @@
         <div
           :style="{backgroundImage: item ? `url('${item.image}')` : null}"
           :class="[oneRow ? 'ml-2px w-6 h-6' : 'ml-1 w-8 h-8', {'cursor-pointer': item !== null}]"
-          class="rounded-md bg-blue-1000 bg-center bg-cover"
+          class="bg-center bg-cover rounded-md bg-blue-1000"
         ></div>
       </template>
       <template v-if="item !== null" v-slot:default>
-        <div class="flex max-w-md p-2 text-white text-left text-xs select-none">
+        <div class="flex max-w-md p-2 text-xs text-left text-white select-none">
           <div
             :style="{backgroundImage: item ? `url('${item.image}')` : null}"
-            class="ml-1 w-12 h-12 flex-shrink-0 rounded-md bg-blue-1000 bg-center bg-cover"
+            class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
           ></div>
           <div class="ml-2 leading-none">
             <div class="text-base">{{ item.name }}</div>
             <div class="mt-1">
               <span class="text-blue-200">Price:</span>
-              <span class="ml-1 text-sm text-yellow-500 font-semibold">{{ item.price }}</span>
+              <span class="ml-1 text-sm font-semibold text-yellow-500">{{ item.price }}</span>
             </div>
-            <div v-html="item.description" class="mt-1 item-description text-blue-200 font-light"></div>
+            <div v-html="item.description" class="mt-1 font-light text-blue-200 item-description"></div>
           </div>
         </div>
       </template>
diff --git a/client/src/components/Summoner/Champions/ChampionsSearch.vue b/client/src/components/Summoner/Champions/ChampionsSearch.vue
index dbd64b1..5d8a6f1 100644
--- a/client/src/components/Summoner/Champions/ChampionsSearch.vue
+++ b/client/src/components/Summoner/Champions/ChampionsSearch.vue
@@ -3,11 +3,11 @@
     <input
       v-model="championName"
       @input="search"
-      class="input-color px-2 pl-10 py-2 rounded-lg outline-none focus:bg-blue-1000"
+      class="px-2 py-2 pl-10 rounded-lg outline-none input-color focus:bg-blue-1000"
       type="text"
       placeholder="Search Champions"
     />
-    <svg class="ml-3 absolute left-0 vertical-center w-4 h-4">
+    <svg class="absolute left-0 w-4 h-4 ml-3 vertical-center">
       <use xlink:href="#search" />
     </svg>
   </Ripple>
diff --git a/client/src/components/Summoner/Champions/ChampionsTable.vue b/client/src/components/Summoner/Champions/ChampionsTable.vue
index e869926..1d32c09 100644
--- a/client/src/components/Summoner/Champions/ChampionsTable.vue
+++ b/client/src/components/Summoner/Champions/ChampionsTable.vue
@@ -1,11 +1,11 @@
 <template>
-  <table class="w-full table-fixed bg-blue-800 rounded-lg text-center leading-none">
+  <table class="w-full leading-none text-center bg-blue-800 rounded-lg table-fixed">
     <thead>
-      <tr class="heading rounded-t-lg text-sm select-none">
+      <tr class="text-sm rounded-t-lg select-none heading">
         <th
           @click="sortBy('index')"
           :class="sortedClasses('index')"
-          class="relative px-2 py-4 rounded-tl-lg font-normal cursor-pointer hover:bg-blue-700"
+          class="relative px-2 py-4 font-normal rounded-tl-lg cursor-pointer hover:bg-blue-700"
         >rank</th>
         <th
           v-for="(heading, index) in headings"
@@ -28,36 +28,36 @@
       >
         <td
           :class="{'rounded-bl-lg': index === championsToDisplay.length - 1}"
-          class="relative px-2 py-3 bg-blue-800 border-t-table border-t-table-70 text-white text-sm"
+          class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table border-t-table-70"
         >{{ champion.index + 1 }}</td>
-        <td class="relative px-2 py-3 bg-blue-800 border-t-table text-white text-sm">
+        <td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table">
           <div class="flex items-center">
             <div
               :style="{backgroundImage: `url('${champion.champion.icon}')`}"
-              class="w-6 h-6 flex-shrink-0 bg-cover bg-center bg-blue-1000 rounded-full"
+              class="flex-shrink-0 w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
             ></div>
             <div class="ml-2">{{ champion.champion.name }}</div>
           </div>
         </td>
         <td
           :style="bgColor(champion, '71, 132, 116', 'winrate')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.winrate|percent }}</td>
         <td
           :style="bgColor(champion, '55, 118, 179', 'playrate')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.playrate|percent }}</td>
         <td
           :style="bgColor(champion, '71, 132, 116', 'wins')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.wins }}</td>
         <td
           :style="bgColor(champion, '55, 118, 179', 'count')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.count }}</td>
-        <td :style="bgColor(champion, '55, 118, 179', 'kda')" class="px-2 py-3 text-white text-sm">
+        <td :style="bgColor(champion, '55, 118, 179', 'kda')" class="px-2 py-3 text-sm text-white">
           <div>{{ champion.kda|round }}</div>
-          <div class="mt-1 text-xxs text-blue-200">
+          <div class="mt-1 text-blue-200 text-xxs">
             {{ champion.kills/champion.count|round(1) }}
             /
             {{ champion.deaths/champion.count|round(1) }}
@@ -67,31 +67,31 @@
         </td>
         <td
           :style="bgColor(champion, '71, 132, 116', 'kp')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.kp|percent }}</td>
         <td
           :style="bgColor(champion, '140, 101, 182', 'minions')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.minions|round(0) }}</td>
         <td
           :style="bgColor(champion, '146, 100, 79', 'gold')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.gold|kilo }}</td>
         <td
           :style="bgColor(champion, '156, 71, 109', 'dmgChamp')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.dmgChamp|kilo }}</td>
         <td
           :style="bgColor(champion, '146, 145, 106', 'dmgTaken')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.dmgTaken|kilo }}</td>
         <td
           :style="bgColor(champion, '71, 132, 116', 'gameLength')"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.gameLength|secToTime }}</td>
         <td
           :class="{'rounded-br-lg': index === championsToDisplay.length - 1}"
-          class="px-2 py-3 text-white text-sm"
+          class="px-2 py-3 text-sm text-white"
         >{{ champion.lastPlayed }}</td>
       </tr>
     </tbody>
diff --git a/client/src/components/Summoner/Champions/FilterQueue.vue b/client/src/components/Summoner/Champions/FilterQueue.vue
index 1f82b95..ec92011 100644
--- a/client/src/components/Summoner/Champions/FilterQueue.vue
+++ b/client/src/components/Summoner/Champions/FilterQueue.vue
@@ -3,14 +3,14 @@
     <select
       v-model="queue"
       @change="filterQueue"
-      class="block appearance-none bg-blue-800 hover:bg-blue-700 w-full px-4 py-2 pr-8 rounded-md font-semibold lowercase cursor-pointer focus:outline-none"
+      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"
     >
       <option v-for="(key) in Object.keys(choices)" :key="key" :value="key">{{ choices[key].name }}</option>
     </select>
     <div
-      class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+      class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
     >
-      <svg class="text-white w-5 h-5">
+      <svg class="w-5 h-5 text-white">
         <use xlink:href="#chevron-down" />
       </svg>
     </div>
diff --git a/client/src/components/Summoner/FilterSeason.vue b/client/src/components/Summoner/FilterSeason.vue
index 35ba650..7e924ba 100644
--- a/client/src/components/Summoner/FilterSeason.vue
+++ b/client/src/components/Summoner/FilterSeason.vue
@@ -1,16 +1,21 @@
 <template>
-  <div class="relative group self-end inline-block text-blue-200 leading-none">
+  <div class="relative self-end inline-block leading-none text-blue-200 group">
     <select
       v-model="season"
       @change="filterSeason"
       dir="rtl"
-      class="block appearance-none bg-transparent w-full px-4 pr-8 rounded-md cursor-pointer focus:outline-none group-hover:text-white"
+      class="block w-full px-4 pr-8 bg-transparent rounded-md appearance-none cursor-pointer focus:outline-none group-hover:text-white"
     >
       <option :value="null" class="bg-blue-800">All seasons</option>
-      <option v-for="(s, index) in seasons" :key="index" :value="s" class="bg-blue-800">Season {{ s }}</option>
+      <option
+        v-for="(s, index) in seasons"
+        :key="index"
+        :value="s"
+        class="bg-blue-800"
+      >Season {{ s }}</option>
     </select>
     <div
-      class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+      class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
     >
       <svg class="w-4 h-4 text-blue-200 group-hover:text-white">
         <use xlink:href="#caret-down" />
diff --git a/client/src/components/Summoner/HeaderLoader.vue b/client/src/components/Summoner/HeaderLoader.vue
index 168afa1..db2e969 100644
--- a/client/src/components/Summoner/HeaderLoader.vue
+++ b/client/src/components/Summoner/HeaderLoader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-white pb-2">
+  <div class="pb-2 text-white">
     <div class="flex justify-between">
       <div style="width: 520px; height: 239px;">
         <content-loader
@@ -21,7 +21,7 @@
         </content-loader>
       </div>
 
-      <div class="bg-blue-850 rounded-lg" style="width: 347px; height: 215px;">
+      <div class="rounded-lg bg-blue-850" style="width: 347px; height: 215px;">
         <content-loader
           :height="215"
           :width="347"
diff --git a/client/src/components/Summoner/Live/LiveTeam.vue b/client/src/components/Summoner/Live/LiveTeam.vue
index 18f34ba..f2c09ac 100644
--- a/client/src/components/Summoner/Live/LiveTeam.vue
+++ b/client/src/components/Summoner/Live/LiveTeam.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="mt-2 bg-blue-800 px-5 py-4 rounded-lg">
+  <div class="px-5 py-4 mt-2 bg-blue-800 rounded-lg">
     <table
-      class="w-full table-fixed text-center leading-none"
+      class="w-full leading-none text-center table-fixed"
       style="border-collapse:separate; border-spacing:0 0.5rem;"
     >
       <thead>
         <tr class="text-left">
           <th
             :class="[ally ? 'text-teal-400 ' : 'text-red-400 ']"
-            class="w-team font-semibold"
+            class="font-semibold w-team"
           >{{ ally ? 'Ally' : 'Enemy' }} Team</th>
-          <th class="w-ranked text-blue-200 text-sm font-normal">SoloQ Stats</th>
-          <th class="w-ranked text-blue-200 text-sm font-normal">Flex Stats</th>
-          <th class="w-bans px-2 text-right text-blue-200 text-sm font-normal">Bans</th>
+          <th class="text-sm font-normal text-blue-200 w-ranked">SoloQ Stats</th>
+          <th class="text-sm font-normal text-blue-200 w-ranked">Flex Stats</th>
+          <th class="px-2 text-sm font-normal text-right text-blue-200 w-bans">Bans</th>
         </tr>
       </thead>
       <tbody v-if="liveLoaded">
@@ -27,29 +27,29 @@
               <div class="flex flex-col items-center">
                 <div
                   :style="{backgroundImage: `url('${player.runes.primaryRune}')`}"
-                  class="w-6 h-6 bg-cover bg-center"
+                  class="w-6 h-6 bg-center bg-cover"
                 ></div>
                 <div
                   :style="{backgroundImage: `url('${player.runes.secondaryRune}')`}"
-                  class="mt-1 w-3 h-3 bg-cover bg-center"
+                  class="w-3 h-3 mt-1 bg-center bg-cover"
                 ></div>
               </div>
               <div
                 :style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${player.championId}.png')`}"
                 :class="borderChampion(player.summonerId)"
-                class="ml-2 w-12 h-12 bg-cover bg-center bg-blue-1000 border-2 rounded-full"
+                class="w-12 h-12 ml-2 bg-center bg-cover border-2 rounded-full bg-blue-1000"
               ></div>
-              <div class="ml-2 flex flex-col">
+              <div class="flex flex-col ml-2">
                 <div
                   :style="{backgroundImage: `url(${getSummonerLink(player.spell1Id)})`}"
-                  class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
+                  class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
                 ></div>
                 <div
                   :style="{backgroundImage: `url(${getSummonerLink(player.spell2Id)})`}"
-                  class="mt-1 w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
+                  class="w-4 h-4 mt-1 bg-center bg-cover rounded-md bg-blue-1000"
                 ></div>
               </div>
-              <div class="ml-3 text-left text-sm leading-tight">
+              <div class="ml-3 text-sm leading-tight text-left">
                 <router-link
                   v-if="!player.bot"
                   :to="{ name: 'summoner', params: { region: $route.params.region, name: player.summonerName }}"
@@ -68,7 +68,7 @@
                     <use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" />
                   </svg>
                   <div
-                    class="mt-2px text-blue-300 text-xs font-semibold"
+                    class="text-xs font-semibold text-blue-300 mt-2px"
                   >{{ player.rank.soloQ.shortName }}</div>
                 </div>
                 <div class="ml-5 text-center">
@@ -79,7 +79,7 @@
                 </div>
               </div>
               <div v-else class="w-5 h-5">
-                <div class="-mt-1 text-blue-300 text-2xl">-</div>
+                <div class="-mt-1 text-2xl text-blue-300">-</div>
               </div>
             </div>
           </td>
@@ -91,7 +91,7 @@
                     <use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" />
                   </svg>
                   <div
-                    class="mt-2px text-blue-300 text-xs font-semibold"
+                    class="text-xs font-semibold text-blue-300 mt-2px"
                   >{{ player.rank.flex5v5.shortName }}</div>
                 </div>
                 <div class="ml-5 text-center">
@@ -102,16 +102,16 @@
                 </div>
               </div>
               <div v-else class="w-5 h-5">
-                <div class="-mt-1 text-blue-300 text-2xl">-</div>
+                <div class="-mt-1 text-2xl text-blue-300">-</div>
               </div>
             </div>
           </td>
           <td class="py-1 text-right rounded-r-lg">
-            <div class="px-2 inline-block">
+            <div class="inline-block px-2">
               <div
                 v-if="live.bannedChampions.length"
                 :class="[ally ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
-                class="relative ban border-2 rounded-full"
+                class="relative border-2 rounded-full ban"
               >
                 <div
                   :style="[
@@ -119,15 +119,15 @@
                       {backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${banChamp(index, player.teamId).championId}.png')`}
                       : ''
                   ]"
-                  class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
+                  class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000"
                 ></div>
                 <div
                   :class="[ally ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500']"
-                  class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
+                  class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order"
                 >{{ banChamp(index, player.teamId).pickTurn }}</div>
               </div>
               <div v-else class="w-5 h-5 text-left">
-                <div class="text-blue-300 text-2xl">-</div>
+                <div class="text-2xl text-blue-300">-</div>
               </div>
             </div>
           </td>
@@ -135,7 +135,7 @@
       </tbody>
       <tbody v-else>
         <tr v-for="index in 5" :key="index">
-          <td colspan="4" class="bg-blue-760 rounded-lg">
+          <td colspan="4" class="rounded-lg bg-blue-760">
             <content-loader
               :height="54"
               :width="1160"
diff --git a/client/src/components/Summoner/Overview/OverviewLoader.vue b/client/src/components/Summoner/Overview/OverviewLoader.vue
index 37e0d85..1567085 100644
--- a/client/src/components/Summoner/Overview/OverviewLoader.vue
+++ b/client/src/components/Summoner/Overview/OverviewLoader.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="mt-3 flex text-center">
+  <div class="flex mt-3 text-center">
     <div class="w-3/12">
-      <div class="bg-blue-850 rounded-lg" style="width: 300px; height: 339px;">
+      <div class="rounded-lg bg-blue-850" style="width: 300px; height: 339px;">
         <content-loader
           :height="339"
           :width="300"
@@ -41,7 +41,7 @@
           <rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
         </content-loader>
       </div>
-      <div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 828px;">
+      <div class="mt-4 rounded-lg bg-blue-850" style="width: 300px; height: 828px;">
         <content-loader
           :height="828"
           :width="300"
@@ -133,7 +133,7 @@
         </content-loader>
       </div>
 
-      <div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 384px;">
+      <div class="mt-4 rounded-lg bg-blue-850" style="width: 300px; height: 384px;">
         <content-loader
           :height="384"
           :width="300"
@@ -192,7 +192,7 @@
         v-for="index in 10"
         :key="index"
         :class="{'mt-4': index !== 1}"
-        class="ml-4 bg-blue-850 rounded-lg"
+        class="ml-4 rounded-lg bg-blue-850"
         style="width: 884px; height: 144px;"
       >
         <content-loader
@@ -242,7 +242,7 @@
           <rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
         </content-loader>
       </div>
-      <div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
+      <div class="mx-auto mt-4" style="width: 135px; height: 40px;">
         <content-loader
           :height="40"
           :width="135"
diff --git a/client/src/components/Summoner/Overview/SummonerChampions.vue b/client/src/components/Summoner/Overview/SummonerChampions.vue
index 50aa85a..01c8c96 100644
--- a/client/src/components/Summoner/Overview/SummonerChampions.vue
+++ b/client/src/components/Summoner/Overview/SummonerChampions.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-blue-800 rounded-lg">
-    <div class="relative heading flex items-center justify-center py-4 rounded-t-lg text-blue-200">
+    <div class="relative flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
       <svg class="w-5 h-5" style="transform: rotate(-5deg);">
         <use xlink:href="#layers" />
       </svg>
@@ -8,7 +8,7 @@
       <svg class="w-5 h-5" style="transform: rotate(5deg);">
         <use xlink:href="#layers" />
       </svg>
-      <div class="absolute right-0 top-0 mt-3 mr-2">
+      <div class="absolute top-0 right-0 mt-3 mr-2">
         <Tooltip>
           <template v-slot:trigger>
             <svg class="w-4 h-4 cursor-pointer">
@@ -16,12 +16,12 @@
             </svg>
           </template>
           <template v-slot:default>
-            <div class="px-2 text-white text-center text-sm select-none">
+            <div class="px-2 text-sm text-center text-white select-none">
               <div>Stats based on</div>
               <div>
-                <span class="text-teal-400 font-bold">{{ stats.global ? stats.global.count : 0 }}</span> matches
+                <span class="font-bold text-teal-400">{{ stats.global ? stats.global.count : 0 }}</span> matches
               </div>
-              <div class="mt-2 leading-tight text-xs text-blue-100 font-normal italic">
+              <div class="mt-2 text-xs italic font-normal leading-tight text-blue-100">
                 Load more matches
                 <br />to have better results.
               </div>
@@ -31,13 +31,13 @@
       </div>
     </div>
     <div v-if="stats.champion.length">
-      <div class="mt-3 px-4 flex items-baseline text-left text-sm text-blue-300 font-bold">
-        <div class="ml-2 w-champion text-base text-blue-400">Champion</div>
+      <div class="flex items-baseline px-4 mt-3 text-sm font-bold text-left text-blue-300">
+        <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>
-      <ul class="mt-1 text-sm text-gray-100 text-left">
+      <ul class="mt-1 text-sm text-left text-gray-100">
         <li
           v-for="(champion, index) in stats.champion"
           :key="index"
@@ -45,34 +45,34 @@
           class="relative flex items-center px-4 py-2 leading-tight"
         >
           <div class="absolute text-xs" style="left: 6px;">{{ index + 1 }}.</div>
-          <div class="ml-2 w-champion flex items-center">
+          <div class="flex items-center ml-2 w-champion">
             <div
               :style="{backgroundImage: `url('${champion.champion.icon}')`}"
-              class="w-8 h-8 bg-center bg-cover bg-blue-1000 rounded-full flex-shrink-0"
+              class="flex-shrink-0 w-8 h-8 bg-center bg-cover rounded-full bg-blue-1000"
             ></div>
             <div class="mx-1 truncate">{{ champion.champion.name }}</div>
           </div>
           <div class="w-plays">
-            <div class="text-blue-400 text-xs">{{ champion.count }}</div>
+            <div class="text-xs text-blue-400">{{ champion.count }}</div>
             <div
               :style="{width: widthBar(champion.count, mostPlayed)}"
-              class="mt-2px bg-blue-400 rounded-full h-1"
+              class="h-1 bg-blue-400 rounded-full mt-2px"
             ></div>
           </div>
           <div class="w-winrate">
-            <div class="text-green-400 text-xs">{{ champion.wins * 100 / champion.count|percent }}</div>
+            <div class="text-xs text-green-400">{{ champion.wins * 100 / champion.count|percent }}</div>
             <div
               :style="{width: widthBar(champion.wins, champion.count)}"
-              class="mt-2px bg-green-400 rounded-full h-1"
+              class="h-1 bg-green-400 rounded-full mt-2px"
             ></div>
           </div>
           <div class="w-kda">
             <div
-              class="text-purple-400 text-xs"
+              class="text-xs text-purple-400"
             >{{ kda(champion.kills, champion.deaths, champion.assists) }}</div>
             <div
               :style="{width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda)}"
-              class="mt-2px bg-purple-400 rounded-full h-1"
+              class="h-1 bg-purple-400 rounded-full mt-2px"
             ></div>
           </div>
         </li>
diff --git a/client/src/components/Summoner/Overview/SummonerMates.vue b/client/src/components/Summoner/Overview/SummonerMates.vue
index e69c35e..f8ea403 100644
--- a/client/src/components/Summoner/Overview/SummonerMates.vue
+++ b/client/src/components/Summoner/Overview/SummonerMates.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mt-4 bg-blue-800 rounded-lg">
     <div class="pb-2">
-      <div class="flex items-center justify-center py-4 heading rounded-t-lg text-blue-200">
+      <div class="flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
         <svg class="w-5 h-5" style="transform: rotate(-5deg);">
           <use xlink:href="#people" />
         </svg>
@@ -11,7 +11,7 @@
         </svg>
       </div>
       <div v-if="hasMates" class="px-4 py-2 text-sm text-left">
-        <div class="flex font-bold text-base text-blue-400">
+        <div class="flex text-base font-bold text-blue-400">
           <div class="w-2/4">Summoner</div>
           <div class="w-1/4">W / L</div>
           <div class="w-1/4">Winrate</div>
@@ -20,7 +20,7 @@
           <li
             v-for="mate in mates.slice(0, maxMates)"
             :key="mate._id"
-            class="flex justify-between items-center"
+            class="flex items-center justify-between"
           >
             <router-link
               :to="{ name: 'summoner', params: { region: $route.params.region, name: mate.name }}"
@@ -30,16 +30,16 @@
             <div class="w-1/4">
               <Tooltip>
                 <template v-slot:trigger>
-                  <div class="bg-blue-900 rounded-full h-2 cursor-pointer">
+                  <div class="h-2 bg-blue-900 rounded-full cursor-pointer">
                     <div
                       :class="getWinrateColor(mate.wins, mate.count)"
                       :style="{width: `${winrate(mate.wins, mate.count)}%`}"
-                      class="rounded-full h-full"
+                      class="h-full rounded-full"
                     ></div>
                   </div>
                 </template>
                 <template v-slot:default>
-                  <div class="px-2 text-white text-center text-xs">
+                  <div class="px-2 text-xs text-center text-white">
                     <div>Winrate</div>
                     <div>
                       <span
diff --git a/client/src/components/Summoner/Overview/SummonerStats.vue b/client/src/components/Summoner/Overview/SummonerStats.vue
index 6fa5980..06f5a9b 100644
--- a/client/src/components/Summoner/Overview/SummonerStats.vue
+++ b/client/src/components/Summoner/Overview/SummonerStats.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="stats.global" class="mt-4 bg-blue-800 rounded-lg">
-    <div class="relative heading flex justify-center py-4 rounded-t-lg text-blue-200">
+    <div class="relative flex justify-center py-4 text-blue-200 rounded-t-lg heading">
       <svg class="w-6 h-6">
         <use xlink:href="#graph" />
       </svg>
@@ -8,7 +8,7 @@
       <svg class="w-6 h-6" style="transform: scaleX(-1);">
         <use xlink:href="#graph" />
       </svg>
-      <div class="absolute right-0 top-0 mt-3 mr-2">
+      <div class="absolute top-0 right-0 mt-3 mr-2">
         <Tooltip>
           <template v-slot:trigger>
             <svg class="w-4 h-4 cursor-pointer">
@@ -16,12 +16,12 @@
             </svg>
           </template>
           <template v-slot:default>
-            <div class="px-2 text-white text-center text-sm select-none">
+            <div class="px-2 text-sm text-center text-white select-none">
               <div>Stats based on</div>
               <div>
-                <span class="text-teal-400 font-bold">{{ stats.global.count }}</span> matches
+                <span class="font-bold text-teal-400">{{ stats.global.count }}</span> matches
               </div>
-              <div class="mt-2 leading-tight text-xs text-blue-100 font-normal italic">
+              <div class="mt-2 text-xs italic font-normal leading-tight text-blue-100">
                 Load more matches
                 <br />to have better results.
               </div>
@@ -30,7 +30,7 @@
         </Tooltip>
       </div>
     </div>
-    <div class="mt-2 flex items-center py-2">
+    <div class="flex items-center py-2 mt-2">
       <div
         v-for="(role, index) in stats.role"
         :key="index"
@@ -52,13 +52,13 @@
             </div>
           </template>
           <template v-slot:default>
-            <div class="px-2 text-white text-center text-sm select-none">
+            <div class="px-2 text-sm text-center text-white select-none">
               <div>{{ role.role|capitalize }}</div>
               <span
                 :class="winLossColor(role.wins, role.losses).win"
                 class="font-bold"
               >{{ role.wins }}</span>
-              <span class="mx-1 text-gray-400 font-bold">-</span>
+              <span class="mx-1 font-bold text-gray-400">-</span>
               <span
                 :class="winLossColor(role.wins, role.losses).loss"
                 class="font-bold"
@@ -72,14 +72,14 @@
         </Tooltip>
         <div
           :style="{backgroundImage: `url(${require('@/assets/img/roles/' + role.role + '.png')})`}"
-          class="mt-1 w-4 h-4 bg-center bg-cover"
+          class="w-4 h-4 mt-1 bg-center bg-cover"
         ></div>
         <div class="text-xs text-blue-200">{{ role.count }}</div>
       </div>
     </div>
     <div class="py-2 text-sm text-center">
-      <div class="px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
-        <div class="w-1/4 text-left text-base text-blue-400">Stat</div>
+      <div class="flex items-baseline px-4 text-sm font-bold 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>
         <div class="w-1/4">Avg</div>
@@ -89,33 +89,33 @@
           v-for="(stat, name, index) in globalStatsKeys"
           :key="index"
           :class="{'bg-blue-760': index % 2 !== 0}"
-          class="flex justify-between items-center px-4 py-1 leading-tight"
+          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">{{ 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 justify-between items-center px-4 py-1 bg-blue-760 leading-tight">
+        <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">{{ (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 justify-between items-center px-4 py-1 leading-tight">
+        <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"
           >{{ (stats.global.kills + stats.global.assists) / stats.global.deaths|round }}</div>
         </li>
-        <li class="flex justify-between items-center px-4 py-1 bg-blue-760 leading-tight">
+        <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">{{ stats.global.kp|percent }}</div>
         </li>
       </ul>
       <template v-if="leagueStatsByType('Ranked').length">
-        <div class="mt-3 px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
-          <div class="w-2/4 text-left text-base text-blue-400">Ranked Stats</div>
+        <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="w-1/4">Winrate</div>
           <div class="w-1/4">Record</div>
         </div>
@@ -124,7 +124,7 @@
             v-for="(league, index) in leagueStatsByType('Ranked')"
             :key="index"
             :class="{'bg-blue-760': index % 2 !== 0}"
-            class="flex justify-between items-center px-4 py-1 leading-tight"
+            class="flex items-center justify-between px-4 py-1 leading-tight"
           >
             <div class="w-2/4 text-left">{{ league.name.toLowerCase() }}</div>
             <div
@@ -136,7 +136,7 @@
                 :class="winLossColor(league.wins, league.losses).win"
                 class="font-bold"
               >{{ league.wins }}</span>
-              <span class="mx-1 text-gray-400 font-bold">-</span>
+              <span class="mx-1 font-bold text-gray-400">-</span>
               <span
                 :class="winLossColor(league.wins, league.losses).loss"
                 class="font-bold"
@@ -146,8 +146,8 @@
         </ul>
       </template>
       <template v-if="leagueStatsByType('Normal').length">
-        <div class="mt-3 px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
-          <div class="w-2/4 text-left text-base text-blue-400">Normal Stats</div>
+        <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="w-1/4">Winrate</div>
           <div class="w-1/4">Record</div>
         </div>
@@ -156,7 +156,7 @@
             v-for="(league, index) in leagueStatsByType('Normal')"
             :key="index"
             :class="{'bg-blue-760': index % 2 !== 0}"
-            class="flex justify-between items-center px-4 py-1 leading-tight"
+            class="flex items-center justify-between px-4 py-1 leading-tight"
           >
             <div class="w-2/4 text-left">{{ league.name.toLowerCase() }}</div>
             <div
@@ -168,7 +168,7 @@
                 :class="winLossColor(league.wins, league.losses).win"
                 class="font-bold"
               >{{ league.wins }}</span>
-              <span class="mx-1 text-gray-400 font-bold">-</span>
+              <span class="mx-1 font-bold text-gray-400">-</span>
               <span
                 :class="winLossColor(league.wins, league.losses).loss"
                 class="font-bold"
@@ -178,8 +178,8 @@
         </ul>
       </template>
 
-      <div class="mt-3 px-4 flex items-baseline font-bold text-sm text-blue-300 uppercase">
-        <div class="w-2/4 text-left text-base text-blue-400">Stats by Class</div>
+      <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="w-1/4">Winrate</div>
         <div class="w-1/4">Record</div>
       </div>
@@ -188,7 +188,7 @@
           v-for="(championClass, index) in championClasses"
           :key="index"
           :class="{'bg-blue-760': index % 2 !== 0}"
-          class="flex justify-between items-center px-4 py-1 leading-tight"
+          class="flex items-center justify-between px-4 py-1 leading-tight"
         >
           <div class="w-2/4 text-left capitalize">{{ championClass._id }}</div>
           <div
@@ -200,7 +200,7 @@
               :class="winLossColor(championClass.wins, championClass.losses).win"
               class="font-bold"
             >{{ championClass.wins }}</span>
-            <span class="mx-1 text-gray-400 font-bold">-</span>
+            <span class="mx-1 font-bold text-gray-400">-</span>
             <span
               :class="winLossColor(championClass.wins, championClass.losses).loss"
               class="font-bold"
@@ -212,14 +212,14 @@
 
     <div class="flex flex-col items-center pb-2 leading-snug">
       <div
-        class="text-teal-400 text-xl"
+        class="text-xl text-teal-400"
       >{{ calculateWinrate(stats.global.wins, stats.global.count).winrate|percent }}</div>
       <div class="flex text-sm">
         <span
           :class="winLossColor(stats.global.wins, stats.global.losses).win"
           class
         >{{ stats.global.wins }}</span>
-        <span class="mx-1 text-gray-400 font-bold">-</span>
+        <span class="mx-1 font-bold text-gray-400">-</span>
         <span
           :class="winLossColor(stats.global.wins, stats.global.losses).loss"
           class
diff --git a/client/src/components/Summoner/RecentActivity.vue b/client/src/components/Summoner/RecentActivity.vue
index 1bd9669..9be0056 100644
--- a/client/src/components/Summoner/RecentActivity.vue
+++ b/client/src/components/Summoner/RecentActivity.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="inline-block bg-blue-800 rounded-lg">
-      <div class="relative heading flex justify-center items-center py-2 rounded-t-lg text-blue-200">
+      <div
+        class="relative flex items-center justify-center py-2 text-blue-200 rounded-t-lg heading"
+      >
         <svg class="w-4 h-4">
           <use xlink:href="#time" />
         </svg>
@@ -12,34 +14,34 @@
       </div>
       <div class="p-3 pt-1">
         <div class="flex">
-          <span class="ml-12 text-blue-200 font-semibold text-xs">{{ gridDays[11].month }}</span>
-          <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[42].month }}</span>
-          <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[73].month }}</span>
-          <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[104].month }}</span>
+          <span class="ml-12 text-xs font-semibold text-blue-200">{{ gridDays[11].month }}</span>
+          <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[42].month }}</span>
+          <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[73].month }}</span>
+          <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[104].month }}</span>
         </div>
-        <div class="mt-1 flex">
+        <div class="flex mt-1">
           <div class="flex flex-col">
-            <span class="text-blue-200 font-semibold text-xs leading-snug">Mo</span>
-            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Tu</span>
-            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">We</span>
-            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Th</span>
-            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Fr</span>
-            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Sa</span>
-            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Su</span>
+            <span class="text-xs font-semibold leading-snug text-blue-200">Mo</span>
+            <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Tu</span>
+            <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">We</span>
+            <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Th</span>
+            <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Fr</span>
+            <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Sa</span>
+            <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Su</span>
           </div>
           <div
-            class="ml-1 flex flex-col flex-wrap"
+            class="flex flex-col flex-wrap ml-1"
             style="width: calc(20px * 15); height: calc(20px * 7)"
           >
             <Tooltip v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
               <template v-slot:trigger>
                 <div
                   :class="[getCaseMargin(index), getCaseColor(day.matches)]"
-                  class="ml-1 w-4 h-4 cursor-pointer"
+                  class="w-4 h-4 ml-1 cursor-pointer"
                 />
               </template>
               <template v-slot:default>
-                <div class="px-2 text-white text-center text-xs">
+                <div class="px-2 text-xs text-center text-white">
                   <div>{{ day.date }}</div>
                   <div>
                     <span class="font-bold text-teal-400">{{ day.matches }}</span> game(s)
diff --git a/client/src/components/Summoner/Records/RecordCard.vue b/client/src/components/Summoner/Records/RecordCard.vue
index 5b0b099..758da1b 100644
--- a/client/src/components/Summoner/Records/RecordCard.vue
+++ b/client/src/components/Summoner/Records/RecordCard.vue
@@ -7,7 +7,7 @@
         `${hover ? gradientHover : gradient},
          url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${record.champion.id}/${record.champion.id}000.jpg')`
     }"
-    class="mt-6 mx-2 record-card w-full bg-cover bg-center p-2 rounded-lg leading-none"
+    class="w-full p-2 mx-2 mt-6 leading-none bg-center bg-cover rounded-lg record-card"
   >
     <div class="text-5xl">{{ record[property] }}</div>
     <div>
@@ -23,10 +23,10 @@
       </div>
       <div class="text-gray-500">
         as
-        <span class="text-white font-bold">{{ record.champion.name }}</span>
+        <span class="font-bold text-white">{{ record.champion.name }}</span>
       </div>
     </div>
-    <div class="mt-3 text-gray-200 text-sm opacity-25">match {{ record.gameId }}</div>
+    <div class="mt-3 text-sm text-gray-200 opacity-25">match {{ record.gameId }}</div>
   </div>
 </template>
 
diff --git a/client/src/components/Summoner/SummonerRanked.vue b/client/src/components/Summoner/SummonerRanked.vue
index 23f2db9..066fb3d 100644
--- a/client/src/components/Summoner/SummonerRanked.vue
+++ b/client/src/components/Summoner/SummonerRanked.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="ml-2 leading-none flex items-center">
-    <div class="ml-1 flex flex-col justify-center">
+  <div class="flex items-center ml-2 leading-none">
+    <div class="flex flex-col justify-center ml-1">
       <div class="flex items-center">
         <div
           ref="leagueBorder"
           :style="{backgroundColor: colorBorder}"
-          class="percentage-circle relative w-12 h-12 flex items-center justify-center rounded-full"
+          class="relative flex items-center justify-center w-12 h-12 rounded-full percentage-circle"
         >
-          <div class="relative w-11 h-11 p-1 bg-blue-900 rounded-full">
+          <div class="relative p-1 bg-blue-900 rounded-full w-11 h-11">
             <div
               class="h-full bg-center bg-cover"
               :style="{backgroundImage: `url(${selectedLeague.rankImgLink})`}"
@@ -15,12 +15,12 @@
           </div>
         </div>
         <div
-          class="ml-2 text-teal-500 text-3xl uppercase font-extrabold"
+          class="ml-2 text-3xl font-extrabold text-teal-500 uppercase"
         >{{ selectedLeague.fullRank }}</div>
         <div class="ml-4 text-2xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
         <div
           v-if="selectedLeague.miniSeries"
-          class="ml-2 flex items-center p-2 bg-blue-800 rounded"
+          class="flex items-center p-2 ml-2 bg-blue-800 rounded"
         >
           <div
             v-for="(result, index) in bo"
@@ -30,11 +30,11 @@
           ></div>
         </div>
       </div>
-      <div class="flex mt-2 items-center">
+      <div class="flex items-center mt-2">
         <div class="relative inline-block text-white">
           <select
             v-model="selectedKey"
-            class="block appearance-none bg-blue-800 hover:bg-blue-700 w-full px-4 py-2 pr-8 rounded-md leading-tight text-lg font-extrabold cursor-pointer focus:outline-none"
+            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"
           >
             <option
               v-for="(data, leagueName) in ranked"
@@ -43,19 +43,19 @@
             >{{ data.name }}</option>
           </select>
           <div
-            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+            class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
           >
-            <svg class="text-white w-5 h-5">
+            <svg class="w-5 h-5 text-white">
               <use xlink:href="#chevron-down" />
             </svg>
           </div>
         </div>
-        <div class="ml-2 p-2 flex bg-blue-800 rounded items-center">
-          <div class="text-base uppercase font-bold">Record</div>
-          <div class="ml-2 text-green-400 font-bold">{{ selectedLeague.wins }}</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>
           <span class="mx-1">-</span>
-          <div class="text-red-400 font-bold">{{ selectedLeague.losses }}</div>
-          <div class="ml-3 text-base uppercase font-bold">Winrate</div>
+          <div class="font-bold text-red-400">{{ selectedLeague.losses }}</div>
+          <div class="ml-3 text-base font-bold uppercase">Winrate</div>
           <div
             :class="['ml-2 text-base leading-tight font-bold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
           >{{ selectedLeague.winrate }}</div>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index eae324d..8156bb1 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="relative bg-blue-900 overflow-hidden">
+  <div class="relative overflow-hidden bg-blue-900">
     <LazyBackground
       :image-source="require('@/assets/img/bg-homepage-1.jpg')"
       image-class="absolute inset-0 bg-center"
       transition-name="fade"
     ></LazyBackground>
 
-    <div class="h-screen flex flex-col items-center justify-center">
+    <div class="flex flex-col items-center justify-center h-screen">
       <div class="absolute top-0 right-0">
-        <div class="line line-top relative mr-4 mt-4 w-20 h-2"></div>
+        <div class="relative w-20 h-2 mt-4 mr-4 line line-top"></div>
       </div>
 
       <div class="absolute bottom-0 left-0">
-        <div class="line line-bottom relative ml-4 mb-4 w-20 h-2"></div>
+        <div class="relative w-20 h-2 mb-4 ml-4 line line-bottom"></div>
       </div>
 
       <div class="relative flex flex-col items-center w-full max-w-lg">
@@ -21,7 +21,7 @@
       </div>
 
       <p
-        class="pb-4 absolute horizontal-center bottom-0 text-center text-xxs text-blue-300 leading-tight"
+        class="absolute bottom-0 pb-4 leading-tight text-center text-blue-300 horizontal-center text-xxs"
       >
         LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties.
         <br />Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc.
diff --git a/client/src/views/SummonerLive.vue b/client/src/views/SummonerLive.vue
index c18566d..15b5eba 100644
--- a/client/src/views/SummonerLive.vue
+++ b/client/src/views/SummonerLive.vue
@@ -1,13 +1,13 @@
 <template>
   <div key="live-game">
     <div v-if="playing || summonerLoading">
-      <div v-if="liveLoaded" class="-mt-4 flex items-center justify-end text-blue-200 text-base">
+      <div v-if="liveLoaded" class="flex items-center justify-end -mt-4 text-base text-blue-200">
         <div>{{ gamemode.type }} {{ gamemode.name }}</div>
         <div class="mx-2">-</div>
         <div>{{ displayStartTime }}</div>
         <button
           @click="liveMatchRequest"
-          class="ml-4 bg-blue-800 px-3 py-1 text-blue-100 rounded-md shadow-md hover:bg-blue-760"
+          class="px-3 py-1 ml-4 text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760"
         >Reload</button>
       </div>
       <div v-else class="h-4"></div>
@@ -16,13 +16,13 @@
       <LiveTeam :team="enemyTeam" :ally="false" :gamemode="gamemode.name" class="mt-4" />
     </div>
     <div v-else>
-      <div class="mt-16 flex justify-center">
-        <div class="bg-gradient px-4 py-3 rounded-lg text-center text-lg text-blue-100 font-bold">
+      <div class="flex justify-center mt-16">
+        <div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient">
           <div>This summoner is not in game.</div>
           <div class="mt-2">🕊</div>
           <button
             @click="liveMatchRequest"
-            class="my-4 bg-blue-800 px-3 py-1 text-sm text-blue-100 rounded-md shadow-md hover:bg-blue-760"
+            class="px-3 py-1 my-4 text-sm text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760"
           >Reload</button>
         </div>
       </div>
diff --git a/client/src/views/SummonerRecords.vue b/client/src/views/SummonerRecords.vue
index 0e28077..24a5720 100644
--- a/client/src/views/SummonerRecords.vue
+++ b/client/src/views/SummonerRecords.vue
@@ -1,8 +1,8 @@
 <template>
   <div key="records">
     <template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
-      <div class="mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">basics</div>
-      <div class="-mx-2 flex flex-wrap">
+      <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
             color="text-blue-400"
@@ -52,7 +52,7 @@
             v-for="index in 7"
             :key="index"
             style="width: 288px; height: 146px;"
-            class="mt-6 mx-2"
+            class="mx-2 mt-6"
           >
             <content-loader
               :height="146"
@@ -66,10 +66,8 @@
           </div>
         </template>
       </div>
-      <div
-        class="mt-3 mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900"
-      >game impact</div>
-      <div class="-mx-2 flex flex-wrap">
+      <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
             color="text-yellow-400"
@@ -101,7 +99,7 @@
             v-for="index in 4"
             :key="index"
             style="width: 288px; height: 146px;"
-            class="mt-6 mx-2"
+            class="mx-2 mt-6"
           >
             <content-loader
               :height="146"
@@ -115,8 +113,8 @@
           </div>
         </template>
       </div>
-      <div class="mt-3 mx-4 text-blue-200 text-2xl border-b-2 border-blue-800 blue-900">team work</div>
-      <div class="-mx-2 flex flex-wrap">
+      <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
             color="text-blue-500"
@@ -130,7 +128,7 @@
             v-for="index in 1"
             :key="index"
             style="width: 288px; height: 146px;"
-            class="mt-6 mx-2"
+            class="mx-2 mt-6"
           >
             <content-loader
               :height="146"
@@ -146,7 +144,7 @@
       </div>
     </template>
     <template v-if="recordsLoaded && !records.maxKda">
-      <div class="mt-4 flex flex-col items-center">
+      <div class="flex flex-col items-center mt-4">
         <div>No records have been found.</div>
         <div>😕</div>
       </div>