# This is a combination of 2 commits.

# This is the 1st commit message:

mend

# This is the commit message #2:

Delete alert

amt/site/static/css/layout.css

@@ -76,74 +76,10 @@ footer {
     height: 2rem;
 }
 
-.header {
-    margin-bottom: 2em;
-    border-bottom-color: var(--clr-accent-200);
-    border-bottom-style: solid;
-    border-bottom-width: 0.5em;
-}
-
-.header a {
-    color: inherit;
-    text-decoration: none;
-
-}
-
-.header_top {
-    padding-inline: 0.75em;
-    padding-block: 0.5em;
-    color: var(--clr-accent-600);
-    font-size: 1.125em;
-    line-height: 1.5em;
-    white-space: nowrap;
-}
-
-.header_logo_image {
-    aspect-ratio: 1 / 1;
-    max-width: 180px;
-    display: block;
-}
-
 .language_selection {
     margin-inline-end: clamp(1rem, 2vw, 4rem);;
 }
 
-.header_nav {
-    background-color: var(--clr-accent-400);
-    height: 50px;
-    color: var(--clr-neutral-100);
-    text-decoration: none;
-    display: flex;
-    gap: clamp(0.1rem, 1vw, 2rem);;
-    justify-content: flex-end;
-}
-
-.header_nav > div {
-    align-self: center;
-}
-
-.header_nav a {
-    border-block-end: 0.1em solid;
-    border-block-end-color: var(--clr-accent-200);
-    border-block-end-style: dashed;
-    padding-block: 0.2em;
-}
-
-.header_nav a:hover {
-    color: var(--clr-accent-600);
-    background-color: var(--clr-accent-200);
-    flex-grow: 1;
-    border-width: 1.25em;
-    border-radius: 0.5em;
-}
-
-.header_nav_container ul {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: clamp(1rem, 2vw, 4rem);;
-}
-
 .margin-bottom--large {
     margin-bottom: 1em;
 }

amt/site/static/js/amt.js

@@ -2,7 +2,7 @@ window.onload = function () {
 
   // TODO (robbert): we need (better) event handling and displaying of server errors
   document.body.addEventListener('htmx:sendError', function(evt) {
-    document.getElementById("errorContainer").innerHTML = "<h1>Placeholder: Error while connecting to server</h1";
+    document.getElementById("errorContainer").innerHTML = "Placeholder: Error while connecting to server";
   });
 
   const columns = document.getElementsByClassName("progress_cards_container");

amt/site/static/package.json

@@ -0,0 +1,7 @@
+{
+  "devDependencies": {
+    "@nl-rvo/assets": "1.0.0-alpha.360",
+    "@nl-rvo/component-library-css": "1.0.0",
+    "@nl-rvo/design-tokens": "1.0.0-alpha.407"
+  }
+}

amt/site/templates/footer.html.j2

@@ -1,2 +1,14 @@
 <footer>
+  <div class="header_nav">
+        <div class="language_selection">
+            <span>{% trans %}Language{% endtrans %}:</span>
+
+            {% for available_translation in available_translations %}
+            <a {% if available_translation==language %}class="selected" {% endif %}
+                id="langselect-{{ available_translation }}"
+                href="javascript:setCookie('lang','{{ available_translation }}',9999); window.location.reload()">{{
+                available_translation }}</a>
+            {% endfor %}
+        </div>
+    </div>
 </footer>

amt/site/templates/layouts/base.html.j2

@@ -17,15 +17,21 @@
     <script type="text/javascript" src="{{ url_for_cache('static', path='vendor/htmx/js/1.9.12.min.js') }}"></script>
     <script type="text/javascript" src="{{ url_for_cache('static', path='vendor/htmx/js/json-enc.js') }}"></script>
     <script type="text/javascript" src="{{ url_for_cache('static', path='vendor/htmx/js/response-targets.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for_cache('static', path='js/amt.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for_cache('static', path='node_modules/@nl-rvo/design-tokens/dist/index.js') }}"></script>
     {% endblock %}
     {% block styles %}
     <link rel="stylesheet" href="{{ url_for_cache('static', path='css/html5reset.css') }}"/>
     <link rel="stylesheet" href="{{ url_for_cache('static', path='css/layout.css') }}"/>
+    <link rel="stylesheet" href="{{ url_for_cache('static', path='node_modules/@nl-rvo/assets/fonts/index.css') }}"/>
+    <link rel="stylesheet" href="{{ url_for_cache('static', path='node_modules/@nl-rvo/assets/icons/index.css') }}"/>
+    <link rel="stylesheet" href="{{ url_for_cache('static', path='node_modules/@nl-rvo/assets/images/index.css') }}"/>
+    <link rel="stylesheet" href="{{ url_for_cache('static', path='node_modules/@nl-rvo/assets/index.css') }}"/>
+    <link rel="stylesheet" href="{{ url_for_cache('static', path='node_modules/@nl-rvo/component-library-css/dist/index.css') }}"/>
+   <link rel="stylesheet" href="{{ url_for_cache('static', path='node_modules/@nl-rvo/design-tokens/dist/index.css') }}"/>
     {% endblock %}
 </head>
 
-<body hx-ext="response-targets">
+<body hx-ext="response-targets" class="rvo-theme">
     {% block header %}
     {% include 'header.html.j2' %}
     {% endblock %}

amt/site/templates/projects/new.html.j2

@@ -1,21 +1,87 @@
 {% extends 'layouts/base.html.j2' %}
 
 {% block content %}
-    <h1 class="margin-bottom--large">{% trans %}New Project{% endtrans %}</h1>
-
-    <form hx-ext="json-enc" hx-post="/projects/new" hx-headers='{"X-CSRF-Token": "{{ csrftoken }}"}' hx-target-error="#errorContainer" hx-swap="innerHTML" method="post">
-        {% trans %}Project name{% endtrans %} <input type="text" id="name" name="name">
-
-        <fieldset>
-            <legend>{% trans %}Selected Instruments{% endtrans %}</legend>
-            {% for instrument in instruments %}
-                <div class="instrument">
-                    <input type="checkbox" id="{{ instrument.urn }}" name="instruments" value="{{ instrument.urn }}" /><label for="{{ instrument.urn }}">{{ instrument.name }}</label>
+    <div class="rvo-max-width-layout rvo-max-width-layout--md">
+      <main>
+          <div class="rvo-form">
+            <div class="rvo-layout-column rvo-layout-gap--sm">
+              <div class="rvo-form-intro">
+                <h1 class="utrecht-heading-1"> {% trans %}New project{% endtrans %}</h1>
+              </div>
+              <form class="rvo-layout-spacer rvo-layout-spacer--2xl" hx-ext="json-enc" hx-post="/projects/new" hx-headers='{"X-CSRF-Token": "{{ csrftoken }}"}' hx-target-error="#errorContainer" hx-swap="innerHTML" method="post">
+                <div class="utrecht-form-fieldset rvo-form-fieldset">
+                  <fieldset
+                    class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset"
+                  >
+                    <legend
+                      class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--html-legend"
+                    >
+                      Keyboard inputs
+                    </legend>
+                      <div
+                      role="group"
+                      aria-labelledby="fieldId-label"
+                      class="utrecht-form-field utrecht-form-field--text rvo-form-field"
+                    >
+                      <div class="rvo-form-field__label">
+                        <label class="rvo-label">{% trans %}Project name{% endtrans %}</label>
+                      </div>
+                      <input
+                        id="field"
+                        placeholder=""
+                        type="text"
+                        class="utrecht-textbox utrecht-textbox--html-input"
+                        dir="auto"
+                        value=""
+                      />
+                    </div>
+                    <div
+                      role="group"
+                      aria-labelledby="fieldId-label"
+                      class="utrecht-form-field utrecht-form-field--text rvo-form-field"
+                    >
+                      <div class="rvo-form-field__label">
+                        <label class="rvo-label">{% trans %}Instruments{% endtrans %}</label>
+                        <div
+                          id="helperTextId"
+                          class="utrecht-form-field-description"
+                        >
+                          {% trans %}Select 1 or more instruments{% endtrans %}
+                        </div>
+                      </div>
+                      {% for instrument in instruments %}
+                      <div class="rvo-checkbox__group">
+                        <label
+                          class="rvo-checkbox rvo-checkbox--not-checked"
+                          for="{{ instrument.urn }}"
+                        >
+                          <input
+                            id="{{ instrument.urn }}"
+                            name="instruments"
+                            class="rvo-checkbox__input"
+                            type="checkbox"
+                            value="{{ instrument.urn }}"
+                          />
+                          {{ instrument.name }}
+                        </label>
+                        {% endfor %}
+                      </div>
+                    </div>
+                  <div id="errorContainer"></div>
+                  </fieldset>
                 </div>
-            {% endfor %}
-        </fieldset>
-
-        <button type="submit">{% trans %}Create Project{% endtrans %}</button>
-    </form>
-    <div id="errorContainer"></div>
+                <p class="utrecht-button-group">
+                  <button
+                    class="utrecht-button utrecht-button--primary-action rvo-layout-row rvo-layout-gap--md utrecht-button--rvo-md"
+                    type="button"
+                  >
+                    {% trans %}Create Project{% endtrans %}
+                  </button>
+                </p>
+              </form>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
 {% endblock %}