Style warning status message

https://flowbite.com/docs/components/alerts

web/themes/custom/opdavies/assets/tailwind.config.ts

@@ -9,21 +9,20 @@ export default {
     "./templates/**/*.html.twig",
   ],
   theme: {
-    colors: {
-      black: "#000",
-      blue: {
-        primary: "#24608A",
-        400: "#60a5fa",
-      },
-      current: "currentColor",
-      gray: colours.stone,
-      grey: colours.stone,
-      inherit: "inherit",
-      transparent: "transparent",
-      white: "#fff",
-    },
-
     extend: {
+      colors: {
+        black: "#000",
+        blue: {
+          primary: "#24608A",
+          400: "#60a5fa",
+        },
+        current: "currentColor",
+        gray: colours.stone,
+        grey: colours.stone,
+        inherit: "inherit",
+        transparent: "transparent",
+        white: "#fff",
+      },
       fontFamily: {
         sans: [
           "Roboto Condensed",

web/themes/custom/opdavies/templates/media-library/status-messages.html.twig

@@ -0,0 +1,53 @@
+{#
+/**
+ * @file
+ * Theme override for status messages.
+ *
+ * Displays status, error, and warning messages, grouped by type.
+ *
+ * An invisible heading identifies the messages for assistive technology.
+ * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
+ * for info.
+ *
+ * Add an ARIA label to the contentinfo area so that assistive technology
+ * user agents will better describe this landmark.
+ *
+ * Available variables:
+ * - message_list: List of messages to be displayed, grouped by type.
+ * - status_headings: List of all status types.
+ * - attributes: HTML attributes for the element, including:
+ *   - class: HTML classes.
+ */
+#}
+<div class="mb-6" data-drupal-messages>
+  {% for type, messages in message_list %}
+    {# https://flowbite.com/docs/components/alerts #}
+    {%
+      set classes = [
+        "p-4 mb-4 text-sm rounded-lg bg-blue-50 dark:bg-gray-800",
+        type == 'warning' ? 'text-yellow-800 dark:text-yellow-200',
+      ]
+    %}
+
+    <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
+      {% if type == 'error' %}
+        <div role="alert">
+      {% endif %}
+      {% if status_headings[type] %}
+        <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
+      {% endif %}
+      {% if messages|length > 1 %}
+        <ul>
+          {% for message in messages %}
+            <li>{{ message }}</li>
+          {% endfor %}
+        </ul>
+      {% else %}
+        {{ messages|first }}
+      {% endif %}
+      {% if type == 'error' %}
+        </div>
+      {% endif %}
+    </div>
+  {% endfor %}
+</div>