From f72a054fe87ef2bce4cc9341ec024a5a9a2edbd3 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Mon, 14 Apr 2025 05:25:34 -0600
Subject: [PATCH] Update TimelineStatus, adjust custom filter warning design

---
 .../components/partials/TimelineStatus.vue    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/resources/assets/components/partials/TimelineStatus.vue b/resources/assets/components/partials/TimelineStatus.vue
index c607e5a1d..9bbd2987e 100644
--- a/resources/assets/components/partials/TimelineStatus.vue
+++ b/resources/assets/components/partials/TimelineStatus.vue
@@ -46,18 +46,18 @@
             </template>
 
             <template v-else>
-                <div class="card shadow-none mx-3 border-0">
-                  <div class="card-body bg-warning-light p-3">
-                    <div class="d-flex justify-content-center align-items-center">
-                      <i class="fas fa-exclamation-triangle text-warning mr-2" aria-hidden="true"></i>
-                      <h5 class="card-title mb-0">Filtered</h5>
+                <div class="card shadow-none mt-n2 mx-3 border-0">
+                  <div class="card-body bg-warning-light p-3 ft-std">
+                    <div class="badge badge-warning p-2" style="border-radius: 10px;">
+                      <i class="fas fa-exclamation-triangle mr-1" aria-hidden="true"></i>
+                      <span>Warning</span>
                     </div>
-                    <p class="card-text mt-2 text-center">
-                      Hidden because it contains the following filtered keywords:
-                      <span v-for="term in filteredTerms" class="badge badge-warning mr-1">{{ term }}</span>
+                    <p class="card-text mt-3" style="word-break:break-all;">
+                      This post contains the following filtered keyword{{ filteredTerms?.length > 1 ? 's' : ''}}:
+                      <span v-for="(term, idx) in filteredTerms" class="font-weight-bold">{{ term }}{{filteredTerms?.length === (idx + 1) ? '' : ', '}}</span>
                     </p>
-                    <button class="btn btn-primary rounded-pill btn-block" @click="showHiddenStatus()">
-                      <i class="fas fa-eye mr-1"></i> Show
+                    <button class="btn btn-outline-primary font-weight-bold" @click="showHiddenStatus()" style="border-radius: 10px;">
+                      Show Content
                     </button>
                   </div>
                 </div>