chg: [front] Usage of Alert

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>

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>

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>

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>