From e5ed5419b2b7a1b5299445c921e23d0244cc66af Mon Sep 17 00:00:00 2001
From: Thomas O'Dwyer <tom.odwyer@thedatalab.org>
Date: Fri, 13 Sep 2024 10:52:36 +0100
Subject: [PATCH] Move alerts CSS to Tailwind classes

---
 airlock/templates/_components/alert/alert.css | 69 ----------------
 .../templates/_components/alert/alert.html    | 79 ++++++++++++++-----
 2 files changed, 61 insertions(+), 87 deletions(-)
 delete mode 100644 airlock/templates/_components/alert/alert.css

diff --git a/airlock/templates/_components/alert/alert.css b/airlock/templates/_components/alert/alert.css
deleted file mode 100644
index b12dc1ec..00000000
--- a/airlock/templates/_components/alert/alert.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.alert {
-  --alert-background: white;
-  --alert-icon-color: var(--color-slate-400);
-  --alert-title-color: var(--color-slate-900);
-  --alert-text-color: var(--color-slate-700);
-  --alert-hover-color: var(--color-slate-600);
-
-  @apply rounded-lg drop-shadow p-4 pr-6 relative;
-  background-color: var(--alert-background);
-}
-
-.alert--dismissible {
-  @apply pr-8;
-}
-
-.alert__container {
-  @apply flex gap-3;
-}
-
-.alert__icon {
-  @apply h-6 w-6 mt-0.5 flex-shrink-0;
-  color: var(--alert-icon-color);
-}
-
-.alert__title {
-  @apply font-bold text-lg tracking-tight mb-1;
-  color: var(--alert-title-color);
-}
-
-.alert__text {
-  color: var(--alert-text-color);
-}
-
-.alert__dismiss {
-  @apply absolute right-2 top-2;
-  color: var(--alert-text-color);
-}
-
-.alert__dismiss-icon {
-  @apply h-6 w-6;
-
-  &:hover {
-    color: var(--alert-hover-color);
-  }
-}
-
-.alert--warning {
-  --alert-background: var(--color-bn-flamenco-100);
-  --alert-icon-color: var(--color-bn-flamenco-400);
-  --alert-title-color: var(--color-bn-flamenco-900);
-  --alert-text-color: var(--color-bn-flamenco-800);
-  --alert-hover-color: var(--color-bn-flamenco-600);
-}
-
-.alert--success {
-  --alert-background: var(--color-green-100);
-  --alert-icon-color: var(--color-green-600);
-  --alert-title-color: var(--color-green-900);
-  --alert-text-color: var(--color-green-700);
-  --alert-hover-color: var(--color-green-600);
-}
-
-.alert--danger {
-  --alert-background: var(--color-bn-ribbon-100);
-  --alert-icon-color: var(--color-bn-ribbon-400);
-  --alert-title-color: var(--color-bn-ribbon-900);
-  --alert-text-color: var(--color-bn-ribbon-800);
-  --alert-hover-color: var(--color-bn-ribbon-600);
-}
diff --git a/airlock/templates/_components/alert/alert.html b/airlock/templates/_components/alert/alert.html
index 6cb13751..feb5253e 100644
--- a/airlock/templates/_components/alert/alert.html
+++ b/airlock/templates/_components/alert/alert.html
@@ -1,27 +1,70 @@
-<div class="alert alert--{{ variant }}{% if dismissible %} alert--dismissible{% endif %}{% if class %} {{ class }}{% endif %}" role="alert">
+{% fragment as alert_title %}
+  {% if title %}
+    <h2
+      class="
+             {{ variant|match:"warning:text-bn-flamenco-900,success:text-green-900,danger:text-bn-ribbon-900"|default:"text-slate-900" }}
+             font-bold text-lg tracking-tight mb-1
+            "
+    >
+      {{ title }}
+    </h2>
+  {% endif %}
+{% endfragment %}
+
+{% fragment as alert_text %}
+  <div class="{{ variant|match:"warning:text-bn-flamenco-800,success:text-green-900,danger:text-bn-ribbon-800"|default:"text-slate-700" }}">
+    {{ children }}
+  </div>
+{% endfragment %}
+
+{% fragment as alert_icon %}
+  {% if variant == "warning" %}
+    {% icon_exclamation_triangle_solid class="text-bn-flamenco-500 h-6 w-6 mt-0.5 flex-shrink-0" %}
+  {% elif variant == "success" %}
+    {% icon_check_circle_solid class="text-green-600 h-6 w-6 mt-0.5 flex-shrink-0" %}
+  {% elif variant == "danger" %}
+    {% icon_x_circle_solid class="text-bn-ribbon-500 h-6 w-6 mt-0.5 flex-shrink-0" %}
+  {% else %}
+    {% icon_information_circle_solid class="text-slate-500 h-6 w-6 mt-0.5 flex-shrink-0" %}
+  {% endif %}
+{% endfragment %}
+
+{% fragment as alert_dismiss %}
+  <button
+    aria-label="Close"
+    class="
+           {{ variant|match:"warning:text-bn-flamenco-800,success:text-green-900,danger:text-bn-ribbon-800"|default:"text-slate-700" }}
+           absolute right-2 top-2
+          "
+    data-dismiss="alert"
+    type="button"
+  >
+    {% icon_x_outline class="hover:text-oxford-900 h-6 w-6" %}
+  </button>
+{% endfragment %}
+
+<div
+  class="
+         rounded-lg drop-shadow p-4 pr-6 relative
+         {{ variant|match:"warning:bg-bn-flamenco-100,success:bg-green-100,danger:bg-bn-ribbon-100"|default:"bg-white" }}
+         {% if dismissible %}pr-8{% endif %}
+         {% if class %}{{ class }}{% endif %}
+        "
+  role="alert"
+>
   {% if no_icon %}
-    {% if title %}<h2 class="alert__title">{{ title }}</h2>{% endif %}
-    <div class="alert__text">{{ children }}</div>
+    {{ alert_title }}
+    {{ alert_text }}
   {% else %}
-    <div class="alert__container">
-      {% if variant == "warning" %}
-        {% icon_exclamation_triangle_solid class="alert__icon" %}
-      {% elif variant == "success" %}
-        {% icon_check_circle_solid class="alert__icon" %}
-      {% elif variant == "danger" %}
-        {% icon_x_circle_solid class="alert__icon" %}
-      {% elif variant == "info" %}
-        {% icon_information_circle_solid class="alert__icon" %}
-      {% endif %}
+    <div class="flex gap-3">
+      {{ alert_icon }}
       <div>
-        {% if title %}<h2 class="alert__title">{{ title }}</h2>{% endif %}
-        <div class="alert__text">{{ children }}</div>
+        {{ alert_title }}
+        {{ alert_text }}
       </div>
     </div>
   {% endif %}
   {% if dismissible %}
-    <button type="button" class="alert__dismiss" data-dismiss="alert" aria-label="Close">
-      {% icon_x_outline class="alert__dismiss-icon" %}
-    </button>
+    {{ alert_dismiss }}
   {% endif %}
 </div>