updated nav, colors and layout

src/views/Home.vue

@@ -4,7 +4,7 @@
       <h1 class="text-warning fw-bold mt-lg-5">CSGO<span class="text-up text-white">WTF</span></h1>
       <h3 class="mb-lg-5">Open source CSGO data platform</h3>
     </div>
-    <div class="mt-n4">
+    <div class="mt-n4 img-sub">
       <span class="text-muted">Image by <a class="text-decoration-none text-warning"
                                            href="https://unsplash.com/photos/6ou8gWpS9ns"
                                            target="_blank">Fredrick Tendong</a></span>
@@ -63,7 +63,9 @@ export default {
   setup() {
     document.title = 'Home | csgoWTF'
 
-    const recentVisited = JSON.parse(localStorage.getItem('recent-visited')).reverse()
+    const recentVisited = JSON.parse(localStorage.getItem('recent-visited'))
+    if (recentVisited !== null)
+        recentVisited.reverse()
 
     return {recentVisited, GoToPlayer}
   }
@@ -101,18 +103,24 @@ export default {
     }
   }
 
+  .img-sub {
+    font-size: .8rem;
+    text-align: left;
+    margin-left: 10px;
+  }
+
   .recent-search {
-    max-width: 900px;
+    max-width: 1100px;
     margin: 0 auto;
 
     .player-card {
       width: 180px;
       height: 75px;
-      background: var(--bs-primary);
-      border-radius: 5% 30%;
+      background: var(--bs-blue);
+      border-radius: 15% 5%;
 
       &:hover {
-        background: var(--bs-secondary);
+        background: var(--bs-primary);
         cursor: pointer;
       }
 
@@ -124,12 +132,18 @@ export default {
 
       p {
         font-size: .9rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
 
   @media screen and (max-width: 768px) {
     .recent-search {
+      max-height: 240px;
+      overflow: hidden;
+
       .player-card {
         height: 60px;
         img {

src/views/Match.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="pt-3">
-    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/ranks/' + data.avgRank + '.png')"
-                                                   alt="Rank icon"
-                                                   class="rank-icon mx-2"/></p>
+
     <div v-if="data.matchDetails" class="head row m-auto mb-3 text-center">
       <div class="m-auto">
         <img :alt="data.matchDetails.map"
@@ -10,6 +8,9 @@
              :title="data.matchDetails.map" class="map-icon">
       </div>
     </div>
+    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/ranks/' + data.avgRank + '.png')"
+                                                   alt="Rank icon"
+                                                   class="rank-icon mx-2"/></p>
   </div>
   <div class="nav">
     <ul class="list-unstyled d-flex m-auto">

src/views/Player.vue

@@ -102,6 +102,7 @@
         <tbody>
         <tr v-for="match in data.matches"
             :key="match.match_id"
+            :class="GetWinLoss(match.match_result, match.stats[0].team_id)"
             class="match"
             @click="GoToMatch(match.match_id)">
           <td class="td-map text-center">
@@ -258,6 +259,16 @@ export default {
           });
     }
 
+    const GetWinLoss = (matchResult, teamId) => {
+      if (matchResult === teamId) {
+        return 'win'
+      } else if (matchResult === 0) {
+        return 'draw'
+      } else {
+        return 'loss'
+      }
+    }
+
     watch(() => props.id, GetUser)
 
     onBeforeMount(() => {
@@ -272,6 +283,7 @@ export default {
       props,
       GetUser,
       TrackMe,
+      GetWinLoss,
       FormatDate,
       FormatFullDate,
       FormatDuration,
@@ -295,6 +307,30 @@ export default {
   }
 }
 
+.win {
+  background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
+
+  &:hover {
+    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
+  }
+}
+
+.loss {
+  background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
+
+  &:hover {
+    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
+  }
+}
+
+.draw {
+  background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
+
+  &:hover {
+    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
+  }
+}
+
 table {
   tr {
     th {
@@ -353,12 +389,22 @@ table {
 
     &:hover {
       cursor: pointer;
-      background: rgba(0, 0, 0, 0.25);
     }
   }
 }
 
 @media screen and (max-width: 768px) {
+  .win {
+    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
+  }
+
+  .loss {
+    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
+  }
+
+  .draw {
+    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
+  }
   .card {
     .avatar {
       height: 75px;