From 97123a2b0a3a494149880295fa9ff21d5b34bd63 Mon Sep 17 00:00:00 2001
From: Mawe <MalteWerner.Service@outlook.de>
Date: Sat, 11 May 2024 14:45:44 +0200
Subject: [PATCH] tiny improvements on league UI elements

---
 components/League/GameCard.vue   | 20 +++++++++++++-------
 components/League/SeasonCard.vue |  2 +-
 pages/league/seasons/index.vue   | 10 +++++++---
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/components/League/GameCard.vue b/components/League/GameCard.vue
index cd1910e..40bcb19 100644
--- a/components/League/GameCard.vue
+++ b/components/League/GameCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card-container">
-    <div v-if="isPending" class="card-flash accent"></div>
+    <div v-if="isPending" class="accent" :class="attentionActive ? 'card-flash' : ''"></div>
 
     <v-card
       class="game-card"
@@ -90,6 +90,7 @@
     data: () => ({
       countdownTimerTextOrSecondsLeft: null,
       updateIntervalId: null,
+      attentionActive: false,
     }),
     computed: {
       isPending() {
@@ -97,8 +98,8 @@
       },
     },
     mounted() {
-      this.updateIntervalId = setInterval(() => this.updateTimerText(), 1000)
-      this.updateTimerText()
+      this.updateIntervalId = setInterval(() => this.updateTimer(), 1000)
+      this.updateTimer()
     },
     beforeDestroy() {
       if (this.updateIntervalId !== null) {
@@ -107,27 +108,32 @@
     },
     methods: {
       formatTime,
-      updateTimerText() {
+      updateTimer() {
         if (!this.playableUntil) {
           this.countdownTimerTextOrSecondsLeft = null
+          this.attentionActive = false
           return
         }
-
+        
         const secondsLeft = (this.playableUntil - Date.now()) / 1000
-
+        
         // Only show countdown for <48h
         if (secondsLeft > 48 * 3600) {
           this.countdownTimerTextOrSecondsLeft = null
+          this.attentionActive = false
           return
         }
+        
+        this.attentionActive = true
 
         if (secondsLeft <= 0) {
           this.countdownTimerTextOrSecondsLeft = 'Season will continue any second...'
           return
         }
-
+        
         this.countdownTimerTextOrSecondsLeft = secondsLeft
       },
+
     },
   }
 </script>
diff --git a/components/League/SeasonCard.vue b/components/League/SeasonCard.vue
index 6403aa2..d69180f 100644
--- a/components/League/SeasonCard.vue
+++ b/components/League/SeasonCard.vue
@@ -81,7 +81,7 @@
     position: relative;
     overflow: hidden;
     transition: transform 300ms;
-    border: 1px solid rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.08);
     will-change: transform;
 
     &:hover {
diff --git a/pages/league/seasons/index.vue b/pages/league/seasons/index.vue
index 37ce55a..5f6efd8 100644
--- a/pages/league/seasons/index.vue
+++ b/pages/league/seasons/index.vue
@@ -11,9 +11,9 @@
         FAQ / Help
       </v-btn>
     </div>
-
+    
     <template v-if="pendingGames.length > 0">
-      <h2 class="mt-5 mb-2">Your pending games</h2>
+      <h2 class="mt-5 mb-2">Your Pending Games</h2>
 
       <div class="seasons-container">
         <league-game-card
@@ -29,7 +29,11 @@
     </template>
 
     <template v-if="categorizedSeasons.active.length > 0 || categorizedSeasons.upcoming.length > 0">
-      <h2 class="mt-5 mb-2">Active & Upcoming Seasons</h2>
+      <h2 class="mt-5 mb-2">
+        <template v-if="categorizedSeasons.active.length > 0 && categorizedSeasons.upcoming.length > 0">Active & Upcoming Seasons</template>
+        <template v-else-if="categorizedSeasons.active.length > 0">Active Seasons</template>
+        <template v-else>Upcoming Seasons</template>
+      </h2>
 
       <div class="seasons-container">
         <league-season-card