Merge pull request #1 from vkaelin/dev

Update Global Layout

client/src/assets/css/base.css

@@ -54,3 +54,7 @@ button:focus {
   );
   box-shadow: rgba(235, 248, 255, 0.1) 0px -1px inset;
 }
+
+.input-color {
+  background: rgba(23, 49, 79, 0.6);
+}

client/src/assets/css/transition.css

@@ -27,8 +27,8 @@
   transition-timing-function: cubic-bezier(.55, .085, .68, .53);
 }
 
-.scale-70 {
+.scale-90 {
-  transform: scale(.7);
+  transform: scale(.9);
 }
 
 .scale-100 {

client/src/components/SVGContainer.vue

@@ -6,5 +6,6 @@
     <symbol id="award" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M97.12 362.63c-8.69-8.69-4.16-6.24-25.12-11.85-9.51-2.55-17.87-7.45-25.43-13.32L1.2 448.7c-4.39 10.77 3.81 22.47 15.43 22.03l52.69-2.01L105.56 507c8 8.44 22.04 5.81 26.43-4.96l52.05-127.62c-10.84 6.04-22.87 9.58-35.31 9.58-19.5 0-37.82-7.59-51.61-21.37zM382.8 448.7l-45.37-111.24c-7.56 5.88-15.92 10.77-25.43 13.32-21.07 5.64-16.45 3.18-25.12 11.85-13.79 13.78-32.12 21.37-51.62 21.37-12.44 0-24.47-3.55-35.31-9.58L252 502.04c4.39 10.77 18.44 13.4 26.43 4.96l36.25-38.28 52.69 2.01c11.62.44 19.82-11.27 15.43-22.03zM263 340c15.28-15.55 17.03-14.21 38.79-20.14 13.89-3.79 24.75-14.84 28.47-28.98 7.48-28.4 5.54-24.97 25.95-45.75 10.17-10.35 14.14-25.44 10.42-39.58-7.47-28.38-7.48-24.42 0-52.83 3.72-14.14-.25-29.23-10.42-39.58-20.41-20.78-18.47-17.36-25.95-45.75-3.72-14.14-14.58-25.19-28.47-28.98-27.88-7.61-24.52-5.62-44.95-26.41-10.17-10.35-25-14.4-38.89-10.61-27.87 7.6-23.98 7.61-51.9 0-13.89-3.79-28.72.25-38.89 10.61-20.41 20.78-17.05 18.8-44.94 26.41-13.89 3.79-24.75 14.84-28.47 28.98-7.47 28.39-5.54 24.97-25.95 45.75-10.17 10.35-14.15 25.44-10.42 39.58 7.47 28.36 7.48 24.4 0 52.82-3.72 14.14.25 29.23 10.42 39.59 20.41 20.78 18.47 17.35 25.95 45.75 3.72 14.14 14.58 25.19 28.47 28.98C104.6 325.96 106.27 325 121 340c13.23 13.47 33.84 15.88 49.74 5.82a39.676 39.676 0 0 1 42.53 0c15.89 10.06 36.5 7.65 49.73-5.82zM97.66 175.96c0-53.03 42.24-96.02 94.34-96.02s94.34 42.99 94.34 96.02-42.24 96.02-94.34 96.02-94.34-42.99-94.34-96.02z"></path></symbol>
     <symbol id="gold" class="fill-current" viewBox="0 0 15 15" fill="fill-current"><title>gold</title><path d="M14 5.63324C14 3.57057 11.7157 1.8999 8.89286 1.8999C6.07 1.8999 3.78571 3.57057 3.78571 5.63324C3.7765 5.76685 3.7765 5.90095 3.78571 6.03457C2.12357 6.65057 1 7.90124 1 9.36657C1 11.4292 3.28429 13.0999 6.10714 13.0999C8.93 13.0999 11.2143 11.4292 11.2143 9.36657C11.2235 9.23295 11.2235 9.09885 11.2143 8.96524C12.8486 8.34924 14 7.08924 14 5.63324ZM6.10714 11.3172C4.315 11.3172 2.85714 10.2999 2.85714 8.94657C2.90787 8.55215 3.06303 8.17865 3.3064 7.86507C3.54978 7.55149 3.87244 7.30934 4.24071 7.1639C4.77538 7.8881 5.47991 8.46817 6.29158 8.85247C7.10324 9.23677 7.99686 9.41338 8.89286 9.36657H9.30143C9.03214 10.4679 7.71357 11.3172 6.10714 11.3172Z" /></symbol>
     <symbol id="rank-silver" viewBox="0 0 32 32"><title>rank-silver</title><path fill="#80989d" d="M16 6.667c0 0 0.986 1.479 2.534 3.165-0.781-0.321-1.637-0.498-2.534-0.498s-1.753 0.177-2.534 0.498c1.548-1.686 2.534-3.165 2.534-3.165z"></path><path fill="#80989d" d="M22.667 16c0-2.22-1.085-4.186-2.753-5.398 1.976-0.343 6.753-1.935 6.753-1.935 0 1.761-1.034 6.626-4.013 7.761 0.009-0.141 0.013-0.284 0.013-0.428z"></path><path fill="#80989d" d="M19.308 21.789c1.752-1.003 3.005-2.78 3.295-4.864 1.185 0.187 2.73 0.408 2.73 0.408s-1.135 3.406-6.025 4.456z"></path><path fill="#80989d" d="M16 22.667c0.617 0 1.215-0.084 1.782-0.241-0.406 0.781-1.282 2.407-1.782 2.907-0.5-0.5-1.376-2.127-1.782-2.907 0.567 0.157 1.165 0.241 1.782 0.241z"></path><path fill="#80989d" d="M9.392 16.89c0.28 2.1 1.537 3.89 3.3 4.899-4.89-1.050-6.025-4.456-6.025-4.456s1.554-0.25 2.726-0.444z"></path><path fill="#80989d" d="M9.333 16c0 0.129 0.004 0.258 0.011 0.386-2.977-1.324-4.011-6.91-4.011-7.719 0 0 4.777 1.592 6.753 1.935-1.669 1.212-2.753 3.178-2.753 5.398z"></path><path fill="#80989d" d="M20 16c0 2.209-1.791 4-4 4s-4-1.791-4-4c0-2.209 1.791-4 4-4s4 1.791 4 4z"></path></symbol>
+    <symbol id="time" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></symbol>
   </svg>
 </template>

client/src/components/SearchForm.vue

@@ -5,18 +5,18 @@
       <input
         v-model="summoner"
         type="text"
-        :class="[elementClasses, inputClasses]"
+        :class="[inputClasses]"
-        class="input w-full px-2 rounded-lg outline-none pl-8 pr-16 font-bold"
+        class="w-full rounded-lg outline-none pl-6 pr-32 font-bold focus:bg-blue-1000"
       />
-      <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-2">
+      <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-12">
         <div
           @click="dropdown = !dropdown"
-          :class="{'bg-teal-600' : dropdown}"
+          :class="{'border-teal-200': dropdown}"
-          class="cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
+          class="border-2 border-transparent cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
         >
           <span class="selected font-bold select-none">{{ selectedRegion }}</span>
           <svg
-            class="ml-1 w-4 h-4 fill-current"
+            class="ml-1 -mr-1 w-4 h-4 fill-current"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 320 512"
           >
@@ -29,21 +29,22 @@
       <transition
         enter-active-class="transition-all transition-fastest ease-out-quad"
         leave-active-class="transition-all transition-faster ease-in-quad"
-        enter-class="opacity-0 scale-70"
+        enter-class="opacity-0 scale-90"
         enter-to-class="opacity-100 scale-100"
         leave-class="opacity-100 scale-100"
-        leave-to-class="opacity-0 scale-70"
+        leave-to-class="opacity-0 scale-90"
       >
         <div
-          v-if="dropdown"
+          v-show="dropdown"
-          class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer mr-2 offsetDropDown"
+          :class="[dropdownClasses]"
+          class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer"
         >
           <div
             v-for="(region, index) in regions"
             :key="region"
             @click="selectedRegion = region"
             :class="classRegions(index)"
-            class="relative px-4b py-1 text-xs bg-teal-600 hover:bg-teal-500"
+            class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 hover:bg-blue-800"
           >
             <svg
               v-if="region === selectedRegion"
@@ -59,23 +60,22 @@
           </div>
         </div>
       </transition>
-    </div>
+      <button
-
+        :class="[btnClasses]"
-    <button
+        class="absolute right-0 z-30 h-full hover:text-teal-200"
-      :class="[elementClasses, btnClasses]"
+        type="submit"
-      class="input btn rounded-lg ml-2 relative"
-      type="submit"
-    >
-      <svg
-        class="absolute vertical-center horizontal-center w-4 h-4 fill-current"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 512 512"
       >
-        <path
+        <svg
-          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+          class="absolute vertical-center horizontal-center w-4 h-4 fill-current"
-        />
+          xmlns="http://www.w3.org/2000/svg"
-      </svg>
+          viewBox="0 0 512 512"
-    </button>
+        >
+          <path
+            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+          />
+        </svg>
+      </button>
+    </div>
   </form>
 </template>
 
@@ -110,32 +110,33 @@ export default {
   computed: {
     btnClasses() {
       return {
-        'w-12': this.size === 'small',
+        'w-8 mr-3': this.size === 'small',
-        'w-20': this.size === 'xl'
+        'w-12': this.size === 'xl'
-      }
-    },
-    elementClasses() {
-      return {
-        'border-2': this.size === 'small',
-        'border-4': this.size === 'xl'
       }
     },
     formClasses() {
       return {
-        'max-w-lg': this.size === 'small',
+        'max-w-md': this.size === 'small',
       }
     },
     inputClasses() {
       return {
-        'py-2': this.size === 'small',
+        'py-2 px-1': this.size === 'small',
-        'py-4': this.size === 'xl'
+        'py-4 px-2': this.size === 'xl',
+        'input-color': !this.dropdown,
+        'bg-blue-1000': this.dropdown
+      }
+    },
+    dropdownClasses() {
+      return {
+        'offsetDropDown': this.size === 'small',
+        'offsetDropDownXl': this.size === 'xl'
       }
     }
   },
   methods: {
     classRegions(index) {
       return {
-        'rounded-t': index === 0,
         'rounded-b': index === this.regions.length - 1
       }
     },
@@ -151,22 +152,16 @@ export default {
 
 <style scoped>
 .offsetDropDown {
-  top: 57px;
+  top: 43px;
-  right: 1px;
+  right: 48px;
+}
+
+.offsetDropDownXl {
+  top: 58px;
+  right: 50px;
 }
 
 .offsetIcon {
   left: 4px;
 }
-
-.input {
-  border-color: rgba(129, 230, 217, 0.7);
-  background: rgba(40, 94, 97, 0.35);
-}
-
-.input:focus,
-.btn:hover {
-  background: rgba(40, 94, 97, 0.75);
-  border-color: rgba(129, 230, 217, 0.9);
-}
 </style>

client/src/components/Summoner/RecentActivity.vue

@@ -1,43 +1,53 @@
 <template>
   <div>
-    <div class="inline-block bg-gradient rounded-lg p-3">
+    <div class="inline-block bg-blue-800 rounded-lg">
-      <h4 class="font-bold text-base text-white text-left">Recent Activity</h4>
+      <div class="relative heading flex justify-center items-center py-2 rounded-t-lg text-blue-200">
-      <div class="flex">
+        <svg class="w-4 h-4">
-        <span class="ml-12 text-blue-200 font-semibold text-xs">{{ gridDays[11].month }}</span>
+          <use xlink:href="#time" />
-        <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[42].month }}</span>
+        </svg>
-        <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[73].month }}</span>
+        <span class="mx-3 text-sm font-bold uppercase">Recent Activity</span>
-        <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[104].month }}</span>
+        <svg class="w-4 h-4">
+          <use xlink:href="#time" />
+        </svg>
       </div>
-      <div class="mt-1 flex">
+      <div class="p-3 pt-1">
-        <div class="flex flex-col">
+        <div class="flex">
-          <span class="text-blue-200 font-semibold text-xs leading-snug">Mo</span>
+          <span class="ml-12 text-blue-200 font-semibold text-xs">{{ gridDays[11].month }}</span>
-          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Tu</span>
+          <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[42].month }}</span>
-          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">We</span>
+          <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[73].month }}</span>
-          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Th</span>
+          <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[104].month }}</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>
         </div>
-        <div
+        <div class="mt-1 flex">
-          class="ml-2 flex flex-col flex-wrap"
+          <div class="flex flex-col">
-          style="width: calc(20px * 15); height: calc(20px * 7)"
+            <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>
-          <Dropdown v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">We</span>
-            <template v-slot:trigger>
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Th</span>
-              <div
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Fr</span>
-                :class="[getCaseMargin(index), getCaseColor(day.matches)]"
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Sa</span>
-                class="ml-1 w-4 h-4 cursor-pointer"
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Su</span>
-              />
+          </div>
-            </template>
+          <div
-            <template v-slot:default>
+            class="ml-1 flex flex-col flex-wrap"
-              <div class="px-2 text-white text-center text-xs">
+            style="width: calc(20px * 15); height: calc(20px * 7)"
-                <div>{{ day.date }}</div>
+          >
-                <div>
+            <Dropdown v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
-                  <span class="font-bold text-teal-400">{{ day.matches }}</span> game(s)
+              <template v-slot:trigger>
+                <div
+                  :class="[getCaseMargin(index), getCaseColor(day.matches)]"
+                  class="ml-1 w-4 h-4 cursor-pointer"
+                />
+              </template>
+              <template v-slot:default>
+                <div class="px-2 text-white text-center text-xs">
+                  <div>{{ day.date }}</div>
+                  <div>
+                    <span class="font-bold text-teal-400">{{ day.matches }}</span> game(s)
+                  </div>
                 </div>
-              </div>
+              </template>
-            </template>
+            </Dropdown>
-          </Dropdown>
+          </div>
         </div>
       </div>
     </div>

client/src/components/Summoner/SummonerLoader.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="mt-4 text-white pb-12">
+  <div class="text-white pb-12">
-    <div class="flex justify-between px-12">
+    <div class="flex justify-between">
       <div style="width: 517px; height: 272px;">
         <content-loader
           :height="272"
@@ -150,7 +150,7 @@
       </div>
     </div>
 
-    <div class="mt-12 text-center">
+    <div class="mt-4 text-center">
       <div
         v-for="index in 10"
         :key="index"

client/src/components/Summoner/SummonerRanked.vue

@@ -1,55 +1,56 @@
 <template>
-  <div class="ml-6 leading-none">
+  <div class="ml-2 leading-none flex items-center">
-    <div class="relative inline-block text-white">
+    <div class="ml-1 flex flex-col justify-center">
-      <select
+      <div class="flex items-center">
-        v-model="selectedKey"
-        class="block appearance-none bg-select w-full px-4 py-2 pr-8 rounded-md leading-tight text-lg font-extrabold cursor-pointer focus:outline-none"
-      >
-        <option
-          v-for="(data, leagueName) in ranked"
-          :key="leagueName"
-          :value="leagueName"
-        >{{ data.name }}</option>
-      </select>
-      <div
-        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
-      >
-        <svg
-          class="text-white fill-current h-5 w-5"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-        >
-          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-        </svg>
-      </div>
-    </div>
-
-    <div class="mt-1 text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.fullRank }}</div>
-    <div class="mt-4 flex items-start bg-gradient px-4 py-3 rounded-lg" style="width: 430px;">
-      <div class="flex items-center w-1/2">
         <div
-          class="w-20 h-20 bg-blue-1000"
+          :style="[borderLeaguePoints, {backgroundColor: colorBorder}]"
-          :style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
+          class="percentage-circle relative w-12 h-12 flex items-center justify-center rounded-full"
-        ></div>
+        >
-        <div class="ml-2 text-xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
+          <div class="relative w-11 h-11 p-1 bg-blue-900 rounded-full">
-      </div>
+            <div
-      <div class="flex justify-between w-1/2">
+              class="h-full bg-center bg-cover"
-        <div class="mt-2 font-extrabold uppercase leading-none">
+              :style="{backgroundImage: `url(${selectedLeague.rankImgLink})`}"
-          <div class="text-teal-500 text-base">Record</div>
+            ></div>
-          <div class="flex">
-            <div class="mt-2 text-sm leading-tight text-right">
-              <div>{{ selectedLeague.wins }}</div>
-              <div>{{ selectedLeague.losses }}</div>
-            </div>
-            <div class="ml-2 mt-2 text-sm leading-tight">
-              <div class="text-teal-500">Wins</div>
-              <div class="text-red-300">Losses</div>
-            </div>
           </div>
         </div>
-        <div class="mt-2 font-extrabold">
+        <div
-          <div class="text-teal-500 text-base uppercase">Winrate</div>
+          class="ml-2 text-teal-500 text-3xl uppercase font-extrabold"
-          <div class="mt-2 text-xl leading-tight">{{ selectedLeague.winrate }}</div>
+        >{{ selectedLeague.fullRank }}</div>
+        <div class="ml-4 text-2xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
+      </div>
+      <div class="flex mt-2 items-center">
+        <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"
+          >
+            <option
+              v-for="(data, leagueName) in ranked"
+              :key="leagueName"
+              :value="leagueName"
+            >{{ data.name }}</option>
+          </select>
+          <div
+            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+          >
+            <svg
+              class="text-white fill-current h-5 w-5"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+            >
+              <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+            </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>
+          <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="['ml-2 text-base leading-tight font-bold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
+          >{{ selectedLeague.winrate }}</div>
         </div>
       </div>
     </div>
@@ -66,11 +67,35 @@ export default {
   },
   data() {
     return {
+      rankColors: {
+        'iron': '#574D4F',
+        'bronze': '#8C523A',
+        'silver': '#80989D',
+        'gold': '#CD8837',
+        'platinum': '#4E9996',
+        'diamond': '#576BCE',
+        'master': '#9D48E0',
+        'grandmaster': '#CD4545',
+        'challenger': '#F4C874',
+      },
       selectedKey: Object.keys(this.ranked)[0]
     }
   },
 
   computed: {
+    borderLeaguePoints() {
+      const degrees = (this.selectedLeague.leaguePoints <= 100 ? this.selectedLeague.leaguePoints : 100) * 360 / 100
+      const linearGradient = degrees <= 180 ? `linear-gradient(${90 + degrees}deg, transparent 50%, #2c5282 50%)` : `linear-gradient(${degrees - 90}deg, transparent 50%, ${this.colorBorder} 50%)`
+      return {
+        backgroundImage: `${linearGradient}, linear-gradient(90deg, #2c5282 50%, transparent 50%)`
+      }
+    },
+    colorBorder() {
+      if (!this.selectedLeague.tier) {
+        return 'transparent'
+      }
+      return this.rankColors[this.selectedLeague.tier.toLowerCase()]
+    },
     selectedLeague() {
       return this.ranked[this.selectedKey]
     }

client/src/views/Summoner.vue

@@ -19,8 +19,8 @@
       </header>
 
       <template v-if="summonerFound">
-        <div class="mt-4 text-white pb-12">
+        <div class="text-white pb-12">
-          <div class="flex justify-between px-12">
+          <div class="flex justify-between items-center">
             <div>
               <div class="flex items-center">
                 <h1 class="text-4xl font-extrabold uppercase">
@@ -29,7 +29,7 @@
                 </h1>
                 <div
                   v-if="playing"
-                  class="ml-4 flex items-center px-3 py-1 rounded-full bg-teal-800 border border-teal-400"
+                  class="ml-4 mt-2 flex items-center px-3 py-1 rounded-full bg-teal-800 border border-teal-400"
                 >
                   <div class="playing-dot bg-teal-flashy w-2 h-2 rounded-full"></div>
                   <span class="ml-2 text-teal-flashy font-semibold text-sm">In Game</span>
@@ -60,7 +60,7 @@
             </div>
           </div>
 
-          <div class="mt-12 text-center flex">
+          <div class="mt-3 text-center flex">
             <div class="mt-4 w-3/12">
               <SummonerStats />
               <SummonerMates />

client/tailwind.config.js

@@ -142,6 +142,7 @@ module.exports = {
       '6': '1.5rem',
       '8': '2rem',
       '10': '2.5rem',
+      '11': '2.75rem',
       '12': '3rem',
       '16': '4rem',
       '20': '5rem',