DBC22-1883: Styling empty states for advisories and bulletins

bcgov · Mar 20, 2024 · a1ad84a · a1ad84a
1 parent b95b668
commit a1ad84a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 27 deletions.
diff --git 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;
+  }
 }
diff --git 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
@@ -5,4 +5,10 @@
     cursor: pointer;
     width: fit-content;
   }
+}
+.empty-bulletin-display {
+  h2 {
+    margin-bottom: 2rem;
+    color: $BC-Blue;
+  }
 }
diff --git 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>
   );
 }