Player & Outfit Profiles & search, chartjs bump, alert page improvements

api-request.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosInstance } from 'axios'
+import axios, { AxiosInstance, CancelTokenSource } from 'axios'
 import { CommonApiParamsInterface } from '~/interfaces/CommonApiParmsInterface'
 
 export default class ApiRequest {
@@ -13,11 +13,13 @@ export default class ApiRequest {
 
   public async get<T>(
     endpoint: string,
-    params?: CommonApiParamsInterface
+    params?: CommonApiParamsInterface,
+    cancelToken?: CancelTokenSource
   ): Promise<T> {
     return await this.client
       .get(endpoint, {
         params,
+        cancelToken: cancelToken?.token,
       })
       .then((response) => {
         // console.log('Api Client Request', { endpoint, params, response })

assets/css/tailwind.scss

@@ -60,6 +60,18 @@ body {
 .border-tint {
   border: 1px solid #5d6265;
 }
+.text-vs {
+  color: rgba(107, 70, 193, 1)
+}
+.text-nc {
+  color: rgba(43, 108, 176, 1)
+}
+.text-tr {
+  color: rgba(197, 48, 48, 1)
+}
+.text-nso {
+  color: rgba(134, 148, 167, 1)
+}
 .outofplay {
   @apply bg-gray-800;
   background: repeating-linear-gradient(
@@ -145,6 +157,9 @@ body {
     background-color: rgba(100, 130, 140, 1);
   }
 }
+.bg-tint-solid {
+  background-color: #303a40;
+}
 .bg-vs {
   background-color: rgba(85, 60, 154, 0.5);
   transition: background-color 0.25s ease-out;
@@ -391,6 +406,10 @@ select {
   @apply bg-red-600 text-white text-xs font-semibold px-1 py-0.5 rounded;
   line-height: 1.5rem;
 
+  &:hover {
+    @apply bg-red-500;
+  }
+
   &.green {
     @apply bg-green-600;
 
@@ -407,11 +426,25 @@ select {
     }
   }
 
+  &.blue {
+    @apply bg-blue-500;
+
+    &:hover {
+      @apply bg-blue-400;
+    }
+    &.border {
+      @apply border-blue-400
+    }
+  }
+
   &.gray {
-    @apply bg-gray-500;
+    @apply bg-gray-600;
 
     &:hover {
-      @apply bg-gray-600;
+      @apply bg-gray-500;
+    }
+    &.border {
+      @apply border-gray-400
     }
   }
 
@@ -586,8 +619,9 @@ a.hyperlink {
 }
 
 .tag {
-  @apply py-1 px-2 rounded-tl-sm rounded-tr-sm text-xs text-center font-bold;
+  @apply rounded-tl-sm rounded-tr-sm text-sm text-center font-bold;
   margin: -1rem -1rem 1rem;
+  line-height: 2rem;
 
   &.section {
     background-color: rgba(48, 58, 64, 1);
@@ -693,6 +727,7 @@ td.text-middle {
 .theme--dark {
   &.v-tabs > .v-tabs-bar {
     background-color: #9b2c2c !important;
+    text-transform: uppercase !important;
 
     .v-tab--disabled {
       background-color: #000 !important;

components/InfoTooltip.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-tooltip bottom>
+    <template #activator="{ on, attrs }">
+      <span v-bind="attrs" v-on="on">
+        {{ text }}
+        <font-awesome-icon :icon="['fas', icon]"></font-awesome-icon>
+      </span>
+    </template>
+    <span v-html="tooltip"></span>
+  </v-tooltip>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'InfoTooltip',
+  components: {},
+  props: {
+    tooltip: {
+      type: String,
+      default: 'Foo',
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'info-circle',
+    },
+  },
+})
+</script>