From cd28a560cca926c929f31f2442a3573197ea1549 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Mon, 15 Jul 2024 12:15:36 +0200
Subject: [PATCH] chg: [front] Small UI improvements

---
 src/components/TheLiveLogs.vue   |  6 +++---
 src/components/ThePlayerGrid.vue | 12 ++++++++++++
 src/components/TheScores.vue     | 14 ++------------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/TheLiveLogs.vue b/src/components/TheLiveLogs.vue
index 5912932..bfcb1df 100644
--- a/src/components/TheLiveLogs.vue
+++ b/src/components/TheLiveLogs.vue
@@ -2,7 +2,7 @@
   import { ref, watch, computed } from "vue"
   import { notifications, userCount, notificationCounter, notificationAPICounter, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faSignal, faCloud, faCog, faUser, faCircle } from '@fortawesome/free-solid-svg-icons'
+  import { faSignal, faCloud, faCog, faUsers, faCircle } from '@fortawesome/free-solid-svg-icons'
   import TheLiveLogsActivityGraphVue from "./TheLiveLogsActivityGraph.vue";
 
 
@@ -18,7 +18,7 @@
   })
 
   function getClassFromResponseCode(response_code) {
-    if (String(response_code).startsWith('2')) {
+    if (String(response_code).startsWith('2') || response_code == 302) {
       return 'text-green-500'
     } else if (String(response_code).startsWith('5')) {
       return 'text-red-600'
@@ -39,7 +39,7 @@
   <div class="mb-2 flex flex-wrap gap-x-3">
     <span class="rounded-lg py-1 px-2 dark:bg-sky-700 bg-sky-400 text-slate-800 dark:text-slate-200">
       <span class="mr-1">
-        <FontAwesomeIcon :icon="faUser" size="sm"></FontAwesomeIcon>
+        <FontAwesomeIcon :icon="faUsers" size="sm"></FontAwesomeIcon>
         Players:
       </span>
       <span class="font-bold">{{ userCount }}</span>
diff --git a/src/components/ThePlayerGrid.vue b/src/components/ThePlayerGrid.vue
index 99bc327..4ef2c53 100644
--- a/src/components/ThePlayerGrid.vue
+++ b/src/components/ThePlayerGrid.vue
@@ -2,6 +2,7 @@
   import { ref, computed } from "vue";
   import { progresses, userCount } from "@/socket";
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import { faUsers } from '@fortawesome/free-solid-svg-icons'
   import { darkModeEnabled } from "@/settings.js"
   import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
 
@@ -19,6 +20,16 @@
 </script>
 
 <template>
+<div class="
+  mt-2 px-2 pt-1 pb-2 rounded border
+  bg-slate-600 border-slate-800
+">
+
+  <h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400">
+    <FontAwesomeIcon :icon="faUsers"></FontAwesomeIcon>
+    Active Players
+  </h4>
+
   <div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
     <span
       v-for="(progress) in sortedProgress"
@@ -43,4 +54,5 @@
       </span>
     </span>
   </div>
+</div>
 </template>
\ No newline at end of file
diff --git a/src/components/TheScores.vue b/src/components/TheScores.vue
index ec77ca5..db9e6fd 100644
--- a/src/components/TheScores.vue
+++ b/src/components/TheScores.vue
@@ -2,7 +2,7 @@
   import { ref, computed } from "vue";
   import { active_exercises as exercises } from "@/socket";
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter, faWarning, faUser } from '@fortawesome/free-solid-svg-icons'
+  import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter, faWarning } from '@fortawesome/free-solid-svg-icons'
   import TheScoreTable from "./scoreViews/TheScoreTable.vue"
   import TheFullScreenScoreGrid from "./scoreViews/TheFullScreenScoreGrid.vue"
   import ThePlayerGrid from "./ThePlayerGrid.vue"
@@ -42,17 +42,7 @@
       <span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span>
     </div>
 
-    <div class="
-      mt-2 px-2 py-1 rounded border
-      bg-slate-600 border-slate-800
-    ">
-      <h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400">
-        <FontAwesomeIcon :icon="faUser"></FontAwesomeIcon>
-        Active Players
-      </h4>
-
-      <ThePlayerGrid></ThePlayerGrid>
-    </div>
+    <ThePlayerGrid></ThePlayerGrid>
   </div>
 
   <template