[#3420] Fixed classes and CSS in cookie overview html pages

This is still an in-between state while the SDK CSS is being
reworked. Utimately, this should all just use NL Design System.

Backport-of: #3440

src/openforms/templates/cookie_consent/_cookie_group.html

@@ -2,9 +2,11 @@
 {% load cookie_consent_tags %}
 
 <div class="cookie-group">
-    <h2 class="cookie-group__title">{{ cookie_group.name }}</h2>
+    <h2 class="utrecht-heading-2 utrecht-heading-2--distanced openforms-subtitle cookie-group__title">
+        {{ cookie_group.name }}
+    </h2>
 
-    <p class="cookie_group__description">
+    <p class="openforms-body">
       {{ cookie_group.description }}
     </p>
 
@@ -17,7 +19,7 @@ <h2 class="cookie-group__title">{{ cookie_group.name }}</h2>
             <form class="cookie-consent-accept" action="{% url 'cookie_consent_accept' cookie_group.varname %}" method="post">
                 {% csrf_token %}
                 <input type="hidden" name="next" value="{{ request.path }}?referer={{ referer }}" />
-                <button type="submit" class="button button--primary">{% trans "Accept" %}</button>
+                <button type="submit" class="openforms-button openforms-button--primary">{% trans "Accept" %}</button>
             </form>
         {% endif %}
 
@@ -27,7 +29,7 @@ <h2 class="cookie-group__title">{{ cookie_group.name }}</h2>
             <form class="cookie-consent-decline" action="{% url 'cookie_consent_decline' cookie_group.varname %}" method="post">
                 {% csrf_token %}
                 <input type="hidden" name="next" value="{{ request.path }}?referer={{ referer }}" />
-                <button type="submit" class="button button--primary">{% trans "Decline" %}</button>
+                <button type="submit" class="openforms-button openforms-button--primary">{% trans "Decline" %}</button>
             </form>
         {% endif %}
 

src/openforms/templates/cookie_consent/cookiegroup_list.html

@@ -1,17 +1,21 @@
 {% extends 'ui/views/abstract/list.html' %}
 {% load i18n openforms %}
 
+{% block extra_css %}
+    {% include "forms/sdk_css_snippet.html" %}
+    {{ block.super }} {# Called after SDK CSS for custom design overrides #}
+{% endblock %}
 
 {% block card %}
     {% get_allowed_redirect_url request.GET.referer request.headers.referer as referer %}
-    <header class="card__header">
-        <h1 class="title">{% trans "Cookies" %}</h1>
+    <header class="openforms-card__header">
+        <h1 class="utrecht-heading-1 openforms-title">{% trans "Cookies" %}</h1>
     </header>
 
-    <div class="card__body">
+    <div class="openforms-card__body">
         {% block card_body %}
-            <p>
-              {% trans "This is a list of the categories of cookies used in our website and why we use them." %}
+            <p class="openforms-body">
+                {% trans "This is a list of the categories of cookies used in our website and why we use them." %}
             </p>
             <ul class="list">
                 {% for cookie_group in object_list  %}
@@ -20,12 +24,12 @@ <h1 class="title">{% trans "Cookies" %}</h1>
                     </li>
                 {% endfor %}
             </ul>
-        {% endblock %}
 
-        {% if referer %}
-            <a href="{{ referer }}" class="button button--primary">
-                {% trans "Close" %}
-            </a>
-        {% endif %}
+            {% if referer %}
+                <a href="{{ referer }}" class="utrecht-link utrecht-link--openforms">
+                    {% trans "Close" %}
+                </a>
+            {% endif %}
+        {% endblock %}
     </div>
 {% endblock %}

src/openforms/tests/test_cookie_notice.py

@@ -149,19 +149,25 @@ def test_accept_reject_does_not_allow_open_redirect(self):
                 self.renew_app()
 
                 cookies_page = self.app.get(url, {"referer": allowed})
+                parent = cookies_page.pyquery.find(
+                    ".openforms-card__body a.utrecht-link--openforms"
+                )
+                link = parent(".utrecht-link--openforms")
 
-                button = cookies_page.pyquery.find("a.button--primary")
-                self.assertEqual(button.attr["href"], allowed)
-                self.assertEqual(button.text(), _("Close"))
+                self.assertEqual(link.attr["href"], allowed)
+                self.assertEqual(link.text(), _("Close"))
 
         for blocked in blocked_redirects:
             with self.subTest(f"Blockedredirect to '{blocked}'"):
                 self.renew_app()
 
                 cookies_page = self.app.get(url, {"referer": blocked})
 
-                button = cookies_page.pyquery.find("a.button--primary")
-                self.assertFalse(button)
+                parent = cookies_page.pyquery.find(
+                    ".openforms-card__body a.utrecht-link--openforms"
+                )
+
+                self.assertEqual(parent, [])
 
                 for form in cookies_page.forms.values():
                     next_url = furl(form["next"].value)

src/openforms/ui/static/ui/scss/_nlds.scss

@@ -0,0 +1 @@
+@import '@utrecht/components/heading-2/css/index.scss';

src/openforms/ui/static/ui/scss/components/cookie-group/_index.scss

@@ -15,3 +15,11 @@
     }
   }
 }
+
+.openforms-theme {
+  .cookie-group {
+    &__title {
+      margin-block-end: 1rem !important; // SDK styles for :not(:last-child) override this otherwise
+    }
+  }
+}

src/openforms/ui/static/ui/scss/screen.scss

@@ -1,4 +1,6 @@
 @import 'settings';
+@import 'nlds';
+
 @import 'components';
 
 @import 'views';

src/openforms/ui/templates/ui/views/abstract/list.html

@@ -4,13 +4,13 @@
     {{ block.super }}
 
     <section class="layout__container">
-        <div class="card">
+        <div class="openforms-card">
             {% block card %}
-                <header class="card__header">
+                <header class="openforms- card__header">
                     <h1 class="title">{{ title }}</h1>
                 </header>
 
-                <div class="card__body">
+                <div class="openforms-card__body">
                     {% block card_body %}
                         <ul class="list">
                             {% for object in object_list %}