From 76ce0607f7d25d742767776552ea455500d268bc Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Thu, 25 Jul 2024 11:27:35 +0200
Subject: [PATCH] chg: [front] Usage of Alert

---
 src/assets/styled-components/modal.css |  0
 src/components/TheLiveLogs.vue         |  2 +-
 src/components/ThePlayerGrid.vue       |  2 +-
 src/components/TheScores.vue           | 11 +++--------
 src/components/elements/Alert.vue      |  9 +--------
 5 files changed, 6 insertions(+), 18 deletions(-)
 delete mode 100644 src/assets/styled-components/modal.css

diff --git a/src/assets/styled-components/modal.css b/src/assets/styled-components/modal.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/TheLiveLogs.vue b/src/components/TheLiveLogs.vue
index 40e8e4d..ce4abe0 100644
--- a/src/components/TheLiveLogs.vue
+++ b/src/components/TheLiveLogs.vue
@@ -32,7 +32,7 @@
 
 <template>
 <div>
-  <h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400">
+  <h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
     <FontAwesomeIcon :icon="faSignal"></FontAwesomeIcon>
     Live logs
   </h3>
diff --git a/src/components/ThePlayerGrid.vue b/src/components/ThePlayerGrid.vue
index c29e1a1..d00170f 100644
--- a/src/components/ThePlayerGrid.vue
+++ b/src/components/ThePlayerGrid.vue
@@ -25,7 +25,7 @@
   bg-slate-100 border-slate-300 dark:bg-slate-600 dark:border-slate-800
 ">
 
-  <h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400">
+  <h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
     <FontAwesomeIcon :icon="faUsers"></FontAwesomeIcon>
     Active Players
   </h4>
diff --git a/src/components/TheScores.vue b/src/components/TheScores.vue
index db9e6fd..69f9618 100644
--- a/src/components/TheScores.vue
+++ b/src/components/TheScores.vue
@@ -23,7 +23,7 @@
 </script>
 
 <template>
-  <h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400">
+  <h3 class="text-2xl mt-6 mb-2 font-bold text-blue-500 dark:text-blue-400 uppercase">
     <FontAwesomeIcon :icon="faGraduationCap"></FontAwesomeIcon>
     Active Exercises
   </h3>
@@ -32,15 +32,10 @@
     v-if="!hasExercises"
     class="text-slate-600 dark:text-slate-400 p-3 pl-6"
   >
-    <div class="
-      p-2 border-l-4 text-left rounded
-      dark:bg-yellow-300 dark:text-slate-900 dark:border-yellow-700 
-      bg-yellow-200 text-slate-900 border-yellow-700 
-    ">
-      <FontAwesomeIcon :icon="faWarning" class="text-yellow-700 text-lg mx-3"></FontAwesomeIcon>
+    <Alert variant="warning">
       <strong class="">No Exercise available.</strong>
       <span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span>
-    </div>
+    </Alert>
 
     <ThePlayerGrid></ThePlayerGrid>
   </div>
diff --git a/src/components/elements/Alert.vue b/src/components/elements/Alert.vue
index 22e0e9e..94d1dd8 100644
--- a/src/components/elements/Alert.vue
+++ b/src/components/elements/Alert.vue
@@ -58,13 +58,6 @@ const messages = computed(() => {
       :icon="icon"
       :class="`text-${variantClass}-700 text-lg mx-3`"
     ></FontAwesomeIcon>
-    <strong class="mr-2">{{ props.title }}</strong>
-    <p
-      class="text-slate-700 p-1 font-light whitespace-pre"
-      v-for="(message, i) in messages"
-      :key="i"
-    >
-      {{ message }}
-    </p>
+    <slot></slot>
   </div>
 </template>
\ No newline at end of file