From 778ae98c7a4eccbd10acb353085e736873e53793 Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Fri, 22 Oct 2021 21:54:40 +0200
Subject: [PATCH] fixed #2

---
 src/views/Match.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/views/Match.vue b/src/views/Match.vue
index 9424454..4e5336d 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -20,16 +20,15 @@
         <span class="text-white">{{ FormatFullDate(data.matchDetails.date) }}</span>
       </p>
       <p class="text-center fs-6">
-        <span class="text-muted">Match Length:</span> {{ data.matchDetails.max_rounds === 16 ? 'Short' : 'Long' }}
-        <svg class="bi bi-circle-fill mx-2" fill="currentColor" height="8" viewBox="0 0 16 16" width="8"
-             xmlns="http://www.w3.org/2000/svg">
-          <circle cx="8" cy="8" r="8"/>
-        </svg>
+        <span class="text-muted"><i class="far fa-clock"></i></span> {{ data.matchDetails.max_rounds === 16 ? 'Short' : 'Long' }}
+        <i class="fas fa-grip-lines-vertical"></i>
         <span class="text-muted">Average Rank:</span> <img
           :alt="DisplayRank(data.avgRank)[1]"
           :src="DisplayRank(data.avgRank)[0]"
           :title="DisplayRank(data.avgRank)[1]"
           class="rank-icon"/>
+        <i class="fas fa-grip-lines-vertical"></i>
+        <a class="text-white" :href="data.matchDetails.replay_url">Demo</a>
       </p>
     </div>
   </div>
@@ -222,6 +221,24 @@ export default {
 
   .rank-icon {
     width: 60px;
+    margin-right: 3px;
+  }
+
+  .fas {
+    margin: 0 .5rem
+  }
+
+  a {
+    font-weight: 600;
+    text-decoration: none;
+    color: var(--bs-warning) !important;
+    transition: all .25s;
+    line-height: 1rem;
+
+    &:hover {
+      color: #b98d00 !important;
+      text-decoration: underline;
+     }
   }
 }