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] 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>