From a1ad84a6492c2c2932b6993d5b5a5a41ae18f5c2 Mon Sep 17 00:00:00 2001
From: minORC <min@openroad.ca>
Date: Tue, 19 Mar 2024 17:41:38 -0700
Subject: [PATCH] DBC22-1883: Styling empty states for advisories and bulletins

---
 .../Components/advisories/AdvisoriesList.scss |  7 +++++
 .../Components/advisories/EmptyAdvisory.js    | 26 ++++++++-----------
 .../Components/bulletins/BulletinsList.scss   |  6 +++++
 .../src/Components/bulletins/EmptyBulletin.js | 20 ++++++--------
 4 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/frontend/src/Components/advisories/AdvisoriesList.scss b/src/frontend/src/Components/advisories/AdvisoriesList.scss
index 6c7a20f4c..98eb0be67 100644
--- a/src/frontend/src/Components/advisories/AdvisoriesList.scss
+++ b/src/frontend/src/Components/advisories/AdvisoriesList.scss
@@ -39,4 +39,11 @@
   .timestamp-container--mobile {
     display: none;
   }
+}
+
+.empty-advisory-display {
+  h2 {
+    margin-bottom: 2rem;
+    color: $BC-Blue;
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/Components/advisories/EmptyAdvisory.js b/src/frontend/src/Components/advisories/EmptyAdvisory.js
index f0fd3a1ce..e08d8a880 100644
--- a/src/frontend/src/Components/advisories/EmptyAdvisory.js
+++ b/src/frontend/src/Components/advisories/EmptyAdvisory.js
@@ -5,20 +5,16 @@ import Container from 'react-bootstrap/Container';
 export default function EmptyAdvisory() {
   // Rendering
   return (
-    <div>
-      <h4 className='advisory-li-title'>No advisories are active at the moment</h4>
-      <Container className="advisory-body-container cms-body">
-        <div className="advisory-body-container cms-body container">
-          <p>
-            If there are widespread travel advisories, they will be posted here to give you guidance on:
-          </p>
-          <ul>
-            <li>how to navigate safely through the affected area</li>
-            <li>where to detour if available, and</li>
-            <li>keep you informed with the most up-to-date information we have.</li>
-          </ul>  
-        </div>
-      </Container>
-    </div>
+    <Container className="empty-advisory-display">
+      <h2>No advisories are active at the moment</h2>
+      <p>
+        If there are widespread travel advisories, they will be posted here to give you guidance on:
+      </p>
+      <ul>
+        <li>how to navigate safely through the affected area</li>
+        <li>where to detour if available, and</li>
+        <li>keep you informed with the most up-to-date information we have.</li>
+      </ul> 
+    </Container>
   );
 }
diff --git a/src/frontend/src/Components/bulletins/BulletinsList.scss b/src/frontend/src/Components/bulletins/BulletinsList.scss
index d057e77f8..ee8889519 100644
--- a/src/frontend/src/Components/bulletins/BulletinsList.scss
+++ b/src/frontend/src/Components/bulletins/BulletinsList.scss
@@ -5,4 +5,10 @@
     cursor: pointer;
     width: fit-content;
   }
+}
+.empty-bulletin-display {
+  h2 {
+    margin-bottom: 2rem;
+    color: $BC-Blue;
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/Components/bulletins/EmptyBulletin.js b/src/frontend/src/Components/bulletins/EmptyBulletin.js
index ae0db12ae..96f7dc777 100644
--- a/src/frontend/src/Components/bulletins/EmptyBulletin.js
+++ b/src/frontend/src/Components/bulletins/EmptyBulletin.js
@@ -5,17 +5,13 @@ import Container from 'react-bootstrap/Container';
 export default function EmptyBulletin() {
   // Rendering
   return (
-    <div>
-      <h4 className='bulletin-li-title'>No bulletins at the moment</h4>
-      <Container className="bulletin-body-container cms-body">
-        <div className="bulletin-body-container cms-body container">
-          <p>
-            There are currently no bulletins to display. 
-            As we continue to evolve DriveBC to better meet the needs of British Columbians, 
-            watch this space for updates as they come!
-          </p>
-        </div>
-      </Container>
-    </div>
+    <Container className="empty-advisory-display">
+      <h2>No bulletins at the moment</h2>
+      <p>
+        There are currently no bulletins to display. 
+        As we continue to evolve DriveBC to better meet the needs of British Columbians, 
+        watch this space for updates as they come!
+      </p>
+  </Container>
   );
 }