feat: add link to live game details on overview

client/src/assets/css/base.css

@@ -42,6 +42,10 @@ button:focus {
   background: linear-gradient(180deg, #2C5282 0%, rgba(44, 82, 130, 0) 100%);
 }
 
+.bg-gradient-x {
+  background: linear-gradient(270deg, rgba(44,82,130,1) 0%, rgba(44,82,130,0) 100%);
+}
+
 .text-overflow {
   text-overflow: ellipsis;
 }

client/src/components/Global/SVGContainer.vue

@@ -1,5 +1,6 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" class="hidden">
+    <symbol id="arrow-right" 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"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></symbol>
     <symbol id="caret-down" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" /></symbol>
     <symbol id="caret-up" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></symbol>
     <symbol id="chevron-down" class="fill-current" 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" /></symbol>

client/src/components/Match/LiveMatch.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="ml-4 overflow-hidden text-sm bg-blue-800 rounded-lg">
+  <div class="flex ml-4 overflow-hidden text-sm rounded-lg">
-    <div class="relative flex justify-between w-full">
+    <div class="relative flex justify-between w-full overflow-hidden bg-blue-800 rounded-lg">
       <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">
@@ -47,6 +47,15 @@
         </li>
       </ul>
     </div>
+    <router-link
+      :to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
+      class="flex items-center pl-6 pr-4 -ml-2 text-base text-blue-200 cursor-pointer live-game-link bg-gradient-x hover:bg-blue-800 hover:text-blue-100"
+    >
+      <div class="-mt-2px">more</div>
+      <svg class="w-4 h-4 ml-1 transition-transform duration-200 ease-in-out transform">
+        <use xlink:href="#arrow-right" />
+      </svg>
+    </router-link>
   </div>
 </template>
 
@@ -95,4 +104,8 @@ export default {
   text-shadow: 3px 2px 0px rgba(49, 130, 206, 0.8),
     -3px 2px 0px rgba(229, 62, 62, 0.8);
 }
+
+.live-game-link:hover svg {
+  @apply translate-x-1
+}
 </style>