From 98b8a5fe0c9a790866491ce28424bd1cae6f7a26 Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Fri, 16 Apr 2021 12:44:03 +0200
Subject: [PATCH 1/5] Replace vlc-navbar + vlc-toolbar occurrences

---
 app/components/access-level-pill.hbs          |  2 +-
 .../agenda/agenda-detail/sidebar.hbs          | 10 +--
 app/components/agenda/agenda-header.hbs       | 18 ++---
 app/components/agenda/agenda-overview.hbs     | 12 +--
 app/components/agenda/agendaitem-search.hbs   |  8 +-
 .../agenda/agendaitem/create-agendaitem.hbs   |  6 +-
 app/components/agenda/side-nav.hbs            |  8 +-
 app/components/cases/cases-header.hbs         | 10 +--
 app/components/cases/new-case.hbs             | 12 +--
 app/components/cases/new-subcase.hbs          | 12 +--
 app/components/documents/document-card.hbs    | 10 +--
 .../documents/linked-document-link.hbs        | 10 +--
 app/components/m-header.hbs                   | 14 ++--
 .../mandatees-domains-panel-edit.hbs          |  6 +-
 app/components/newsletter/edit-newsletter.hbs | 12 +--
 .../newsletter/newsletter-header-overview.hbs | 20 ++---
 .../newsletter/newsletter-header.hbs          |  6 +-
 .../sessions/session-agenda-nav.hbs           | 78 +++++++++----------
 .../subcases/assign-to-meeting-form.hbs       | 12 +--
 .../subcases/subcase-description.hbs          |  6 +-
 .../subcases/subcase-detail-nav.hbs           |  8 +-
 app/components/subcases/subcase-header.hbs    | 12 +--
 app/components/subcases/subcase-item.hbs      |  6 +-
 app/components/utils/add-existing-piece.hbs   |  6 +-
 app/components/utils/edit-mandatee.hbs        | 12 +--
 .../utils/manage-government-fields.hbs        | 12 +--
 app/components/utils/manage-ise-code.hbs      | 12 +--
 app/components/utils/manage-signatures.hbs    | 12 +--
 app/components/utils/model-manager.hbs        | 12 +--
 .../utils/overviews-header-decision.hbs       | 18 ++---
 .../utils/overviews-header-print.hbs          | 18 ++---
 app/components/utils/settings-header.hbs      | 22 +++---
 .../agendaitems/agendaitem/template.hbs       |  2 +-
 app/pods/agendas/template.hbs                 |  8 +-
 app/pods/cases/overview/template.hbs          | 12 +--
 app/pods/search/template.hbs                  | 14 ++--
 .../settings/system-alerts/index/template.hbs | 12 +--
 app/pods/settings/template.hbs                | 10 +--
 app/pods/settings/users/index/template.hbs    |  4 +-
 39 files changed, 243 insertions(+), 241 deletions(-)

diff --git a/app/components/access-level-pill.hbs b/app/components/access-level-pill.hbs
index 9b70d56989..1887706e69 100644
--- a/app/components/access-level-pill.hbs
+++ b/app/components/access-level-pill.hbs
@@ -54,7 +54,7 @@
     {{/if}}
     <button
       type="button"
-      class="auk-button auk-button--muted-borderless auk-button--icon vlc-toolbar__item"
+      class="auk-button auk-button--muted-borderless auk-button--icon auk-toolbar-complex__item"
       disabled={{not this.session.isEditor}}
       {{on "click" (perform this.changeConfidentiality)}}
     >
diff --git a/app/components/agenda/agenda-detail/sidebar.hbs b/app/components/agenda/agenda-detail/sidebar.hbs
index d1f87559e7..a770565068 100644
--- a/app/components/agenda/agenda-detail/sidebar.hbs
+++ b/app/components/agenda/agenda-detail/sidebar.hbs
@@ -1,13 +1,13 @@
-<div class="vlc-toolbar vlc-agenda-detail-sidebar-section-header vlc-agenda-detail-sidebar-section-header--border-bottom">
-  <div class="vlc-toolbar__left">
-    <div class="vlc-toolbar__item">
+<div class="auk-toolbar-complex vlc-agenda-detail-sidebar-section-header vlc-agenda-detail-sidebar-section-header--border-bottom">
+  <div class="auk-toolbar-complex__left">
+    <div class="auk-toolbar-complex__item">
       <h3 class="auk-h3 auk-u-m-0 vlc-agenda-detail-sidebar-section-header__title">
         {{t "agendaitems-subtitle"}}
       </h3>
     </div>
   </div>
-  <div class="vlc-toolbar__right">
-    <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex__right">
+    <div class="auk-toolbar-complex__item">
       <WebComponents::AuButtonLink
         class="vlc-agenda-items-section-header__link"
         {{on "click" @toggleShowModifiedOnly}}
diff --git a/app/components/agenda/agenda-header.hbs b/app/components/agenda/agenda-header.hbs
index 8e78b015c6..87f5254fb3 100644
--- a/app/components/agenda/agenda-header.hbs
+++ b/app/components/agenda/agenda-header.hbs
@@ -1,6 +1,6 @@
-<div class="vlc-toolbar">
-  <div class="vlc-toolbar__left">
-    <div class="vlc-toolbar__item">
+<div class="auk-toolbar-complex">
+  <div class="auk-toolbar-complex__left">
+    <div class="auk-toolbar-complex__item">
       <h1 class="vlc-page-header__title auk-u-pb vlc-page-header__title--bordered"
           data-test-agenda-header-title>
         {{t "agenda-of"}}
@@ -12,9 +12,9 @@
         </span>
       </h1>
       <div class="vlc-page-header__sub">
-        <div class="vlc-toolbar vlc-toolbar--auto">
-          <div class="vlc-toolbar__left">
-            <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+          <div class="auk-toolbar-complex__left">
+            <div class="auk-toolbar-complex__item">
               {{!-- TODO: Fix this symbol into a custom icon based of the figma file --}}
               {{!-- template-lint-disable no-bare-strings  --}}
               <LinkTo @route="agendas.overview" class="vlc-backlink auk-button-link">
@@ -30,9 +30,9 @@
     </div>
   </div>
   {{#if currentSessionService.isViewer}}
-    <div class="vlc-toolbar__right">
+    <div class="auk-toolbar-complex__right">
       {{#if currentSessionService.isEditor}}
-        <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex__item">
           <button type="button"
             data-test-agenda-header-showAgendaOptions
             class="auk-button auk-button--primary"
@@ -140,7 +140,7 @@
           </button>
         </div>
       {{/if}}
-      <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__item">
         <button type="button"
           data-test-agenda-header-showActionOptions
           class="auk-button auk-button--secondary"
diff --git a/app/components/agenda/agenda-overview.hbs b/app/components/agenda/agenda-overview.hbs
index 560c68fa6e..67a4c8a8e7 100644
--- a/app/components/agenda/agenda-overview.hbs
+++ b/app/components/agenda/agenda-overview.hbs
@@ -6,16 +6,16 @@
       @clearAction={{this.toggleIsEditingOverview}}
     />
   {{/if}}
-  <div class="vlc-toolbar vlc-agenda-items-section-header">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex vlc-agenda-items-section-header">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <h3 class="auk-h3 auk-u-m-0 vlc-agenda-items-section-header__title">
           {{t "agendaitems-subtitle"}}
         </h3>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__item">
         <WebComponents::AuButtonLink
           class="vlc-agenda-items-section-header__link"
           {{on "click" @toggleShowModifiedOnly}}
@@ -23,7 +23,7 @@
           {{if @showModifiedOnly (t "show-all") (t "show-changes")}}
         </WebComponents::AuButtonLink>
       </div>
-      <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__item">
         {{#if
           (and
             this.currentSessionService.isEditor
diff --git a/app/components/agenda/agendaitem-search.hbs b/app/components/agenda/agendaitem-search.hbs
index c1e9add46f..d38a593fa8 100644
--- a/app/components/agenda/agendaitem-search.hbs
+++ b/app/components/agenda/agendaitem-search.hbs
@@ -1,8 +1,8 @@
 <div class="vlc-scroll-wrapper__header">
-  <div class="vlc-navbar vlc-navbar--bordered-bottom vlc-hide-on-print">
-    <div class="vlc-toolbar vlc-toolbar--auto">
-      <div class="vlc-toolbar__justified">
-        <div class="vlc-toolbar__item vlc-u-box-model-maximize-width">
+  <div class="auk-navbar auk-navbar--bordered-bottom vlc-hide-on-print">
+    <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+      <div class="auk-toolbar-complex__left">
+        <div class="auk-toolbar-complex__item vlc-u-box-model-maximize-width">
           <div class="auk-form-group">
             <WebComponents::AuInput
               @icon="search"
diff --git a/app/components/agenda/agendaitem/create-agendaitem.hbs b/app/components/agenda/agendaitem/create-agendaitem.hbs
index cd4fc096bb..bf117f8a11 100644
--- a/app/components/agenda/agendaitem/create-agendaitem.hbs
+++ b/app/components/agenda/agendaitem/create-agendaitem.hbs
@@ -21,9 +21,9 @@
       <div class="auk-o-grid auk-u-flex--align-end auk-u-mb-2"
       >
         <div class="auk-o-grid-col-8">
-          <div class="vlc-toolbar vlc-toolbar--auto">
-            <div class="vlc-toolbar__justified custom-table-search">
-              <div class="vlc-toolbar__item" style="width:100%;">
+          <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+            <div class="auk-toolbar-complex__left custom-table-search">
+              <div class="auk-toolbar-complex__item" style="width:100%;">
                 <div class="vl-input-field--inline" data-test-vl-create-agendaitem-search>
                   {{input
                     value=filterParam
diff --git a/app/components/agenda/side-nav.hbs b/app/components/agenda/side-nav.hbs
index df69002112..954a167aa5 100644
--- a/app/components/agenda/side-nav.hbs
+++ b/app/components/agenda/side-nav.hbs
@@ -1,16 +1,16 @@
 <nav class="vlc-side-nav">
   <div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper">
     <div class="vlc-scroll-wrapper__header">
-      <div class="vlc-navbar vlc-navbar--bordered-bottom">
-        <div class="vlc-toolbar">
-          <div class="vlc-toolbar__left">
+      <div class="auk-navbar auk-navbar--bordered-bottom">
+        <div class="auk-toolbar-complex">
+          <div class="auk-toolbar-complex__left">
             <h2 class="auk-h4">
               <span>
                 {{t "nav-title"}}
               </span>
             </h2>
           </div>
-          <div class="vlc-toolbar__right">
+          <div class="auk-toolbar-complex__right">
             {{#if agendaMenuOpened}}
               <button type="button" class="auk-button auk-button--borderless auk-button--icon default"
                 {{action "collapseSideMenu"}}>
diff --git a/app/components/cases/cases-header.hbs b/app/components/cases/cases-header.hbs
index 6bdf895c09..ad21cd624b 100644
--- a/app/components/cases/cases-header.hbs
+++ b/app/components/cases/cases-header.hbs
@@ -1,14 +1,14 @@
 {{#if (not isAddingCase)}}
-  <div class="vlc-toolbar vlc-toolbar--auto">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <h1 class="vlc-page-header__title auk-u-pb" data-test-cases-header-title>
           {{t "cases"}}
         </h1>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__item">
         {{#if currentSession.isEditor}}
           <button type="button"
             data-test-cases-header-add-case
diff --git a/app/components/cases/new-case.hbs b/app/components/cases/new-case.hbs
index d332725e3c..27a99524b5 100644
--- a/app/components/cases/new-case.hbs
+++ b/app/components/cases/new-case.hbs
@@ -17,10 +17,10 @@
       {{textarea class="auk-textarea" rows="2" value=shortTitle}}
     </div>
   </div>
-  <div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-    <div class="vlc-toolbar">
-      <div class="vlc-toolbar__left">
-        <div class="vlc-toolbar__item">
+  <div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+    <div class="auk-toolbar-complex">
+      <div class="auk-toolbar-complex__left">
+        <div class="auk-toolbar-complex__item">
           <button type="button" data-test-vl-modal-footer-cancel
                   class="auk-button auk-button--borderless"
             {{action "closeAction"}}>
@@ -28,8 +28,8 @@
           </button>
         </div>
       </div>
-      <div class="vlc-toolbar__right">
-        <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__right">
+        <div class="auk-toolbar-complex__item">
           {{web-components/vl-save-button
             text=(t "create-case")
             type="submit"
diff --git a/app/components/cases/new-subcase.hbs b/app/components/cases/new-subcase.hbs
index 8ea89f2f1e..3e1be7d932 100644
--- a/app/components/cases/new-subcase.hbs
+++ b/app/components/cases/new-subcase.hbs
@@ -97,10 +97,10 @@
       </div>
     </div>
   </div>
-  <div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-    <div class="vlc-toolbar">
-      <div class="vlc-toolbar__left">
-        <div class="vlc-toolbar__item">
+  <div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+    <div class="auk-toolbar-complex">
+      <div class="auk-toolbar-complex__left">
+        <div class="auk-toolbar-complex__item">
           <button type="button"
             class="auk-button auk-button--borderless"
             {{action "closeModal"}}
@@ -109,8 +109,8 @@
           </button>
         </div>
       </div>
-      <div class="vlc-toolbar__right">
-        <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__right">
+        <div class="auk-toolbar-complex__item">
           {{web-components/vl-save-button
             text=(t "new-subcase")
             type="submit"
diff --git a/app/components/documents/document-card.hbs b/app/components/documents/document-card.hbs
index 6bc678cc37..a24361ef0f 100644
--- a/app/components/documents/document-card.hbs
+++ b/app/components/documents/document-card.hbs
@@ -5,9 +5,9 @@
   <div class="vlc-document-card" data-test-document-card>
     <div class="vlc-document-card__summary">
       <div class="vlc-document-card__content">
-        <div class="vlc-toolbar vlc-toolbar--auto">
-          <div class="vlc-toolbar__left">
-            <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+          <div class="auk-toolbar-complex__left">
+            <div class="auk-toolbar-complex__item">
               <p class="vlc-subline vlc-document-card__subline">
                 {{#unless this.loadPieceRelatedData.isRunning}}
                   {{this.documentContainer.type.label}}
@@ -16,7 +16,7 @@
             </div>
           </div>
           <div class="vlc-document-card-toolbar__right">
-            <div class="vlc-toolbar__item auk-u-flex">
+            <div class="auk-toolbar-complex__item auk-u-flex">
               {{#unless this.loadPieceRelatedData.isRunning}}
                 <AccessLevelPill
                   @accessLevel={{this.accessLevel}}
@@ -28,7 +28,7 @@
                 />
               {{/unless}}
             </div>
-            <div class="vlc-toolbar__item">
+            <div class="auk-toolbar-complex__item">
               {{#if this.currentSession.isEditor}}
                 <button
                   class="auk-button auk-button--borderless auk-button--icon"
diff --git a/app/components/documents/linked-document-link.hbs b/app/components/documents/linked-document-link.hbs
index 5b17ae1a82..204f3cce5c 100644
--- a/app/components/documents/linked-document-link.hbs
+++ b/app/components/documents/linked-document-link.hbs
@@ -8,16 +8,16 @@
       </div>
     </div>
     <div class="vlc-document-card__content">
-      <div class="vlc-toolbar vlc-toolbar--auto">
-        <div class="vlc-toolbar__left">
-          <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+        <div class="auk-toolbar-complex__left">
+          <div class="auk-toolbar-complex__item">
             <p class="vlc-subline" data-test-linkeddocument-type-label>
               {{@documentContainer.type.label}}
             </p>
           </div>
         </div>
         <div class="vlc-document-card-toolbar__right">
-          <div class="vlc-toolbar__item">
+          <div class="auk-toolbar-complex__item">
             {{#if this.lastPiece}}
               <AccessLevelPill
                 @accessLevel={{this.accessLevel}}
@@ -29,7 +29,7 @@
               />
             {{/if}}
           </div>
-          <div class="vlc-toolbar__item">
+          <div class="auk-toolbar-complex__item">
             {{#if currentSession.isEditor}}
               <button class="auk-button auk-button--muted-borderless auk-button--icon"
                 type="button"
diff --git a/app/components/m-header.hbs b/app/components/m-header.hbs
index 5fb23d4182..738027022b 100644
--- a/app/components/m-header.hbs
+++ b/app/components/m-header.hbs
@@ -1,8 +1,8 @@
-<div class="vlc-navbar vlc-navbar--bordered-bottom vlc-navbar--no-padding vlc-navbar--bg-alt vlc-navbar--auto"
+<div class="auk-navbar auk-navbar--bordered-bottom auk-navbar--no-pad auk-navbar--auto l-main-header"
      id="c-main-nav">
-  <div class="vlc-toolbar vlc-toolbar--auto vlc-toolbar--slide-in">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex auk-toolbar-complex--auto l-main-header__toolbar">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <ul class="auk-tabs">
           {{#if hasPublicationsEnabled}}
             <li class="auk-tabs__tab" data-test-m-header-publications>
@@ -55,8 +55,8 @@
         </ul>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__right">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__right">
         {{#if showEnvironmentName}}
           <div class="vlc-environment-pill {{environmentClass}}">
             {{environmentName}}
@@ -64,7 +64,7 @@
           </div>
         {{/if}}
       </div>
-      <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__item">
         {{#if currentSession.userContent}}
           <div class="vlc-user">
             <div class="vlc-user__username">
diff --git a/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs b/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs
index dc234e397c..5c033e41d4 100644
--- a/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs
+++ b/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs
@@ -102,8 +102,8 @@
       </table>
     </div>
   </div>
-  <div class="vlc-toolbar vlc-toolbar--auto">
-    <div class="vlc-toolbar__left">
+  <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+    <div class="auk-toolbar-complex__left">
       <button
         type="button"
         data-test-mandatee-panel-edit-add-mandatee
@@ -118,7 +118,7 @@
         </div>
       </button>
     </div>
-    <div class="vlc-toolbar__right">
+    <div class="auk-toolbar-complex__right">
       <WebComponents::AuToolbar>
         <WebComponents::AuToolbar::Group @position="right">
           <WebComponents::AuToolbar::Item>
diff --git a/app/components/newsletter/edit-newsletter.hbs b/app/components/newsletter/edit-newsletter.hbs
index d1b6ab0a59..547ae2cf06 100644
--- a/app/components/newsletter/edit-newsletter.hbs
+++ b/app/components/newsletter/edit-newsletter.hbs
@@ -22,10 +22,10 @@
     </div>
   </div>
 </div>
-<div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-  <div class="vlc-toolbar">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+<div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+  <div class="auk-toolbar-complex">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <button type="button" class="auk-button auk-button--borderless"
           {{action "close"}}
         >
@@ -33,8 +33,8 @@
         </button>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__item">
         {{web-components/vl-save-button
           text=(t "save")
           isLoading=isLoading
diff --git a/app/components/newsletter/newsletter-header-overview.hbs b/app/components/newsletter/newsletter-header-overview.hbs
index 76ad6a02b2..60b3dc6de5 100644
--- a/app/components/newsletter/newsletter-header-overview.hbs
+++ b/app/components/newsletter/newsletter-header-overview.hbs
@@ -1,6 +1,6 @@
-<div class="vlc-toolbar">
-  <div class="vlc-toolbar__left">
-    <div class="vlc-toolbar__item">
+<div class="auk-toolbar-complex">
+  <div class="auk-toolbar-complex__left">
+    <div class="auk-toolbar-complex__item">
       <h1
         class="vlc-page-header__title vlc-page-header__title--bordered vlc-page-header__title--max-width auk-u-pb"
         data-test-newsletter-overview-header-title
@@ -11,9 +11,9 @@
         {{moment-format agenda.createdFor.plannedStart "DD MMMM YYYY"}}
       </h1>
       <div class="vlc-page-header__sub">
-        <div class="vlc-toolbar vlc-toolbar--auto">
-          <div class="vlc-toolbar__left">
-            <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+          <div class="auk-toolbar-complex__left">
+            <div class="auk-toolbar-complex__item">
               <LinkTo
                 @route="newsletters"
                 class="vlc-backlink auk-button-link" >
@@ -23,7 +23,7 @@
               </LinkTo>
             </div>
             {{#if currentSession.isEditor}}
-              <div class="vlc-toolbar__item">
+              <div class="auk-toolbar-complex__item">
                 <ul class="vlc-tabs-reverse" role="tablist">
                   <li class="vlc-tabs-reverse__item">
                     <LinkTo
@@ -72,9 +72,9 @@
       </div>
     </div>
   </div>
-  <div class="vlc-toolbar__right">
-    <div class="vlc-toolbar__item">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex__right">
+    <div class="auk-toolbar-complex__item">
+      <div class="auk-toolbar-complex__item">
         {{#if currentSession.isEditor}}
         {{/if}}
         <button type="button"
diff --git a/app/components/newsletter/newsletter-header.hbs b/app/components/newsletter/newsletter-header.hbs
index 018e08ef0a..55467eb1e4 100644
--- a/app/components/newsletter/newsletter-header.hbs
+++ b/app/components/newsletter/newsletter-header.hbs
@@ -1,6 +1,6 @@
-<div class="vlc-toolbar vlc-toolbar--auto">
-  <div class="vlc-toolbar__left">
-    <div class="vlc-toolbar__item">
+<div class="auk-toolbar-complex auk-toolbar-complex--auto">
+  <div class="auk-toolbar-complex__left">
+    <div class="auk-toolbar-complex__item">
       <h1 class="vlc-page-header__title auk-u-pb" data-test-newsletter-header-title>
         {{t "newsletter"}}
       </h1>
diff --git a/app/components/sessions/session-agenda-nav.hbs b/app/components/sessions/session-agenda-nav.hbs
index 94cba2a29a..d47db1a269 100644
--- a/app/components/sessions/session-agenda-nav.hbs
+++ b/app/components/sessions/session-agenda-nav.hbs
@@ -1,50 +1,48 @@
-<ul class="vlc-toolbar-item">
-  <ul class="vlc-tabs-reverse" role="tablist">
-    <li class="vlc-tabs-reverse__item">
-      <LinkTo
-        class="border-left vlc-tabs-reverse__link"
-        @route="agenda.agendaitems.index"
-        @activeClass="vlc-tabs-reverse__link--active"
-      >
-        {{t "overview"}}
-      </LinkTo>
-    </li>
-    <li class="vlc-tabs-reverse__item">
-      {{!-- TODO: get rid of async computed, so this wrapping if and the await can go --}}
-      {{#if (await firstAgendaitemOfAgenda.id)}}
-        <Link
-          @route="agenda.agendaitems.agendaitem"
-          @model={{if this.isInAgendaItemDetailRoute null (await firstAgendaitemOfAgenda.id)}}
-        as |l|>
-          <a
-            href={{l.url}}
-            class="vlc-tabs-reverse__link {{if l.isActiveWithoutModels "vlc-tabs-reverse__link--active"}}"
-            {{on "click" l.transitionTo}}
-          >
-            {{t "detail"}}
-          </a>
-        </Link>
-      {{/if}}
-    </li>
-    {{#if currentSession.isEditor}}
-      <li class="vlc-tabs-reverse__item">
-        <LinkTo
-          class="vlc-tabs-reverse__link"
-          @route="agenda.compare"
-          @activeClass="vlc-tabs-reverse__link--active"
+<ul class="vlc-tabs-reverse" role="tablist">
+  <li class="vlc-tabs-reverse__item">
+    <LinkTo
+      class="border-left vlc-tabs-reverse__link"
+      @route="agenda.agendaitems.index"
+      @activeClass="vlc-tabs-reverse__link--active"
+    >
+      {{t "overview"}}
+    </LinkTo>
+  </li>
+  <li class="vlc-tabs-reverse__item">
+    {{!-- TODO: get rid of async computed, so this wrapping if and the await can go --}}
+    {{#if (await firstAgendaitemOfAgenda.id)}}
+      <Link
+        @route="agenda.agendaitems.agendaitem"
+        @model={{if this.isInAgendaItemDetailRoute null (await firstAgendaitemOfAgenda.id)}}
+      as |l|>
+        <a
+          href={{l.url}}
+          class="vlc-tabs-reverse__link {{if l.isActiveWithoutModels "vlc-tabs-reverse__link--active"}}"
+          {{on "click" l.transitionTo}}
         >
-          {{t "compare"}}
-        </LinkTo>
-      </li>
+          {{t "detail"}}
+        </a>
+      </Link>
     {{/if}}
+  </li>
+  {{#if currentSession.isEditor}}
     <li class="vlc-tabs-reverse__item">
       <LinkTo
         class="vlc-tabs-reverse__link"
-        @route="agenda.documents"
+        @route="agenda.compare"
         @activeClass="vlc-tabs-reverse__link--active"
       >
-        {{t "documents"}}
+        {{t "compare"}}
       </LinkTo>
     </li>
-  </ul>
+  {{/if}}
+  <li class="vlc-tabs-reverse__item">
+    <LinkTo
+      class="vlc-tabs-reverse__link"
+      @route="agenda.documents"
+      @activeClass="vlc-tabs-reverse__link--active"
+    >
+      {{t "documents"}}
+    </LinkTo>
+  </li>
 </ul>
\ No newline at end of file
diff --git a/app/components/subcases/assign-to-meeting-form.hbs b/app/components/subcases/assign-to-meeting-form.hbs
index e93d379780..85ab10ad40 100644
--- a/app/components/subcases/assign-to-meeting-form.hbs
+++ b/app/components/subcases/assign-to-meeting-form.hbs
@@ -14,10 +14,10 @@
     {{/if}}
   </div>
 </div>
-<div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-  <div class="vlc-toolbar">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+<div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+  <div class="auk-toolbar-complex">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <button type="button" class="auk-button auk-button--borderless"
           {{action "cancel"}}
         >
@@ -25,8 +25,8 @@
         </button>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__item">
         <button type="button" class="auk-button auk-button--primary"
           {{action "assignToMeeting" subcase}}
         >
diff --git a/app/components/subcases/subcase-description.hbs b/app/components/subcases/subcase-description.hbs
index 6c9749a8ae..a26841c9ca 100644
--- a/app/components/subcases/subcase-description.hbs
+++ b/app/components/subcases/subcase-description.hbs
@@ -172,13 +172,13 @@
         {{web-components/vl-form-input value=subcaseName}}
       </div>
     </div>
-    <div class="vlc-toolbar vlc-toolbar--auto">
-      <div class="vlc-toolbar__right">
+    <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+      <div class="auk-toolbar-complex__right">
         <a href="" class="auk-button-link" {{action "cancelEditing"}}>
           {{t "cancel"}}
         </a>
       </div>
-      <div class="vlc-toolbar__left">
+      <div class="auk-toolbar-complex__left">
         {{web-components/vl-save-button
           text=(t "save")
           isLoading=isLoading
diff --git a/app/components/subcases/subcase-detail-nav.hbs b/app/components/subcases/subcase-detail-nav.hbs
index 1cdb885a7b..5e2a8db3e1 100644
--- a/app/components/subcases/subcase-detail-nav.hbs
+++ b/app/components/subcases/subcase-detail-nav.hbs
@@ -1,6 +1,6 @@
-<div class="vlc-toolbar vlc-toolbar--auto">
-  <div class="vlc-toolbar__left">
-    <div class="vlc-toolbar__item">
+<div class="auk-toolbar-complex auk-toolbar-complex--auto">
+  <div class="auk-toolbar-complex__left">
+    <div class="auk-toolbar-complex__item">
       <LinkTo
         data-test-navigation-walk-up
         @route="cases.case.subcases"
@@ -11,7 +11,7 @@
       {{!-- template-lint-enable no-bare-strings  --}}
       </LinkTo>
     </div>
-    <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__item">
       <ul class="vlc-tabs-reverse" role="tablist">
         <li class="vlc-tabs-reverse__item">
           <LinkTo
diff --git a/app/components/subcases/subcase-header.hbs b/app/components/subcases/subcase-header.hbs
index 1b7c2d5d48..dcfc7817ad 100644
--- a/app/components/subcases/subcase-header.hbs
+++ b/app/components/subcases/subcase-header.hbs
@@ -1,15 +1,15 @@
-<div class="vlc-toolbar">
-  <div class="vlc-toolbar__left">
-    <div class="vlc-toolbar__item">
+<div class="auk-toolbar-complex">
+  <div class="auk-toolbar-complex__left">
+    <div class="auk-toolbar-complex__item">
       <h1 class="vlc-page-header__title vlc-page-header__title--bordered vlc-page-header__title--max-width auk-u-text-capitalize auk-u-pb">
         {{subcase.shortTitle}}
       </h1>
       <Subcases::SubcaseDetailNav/>
     </div>
   </div>
-  <div class="vlc-toolbar__right">
+  <div class="auk-toolbar-complex__right">
     {{#if currentSession.isEditor}}
-      <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__item">
         {{#if (or (is-pending canPropose) isLoading)}}
           <div class="auk-loader" role="alert" aria-busy="true"></div>
         {{else if (await canPropose)}}
@@ -56,7 +56,7 @@
           {{/attach-popover}}
         {{/if}}
       </div>
-      <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__item">
         <button type="button"
           class="auk-button auk-button--secondary"
           {{action "showMultipleOptions" bubbles=false}}
diff --git a/app/components/subcases/subcase-item.hbs b/app/components/subcases/subcase-item.hbs
index 2bd920bcba..c25d09ab74 100644
--- a/app/components/subcases/subcase-item.hbs
+++ b/app/components/subcases/subcase-item.hbs
@@ -16,9 +16,9 @@
       </div>
     {{/if}}
   </div>
-  <div class="vlc-toolbar vlc-toolbar--auto">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <div class="auk-u-mb-2">
           {{#if (not (is-pending @subcase))}}
             <LinkTo
diff --git a/app/components/utils/add-existing-piece.hbs b/app/components/utils/add-existing-piece.hbs
index 66e3bf03ab..cd8a9ae3fb 100644
--- a/app/components/utils/add-existing-piece.hbs
+++ b/app/components/utils/add-existing-piece.hbs
@@ -1,8 +1,8 @@
 <div class="auk-u-mb-2">
   <div>
-    <div class="vlc-toolbar vlc-toolbar--auto">
-      <div class="vlc-toolbar__justified custom-table-search">
-        <div class="vlc-toolbar__item vlc-toolbar__item__width">
+    <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+      <div class="auk-toolbar-complex__left custom-table-search">
+        <div class="auk-toolbar-complex__item auk-u-maximize-width auk-u-overflow-hidden">
           <div class="vl-input-field--inline">
             <Input
               data-test-search-existing-document=""
diff --git a/app/components/utils/edit-mandatee.hbs b/app/components/utils/edit-mandatee.hbs
index dd5969cf9b..81fe83b390 100644
--- a/app/components/utils/edit-mandatee.hbs
+++ b/app/components/utils/edit-mandatee.hbs
@@ -51,10 +51,10 @@
     }}
   </div>
 </div>
-<div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-  <div class="vlc-toolbar">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+<div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+  <div class="auk-toolbar-complex">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <button data-test-edit-mandatee-cancel
                 type="button" class="auk-button auk-button--borderless"
           {{action "closeModal"}}
@@ -63,8 +63,8 @@
         </button>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__item">
         {{web-components/vl-save-button
           text=(t "save")
           isLoading=isLoading
diff --git a/app/components/utils/manage-government-fields.hbs b/app/components/utils/manage-government-fields.hbs
index 1169ebc157..d872a6c363 100644
--- a/app/components/utils/manage-government-fields.hbs
+++ b/app/components/utils/manage-government-fields.hbs
@@ -16,10 +16,10 @@
         }}
       </div>
     </div>
-    <div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-      <div class="vlc-toolbar">
-        <div class="vlc-toolbar__left">
-          <div class="vlc-toolbar__item">
+    <div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+      <div class="auk-toolbar-complex">
+        <div class="auk-toolbar-complex__left">
+          <div class="auk-toolbar-complex__item">
             <button type="button" class="auk-button auk-button--borderless"
                     data-test-vl-model-manager-close
               {{action "close"}}
@@ -28,8 +28,8 @@
             </button>
           </div>
         </div>
-        <div class="vlc-toolbar__right">
-          <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex__right">
+          <div class="auk-toolbar-complex__item">
             <button type="button" class="auk-button auk-button--tertiary"
               data-test-vl-model-manager-add
               {{action "toggleIsAdding"}}
diff --git a/app/components/utils/manage-ise-code.hbs b/app/components/utils/manage-ise-code.hbs
index 94243bc12e..c93079ecac 100644
--- a/app/components/utils/manage-ise-code.hbs
+++ b/app/components/utils/manage-ise-code.hbs
@@ -16,10 +16,10 @@
         }}
       </div>
     </div>
-    <div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-      <div class="vlc-toolbar">
-        <div class="vlc-toolbar__left">
-          <div class="vlc-toolbar__item">
+    <div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+      <div class="auk-toolbar-complex">
+        <div class="auk-toolbar-complex__left">
+          <div class="auk-toolbar-complex__item">
             <button type="button" class="auk-button auk-button--borderless"
               {{action "close"}}
             >
@@ -27,8 +27,8 @@
             </button>
           </div>
         </div>
-        <div class="vlc-toolbar__right">
-          <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex__right">
+          <div class="auk-toolbar-complex__item">
             <button type="button" class="auk-button auk-button--tertiary"
               data-test-vl-model-manager-add
               {{action "toggleIsAdding"}}
diff --git a/app/components/utils/manage-signatures.hbs b/app/components/utils/manage-signatures.hbs
index 8957111680..0e7953dfc1 100644
--- a/app/components/utils/manage-signatures.hbs
+++ b/app/components/utils/manage-signatures.hbs
@@ -20,10 +20,10 @@
       closeModal=(action "toggleIsEditing")
     }}
   {{else}}
-    <div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-      <div class="vlc-toolbar">
-        <div class="vlc-toolbar__left">
-          <div class="vlc-toolbar__item">
+    <div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+      <div class="auk-toolbar-complex">
+        <div class="auk-toolbar-complex__left">
+          <div class="auk-toolbar-complex__item">
             <button type="button" class="auk-button auk-button--borderless"
               {{action "closeModal"}}
             >
@@ -31,8 +31,8 @@
             </button>
           </div>
         </div>
-        <div class="vlc-toolbar__right">
-          <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex__right">
+          <div class="auk-toolbar-complex__item">
             {{#if selectedSignature}}
               <button type="button" class="auk-button auk-button--tertiary"
                 {{action "setDefaultSignature"}}
diff --git a/app/components/utils/model-manager.hbs b/app/components/utils/model-manager.hbs
index 82c8b899be..586e6ae5e3 100644
--- a/app/components/utils/model-manager.hbs
+++ b/app/components/utils/model-manager.hbs
@@ -16,10 +16,10 @@
         }}
       </div>
     </div>
-    <div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-      <div class="vlc-toolbar">
-        <div class="vlc-toolbar__left">
-          <div class="vlc-toolbar__item">
+    <div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+      <div class="auk-toolbar-complex">
+        <div class="auk-toolbar-complex__left">
+          <div class="auk-toolbar-complex__item">
             <button type="button" data-test-vl-model-manager-close
                     class="auk-button auk-button--borderless"
               {{action "close"}}
@@ -28,8 +28,8 @@
             </button>
           </div>
         </div>
-        <div class="vlc-toolbar__right">
-          <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex__right">
+          <div class="auk-toolbar-complex__item">
             <button type="button" data-test-vl-model-manager-add
               class="auk-button auk-button--tertiary"
               {{action "toggleIsAdding"}}
diff --git a/app/components/utils/overviews-header-decision.hbs b/app/components/utils/overviews-header-decision.hbs
index 156ca898c7..64b030aa3c 100644
--- a/app/components/utils/overviews-header-decision.hbs
+++ b/app/components/utils/overviews-header-decision.hbs
@@ -1,14 +1,14 @@
 <div class="vlc-page-header">
-  <div class="vlc-toolbar">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <h1 class="vlc-page-header__title auk-u-pb" data-test-print-overview-template-header-title>
           {{await title}}
         </h1>
         <div class="vlc-page-header__sub">
-          <div class="vlc-toolbar vlc-toolbar--auto">
-            <div class="vlc-toolbar__left">
-              <div class="vlc-toolbar__item">
+          <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+            <div class="auk-toolbar-complex__left">
+              <div class="auk-toolbar-complex__item">
                 <a href="" class="vlc-backlink auk-button-link"
                   {{action "navigateBackToAgenda"}}
                 >
@@ -17,7 +17,7 @@
                   {{!-- template-lint-enable no-bare-strings  --}}
                 </a>
               </div>
-              <div class="vlc-toolbar__item">
+              <div class="auk-toolbar-complex__item">
                 <ul class="vlc-tabs-reverse" role="tablist">
                   {{#if currentSession.isEditor}}
                     <li class="vlc-tabs-reverse__item">
@@ -38,8 +38,8 @@
         </div>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__item">
         {{#if shouldShowPrintButton}}
           <button type="button" class="auk-button auk-button--tertiary"
             {{action "print"}}
diff --git a/app/components/utils/overviews-header-print.hbs b/app/components/utils/overviews-header-print.hbs
index 2fb7a2e922..1586255850 100644
--- a/app/components/utils/overviews-header-print.hbs
+++ b/app/components/utils/overviews-header-print.hbs
@@ -1,14 +1,14 @@
 <div class="vlc-page-header">
-  <div class="vlc-toolbar">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <h1 class="vlc-page-header__title auk-u-pb" data-test-print-overview-template-header-title>
           {{await title}}
         </h1>
         <div class="vlc-page-header__sub">
-          <div class="vlc-toolbar vlc-toolbar--auto">
-            <div class="vlc-toolbar__left">
-              <div class="vlc-toolbar__item">
+          <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+            <div class="auk-toolbar-complex__left">
+              <div class="auk-toolbar-complex__item">
                 <a href="" class="vlc-backlink auk-button-link"
                   {{action "navigateBackToAgenda"}}
                 >
@@ -17,7 +17,7 @@
                   {{!-- template-lint-enable no-bare-strings  --}}
                 </a>
               </div>
-              <div class="vlc-toolbar__item">
+              <div class="auk-toolbar-complex__item">
                 <ul class="vlc-tabs-reverse" role="tablist">
                   {{#if currentSession.isEditor}}
                     <li class="vlc-tabs-reverse__item">
@@ -60,8 +60,8 @@
         </div>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__item">
         {{#if shouldShowPrintButton}}
           <button type="button" class="auk-button auk-button--tertiary"
             {{action "print"}}
diff --git a/app/components/utils/settings-header.hbs b/app/components/utils/settings-header.hbs
index 9a6b10a01e..8208aff994 100644
--- a/app/components/utils/settings-header.hbs
+++ b/app/components/utils/settings-header.hbs
@@ -1,13 +1,15 @@
-<div class="vlc-toolbar vlc-toolbar--bordered-top vlc-toolbar--bordered-bottom">
-  <div class="vlc-toolbar__left">
-    {{#if showBackButton}}
-      {{utils/back-button}}
-    {{/if}}
-    <div class="vlc-toolbar__item u-padding--left">
-      <h4 class="vlc-toolbar__title">{{title}}</h4>
+<div class="auk-u-border-top auk-u-border-bottom">
+  <div class="auk-toolbar-complex">
+    <div class="auk-toolbar-complex__left">
+      {{#if showBackButton}}
+        {{utils/back-button}}
+      {{/if}}
+      <div class="auk-toolbar-complex__item u-padding--left">
+        <h4 class="auk-toolbar-complex__title">{{title}}</h4>
+      </div>
+    </div>
+    <div class="auk-toolbar-complex__right">
+      {{yield}}
     </div>
-  </div>
-  <div class="vlc-toolbar__right">
-    {{yield}}
   </div>
 </div>
\ No newline at end of file
diff --git a/app/pods/agenda/agendaitems/agendaitem/template.hbs b/app/pods/agenda/agendaitems/agendaitem/template.hbs
index 2618a97843..35f054c036 100644
--- a/app/pods/agenda/agendaitems/agendaitem/template.hbs
+++ b/app/pods/agenda/agendaitems/agendaitem/template.hbs
@@ -21,7 +21,7 @@
 <div class="vlc-panel-layout__main-content">
   <div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper">
     <div class="vlc-scroll-wrapper__header">
-      <div class="vlc-navbar vlc-navbar--bordered-bottom vlc-navbar--tabs vlc-navbar--tabs-bottom">
+      <div class="auk-navbar auk-navbar--bordered-bottom">
         <Agenda::Agendaitem::AgendaitemNav
           @agendaitem={{this.model}}
           @meetingIsConcluded={{this.meeting.isFinal}}
diff --git a/app/pods/agendas/template.hbs b/app/pods/agendas/template.hbs
index 9b6fc64e50..ed885c1196 100644
--- a/app/pods/agendas/template.hbs
+++ b/app/pods/agendas/template.hbs
@@ -1,16 +1,16 @@
 {{page-title (t "agenda-title")}}
 <div class="auk-u-bg-alt">
   <div class="vlc-page-header">
-    <div class="vlc-toolbar vlc-toolbar--auto">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+      <div class="auk-toolbar-complex__item">
         <h1 class="vlc-page-header__title vlc-page-header__title--bordered auk-u-pb"
             data-test-agendas-title>
           {{t "agenda-title"}}
         </h1>
       </div>
-      <div class="vlc-toolbar__right">
+      <div class="auk-toolbar-complex__right">
         {{#if currentSession.isEditor}}
-          <div class="vlc-toolbar__item">
+          <div class="auk-toolbar-complex__item">
             <button data-test-vlc-agenda-createnewagendabutton
               type="button"
               class="auk-button auk-button--primary"
diff --git a/app/pods/cases/overview/template.hbs b/app/pods/cases/overview/template.hbs
index ed3038ad20..a0b6801832 100644
--- a/app/pods/cases/overview/template.hbs
+++ b/app/pods/cases/overview/template.hbs
@@ -2,16 +2,16 @@
 {{cases/cases-header isAddingCase=isAddingCase close=(action "close")}}
 <div class="vlc-scroll-wrapper__body">
   <div class="auk-u-m-8">
-    <div class="vlc-toolbar">
-      <div class="vlc-toolbar__left">
-        <div class="vlc-toolbar__item">
-          <h2 class="auk-h2">{{t "my-cases"}}</h2>
+    <div class="auk-toolbar-complex">
+      <div class="auk-toolbar-complex__left">
+        <div class="auk-toolbar-complex__item">
+          <h2 class="auk-h2 auk-u-m-0">{{t "my-cases"}}</h2>
         </div>
       </div>
 
-      <div class="vlc-toolbar__right">
+      <div class="auk-toolbar-complex__right">
         {{#if this.currentSession.isEditor}}
-          <div class="vlc-toolbar__item auk-u-flex auk-u-flex--vertical-center">
+          <div class="auk-toolbar-complex__item auk-u-flex auk-u-flex--vertical-center">
             <WebComponents::AuLabel class="auk-u-text-nowrap auk-u-mr-2 auk-u-p-0" for="isArchived">{{t "show-archived"}}</WebComponents::AuLabel>
             {{web-components/vl-toggle value=this.showArchived}}
           </div>
diff --git a/app/pods/search/template.hbs b/app/pods/search/template.hbs
index 994dad16c4..ceaa4ce382 100644
--- a/app/pods/search/template.hbs
+++ b/app/pods/search/template.hbs
@@ -3,12 +3,14 @@
 }}
 <div class="auk-u-bg-alt">
   <div class="vlc-page-header">
-    <div class="vlc-toolbar vlc-toolbar--auto">
-      <div class="vlc-toolbar__item">
-        <h1 class="vlc-page-header__title vlc-page-header__title--bordered auk-u-pb"
-            data-test-agendas-title>
-          {{capitalize (t "search")}}
-        </h1>
+    <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+      <div class="auk-toolbar-complex__left">
+        <div class="auk-toolbar-complex__item">
+          <h1 class="vlc-page-header__title vlc-page-header__title--bordered auk-u-pb"
+              data-test-agendas-title>
+            {{capitalize (t "search")}}
+          </h1>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/pods/settings/system-alerts/index/template.hbs b/app/pods/settings/system-alerts/index/template.hbs
index 4d47641f90..01a12a6df4 100644
--- a/app/pods/settings/system-alerts/index/template.hbs
+++ b/app/pods/settings/system-alerts/index/template.hbs
@@ -15,10 +15,10 @@
       {{/power-select}}
     </div>
   </div>
-  <div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-    <div class="vlc-toolbar">
-      <div class="vlc-toolbar__left">
-        <div class="vlc-toolbar__item">
+  <div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+    <div class="auk-toolbar-complex">
+      <div class="auk-toolbar-complex__left">
+        <div class="auk-toolbar-complex__item">
           <LinkTo
             @tagName="button"
             @type="button"
@@ -29,8 +29,8 @@
           </LinkTo>
         </div>
       </div>
-      <div class="vlc-toolbar__right">
-        <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__right">
+        <div class="auk-toolbar-complex__item">
           <LinkTo
             data-test-add-system-alert
             @tagName="button"
diff --git a/app/pods/settings/template.hbs b/app/pods/settings/template.hbs
index fa36f127d7..261b9bf020 100644
--- a/app/pods/settings/template.hbs
+++ b/app/pods/settings/template.hbs
@@ -1,11 +1,11 @@
 {{page-title (t "settings")}}
 <div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper">
   <div class="auk-u-bg-alt">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
-        <div class="vlc-toolbar vlc-toolbar--auto">
-          <div class="vlc-toolbar__left">
-            <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
+        <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+          <div class="auk-toolbar-complex__left">
+            <div class="auk-toolbar-complex__item">
               <ul class="auk-tabs">
                 <li class="auk-tabs__tab" data-test-settings-generalSettings>
                   {{#link-to
diff --git a/app/pods/settings/users/index/template.hbs b/app/pods/settings/users/index/template.hbs
index e21e839d4b..87d175aedd 100644
--- a/app/pods/settings/users/index/template.hbs
+++ b/app/pods/settings/users/index/template.hbs
@@ -9,8 +9,8 @@
 {{/utils/settings-header}}
 <div class="auk-u-m-8">
   <div class="vlc-input-field-group vlc-input-field-group--gmeeting">
-    <div class="vlc-toolbar">
-      <div class="vlc-toolbar__left">
+    <div class="auk-toolbar-complex">
+      <div class="auk-toolbar-complex__left">
         <Input
           data-test-user-search-input=""
           class="auk-input"

From e6af623283e4092b845868ae855cb89c187a4fb1 Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Fri, 16 Apr 2021 12:55:52 +0200
Subject: [PATCH 2/5] Remove vlc-navbar + vlc-toolbar source and change
 additional rules

---
 app/components/navbar.hbs                     |   3 -
 app/components/navbar.js                      |  46 ------
 app/components/toolbar.hbs                    |   8 -
 app/components/toolbar.js                     |  10 --
 app/components/toolbar/group.hbs              |   3 -
 app/components/toolbar/group.js               |  10 --
 app/components/toolbar/item.hbs               |   3 -
 app/styles/_print.scss                        |   5 +-
 app/styles/app.scss                           |   2 -
 app/styles/custom-components/_vlc-navbar.scss |  76 ----------
 .../custom-components/_vlc-page-header.scss   |   9 --
 .../custom-components/_vlc-side-nav.scss      |   2 +-
 .../custom-components/_vlc-toolbar.scss       | 137 ------------------
 app/styles/print/_print.scss                  |   9 +-
 app/styles/print/agendaitem-print.scss        |   5 +-
 15 files changed, 10 insertions(+), 318 deletions(-)
 delete mode 100644 app/components/navbar.hbs
 delete mode 100644 app/components/navbar.js
 delete mode 100644 app/components/toolbar.hbs
 delete mode 100644 app/components/toolbar.js
 delete mode 100644 app/components/toolbar/group.hbs
 delete mode 100644 app/components/toolbar/group.js
 delete mode 100644 app/components/toolbar/item.hbs
 delete mode 100644 app/styles/custom-components/_vlc-navbar.scss
 delete mode 100644 app/styles/custom-components/_vlc-toolbar.scss

diff --git a/app/components/navbar.hbs b/app/components/navbar.hbs
deleted file mode 100644
index 39085f196f..0000000000
--- a/app/components/navbar.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="vlc-navbar {{this.border}} {{this.skin}} {{this.size}} {{this.auto}}" ...attributes>
-  {{yield}}
-</div>
diff --git a/app/components/navbar.js b/app/components/navbar.js
deleted file mode 100644
index 19073708bb..0000000000
--- a/app/components/navbar.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class Navbar extends Component {
-  get border() {
-    if (this.args.border === 'top') {
-      return 'vlc-navbar--bordered-top';
-    }
-
-    if (this.args.border === 'bottom') {
-      return 'vlc-navbar--bordered-bottom';
-    }
-
-    if (this.args.border === 'none') {
-      return '';
-    }
-
-    return 'vlc-navbar--bordered-bottom';
-  }
-
-  get skin() {
-    if (this.args.skin === 'gray-100') {
-      return 'vlc-navbar--gray-100 ';
-    }
-
-    if (this.args.skin === 'gray-200') {
-      return 'vlc-navbar--gray-200 ';
-    }
-
-    return 'vlc-navbar--white';
-  }
-
-  get size() {
-    if (this.args.size === 'large') {
-      return 'vlc-navbar--large';
-    }
-
-    return '';
-  }
-
-  get auto() {
-    if (this.args.auto) {
-      return 'vlc-navbar--auto';
-    }
-    return '';
-  }
-}
diff --git a/app/components/toolbar.hbs b/app/components/toolbar.hbs
deleted file mode 100644
index 0e653fe330..0000000000
--- a/app/components/toolbar.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="vlc-toolbar {{this.auto}}" ...attributes>
-  {{yield
-    (hash
-    Group = (component 'toolbar/group')
-    Item = (component 'toolbar/item')
-  )
-  }}
-</div>
diff --git a/app/components/toolbar.js b/app/components/toolbar.js
deleted file mode 100644
index fcf66cba9d..0000000000
--- a/app/components/toolbar.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class Toolbar extends Component {
-  get auto() {
-    if (this.args.auto) {
-      return 'vlc-toolbar--auto';
-    }
-    return '';
-  }
-}
diff --git a/app/components/toolbar/group.hbs b/app/components/toolbar/group.hbs
deleted file mode 100644
index 0b7a4cfe04..0000000000
--- a/app/components/toolbar/group.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="{{this.position}}" ...attributes>
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/app/components/toolbar/group.js b/app/components/toolbar/group.js
deleted file mode 100644
index 5be9321764..0000000000
--- a/app/components/toolbar/group.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class ToolbarGroup extends Component {
-  get position() {
-    if (this.args.position) {
-      return `vlc-toolbar__${this.args.position}`;
-    }
-    return 'vlc-toolbar__left';
-  }
-}
diff --git a/app/components/toolbar/item.hbs b/app/components/toolbar/item.hbs
deleted file mode 100644
index 8b583e845b..0000000000
--- a/app/components/toolbar/item.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="vlc-toolbar__item" ...attributes>
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/app/styles/_print.scss b/app/styles/_print.scss
index 1045d0b6b3..e81c9fd376 100644
--- a/app/styles/_print.scss
+++ b/app/styles/_print.scss
@@ -28,7 +28,8 @@
   }
 
   // Remove backgrounds
-  .vlc-navbar--bg-alt,
+  .auk-navbar--gray-100,
+  .auk-navbar--gray-200,
   .auk-u-bg-alt {
     background: #fff;
   }
@@ -48,7 +49,7 @@
     display: none !important;
   }
 
-  .vlc-toolbar__right {
+  .auk-toolbar-complex__right {
     display: none;
   }
 
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 6f36f44406..31bd6215a3 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -62,7 +62,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'custom-components/vlc-list-section-header';
 @import 'custom-components/vlc-minister';
 @import 'custom-components/vlc-mock-login';
-@import 'custom-components/vlc-navbar';
 @import 'custom-components/vlc-new-session';
 @import 'custom-components/vlc-page-header';
 @import 'custom-components/vlc-pagination';
@@ -84,7 +83,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'custom-components/vlc-tabs';
 @import 'custom-components/vlc-themes-selector';
 @import 'custom-components/vlc-toaster-button';
-@import 'custom-components/vlc-toolbar';
 @import 'custom-components/vlc-user';
 @import 'custom-components/vlc-user-management-table';
 @import 'custom-components/vlc-link-actions';
diff --git a/app/styles/custom-components/_vlc-navbar.scss b/app/styles/custom-components/_vlc-navbar.scss
deleted file mode 100644
index 4356c7cc2b..0000000000
--- a/app/styles/custom-components/_vlc-navbar.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-/* ==========================================================================
-   Component: navbar
-   ---
-   A container for navigational elements
-   ========================================================================== */
-
-/* Variables
-   ========================================================================== */
-
-$vl-bar-size-padding: 2rem !default;
-$vl-bar-size-regular: 6.5rem !default;
-$vl-bar-size-large: 9.5rem !default;
-
-/* Component
-   ========================================================================== */
-
-.vlc-navbar {
-  padding: 0 $vl-bar-size-padding;
-  height: $vl-bar-size-regular;
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.vlc-navbar > .vlc-toolbar {
-  flex: 1 0 auto;
-}
-
-.vlc-navbar--auto {
-  height: auto;
-}
-
-.vlc-navbar--no-padding {
-  padding: 0;
-}
-
-.vlc-navbar--white {
-  background: #FFF;
-}
-
-.vlc-navbar--bg-alt {
-  background: $athens-gray;
-}
-
-.vlc-navbar--align-with-m-header {
-  padding-left: 4rem;
-}
-
-/* Bordered equivalents
-   ========================================================================== */
-
-.vlc-navbar--bordered-top {
-  border-top: 0.1rem solid $ghost;
-}
-
-.vlc-navbar--bordered-bottom {
-  border-bottom: 0.1rem solid $ghost;
-}
-
-/* With tabs
-   ========================================================================== */
-
-.vlc-navbar--tabs {
-  white-space: nowrap;
-}
-
-.vlc-navbar--tabs-bottom {
-  align-items: flex-end;
-}
-
-/* Sizes
-	 ========================================================================== */
-
-.vlc-navbar--large {
-  height: $vl-bar-size-large;
-}
diff --git a/app/styles/custom-components/_vlc-page-header.scss b/app/styles/custom-components/_vlc-page-header.scss
index 698c169921..4b57f658c5 100644
--- a/app/styles/custom-components/_vlc-page-header.scss
+++ b/app/styles/custom-components/_vlc-page-header.scss
@@ -46,15 +46,6 @@
   padding-left: 1rem;
 }
 
-
-// Same as .vlc-page-header__title - refactor
-.vlc-toolbar__title {
-  font-size: 2.4rem;
-  font-weight: 500;
-  margin: 0;
-  padding: 0;
-}
-
 .vlc-page-header--condensed {
   padding: 0 4rem;
 }
diff --git a/app/styles/custom-components/_vlc-side-nav.scss b/app/styles/custom-components/_vlc-side-nav.scss
index 4f09e816fc..667613a86a 100644
--- a/app/styles/custom-components/_vlc-side-nav.scss
+++ b/app/styles/custom-components/_vlc-side-nav.scss
@@ -56,7 +56,7 @@
 .vlc-panel-layout__agenda-history.vlc-panel-layout__agenda-history--collapsed {
   width: 80px;
 
-  .vlc-navbar {
+  .auk-navbar {
     padding: 0 .8rem;
   }
 
diff --git a/app/styles/custom-components/_vlc-toolbar.scss b/app/styles/custom-components/_vlc-toolbar.scss
deleted file mode 100644
index 3bea4b7838..0000000000
--- a/app/styles/custom-components/_vlc-toolbar.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-/* ==========================================================================
-  Component: Toolbar
-  ---
-  Component for aligning multiple sub components on a horizontal axis
-   ========================================================================== */
-
-/* Variables
-   ========================================================================== */
-
-$c-toolbar-item-spacing: 0.8rem !default;
-$c-toolbar-main-border-color: $ghost;
-$c-toolbar-size-regular: 6.5rem;
-$c-toolbar-size-medium: 5rem;
-$c-toolbar-z: 21;
-$c-toolbar-middle-z: 20;
-
-/* Component
-  ========================================================================== */
-
-.vlc-toolbar {
-  width: 100%;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: space-between;
-  height: $c-toolbar-size-regular;
-}
-
-.vlc-toolbar--medium {
-  height: $c-toolbar-size-medium;
-}
-
-.vlc-toolbar--spaced {
-  padding: 0 2.4rem;
-}
-
-.vlc-toolbar--auto {
-  height: auto;
-}
-
-.vlc-toolbar__left {
-  z-index: $c-toolbar-z; // Left and right should have higher z-index than center; if the elements overlap, there is a bigger chance we can still tap the action most likely contained on the left or right end
-  max-width: 100%;
-  .vlc-toolbar__item {
-    margin-right: $c-toolbar-item-spacing;
-    &:only-child {
-      margin: 0;
-    }
-  }
-}
-
-.vlc-toolbar__item__width {
-  width: 60%;
-}
-
-.vlc-toolbar__right {
-  z-index: $c-toolbar-z; // Left and right should have higher z-index than center; if the elements overlap, there is a bigger chance we can still tap the action most likely contained on the left or right end
-  max-width: 100%;
-  .vlc-toolbar__item {
-    margin-left: $c-toolbar-item-spacing;
-    &:only-child {
-      margin: 0;
-    }
-  }
-}
-
-.vlc-toolbar__left,
-.vlc-toolbar__right {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-.vlc-toolbar__item {
-  position: relative;
-}
-
-/* Specific children
-  ========================================================================== */
-
-.vlc-toolbar__title {
-  font-weight: 500;
-  font-size: 2rem; // Same as h4
-}
-
-/* Justified toolbar
-  ========================================================================== */
-
-.vlc-toolbar__justified {
-  flex: 1 0 auto;
-  display: flex;
-  align-items: center;
-  .vlc-toolbar__item {
-    margin-right: $c-toolbar-item-spacing;
-  }
-}
-
-.vlc-toolbar__item--stretch {
-  flex: 1;
-}
-
-.vlc-toolbar__justified {
-  .vlc-toolbar__item:last-child {
-    margin: 0;
-  }
-}
-
-/* Toolbar aligned top
-  ========================================================================== */
-
-.vlc-toolbar--align-top {
-  align-items: flex-start;
-}
-
-/* Bordered equivalents
-   ========================================================================== */
-
-.vlc-toolbar--bordered-top {
-  border-top: 0.1rem solid $ghost;
-}
-
-.vlc-toolbar--bordered-bottom {
-  border-bottom: 0.1rem solid $ghost;
-}
-
-/* Slide-in toolbar
-	 ========================================================================== */
-
-.vlc-toolbar--slide-in {
-  position: absolute;
-  top: 0;
-  right: 18rem;
-  left: 18rem;
-  max-height: 4rem;
-  z-index: 3200;
-  width: calc(100% - 37rem);
-}
diff --git a/app/styles/print/_print.scss b/app/styles/print/_print.scss
index 5b54b1bf12..9eace5c242 100644
--- a/app/styles/print/_print.scss
+++ b/app/styles/print/_print.scss
@@ -5,10 +5,6 @@
 }
 
 @media print {
-  .vlc-navbar.vlc-navbar--bordered-bottom.vlc-navbar--bg-alt.vlc-navbar--large {
-    display: none;
-  }
-
   html {
     font-size: 50%;
   }
@@ -27,7 +23,8 @@
   }
 
   // Remove backgrounds
-  .vlc-navbar--bg-alt,
+  .auk-navbar--gray-100,
+  .auk-navbar--gray-200,
   .auk-u-bg-alt {
     background: #fff;
   }
@@ -47,7 +44,7 @@
     display: none !important;
   }
 
-  .vlc-toolbar__right {
+  .auk-toolbar-complex__right {
     display: none;
   }
 
diff --git a/app/styles/print/agendaitem-print.scss b/app/styles/print/agendaitem-print.scss
index eaeb5d9f81..d94a86998f 100644
--- a/app/styles/print/agendaitem-print.scss
+++ b/app/styles/print/agendaitem-print.scss
@@ -21,7 +21,8 @@
   }
 
   // Remove backgrounds
-  .vlc-navbar--bg-alt,
+  .auk-navbar--gray-100,
+  .auk-navbar--gray-200,
   .auk-u-bg-alt {
     background: #fff;
   }
@@ -37,7 +38,7 @@
     display: none !important;
   }
 
-  .vlc-toolbar__right {
+  .auk-toolbar-complex__right {
     display: none;
   }
 

From e44f63baca9013039b7d6ed4025376400b74cc2e Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Fri, 16 Apr 2021 12:56:25 +0200
Subject: [PATCH 3/5] Adjust tests

---
 cypress/integration/all-flaky-tests/subcase.spec.js      | 2 +-
 cypress/integration/unit/cancel-editing-document.spec.js | 2 +-
 cypress/support/commands/agenda-commands.js              | 6 +++---
 cypress/support/commands/case-commands.js                | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/cypress/integration/all-flaky-tests/subcase.spec.js b/cypress/integration/all-flaky-tests/subcase.spec.js
index 8df6dfdc48..8193c3b152 100644
--- a/cypress/integration/all-flaky-tests/subcase.spec.js
+++ b/cypress/integration/all-flaky-tests/subcase.spec.js
@@ -271,7 +271,7 @@ context('Subcase tests', () => {
     // Go via kort-bestek view
     cy.route('GET', '/meetings/**/mail-campaign').as('getMeetingsMail');
     cy.route('GET', '/meetings?**').as('getMeetingsfilter');
-    cy.get('.vlc-toolbar').contains('Kort bestek')
+    cy.get('.auk-toolbar-complex').contains('Kort bestek')
       .click();
     cy.wait('@getMeetingsMail');
     cy.wait('@getMeetingsfilter');
diff --git a/cypress/integration/unit/cancel-editing-document.spec.js b/cypress/integration/unit/cancel-editing-document.spec.js
index f355366327..f8b793d3cc 100644
--- a/cypress/integration/unit/cancel-editing-document.spec.js
+++ b/cypress/integration/unit/cancel-editing-document.spec.js
@@ -215,7 +215,7 @@ context('Tests for cancelling CRUD operations on document and pieces', () => {
     cy.get('.js-vl-accordion > button').click();
 
     // Cancel/save access-level in document card
-    cy.get('.vlc-document-card__content > .vlc-toolbar > .vlc-document-card-toolbar__right').as('accessLevelToolbar')
+    cy.get('.vlc-document-card__content > .auk-toolbar-complex > .vlc-document-card-toolbar__right').as('accessLevelToolbar')
       .within(() => {
         cy.get('.vlc-pill').contains('Intern Overheid')
           .click();
diff --git a/cypress/support/commands/agenda-commands.js b/cypress/support/commands/agenda-commands.js
index 7e107a25ad..f79b890644 100644
--- a/cypress/support/commands/agenda-commands.js
+++ b/cypress/support/commands/agenda-commands.js
@@ -384,7 +384,7 @@ function approveDesignAgenda(shouldConfirm = true) {
 
   // TODO add boolean for when not all items are formally ok, click through the confirmation modal
   // TODO use test selector
-  cy.get('.vlc-toolbar').within(() => {
+  cy.get('.auk-toolbar-complex').within(() => {
     cy.get(agenda.agendaHeaderShowAgendaOptions).click();
   });
   cy.get(agenda.approveAgenda).click();
@@ -427,7 +427,7 @@ function approveAndCloseDesignAgenda(shouldConfirm = true) {
 
   // TODO add boolean for when not all items are formally ok, click through the confirmation modal
   // TODO use test selector
-  cy.get('.vlc-toolbar').within(() => {
+  cy.get('.auk-toolbar-complex').within(() => {
     cy.get(agenda.agendaHeaderShowAgendaOptions).click();
   });
   cy.get(agenda.agendaHeaderApproveAndCloseAgenda).click();
@@ -561,7 +561,7 @@ function toggleShowChanges(refresh) {
     cy.wait(2500); // data loading after switching to overzicht
   }
 
-  cy.get('.vlc-agenda-items .vlc-toolbar__right > .vlc-toolbar__item')
+  cy.get('.vlc-agenda-items .auk-toolbar-complex__right > .auk-toolbar-complex__item')
     .first()
     .click();
   cy.wait(1500); // the changes are not loaded yet, cypress does not find the get call to agenda-sort
diff --git a/cypress/support/commands/case-commands.js b/cypress/support/commands/case-commands.js
index b5a540ea8b..0e4cbe3354 100644
--- a/cypress/support/commands/case-commands.js
+++ b/cypress/support/commands/case-commands.js
@@ -45,7 +45,7 @@ function createCase(confidential, shortTitle) {
     });
 
   cy.get('@dialog').within(() => {
-    cy.get('.vlc-toolbar__item > .auk-button').contains('Dossier aanmaken')
+    cy.get('.auk-toolbar-complex__item > .auk-button').contains('Dossier aanmaken')
       .click();
   });
 
@@ -158,7 +158,7 @@ function addSubcase(type, newShortTitle, longTitle, step, stepName) {
       });
   }
 
-  cy.get('.vlc-toolbar').within(() => {
+  cy.get('.auk-toolbar-complex').within(() => {
     cy.contains('Procedurestap aanmaken').click();
   });
 

From 8c82deed75cf2b6911f026af19618fdfb9d8e8f9 Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Fri, 16 Apr 2021 12:57:10 +0200
Subject: [PATCH 4/5] Add border utility classes to auk-additions file

---
 app/styles/au-kaleidos-css/_auk-additions.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/styles/au-kaleidos-css/_auk-additions.scss b/app/styles/au-kaleidos-css/_auk-additions.scss
index 1578ffa9f9..fcb5ee79b0 100644
--- a/app/styles/au-kaleidos-css/_auk-additions.scss
+++ b/app/styles/au-kaleidos-css/_auk-additions.scss
@@ -201,3 +201,19 @@
 .auk-u-text-error {
   color: $error-text-color;
 }
+
+.auk-u-border-top {
+  border-top: .1rem solid $au-gray-300 !important;
+}
+
+.auk-u-border-right {
+  border-right: .1rem solid $au-gray-300 !important;
+}
+
+.auk-u-border-bottom {
+  border-bottom: .1rem solid $au-gray-300 !important;
+}
+
+.auk-u-border-left {
+  border-left: .1rem solid $au-gray-300 !important;
+}

From cdfa8d3e7d0cc50f88fe27968dcf9511e5470ce8 Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Fri, 16 Apr 2021 12:58:47 +0200
Subject: [PATCH 5/5] Move main-header (lay-out) styling to separate file (need
 to check with team regarding naming/location)

---
 app/styles/app.scss                         |  3 +++
 app/styles/custom-application/m-header.scss | 13 +++++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 app/styles/custom-application/m-header.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 31bd6215a3..6fdd88908b 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -133,3 +133,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 // @import "node_modules/@kanselarij-vlaanderen/au-kaleidos-css/auk-standalone";
 @import "au-kaleidos-css/auk-standalone";
 @import "au-kaleidos-css/auk-additions";
+
+// (not sure about naming/location)
+@import 'custom-application/m-header';
diff --git a/app/styles/custom-application/m-header.scss b/app/styles/custom-application/m-header.scss
new file mode 100644
index 0000000000..4d4da4803d
--- /dev/null
+++ b/app/styles/custom-application/m-header.scss
@@ -0,0 +1,13 @@
+.l-main-header {
+  //
+}
+
+.l-main-header__toolbar {
+  position: absolute;
+  top: 0;
+  right: 18rem;
+  left: 18rem;
+  max-height: 4rem;
+  z-index: 3200;
+  width: calc(100% - 37rem);
+}