From d992d7aa54cab8025eb515cf167e8893c091a764 Mon Sep 17 00:00:00 2001
From: Lazar <lazazr@gmail.com>
Date: Sat, 16 Nov 2019 17:50:14 +0100
Subject: [PATCH 1/5] refactor: change style of searchbar component

---
 client/src/assets/css/transition.css |  4 +-
 client/src/components/SearchForm.vue | 99 +++++++++++++++-------------
 2 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/client/src/assets/css/transition.css b/client/src/assets/css/transition.css
index 08ada3c..4f2f175 100644
--- a/client/src/assets/css/transition.css
+++ b/client/src/assets/css/transition.css
@@ -27,8 +27,8 @@
   transition-timing-function: cubic-bezier(.55, .085, .68, .53);
 }
 
-.scale-70 {
-  transform: scale(.7);
+.scale-90 {
+  transform: scale(.9);
 }
 
 .scale-100 {
diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue
index e48137a..f4aaceb 100644
--- a/client/src/components/SearchForm.vue
+++ b/client/src/components/SearchForm.vue
@@ -5,18 +5,18 @@
       <input
         v-model="summoner"
         type="text"
-        :class="[elementClasses, inputClasses]"
-        class="input w-full px-2 rounded-lg outline-none pl-8 pr-16 font-bold"
+        :class="[inputClasses]"
+        class="input w-full rounded-lg outline-none pl-6 pr-32 font-bold"
       />
-      <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="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-teal-200' : dropdown}"
+          class="border 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"
-          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 dropdown text-right"
           >
             <svg
               v-if="region === selectedRegion"
@@ -59,23 +60,22 @@
           </div>
         </div>
       </transition>
-    </div>
-
-    <button
-      :class="[elementClasses, btnClasses]"
-      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"
+      <button
+        :class="[btnClasses]"
+        class="absolute right-0 z-30 btn rounded-lg h-full hover:text-teal-500"
+        type="submit"
       >
-        <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>
+        <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
+            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,31 @@ export default {
   computed: {
     btnClasses() {
       return {
-        'w-12': this.size === 'small',
-        'w-20': this.size === 'xl'
-      }
-    },
-    elementClasses() {
-      return {
-        'border-2': this.size === 'small',
-        'border-4': this.size === 'xl'
+        'w-8 mr-3': this.size === 'small',
+        'w-12': 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-4': this.size === 'xl'
+        'py-2 px-1': this.size === 'small',
+        'py-4 px-2': this.size === 'xl'
+      }
+    },
+    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 +150,28 @@ export default {
 
 <style scoped>
 .offsetDropDown {
-  top: 57px;
-  right: 1px;
+  top: 43px;
+  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, .dropdown {
+  background: rgba(23,49,79,0.60);
 }
 
-.input:focus,
-.btn:hover {
-  background: rgba(40, 94, 97, 0.75);
-  border-color: rgba(129, 230, 217, 0.9);
+.dropdown:hover {
+  background: rgba(23,49,79,0.90);
+}
+
+.input:focus{
+  background: rgba(23,49,79,0.70);
 }
 </style>

From 548d2d1a5adb29a4c2c613036c031922b2f54f22 Mon Sep 17 00:00:00 2001
From: Lazar <lazazr@gmail.com>
Date: Sat, 16 Nov 2019 18:26:37 +0100
Subject: [PATCH 2/5] refactor: change style of recent activity component

---
 client/src/components/SVGContainer.vue        |  1 +
 .../components/Summoner/RecentActivity.vue    | 80 +++++++++++--------
 2 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/client/src/components/SVGContainer.vue b/client/src/components/SVGContainer.vue
index ff8332f..73406fc 100644
--- a/client/src/components/SVGContainer.vue
+++ b/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>
diff --git a/client/src/components/Summoner/RecentActivity.vue b/client/src/components/Summoner/RecentActivity.vue
index 07a4c22..bdabed0 100644
--- a/client/src/components/Summoner/RecentActivity.vue
+++ b/client/src/components/Summoner/RecentActivity.vue
@@ -1,43 +1,53 @@
 <template>
   <div>
-    <div class="inline-block bg-gradient rounded-lg p-3">
-      <h4 class="font-bold text-base text-white text-left">Recent Activity</h4>
-      <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>
+    <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">
+        <svg class="w-4 h-4">
+          <use xlink:href="#time" />
+        </svg>
+        <span class="mx-3 text-sm font-bold uppercase">Recent Activity</span>
+        <svg class="w-4 h-4">
+          <use xlink:href="#time" />
+        </svg>
       </div>
-      <div class="mt-1 flex">
-        <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>
+      <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>
         </div>
-        <div
-          class="ml-2 flex flex-col flex-wrap"
-          style="width: calc(20px * 15); height: calc(20px * 7)"
-        >
-          <Dropdown 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"
-              />
-            </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 class="mt-1 flex">
+          <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>
+          </div>
+          <div
+            class="ml-1 flex flex-col flex-wrap"
+            style="width: calc(20px * 15); height: calc(20px * 7)"
+          >
+            <Dropdown 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"
+                />
+              </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>
-          </Dropdown>
+              </template>
+            </Dropdown>
+          </div>
         </div>
       </div>
     </div>

From ffde77ca490aca7c443fdbd341a6797640f2ee03 Mon Sep 17 00:00:00 2001
From: Lazar <lazazr@gmail.com>
Date: Sat, 16 Nov 2019 20:21:28 +0100
Subject: [PATCH 3/5] refactor: change summoner's info layout

---
 .../components/Summoner/SummonerLoader.vue    |  6 +-
 .../components/Summoner/SummonerRanked.vue    | 86 ++++++++-----------
 client/src/views/Summoner.vue                 |  8 +-
 3 files changed, 45 insertions(+), 55 deletions(-)

diff --git a/client/src/components/Summoner/SummonerLoader.vue b/client/src/components/Summoner/SummonerLoader.vue
index 6020e21..415a91b 100644
--- a/client/src/components/Summoner/SummonerLoader.vue
+++ b/client/src/components/Summoner/SummonerLoader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="mt-4 text-white pb-12">
-    <div class="flex justify-between px-12">
+  <div class="text-white pb-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"
diff --git a/client/src/components/Summoner/SummonerRanked.vue b/client/src/components/Summoner/SummonerRanked.vue
index c2148ed..80df9a8 100644
--- a/client/src/components/Summoner/SummonerRanked.vue
+++ b/client/src/components/Summoner/SummonerRanked.vue
@@ -1,55 +1,45 @@
 <template>
-  <div class="ml-6 leading-none">
-    <div class="relative inline-block text-white">
-      <select
-        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 class="ml-2 leading-none flex">
+    <div
+      class="w-24 h-24"
+      :style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
+    ></div>
+    <div class="flex flex-col justify-center">
+      <div class="flex items-center">
+        <div class="text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.fullRank }}</div>
+        <div class="ml-4 text-3xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
       </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="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
-        ></div>
-        <div class="ml-2 text-xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
-      </div>
-      <div class="flex justify-between w-1/2">
-        <div class="mt-2 font-extrabold uppercase leading-none">
-          <div class="text-teal-500 text-base">Record</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 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="mt-2 font-extrabold">
-          <div class="text-teal-500 text-base uppercase">Winrate</div>
-          <div class="mt-2 text-xl leading-tight">{{ selectedLeague.winrate }}</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', parseFloat(selectedLeague.winrate) == 50 ? 'text-blue-100' : '' ]">{{ selectedLeague.winrate }}</div>
         </div>
       </div>
     </div>
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index 5fec7e6..e31ddab 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -19,8 +19,8 @@
       </header>
 
       <template v-if="summonerFound">
-        <div class="mt-4 text-white pb-12">
-          <div class="flex justify-between px-12">
+        <div class="text-white pb-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 />

From 74cdf54eec4fe57816be4ed88d63c2b3a10d17cf Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sun, 17 Nov 2019 16:10:00 +0100
Subject: [PATCH 4/5] refactor: edit Summoner Ranked iconplacement

---
 .../components/Summoner/SummonerRanked.vue    | 55 +++++++++++++++----
 client/tailwind.config.js                     |  1 +
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Summoner/SummonerRanked.vue b/client/src/components/Summoner/SummonerRanked.vue
index 80df9a8..a5c09c2 100644
--- a/client/src/components/Summoner/SummonerRanked.vue
+++ b/client/src/components/Summoner/SummonerRanked.vue
@@ -1,13 +1,22 @@
 <template>
-  <div class="ml-2 leading-none flex">
-    <div
-      class="w-24 h-24"
-      :style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
-    ></div>
-    <div class="flex flex-col justify-center">
+  <div class="ml-2 leading-none flex items-center">
+    <div class="ml-1 flex flex-col justify-center">
       <div class="flex items-center">
-        <div class="text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.fullRank }}</div>
-        <div class="ml-4 text-3xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
+        <div
+          :style="[borderLeaguePoints, {backgroundColor: colorBorder}]"
+          class="percentage-circle relative w-12 h-12 flex items-center justify-center rounded-full"
+        >
+          <div class="relative w-11 h-11 p-1 bg-blue-900 rounded-full">
+            <div
+              class="h-full bg-center bg-cover"
+              :style="{backgroundImage: `url(${selectedLeague.rankImgLink})`}"
+            ></div>
+          </div>
+        </div>
+        <div
+          class="ml-2 text-teal-500 text-3xl uppercase font-extrabold"
+        >{{ 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">
@@ -36,10 +45,12 @@
         <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>
+          <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', parseFloat(selectedLeague.winrate) == 50 ? 'text-blue-100' : '' ]">{{ selectedLeague.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>
@@ -56,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]
     }
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index dd53b0c..a77b989 100644
--- a/client/tailwind.config.js
+++ b/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',

From 3c99c818ec8cad30dce2f2232403e103f23a1f35 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sun, 17 Nov 2019 16:10:27 +0100
Subject: [PATCH 5/5] refactor: change color of the searchbar

---
 client/src/assets/css/base.css       |  4 ++++
 client/src/components/SearchForm.vue | 30 ++++++++++------------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/client/src/assets/css/base.css b/client/src/assets/css/base.css
index c40c309..20bcde1 100644
--- a/client/src/assets/css/base.css
+++ b/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);
+}
diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue
index f4aaceb..250a380 100644
--- a/client/src/components/SearchForm.vue
+++ b/client/src/components/SearchForm.vue
@@ -6,13 +6,13 @@
         v-model="summoner"
         type="text"
         :class="[inputClasses]"
-        class="input w-full rounded-lg outline-none pl-6 pr-32 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-12">
         <div
           @click="dropdown = !dropdown"
-          :class="{'border-2 border-teal-200' : dropdown}"
-          class="border 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"
+          :class="{'border-teal-200': dropdown}"
+          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
@@ -35,7 +35,7 @@
         leave-to-class="opacity-0 scale-90"
       >
         <div
-          v-if="dropdown"
+          v-show="dropdown"
           :class="[dropdownClasses]"
           class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer"
         >
@@ -44,7 +44,7 @@
             :key="region"
             @click="selectedRegion = region"
             :class="classRegions(index)"
-            class="relative pr-2 pl-5 py-1 text-xs dropdown text-right"
+            class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 hover:bg-blue-800"
           >
             <svg
               v-if="region === selectedRegion"
@@ -62,11 +62,11 @@
       </transition>
       <button
         :class="[btnClasses]"
-        class="absolute right-0 z-30 btn rounded-lg h-full hover:text-teal-500"
+        class="absolute right-0 z-30 h-full hover:text-teal-200"
         type="submit"
       >
         <svg
-          class="absolute vertical-center horizontal-center w-4 h-4 fill-current "
+          class="absolute vertical-center horizontal-center w-4 h-4 fill-current"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 512 512"
         >
@@ -122,7 +122,9 @@ export default {
     inputClasses() {
       return {
         'py-2 px-1': this.size === 'small',
-        'py-4 px-2': this.size === 'xl'
+        'py-4 px-2': this.size === 'xl',
+        'input-color': !this.dropdown,
+        'bg-blue-1000': this.dropdown
       }
     },
     dropdownClasses() {
@@ -162,16 +164,4 @@ export default {
 .offsetIcon {
   left: 4px;
 }
-
-.input, .dropdown {
-  background: rgba(23,49,79,0.60);
-}
-
-.dropdown:hover {
-  background: rgba(23,49,79,0.90);
-}
-
-.input:focus{
-  background: rgba(23,49,79,0.70);
-}
 </style>