From 07a6ed24860b24f6ac4640130c01c0b97fb85283 Mon Sep 17 00:00:00 2001
From: "joseph@dxw.com" <joseph@dxw.com>
Date: Mon, 2 Dec 2024 17:34:41 +0000
Subject: [PATCH] WIP alerts

---
 .../stylesheets/application.tailwind.css.scss | 21 +++++++++++++++++++
 app/assets/stylesheets/daqi-levels.scss       | 10 ++++-----
 app/views/layouts/application.html.erb        |  1 +
 app/views/shared/_alert.html.erb              | 12 +++++++++++
 4 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 app/views/shared/_alert.html.erb
diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss
index 097702b5..4bf728be 100644
--- a/app/assets/stylesheets/application.tailwind.css.scss
+++ b/app/assets/stylesheets/application.tailwind.css.scss
@@ -21,3 +21,24 @@
   --main-colour-light: #dae7f7;
   --main-colour-lightest: #EDF4FB;;
 }
+
+.air-quality-alert {
+  background-color: var(--main-colour-lightest);
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.25rem;
+    stroke: black;
+    margin-bottom: 2px;
+    display: inline-block;
+  }
+
+  a {
+    color: black;
+    text-decoration: underline;
+  }
+}
diff --git a/app/assets/stylesheets/daqi-levels.scss b/app/assets/stylesheets/daqi-levels.scss
index be3ca80f..1f3a6db4 100644
--- a/app/assets/stylesheets/daqi-levels.scss
+++ b/app/assets/stylesheets/daqi-levels.scss
@@ -22,7 +22,7 @@
   --daqi-level-10-text: white;
 }
 
-.daqi-scale, .tabs, .daqi-table {
+.daqi-scale, .tabs, .daqi-table, .air-quality-alert {
   .daqi-level-1 {
     background-color: var(--daqi-level-1-bg);
     color: var(--daqi-level-1-text);
@@ -65,22 +65,22 @@
   }
 }
 
-.daqi-low-level {
+.daqi-level-low {
   color: var(--daqi-level-2-text);
   background-color: var(--daqi-level-2-bg);
 }
 
-.daqi-moderate-level {
+.daqi-level-moderate {
   color: var(--daqi-level-5-text);
   background-color: var(--daqi-level-5-bg);
 }
 
-.daqi-high-level {
+.daqi-level-high {
   color: var(--daqi-level-8-text);
   background-color: var(--daqi-level-8-bg);
 }
 
-.daqi-very-high-level {
+.daqi-level-very-high {
   color: var(--daqi-level-10-text);
   background-color: var(--daqi-level-10-bg);
 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index a638a9bc..dc20fc00 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,6 +14,7 @@
   <body class="">
     <div class="container mx-auto max-w-6xl">
       <%= render "shared/header" %>
+      <%= render "shared/alert" %>
       <main role="main">
         <%= render "layouts/messages" %>
         <%= yield %>
diff --git a/app/views/shared/_alert.html.erb b/app/views/shared/_alert.html.erb
new file mode 100644
index 00000000..97b103d3
--- /dev/null
+++ b/app/views/shared/_alert.html.erb
@@ -0,0 +1,12 @@
+<%
+@alert = false
+@alert_level = "low"
+%>
+
+<div class="air-quality-alert <%= "daqi-level-#{@alert_level}" if @alert %>">
+  <div>
+    <%= render_svg "exclamation_triangle" if @alert %>
+    <strong>No air pollution alerts</strong>
+  </div>
+  <%= link_to "Learn more", alerts_path if @alert %>
+</div>
