re-positioned 'trackme' button, added glow to avatar when tracked

src/views/Player.vue

@@ -6,9 +6,12 @@
         <div class="row g-0">
           <div class="img-container col-md-2 pt-3">
             <img
-                :src="data.playerDetails.avatar" alt="Player avatar" class="img-fluid avatar">
+                :class="data.playerDetails.tracked ? 'tracked' : ''" :src="data.playerDetails.avatar"
+                :title="data.playerDetails.tracked ? 'Tracked' : ''"
+                alt="Player avatar"
+                class="img-fluid avatar">
           </div>
-          <div class="col-md-8">
+          <div class="col-md-8 d-flex">
             <div class="card-body">
               <h3 class="card-title"><a
                   :href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
@@ -41,10 +44,8 @@
                   </td>
                 </tr>
               </table>
-              <small v-if="data.playerDetails.tracked" class="card-text text-muted">
-                Currently tracked
-              </small>
-              <div v-else class="dropdown">
+            </div>
+            <div v-if="!data.playerDetails.tracked" class="dropdown trackme-btn">
               <button
                   id="login-dropdown"
                   aria-expanded="false"
@@ -87,7 +88,6 @@
           </div>
         </div>
       </div>
-      </div>
       <div class="matches m-auto">
         <table v-if="data.matches" class="table table-borderless">
           <thead class="border-bottom">
@@ -329,6 +329,12 @@ export default {
   background: rgba(0, 0, 0, .7);
   min-width: 100%;
   min-height: 100%;
+
+  .trackme-btn {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
 }
 
 .card {
@@ -339,6 +345,10 @@ export default {
     height: 150px;
     width: 150px;
     box-shadow: 0 0 10px black;
+
+    &.tracked {
+      box-shadow: 0 0 20px 5px var(--bs-success);
+    }
   }
 
   .fas, .far {
@@ -488,6 +498,10 @@ table {
       width: 75px;
     }
   }
+  .trackme-btn {
+    top: 25px;
+  }
+
   .map {
     padding-left: 2.2rem !important;
   }