From 3019f34013a75acc938dcd82c22108664cabcf00 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 13 Jun 2022 18:13:39 +0200
Subject: [PATCH] Add dropdown example

---
 client/package.json                           |   1 +
 client/src/components/MainNavigationBar.vue   |   5 +-
 client/src/views/StyelGuideView.vue           | 159 +++++++++++++-----
 .../static/icons/icon-arrow-down.svg          |   2 +-
 .../static/icons/icon-arrow-left.svg          |   2 +-
 .../static/icons/icon-arrow-right.svg         |   2 +-
 .../static/icons/icon-arrow-up.svg            |   2 +-
 .../vbv_lernwelt/static/icons/icon-check.svg  |   2 +-
 .../static/icons/icon-checkbox-checked.svg    |   8 +-
 .../static/icons/icon-checkbox-unchecked.svg  |   7 +-
 .../vbv_lernwelt/static/icons/icon-close.svg  |   2 +-
 .../vbv_lernwelt/static/icons/icon-info.svg   |   2 +-
 .../static/icons/icon-ls-apply.svg            |   2 +-
 .../vbv_lernwelt/static/icons/icon-ls-end.svg |   2 +-
 .../static/icons/icon-ls-network.svg          |   2 +-
 .../static/icons/icon-ls-practice.svg         |   2 +-
 .../static/icons/icon-ls-start.svg            |   2 +-
 .../static/icons/icon-ls-test.svg             |   2 +-
 .../static/icons/icon-ls-watch.svg            |   2 +-
 .../static/icons/icon-message.svg             |   2 +-
 .../static/icons/icon-smiley-happy.svg        |  19 +--
 .../static/icons/icon-smiley-neutral.svg      |  18 +-
 .../static/icons/icon-smiley-thinking.svg     |  29 ++--
 tailwind.config.js                            |   2 +-
 24 files changed, 175 insertions(+), 103 deletions(-)

diff --git a/client/package.json b/client/package.json
index 8cc8e949..8d703d42 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,6 +12,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.6.4",
     "axios": "^0.26.1",
     "d3": "^7.4.4",
     "loglevel": "^1.8.0",
diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index 3e06df82..9e73317d 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -74,7 +74,10 @@ function calcNavigationMobileOpenClasses() {
         <hr class="text-white lg:hidden">
         <li class="hidden lg:list-item flex-auto"></li>
         <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Mediathek</li>
-        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Netzwerk</li>
+        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal flex flex-row items-center">
+          <it-icon-message class="w-8 h-8 mr-2 lg:w-6 lg:h-6 lg:mr-1"/>
+          Netzwerk
+        </li>
         <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Jan Baumgartner</li>
       </ul>
     </nav>
diff --git a/client/src/views/StyelGuideView.vue b/client/src/views/StyelGuideView.vue
index 44ccd7ed..e964dca8 100644
--- a/client/src/views/StyelGuideView.vue
+++ b/client/src/views/StyelGuideView.vue
@@ -1,14 +1,32 @@
 <script setup lang="ts">
 
+import {ref} from 'vue'
+import {Listbox, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui/vue'
 import MainNavigationBar from '@/components/MainNavigationBar.vue';
 
 const colors = ['blue', 'sky', 'orange', 'green', 'red', 'gray',];
-const colorValues = [100, 300, 500, 700, 900,];
+const colorValues = [100, 200, 300, 400, 500, 600, 700, 800, 900,];
 
 function colorBgClass(color: string, value: number) {
   return `bg-${color}-${value}`;
 }
 
+
+const people = [
+  {id: 1, name: 'Wade Cooper'},
+  {id: 2, name: 'Arlene Mccoy'},
+  {id: 3, name: 'Devon Webb'},
+  {id: 4, name: 'Tom Cook'},
+  {id: 5, name: 'Tanya Fox'},
+  {id: 6, name: 'Hellen Schmidt'},
+  {id: 7, name: 'Caroline Schultz'},
+  {id: 8, name: 'Mason Heaney'},
+  {id: 9, name: 'Claudie Smitham'},
+  {id: 10, name: 'Emil Schaefer'},
+]
+
+const selected = ref(people[3])
+
 </script>
 
 <template>
@@ -25,110 +43,110 @@ function colorBgClass(color: string, value: number) {
       &lt;it-icon-message/&gt; </p>
 
     <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
-      <div>
+      <div class="inline-flex flex-col">
         message
-        <it-icon-message/>
+        <it-icon-message class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         arrow-up
-        <it-icon-arrow-up/>
+        <it-icon-arrow-up class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         arrow-down
-        <it-icon-arrow-down/>
+        <it-icon-arrow-down class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         arrow-left
-        <it-icon-arrow-left/>
+        <it-icon-arrow-left class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         arrow-right
-        <it-icon-arrow-right/>
+        <it-icon-arrow-right class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         close
-        <it-icon-close/>
+        <it-icon-close class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         check
-        <it-icon-check/>
+        <it-icon-check class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         info
-        <it-icon-info/>
+        <it-icon-info class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         checkbox-checked
-        <it-icon-checkbox-checked/>
+        <it-icon-checkbox-checked class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         checkbox-unchecked
-        <it-icon-checkbox-unchecked/>
+        <it-icon-checkbox-unchecked class="w-8 h-8" />
       </div>
 
 
     </div>
 
     <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
-      <div>
+      <div class="inline-flex flex-col">
         ls-apply
-        <it-icon-ls-apply/>
+        <it-icon-ls-apply class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         ls-watch
-        <it-icon-ls-watch/>
+        <it-icon-ls-watch class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         ls-test
-        <it-icon-ls-test/>
+        <it-icon-ls-test class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         ls-practice
-        <it-icon-ls-practice/>
+        <it-icon-ls-practice class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         ls-network
-        <it-icon-ls-network/>
+        <it-icon-ls-network class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         ls-start
-        <it-icon-ls-start/>
+        <it-icon-ls-start class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         ls-end
-        <it-icon-ls-end/>
+        <it-icon-ls-end class="w-8 h-8" />
       </div>
     </div>
 
     <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
-      <div>
+      <div class="inline-flex flex-col">
         smiley-happy
-        <it-icon-smiley-happy/>
+        <it-icon-smiley-happy class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         smiley-thinking
-        <it-icon-smiley-thinking/>
+        <it-icon-smiley-thinking class="w-8 h-8" />
       </div>
 
-      <div>
+      <div class="inline-flex flex-col">
         smiley-neutral
-        <it-icon-smiley-neutral/>
+        <it-icon-smiley-neutral class="w-8 h-8" />
       </div>
     </div>
 
@@ -137,7 +155,7 @@ function colorBgClass(color: string, value: number) {
     </div>
     <table class="text-gray-700">
       <tr class="h-12 md:h-18 lg:h-24">
-      <td></td>
+        <td></td>
         <td class="text-center" v-for="value in colorValues">{{value}}</td>
       </tr>
       <tr v-for="color in colors" class="h-12 md:h-18 lg:h-24">
@@ -177,6 +195,63 @@ function colorBgClass(color: string, value: number) {
       <button class="btn-secondary">Secondary</button>
       <button class="btn-blue">Blue</button>
     </div>
+
+    <div class="flex flex-col gap-4 flex-wrap lg:flex-row lg:w-128 content-center lg:justify-start mb-16">
+
+
+      <button type="button"
+              class="btn-primary inline-flex items-center p-3 rounded-full">
+        <it-icon-message class="h-5 w-5"></it-icon-message>
+      </button>
+
+      <button type="button"
+              class="btn-primary inline-flex items-center px-3 py-2">
+        <it-icon-message class="-ml-1 mr-3 h-5 w-5"></it-icon-message>
+        Button text
+      </button>
+
+      <button type="button"
+              class="btn-primary inline-flex items-center px-3 py-2">
+        Button text
+        <it-icon-message class="ml-3 -mr-1 h-5 w-5"></it-icon-message>
+      </button>
+    </div>
+
+    <h2 class="mt-8 mb-8">Dropdown (Work-in-progress)</h2>
+
+    <Listbox as="div" v-model="selected">
+      <div class="mt-1 relative w-128">
+        <ListboxButton
+          class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold">
+          <span class="block truncate">{{ selected.name }}</span>
+          <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <it-icon-arrow-down class="h-5 w-5" aria-hidden="true"/>
+        </span>
+        </ListboxButton>
+
+        <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
+                    leave-to-class="opacity-0">
+          <ListboxOptions
+            class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 py-1 text-base ring-1 ring-gray-900 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+            <ListboxOption as="template" v-for="person in people" :key="person.id" :value="person"
+                           v-slot="{ active, selected }">
+              <li
+                :class="[active ? 'text-white bg-blue-900' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+              <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                {{ person.name }}
+              </span>
+
+                <span v-if="selected"
+                      :class="[active ? 'text-white' : 'text-blue-900', 'absolute inset-y-0 right-0 flex items-center pr-4']">
+                <it-icon-check class="h-5 w-5" aria-hidden="true"/>
+              </span>
+              </li>
+            </ListboxOption>
+          </ListboxOptions>
+        </transition>
+      </div>
+    </Listbox>
+
   </main>
 </template>
 
diff --git a/server/vbv_lernwelt/static/icons/icon-arrow-down.svg b/server/vbv_lernwelt/static/icons/icon-arrow-down.svg
index b79cfb02..ab374eca 100644
--- a/server/vbv_lernwelt/static/icons/icon-arrow-down.svg
+++ b/server/vbv_lernwelt/static/icons/icon-arrow-down.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M14.9187 20L6.15699 11.0386C5.94112 10.7984 5.94874 10.4269 6.17427 10.1962C6.3998 9.96556 6.76303 9.95776 6.99783 10.1786L14.9187 18.28L22.8397 10.1786C22.9902 10.0246 23.2097 9.96442 23.4154 10.0208C23.621 10.0772 23.7817 10.2415 23.8368 10.4518C23.8919 10.6622 23.8331 10.8866 23.6825 11.0406L14.9187 20Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-arrow-left.svg b/server/vbv_lernwelt/static/icons/icon-arrow-left.svg
index aa30f555..3ba04ada 100644
--- a/server/vbv_lernwelt/static/icons/icon-arrow-left.svg
+++ b/server/vbv_lernwelt/static/icons/icon-arrow-left.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M9.92857 14.9902L18.89 6.22846C19.1302 6.01259 19.5017 6.02021 19.7323 6.24574C19.963 6.47127 19.9708 6.83451 19.75 7.0693L11.6486 14.9902L19.75 22.9111C19.904 23.0617 19.9642 23.2812 19.9078 23.4868C19.8514 23.6925 19.6871 23.8532 19.4767 23.9083C19.2664 23.9634 19.0419 23.9046 18.8879 23.754L9.92857 14.9902Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-arrow-right.svg b/server/vbv_lernwelt/static/icons/icon-arrow-right.svg
index e196eb10..00ee16e3 100644
--- a/server/vbv_lernwelt/static/icons/icon-arrow-right.svg
+++ b/server/vbv_lernwelt/static/icons/icon-arrow-right.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M19.9285 15.0098L10.9671 23.7715C10.7269 23.9874 10.3554 23.9798 10.1248 23.7543C9.89408 23.5287 9.88629 23.1655 10.1071 22.9307L18.2085 15.0098L10.1071 7.08886C9.95309 6.9383 9.89295 6.71884 9.94931 6.51317C10.0057 6.3075 10.17 6.14684 10.3804 6.09174C10.5907 6.03662 10.8152 6.09543 10.9692 6.24599L19.9285 15.0098Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-arrow-up.svg b/server/vbv_lernwelt/static/icons/icon-arrow-up.svg
index e15ead5e..0a373e71 100644
--- a/server/vbv_lernwelt/static/icons/icon-arrow-up.svg
+++ b/server/vbv_lernwelt/static/icons/icon-arrow-up.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M14.9383 10L23.7001 18.9614C23.916 19.2016 23.9084 19.5731 23.6828 19.8038C23.4573 20.0344 23.0941 20.0422 22.8593 19.8214L14.9383 11.72L7.01742 19.8214C6.86685 19.9754 6.6474 20.0356 6.44173 19.9792C6.23605 19.9228 6.0754 19.7585 6.02029 19.5482C5.96518 19.3378 6.02398 19.1134 6.17455 18.9594L14.9383 10Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-check.svg b/server/vbv_lernwelt/static/icons/icon-check.svg
index 7e0c879a..f06255f5 100644
--- a/server/vbv_lernwelt/static/icons/icon-check.svg
+++ b/server/vbv_lernwelt/static/icons/icon-check.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M12.1529 18.7528L8.30897 14.9088L7 16.2086L12.1529 21.3615L23.2147 10.2998L21.9149 9L12.1529 18.7528Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-checkbox-checked.svg b/server/vbv_lernwelt/static/icons/icon-checkbox-checked.svg
index 33cfb292..d97477c2 100644
--- a/server/vbv_lernwelt/static/icons/icon-checkbox-checked.svg
+++ b/server/vbv_lernwelt/static/icons/icon-checkbox-checked.svg
@@ -1,5 +1,5 @@
-<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="28" height="28" rx="1" stroke="#00224D" stroke-width="2"/>
-<path d="M12.1529 18.7528L8.30897 14.9088L7 16.2086L12.1529 21.3615L23.2147 10.2998L21.9149 9L12.1529 18.7528Z"
-      fill="#00224D"/>
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1" y="1" width="28" height="28" rx="1" stroke="#00224D" stroke-width="2"/>
+    <path d="M12.1529 18.7528L8.30897 14.9088L7 16.2086L12.1529 21.3615L23.2147 10.2998L21.9149 9L12.1529 18.7528Z"
+          fill="#00224D"/>
 </svg>
diff --git a/server/vbv_lernwelt/static/icons/icon-checkbox-unchecked.svg b/server/vbv_lernwelt/static/icons/icon-checkbox-unchecked.svg
index 0bba9abd..c75cd0f6 100644
--- a/server/vbv_lernwelt/static/icons/icon-checkbox-unchecked.svg
+++ b/server/vbv_lernwelt/static/icons/icon-checkbox-unchecked.svg
@@ -1,3 +1,6 @@
-<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="1" y="1" width="28" height="28" rx="1" stroke="#B1C1CA" stroke-width="2"/>
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30" height="30" fill="#EDF2F6"/>
+<rect x="1" y="1" width="28" height="28" rx="1" stroke="#00224D" stroke-width="2"/>
+<path d="M12.1529 18.7528L8.30897 14.9088L7 16.2086L12.1529 21.3615L23.2147 10.2998L21.9149 9L12.1529 18.7528Z"
+      fill="#00224D"/>
 </svg>
diff --git a/server/vbv_lernwelt/static/icons/icon-close.svg b/server/vbv_lernwelt/static/icons/icon-close.svg
index c072a928..66e7a261 100644
--- a/server/vbv_lernwelt/static/icons/icon-close.svg
+++ b/server/vbv_lernwelt/static/icons/icon-close.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M16.473 15.3L26.457 5.31901C26.6885 5.11428 26.7873 4.79797 26.7135 4.49786C26.6396 4.19776 26.4053 3.96344 26.1052 3.88957C25.8051 3.8157 25.4887 3.91448 25.284 4.14601L15.3 14.127L5.31901 4.14301C5.11428 3.91148 4.79797 3.8127 4.49786 3.88657C4.19776 3.96044 3.96344 4.19476 3.88957 4.49486C3.8157 4.79497 3.91448 5.11128 4.14601 5.31601L14.127 15.3L4.14301 25.281C3.91148 25.4857 3.8127 25.8021 3.88657 26.1022C3.96044 26.4023 4.19476 26.6366 4.49486 26.7105C4.79497 26.7843 5.11128 26.6855 5.31601 26.454L15.3 16.473L25.281 26.457C25.61 26.7479 26.1086 26.7326 26.4191 26.4221C26.7296 26.1116 26.7449 25.613 26.454 25.284L16.473 15.3Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-info.svg b/server/vbv_lernwelt/static/icons/icon-info.svg
index 8ba2ab69..f9defcae 100644
--- a/server/vbv_lernwelt/static/icons/icon-info.svg
+++ b/server/vbv_lernwelt/static/icons/icon-info.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M15 5C9.48 5 5 9.48 5 15C5 20.52 9.48 25 15 25C20.52 25 25 20.52 25 15C25 9.48 20.52 5 15 5ZM14 10V12H16V10H14ZM14 14V20H16V14H14ZM7 15C7 19.41 10.59 23 15 23C19.41 23 23 19.41 23 15C23 10.59 19.41 7 15 7C10.59 7 7 10.59 7 15Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-ls-apply.svg b/server/vbv_lernwelt/static/icons/icon-ls-apply.svg
index 92c46fa7..0748334c 100644
--- a/server/vbv_lernwelt/static/icons/icon-ls-apply.svg
+++ b/server/vbv_lernwelt/static/icons/icon-ls-apply.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M9.00703 30L7.67733 28.6597L10.1185 26.1991C10.589 25.7217 11.1488 25.3433 11.7655 25.0856C12.3822 24.828 13.0436 24.6963 13.7111 24.6982C13.7173 24.6968 13.7238 24.6968 13.73 24.6982C14.4467 24.7002 15.1566 24.5588 15.8187 24.2823C16.4809 24.0058 17.082 23.5996 17.5873 23.0873L27.688 12.9061C27.8662 12.7299 27.9676 12.4895 27.9699 12.2379C27.9723 11.9863 27.8754 11.7441 27.7005 11.5645C27.5257 11.385 27.2873 11.2827 27.0377 11.2804C26.7881 11.278 26.5478 11.3757 26.3696 11.5519L22.3655 15.5892C22.2787 15.6798 22.1749 15.7521 22.0602 15.8019C21.9454 15.8516 21.822 15.8779 21.697 15.879C21.5721 15.8802 21.4482 15.8562 21.3326 15.8086C21.2169 15.761 21.1119 15.6906 21.0235 15.6016C20.9351 15.5126 20.8652 15.4068 20.8178 15.2902C20.7705 15.1737 20.7466 15.0489 20.7476 14.9229C20.7487 14.797 20.7746 14.6726 20.8238 14.5568C20.8731 14.4411 20.9447 14.3364 21.0345 14.2489L25.0261 10.2242L25.0487 10.2015L26.3558 8.88393C26.4432 8.79597 26.5125 8.6915 26.5598 8.57651C26.6071 8.46152 26.6315 8.33826 26.6315 8.21378C26.6315 8.08929 26.6071 7.96603 26.5598 7.85104C26.5125 7.73605 26.4432 7.63159 26.3558 7.54362C26.1775 7.37106 25.9401 7.27437 25.693 7.27367C25.4458 7.27296 25.2079 7.36829 25.0286 7.53983L19.7036 12.9061C19.6167 12.9966 19.5129 13.0688 19.3981 13.1185C19.2833 13.1681 19.1598 13.1942 19.0349 13.1953C18.91 13.1963 18.7861 13.1722 18.6705 13.1245C18.5549 13.0768 18.4499 13.0063 18.3616 12.9172C18.2733 12.8281 18.2035 12.7222 18.1562 12.6056C18.109 12.4891 18.0852 12.3642 18.0864 12.2383C18.0875 12.1124 18.1135 11.9879 18.1629 11.8723C18.2122 11.7566 18.284 11.652 18.3739 11.5645L23.6951 6.20079L23.6989 6.19574L25.0261 4.86049C25.116 4.77306 25.1877 4.66845 25.2371 4.55277C25.2864 4.43709 25.3125 4.31267 25.3136 4.18675C25.3147 4.06083 25.291 3.93595 25.2437 3.81938C25.1965 3.70281 25.1267 3.5969 25.0384 3.50781C24.9501 3.41873 24.8451 3.34827 24.7295 3.30053C24.6139 3.25279 24.49 3.22874 24.3651 3.22977C24.2402 3.23081 24.1167 3.25691 24.0019 3.30655C23.8871 3.3562 23.7832 3.42839 23.6964 3.51893L22.4131 4.80992L22.3667 4.86049L17.0404 10.2242C16.862 10.3917 16.6262 10.4829 16.3824 10.4786C16.1387 10.4743 15.9061 10.3747 15.7338 10.201C15.5614 10.0272 15.4626 9.79283 15.4583 9.54715C15.454 9.30147 15.5445 9.0637 15.7107 8.88393L21.0608 3.48985C21.2335 3.30825 21.3275 3.06496 21.3223 2.81349C21.317 2.56201 21.2128 2.32296 21.0326 2.14891C20.8525 1.97487 20.6111 1.88008 20.3616 1.88542C20.1121 1.89076 19.875 1.99577 19.7023 2.17736L11.0568 10.8944C10.9315 11.0204 10.7734 11.1082 10.6008 11.1478C10.4282 11.1873 10.2481 11.177 10.081 11.118C9.91397 11.0589 9.76685 10.9536 9.65653 10.8141C9.54621 10.6745 9.47718 10.5065 9.45737 10.3292L9.03337 6.50679C9.01696 6.26148 8.9176 6.02925 8.75187 5.84885C8.58614 5.66845 8.36405 5.55078 8.12265 5.51547C7.88001 5.49686 7.63895 5.56797 7.44455 5.71552C7.25016 5.86306 7.11573 6.07693 7.06642 6.31712L5.44946 14.474C5.17023 15.9066 5.36639 17.3919 6.00769 18.701C6.09438 18.8785 6.12381 19.0789 6.09187 19.2741C6.05993 19.4694 5.96821 19.6496 5.82956 19.7897L2.3297 23.3175L1 21.9772L4.04325 18.9084C3.44134 17.3822 3.2889 15.7135 3.6042 14.1023L5.22241 5.94538C5.36371 5.25421 5.74879 4.63811 6.30629 4.21125C6.86379 3.78439 7.5559 3.57571 8.25437 3.62388C8.93668 3.68601 9.57568 3.98766 10.0599 4.47618C10.5441 4.9647 10.8427 5.60908 10.9037 6.29689L11.1095 8.15561L18.3726 0.834531C18.6339 0.569543 18.9447 0.359361 19.287 0.216124C19.6294 0.0728871 19.9965 -0.000567264 20.3671 3.29854e-06H20.3697C20.9204 8.15468e-05 21.4591 0.162733 21.9192 0.467878C22.3794 0.773023 22.7407 1.2073 22.9588 1.71711C23.4964 1.40621 24.1207 1.28236 24.7351 1.36466C25.3495 1.44697 25.92 1.73085 26.3584 2.17249C26.7968 2.61413 27.0789 3.18896 27.1609 3.80823C27.243 4.42751 27.1205 5.05679 26.8124 5.59892C27.1765 5.75843 27.5032 5.99343 27.7712 6.28863C28.0392 6.58382 28.2426 6.93261 28.368 7.31227C28.4934 7.69193 28.5382 8.09396 28.4992 8.49219C28.4603 8.89042 28.3386 9.27593 28.1421 9.62362C28.5651 9.80721 28.9371 10.0925 29.2254 10.4545C29.5138 10.8165 29.7097 11.2443 29.7961 11.7003C29.8825 12.1563 29.8567 12.6267 29.721 13.0703C29.5853 13.514 29.3438 13.9173 29.0177 14.2451L18.917 24.4264C18.2377 25.1153 17.4296 25.6616 16.5395 26.0336C15.6493 26.4056 14.6948 26.5959 13.7312 26.5936C13.7241 26.5929 13.717 26.5929 13.7099 26.5936C13.2897 26.5925 12.8734 26.6755 12.4852 26.8376C12.097 26.9997 11.7445 27.2378 11.4481 27.5381L9.00703 30Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-ls-end.svg b/server/vbv_lernwelt/static/icons/icon-ls-end.svg
index beadedef..f4f02153 100644
--- a/server/vbv_lernwelt/static/icons/icon-ls-end.svg
+++ b/server/vbv_lernwelt/static/icons/icon-ls-end.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd"
       d="M1 2C1 1.44772 1.44772 1 2 1H20.1568C23.9162 1 26.9542 4.03802 26.9542 7.79736C26.9542 11.5567 23.9162 14.5947 20.1568 14.5947H7.79736C5.14259 14.5947 3 16.7373 3 19.3921C3 22.0468 5.14259 24.1894 7.79736 24.1894H25.9542C26.5065 24.1894 26.9542 24.6371 26.9542 25.1894C26.9542 25.7417 26.5065 26.1894 25.9542 26.1894H7.79736C4.03802 26.1894 1 23.1514 1 19.3921C1 15.6327 4.03802 12.5947 7.79736 12.5947H20.1568C22.8116 12.5947 24.9542 10.4521 24.9542 7.79736C24.9542 5.14259 22.8116 3 20.1568 3H2C1.44772 3 1 2.55228 1 2Z"
 />
diff --git a/server/vbv_lernwelt/static/icons/icon-ls-network.svg b/server/vbv_lernwelt/static/icons/icon-ls-network.svg
index a6ac8c43..6f53b3bf 100644
--- a/server/vbv_lernwelt/static/icons/icon-ls-network.svg
+++ b/server/vbv_lernwelt/static/icons/icon-ls-network.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_34_3392)">
         <path
                 d="M4.6875 28.125C3.58314 28.126 2.51388 27.7371 1.66826 27.0268C0.822635 26.3165 0.254953 25.3304 0.0653082 24.2425C-0.124337 23.1545 0.0762339 22.0345 0.631655 21.08C1.18708 20.1255 2.06168 19.3977 3.10125 19.025L3.73625 20.79C3.12508 21.0095 2.60868 21.4337 2.27472 21.9906C1.94076 22.5475 1.80981 23.2029 1.90409 23.8454C1.99838 24.4879 2.3121 25.078 2.79199 25.5155C3.27189 25.953 3.88839 26.2109 4.53685 26.2455C5.18531 26.2801 5.82577 26.0893 6.34952 25.7054C6.87327 25.3215 7.24803 24.7681 7.41019 24.1393C7.57235 23.5105 7.51191 22.845 7.23915 22.2557C6.96638 21.6663 6.49808 21.1896 5.91375 20.9063C5.80211 20.8522 5.70231 20.7765 5.62014 20.6835C5.53797 20.5906 5.47507 20.4823 5.43507 20.3648C5.39507 20.2474 5.37878 20.1232 5.38714 19.9994C5.39549 19.8756 5.42833 19.7548 5.48375 19.6438L10.4213 11.8738C10.8507 11.1967 11.4254 10.6237 12.1038 10.1963C11.6231 9.82891 11.2203 9.36963 10.9188 8.84516C10.6173 8.32069 10.4231 7.74149 10.3475 7.14126C10.2553 6.39834 10.3422 5.64415 10.6009 4.94166C10.8596 4.23917 11.2827 3.60877 11.8347 3.10311C12.3867 2.59745 13.0517 2.2312 13.7742 2.03495C14.4966 1.83871 15.2555 1.81816 15.9875 1.97501C17.0893 2.22083 18.0668 2.85271 18.7434 3.75643C19.4199 4.66015 19.7508 5.77608 19.6763 6.90251C19.6221 7.53446 19.4413 8.14903 19.1445 8.70956C18.8477 9.27008 18.441 9.76508 17.9488 10.165C18.5589 10.5587 19.0766 11.0798 19.4663 11.6925L22.375 16.2675C22.934 17.1389 23.2682 18.1353 23.3475 19.1675C24.1934 18.7893 25.1305 18.6634 26.0463 18.805C26.8982 18.9395 27.6966 19.3063 28.3536 19.8651C29.0107 20.4239 29.5009 21.1531 29.7703 21.9724C30.0398 22.7918 30.0781 23.6696 29.881 24.5093C29.6839 25.349 29.2591 26.1181 28.6533 26.732C28.0474 27.3459 27.284 27.7809 26.447 27.989C25.6099 28.1972 24.7317 28.1705 23.9089 27.9119C23.086 27.6533 22.3504 27.1728 21.783 26.5232C21.2155 25.8736 20.8382 25.0801 20.6925 24.23C20.6675 24.08 20.6488 23.93 20.6388 23.78C19.9203 24.1671 19.1174 24.3711 18.3013 24.3738H11.25V22.5H18.3C18.8129 22.4866 19.3159 22.3564 19.7708 22.1192C20.2257 21.882 20.6204 21.5441 20.925 21.1313C21.0675 20.9496 21.215 20.7775 21.3675 20.615C21.5031 20.0482 21.522 19.4597 21.4232 18.8853C21.3244 18.3109 21.1098 17.7627 20.7925 17.2738L17.8838 12.7013C17.6013 12.2554 17.2104 11.8885 16.7476 11.6347C16.2848 11.3809 15.7653 11.2486 15.2375 11.25C15.2313 11.2487 15.2249 11.2487 15.2188 11.25H15C14.4026 11.2412 13.813 11.3866 13.2881 11.6721C12.7633 11.9576 12.3209 12.3737 12.0038 12.88L7.61375 19.7775C8.3727 20.3839 8.92446 21.2111 9.1927 22.1447C9.46094 23.0784 9.43241 24.0723 9.11105 24.9891C8.78968 25.9058 8.19138 26.7 7.3989 27.2618C6.60641 27.8236 5.65892 28.1253 4.6875 28.125V28.125ZM23.025 21.6075C22.9525 21.8193 22.8678 22.0268 22.7712 22.2288C22.5875 22.616 22.4945 23.04 22.4994 23.4686C22.5043 23.8972 22.6069 24.319 22.7994 24.702C22.9919 25.0849 23.2692 25.4189 23.6103 25.6785C23.9513 25.9381 24.3471 26.1165 24.7675 26.2C25.5023 26.3321 26.2595 26.1669 26.8725 25.7407C27.4855 25.3146 27.9041 24.6623 28.0363 23.9275C28.1684 23.1927 28.0032 22.4355 27.577 21.8225C27.1508 21.2095 26.4986 20.7909 25.7638 20.6588C25.2651 20.5962 24.7588 20.6494 24.2841 20.8141C23.8093 20.9789 23.3789 21.2508 23.0263 21.6088L23.025 21.6075ZM15.005 3.75001C14.6054 3.74953 14.2104 3.83414 13.8461 3.99823C13.4817 4.16232 13.1566 4.40211 12.8921 4.70166C12.6277 5.0012 12.4301 5.35362 12.3125 5.73548C12.1949 6.11733 12.1599 6.51986 12.21 6.91626C12.3289 7.60041 12.6842 8.22109 13.214 8.66999C13.7438 9.1189 14.4144 9.36754 15.1088 9.37251C15.797 9.33434 16.4485 9.04951 16.9439 8.57019C17.4393 8.09087 17.7454 7.44914 17.8063 6.76251C17.8523 6.08945 17.6561 5.4221 17.2531 4.88107C16.8501 4.34004 16.2668 3.96102 15.6088 3.81251C15.4101 3.77142 15.2078 3.75048 15.005 3.75001Z"
diff --git a/server/vbv_lernwelt/static/icons/icon-ls-practice.svg b/server/vbv_lernwelt/static/icons/icon-ls-practice.svg
index 6d8047a0..e316dcd3 100644
--- a/server/vbv_lernwelt/static/icons/icon-ls-practice.svg
+++ b/server/vbv_lernwelt/static/icons/icon-ls-practice.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M27.1875 23.4246H14.45C14.0794 23.4243 13.7172 23.3141 13.4092 23.1081C13.1011 22.902 12.8611 22.6093 12.7193 22.2669C12.5775 21.9245 12.5404 21.5478 12.6126 21.1843C12.6848 20.8208 12.8631 20.4868 13.125 20.2246L16.515 16.8334C15.7379 15.9557 14.7829 15.2536 13.7135 14.7736C12.644 14.2937 11.4847 14.0469 10.3125 14.0496C9.51738 14.0487 8.72615 14.1606 7.9625 14.3821L7.43875 12.5796C8.37284 12.3101 9.3403 12.1737 10.3125 12.1746C11.9136 12.1715 13.4927 12.5474 14.9207 13.2715C16.3487 13.9956 17.5851 15.0474 18.5287 16.3409C18.6626 16.5214 18.7272 16.744 18.7107 16.9682C18.6942 17.1924 18.5977 17.4031 18.4388 17.5621L14.4512 21.5496H27.1875C27.436 21.5493 27.6743 21.4504 27.85 21.2746C28.0258 21.0989 28.1247 20.8606 28.125 20.6121V7.8746L25.1437 10.8559C24.9879 11.0115 24.7823 11.1074 24.5628 11.1266C24.3434 11.1458 24.1242 11.0871 23.9438 10.9609C21.5997 9.3114 18.8037 8.42567 15.9375 8.4246C12.2092 8.4289 8.63486 9.91187 5.99856 12.5482C3.36226 15.1845 1.8793 18.7588 1.875 22.4871H0C0.0046321 18.2616 1.68524 14.2106 4.6731 11.2227C7.66096 8.23485 11.712 6.55423 15.9375 6.5496C18.9192 6.54907 21.8399 7.39475 24.36 8.98835L26.7975 6.55085C27.0596 6.2881 27.3937 6.10904 27.7577 6.03633C28.1216 5.96363 28.4989 6.00056 28.8418 6.14244C29.1848 6.28432 29.4779 6.52477 29.684 6.83335C29.8902 7.14192 30.0002 7.50474 30 7.87585V20.6121C29.999 21.3577 29.7024 22.0725 29.1751 22.5997C28.6479 23.127 27.9331 23.4236 27.1875 23.4246V23.4246Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-ls-start.svg b/server/vbv_lernwelt/static/icons/icon-ls-start.svg
index 5685b16e..f57084da 100644
--- a/server/vbv_lernwelt/static/icons/icon-ls-start.svg
+++ b/server/vbv_lernwelt/static/icons/icon-ls-start.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M1.19556 3.57709C1.19556 3.0248 1.64327 2.57709 2.19556 2.57709H20.3524C24.1117 2.57709 27.1497 5.61511 27.1497 9.37444C27.1497 13.1338 24.1117 16.1718 20.3524 16.1718H7.99291C5.33815 16.1718 3.19556 18.3144 3.19556 20.9692C3.19556 23.6239 5.33815 25.7665 7.99291 25.7665H26.1497C26.702 25.7665 27.1497 26.2142 27.1497 26.7665C27.1497 27.3188 26.702 27.7665 26.1497 27.7665H7.99291C4.23358 27.7665 1.19556 24.7285 1.19556 20.9692C1.19556 17.2098 4.23358 14.1718 7.99291 14.1718H20.3524C23.0071 14.1718 25.1497 12.0292 25.1497 9.37444C25.1497 6.71968 23.0071 4.57709 20.3524 4.57709H2.19556C1.64327 4.57709 1.19556 4.12937 1.19556 3.57709Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-ls-test.svg b/server/vbv_lernwelt/static/icons/icon-ls-test.svg
index ce6bab4c..47ee7de9 100644
--- a/server/vbv_lernwelt/static/icons/icon-ls-test.svg
+++ b/server/vbv_lernwelt/static/icons/icon-ls-test.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M23.6543 29.3854H4.73087C3.47667 29.3838 2.27433 28.8848 1.38748 27.998C0.500634 27.1111 0.00166892 25.9088 0 24.6546L0 5.73112C0.00166892 4.47693 0.500634 3.27458 1.38748 2.38774C2.27433 1.50089 3.47667 1.00192 4.73087 1.00025H18.2738C19.2138 0.990463 20.1349 1.26459 20.9166 1.78679C21.6983 2.30898 22.3043 3.05493 22.6552 3.92708C23.0245 4.7918 23.1241 5.7479 22.9408 6.67017C22.7576 7.59243 22.3001 8.43786 21.6283 9.09571L13.9151 16.8077C13.7376 16.9848 13.4972 17.0844 13.2464 17.0844C12.9957 17.0844 12.7552 16.9848 12.5778 16.8077L8.51556 12.7454L7.0143 14.2467L11.6846 18.917C12.0993 19.3298 12.6606 19.5616 13.2458 19.5616C13.831 19.5616 14.3923 19.3298 14.807 18.917L28.6627 5.06249L30 6.39975L16.1455 20.2555C15.3751 21.022 14.3325 21.4522 13.2458 21.4522C12.1591 21.4522 11.1165 21.022 10.3461 20.2555L5.00841 14.9153C4.83122 14.7379 4.7317 14.4974 4.7317 14.2467C4.7317 13.9959 4.83122 13.7555 5.00841 13.578L7.84693 10.7395C8.02434 10.5623 8.26482 10.4628 8.51556 10.4628C8.7663 10.4628 9.00678 10.5623 9.18419 10.7395L13.2464 14.8018L20.291 7.75845C20.6893 7.35957 20.9605 6.85156 21.0702 6.29861C21.1799 5.74566 21.1233 5.1726 20.9074 4.65185C20.6915 4.1311 20.3261 3.68604 19.8573 3.3729C19.3886 3.05977 18.8375 2.89263 18.2738 2.8926H4.73087C3.97835 2.8936 3.25694 3.19298 2.72484 3.72509C2.19273 4.2572 1.89335 4.9786 1.89235 5.73112V24.6546C1.89335 25.4071 2.19273 26.1285 2.72484 26.6606C3.25694 27.1927 3.97835 27.4921 4.73087 27.4931H23.6543C24.4068 27.4921 25.1283 27.1927 25.6604 26.6606C26.1925 26.1285 26.4918 25.4071 26.4928 24.6546V17.0852H28.3852V24.6546C28.3835 25.9088 27.8846 27.1111 26.9977 27.998C26.1109 28.8848 24.9085 29.3838 23.6543 29.3854V29.3854Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-ls-watch.svg b/server/vbv_lernwelt/static/icons/icon-ls-watch.svg
index 05e9fe71..b2ce9c88 100644
--- a/server/vbv_lernwelt/static/icons/icon-ls-watch.svg
+++ b/server/vbv_lernwelt/static/icons/icon-ls-watch.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path
             d="M12.3243 24.0741C11.1019 24.0885 9.89084 23.8389 8.77374 23.3425C5.73691 21.9189 3.01649 19.9006 0.773451 17.407C0.276227 16.851 0.000924871 16.1316 2.3261e-06 15.3857C-0.000920219 14.6398 0.272601 13.9197 0.768448 13.3625C4.05636 9.74564 9.48409 5.95873 15.0156 6.00125L15.2045 6C20.601 6 25.9799 9.78441 29.2303 13.36C29.7265 13.9169 30.0005 14.6368 30 15.3827C29.9995 16.1286 29.7247 16.8482 29.2278 17.4045C26.9326 19.9602 24.1345 22.0145 21.0087 23.4388L20.2583 21.7192C23.1375 20.3939 25.717 18.4965 27.8396 16.1426C28.0268 15.9335 28.1305 15.6628 28.131 15.3821C28.1315 15.1014 28.0286 14.8303 27.8421 14.6206C24.8306 11.3089 19.8718 7.75589 15.0156 7.8772C10.1557 7.81467 5.16942 11.3077 2.1554 14.6231C1.96956 14.8331 1.86739 15.104 1.86831 15.3844C1.86923 15.6648 1.97319 15.9351 2.1604 16.1439C4.2327 18.4504 6.74639 20.3182 9.55288 21.6366C10.673 22.0941 11.886 22.2783 13.0915 22.1739C14.297 22.0695 15.4603 21.6796 16.4851 21.0363C17.3579 20.4896 18.0707 19.7218 18.551 18.8107C19.0314 17.8997 19.2622 16.8778 19.2203 15.8487C19.2201 15.1173 19.0299 14.3985 18.6683 13.7628C18.3067 13.127 17.7861 12.5961 17.1575 12.2221C16.529 11.8482 15.814 11.644 15.0827 11.6295C14.3515 11.6151 13.629 11.7909 12.9862 12.1397C12.3433 12.4886 11.8022 12.9985 11.4157 13.6195C11.0293 14.2405 10.8109 14.9512 10.7818 15.682C10.7528 16.4128 10.9142 17.1387 11.2501 17.7883C11.5861 18.438 12.0851 18.9893 12.6982 19.388L11.6727 20.9588C10.7875 20.3824 10.0672 19.5859 9.58242 18.6474C9.09766 17.7088 8.86508 16.6604 8.90746 15.6049C8.94984 14.5494 9.26574 13.5231 9.82418 12.6264C10.3826 11.7297 11.1645 10.9936 12.0931 10.49C13.0217 9.98645 14.0652 9.73281 15.1213 9.75393C16.1774 9.77506 17.21 10.0702 18.1177 10.6105C19.0254 11.1508 19.7772 11.9176 20.2993 12.8359C20.8215 13.7542 21.0961 14.7924 21.0962 15.8487C21.1347 17.1925 20.823 18.5231 20.1918 19.71C19.5605 20.8969 18.6314 21.8992 17.4956 22.6184C15.9421 23.578 14.1503 24.082 12.3243 24.0729V24.0741Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-message.svg b/server/vbv_lernwelt/static/icons/icon-message.svg
index a9fe526d..3bcbe525 100644
--- a/server/vbv_lernwelt/static/icons/icon-message.svg
+++ b/server/vbv_lernwelt/static/icons/icon-message.svg
@@ -1,4 +1,4 @@
-<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
           d="M25 9C25 7.9 24.1 7 23 7H7C5.9 7 5 7.9 5 9V21C5 22.1 5.9 23 7 23H23C24.1 23 25 22.1 25 21V9ZM23 9L15 14L7 9H23ZM15 16L7 11V21H23V11L15 16Z"
     />
diff --git a/server/vbv_lernwelt/static/icons/icon-smiley-happy.svg b/server/vbv_lernwelt/static/icons/icon-smiley-happy.svg
index ca5e69f1..70c4066a 100644
--- a/server/vbv_lernwelt/static/icons/icon-smiley-happy.svg
+++ b/server/vbv_lernwelt/static/icons/icon-smiley-happy.svg
@@ -1,12 +1,9 @@
-<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <ellipse cx="15.2143" cy="15.2143" rx="15.2143" ry="15.2143" fill="#3EDF9C"/>
-    <path
-            d="M21.534 17.1559C21.3316 16.9246 20.9874 16.8836 20.7362 17.0607C19.0544 18.2438 17.0558 18.8942 14.9999 18.9275C12.9439 18.8942 10.9452 18.2438 9.26351 17.0607C9.0124 16.8836 8.66818 16.9246 8.46579 17.1559C8.35321 17.2831 8.30005 17.4522 8.3191 17.6211C8.33835 17.7899 8.42833 17.9427 8.56665 18.0415C10.4494 19.3743 12.6935 20.1019 15 20.1274C17.3065 20.1019 19.5505 19.3743 21.4333 18.0415C21.5716 17.9427 21.6616 17.7899 21.6808 17.6211C21.6999 17.4524 21.6467 17.2833 21.5341 17.1559H21.534Z"
-            fill="#0A0A0A"/>
-    <path
-            d="M11.4555 10.3117C11.4555 10.9625 10.9279 11.49 10.2771 11.49C9.62633 11.49 9.09879 10.9625 9.09879 10.3117C9.09879 9.6609 9.62633 9.13312 10.2771 9.13312C10.9279 9.13312 11.4555 9.66087 11.4555 10.3117Z"
-            fill="#0A0A0A"/>
-    <path
-            d="M20.9008 10.3117C20.9008 10.9625 20.3732 11.49 19.7224 11.49C19.0717 11.49 18.5441 10.9625 18.5441 10.3117C18.5441 9.6609 19.0717 9.13312 19.7224 9.13312C20.3732 9.13312 20.9008 9.66087 20.9008 10.3117Z"
-            fill="#0A0A0A"/>
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="#3EDF9C"/>
+<path d="M21.534 17.1559C21.3316 16.9246 20.9874 16.8836 20.7362 17.0607C19.0544 18.2438 17.0558 18.8942 14.9999 18.9275C12.9439 18.8942 10.9452 18.2438 9.26351 17.0607C9.0124 16.8836 8.66818 16.9246 8.46579 17.1559C8.35321 17.2831 8.30005 17.4522 8.3191 17.6211C8.33835 17.7899 8.42833 17.9427 8.56665 18.0415C10.4494 19.3743 12.6935 20.1019 15 20.1274C17.3065 20.1019 19.5505 19.3743 21.4333 18.0415C21.5716 17.9427 21.6616 17.7899 21.6808 17.6211C21.6999 17.4524 21.6467 17.2833 21.5341 17.1559H21.534Z"
+      fill="#0A0A0A"/>
+<path d="M11.4555 10.3117C11.4555 10.9625 10.9279 11.49 10.2771 11.49C9.62633 11.49 9.09879 10.9625 9.09879 10.3117C9.09879 9.6609 9.62633 9.13312 10.2771 9.13312C10.9279 9.13312 11.4555 9.66087 11.4555 10.3117Z"
+      fill="#0A0A0A"/>
+<path d="M20.9008 10.3117C20.9008 10.9625 20.3732 11.49 19.7224 11.49C19.0717 11.49 18.5441 10.9625 18.5441 10.3117C18.5441 9.6609 19.0717 9.13312 19.7224 9.13312C20.3732 9.13312 20.9008 9.66087 20.9008 10.3117Z"
+      fill="#0A0A0A"/>
 </svg>
diff --git a/server/vbv_lernwelt/static/icons/icon-smiley-neutral.svg b/server/vbv_lernwelt/static/icons/icon-smiley-neutral.svg
index ecefdd30..0d08522d 100644
--- a/server/vbv_lernwelt/static/icons/icon-smiley-neutral.svg
+++ b/server/vbv_lernwelt/static/icons/icon-smiley-neutral.svg
@@ -1,11 +1,9 @@
-<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path
-            d="M16 31C13.0333 31 10.1335 30.1203 7.66655 28.4721C5.19962 26.8239 3.27707 24.4813 2.1418 21.7404C1.00658 18.9995 0.709425 15.9837 1.2882 13.0737C1.86704 10.164 3.29566 7.49114 5.39328 5.39331C7.49111 3.29569 10.1638 1.86707 13.0737 1.28824C15.9835 0.709405 18.9992 1.00657 21.7404 2.14183C24.4813 3.27705 26.824 5.19976 28.4721 7.66658C30.1202 10.1334 31 13.0333 31 16C30.9956 19.9768 29.4138 23.7898 26.6017 26.6017C23.7897 29.4137 19.9772 30.9956 16.0001 30.9999L16 31ZM16 2.20039C12.3401 2.20039 8.83011 3.65435 6.24211 6.24224C3.65416 8.83019 2.20025 12.3402 2.20025 16.0001C2.20025 19.6601 3.65421 23.17 6.24211 25.758C8.83006 28.346 12.3401 29.7999 16 29.7999C19.66 29.7999 23.1699 28.3459 25.7579 25.758C28.3459 23.1701 29.7998 19.6601 29.7998 16.0001C29.7956 12.3414 28.3404 8.83399 25.7533 6.24653C23.1662 3.65944 19.6586 2.20424 15.9997 2.20006L16 2.20039Z"
-            fill="#B1C1CA" stroke="#B1C1CA"/>
-    <path
-            d="M12.9786 11.5732C12.9786 12.3684 12.334 13.013 11.5388 13.013C10.7435 13.013 10.0989 12.3684 10.0989 11.5732C10.0989 10.778 10.7435 10.1331 11.5388 10.1331C12.334 10.1331 12.9786 10.7779 12.9786 11.5732Z"
-            fill="#B1C1CA"/>
-    <path
-            d="M22.424 11.5732C22.424 12.3684 21.7793 13.013 20.9841 13.013C20.1889 13.013 19.5442 12.3684 19.5442 11.5732C19.5442 10.778 20.1889 10.1331 20.9841 10.1331C21.7793 10.1331 22.424 10.7779 22.424 11.5732Z"
-            fill="#B1C1CA"/>
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="15" fill="white"/>
+<path d="M16 31C13.0333 31 10.1335 30.1203 7.66655 28.4721C5.19962 26.8239 3.27707 24.4813 2.1418 21.7404C1.00658 18.9995 0.709425 15.9837 1.2882 13.0737C1.86704 10.164 3.29566 7.49114 5.39328 5.39331C7.49111 3.29569 10.1638 1.86707 13.0737 1.28824C15.9835 0.709405 18.9992 1.00657 21.7404 2.14183C24.4813 3.27705 26.824 5.19976 28.4721 7.66658C30.1202 10.1334 31 13.0333 31 16C30.9956 19.9768 29.4138 23.7898 26.6017 26.6017C23.7897 29.4137 19.9772 30.9956 16.0001 30.9999L16 31ZM16 2.20039C12.3401 2.20039 8.83011 3.65435 6.24211 6.24224C3.65416 8.83019 2.20025 12.3402 2.20025 16.0001C2.20025 19.6601 3.65421 23.17 6.24211 25.758C8.83006 28.346 12.3401 29.7999 16 29.7999C19.66 29.7999 23.1699 28.3459 25.7579 25.758C28.3459 23.1701 29.7998 19.6601 29.7998 16.0001C29.7956 12.3414 28.3404 8.83399 25.7533 6.24653C23.1662 3.65944 19.6586 2.20424 15.9997 2.20006L16 2.20039Z"
+      fill="#B1C1CA" stroke="#B1C1CA"/>
+<path d="M12.9786 11.5732C12.9786 12.3684 12.334 13.013 11.5388 13.013C10.7435 13.013 10.0989 12.3684 10.0989 11.5732C10.0989 10.778 10.7435 10.1331 11.5388 10.1331C12.334 10.1331 12.9786 10.7779 12.9786 11.5732Z"
+      fill="#B1C1CA"/>
+<path d="M22.424 11.5732C22.424 12.3684 21.7793 13.013 20.9841 13.013C20.1889 13.013 19.5442 12.3684 19.5442 11.5732C19.5442 10.778 20.1889 10.1331 20.9841 10.1331C21.7793 10.1331 22.424 10.7779 22.424 11.5732Z"
+      fill="#B1C1CA"/>
 </svg>
diff --git a/server/vbv_lernwelt/static/icons/icon-smiley-thinking.svg b/server/vbv_lernwelt/static/icons/icon-smiley-thinking.svg
index 8b314ade..2974e1c5 100644
--- a/server/vbv_lernwelt/static/icons/icon-smiley-thinking.svg
+++ b/server/vbv_lernwelt/static/icons/icon-smiley-thinking.svg
@@ -1,18 +1,13 @@
-<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <ellipse cx="15.7857" cy="15.7857" rx="15.2143" ry="15.2143" fill="#FE955A"/>
-    <path
-            d="M12.4555 14.8195C12.4555 15.4703 11.9279 15.9979 11.2771 15.9979C10.6263 15.9979 10.0988 15.4703 10.0988 14.8195C10.0988 14.1687 10.6263 13.6412 11.2771 13.6412C11.9279 13.6412 12.4555 14.1687 12.4555 14.8195Z"
-            fill="#0A0A0A"/>
-    <path
-            d="M22.0464 14.8195C22.0464 15.5503 21.454 16.1427 20.7233 16.1427C19.9926 16.1427 19.4001 15.5502 19.4001 14.8195C19.4001 14.0888 19.9926 13.4962 20.7233 13.4962C21.454 13.4962 22.0464 14.0888 22.0464 14.8195Z"
-            fill="#0A0A0A"/>
-    <path
-            d="M17.2104 11.7145C17.1179 11.5839 17.0813 11.422 17.1089 11.2644C17.1363 11.1068 17.2257 10.9666 17.3569 10.8752C19.2025 9.58825 21.3336 8.21234 22.0085 8.21234C22.6608 8.21234 23.5424 8.87485 24.1432 9.40493H24.1434C24.2665 9.51438 24.3391 9.66944 24.3443 9.83392C24.3498 9.99839 24.2872 10.1579 24.1715 10.275C23.9509 10.5013 23.5926 10.5172 23.3531 10.3115C23.0385 10.031 22.7004 9.77805 22.3423 9.55541C22.1534 9.44596 21.9219 9.43864 21.7263 9.53574C20.4546 10.2397 19.2244 11.0161 18.0421 11.8615C17.7715 12.0492 17.4003 11.9835 17.2105 11.7146L17.2104 11.7145Z"
-            fill="#0A0A0A"/>
-    <path
-            d="M12.9546 11.7612C12.1783 11.5094 10.6871 11.1041 9.47296 11.2397L9.47275 11.2395C9.1825 11.2688 8.91422 11.0821 8.84056 10.7998C8.79473 10.6303 8.82549 10.4495 8.92447 10.3047C9.02366 10.1597 9.18103 10.0655 9.35555 10.0467C10.8028 9.89457 12.4534 10.3357 13.321 10.6171C13.4788 10.668 13.6085 10.7818 13.6793 10.9319C13.75 11.0817 13.7554 11.2543 13.6941 11.4083L13.6927 11.4119V11.4117C13.5776 11.7049 13.2543 11.8578 12.9546 11.7611L12.9546 11.7612Z"
-            fill="#0A0A0A"/>
-    <path
-            d="M17.5309 22.2942C16.4685 21.9876 15.0658 22.022 14.3116 22.0711C14.0103 22.0906 13.7464 21.8707 13.7113 21.5708L13.7039 21.5101C13.6851 21.3546 13.7309 21.1981 13.8312 21.0776C13.9312 20.957 14.0766 20.8832 14.2329 20.8731C15.0727 20.8185 16.6325 20.7854 17.8925 21.1516C18.0509 21.1985 18.181 21.3117 18.2495 21.4622C18.3179 21.6124 18.3177 21.7851 18.2491 21.9351L18.2252 21.9878H18.225C18.1026 22.2488 17.8063 22.3796 17.5309 22.2942L17.5309 22.2942Z"
-            fill="#0A0A0A"/>
+<svg viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15.5714" cy="15.5714" r="15" fill="#FE955A"/>
+<path d="M11.6357 14.6072C11.6357 15.258 11.1082 15.7855 10.4574 15.7855C9.80657 15.7855 9.27902 15.258 9.27902 14.6072C9.27902 13.9564 9.80657 13.4288 10.4574 13.4288C11.1082 13.4288 11.6357 13.9564 11.6357 14.6072Z"
+      fill="#0A0A0A"/>
+<path d="M21.2267 14.6072C21.2267 15.3379 20.6342 15.9303 19.9035 15.9303C19.1728 15.9303 18.5804 15.3379 18.5804 14.6072C18.5804 13.8765 19.1728 13.2838 19.9035 13.2838C20.6342 13.2838 21.2267 13.8764 21.2267 14.6072Z"
+      fill="#0A0A0A"/>
+<path d="M16.3906 11.5022C16.2981 11.3716 16.2615 11.2096 16.2891 11.0521C16.3166 10.8945 16.4059 10.7543 16.5371 10.6628C18.3828 9.37591 20.5139 8 21.1888 8C21.841 8 22.7227 8.66251 23.3235 9.19259H23.3237C23.4467 9.30204 23.5193 9.4571 23.5246 9.62157C23.53 9.78605 23.4674 9.94551 23.3517 10.0627C23.1311 10.2889 22.7729 10.3048 22.5333 10.0991C22.2188 9.8187 21.8806 9.5657 21.5226 9.34306C21.3336 9.23362 21.1022 9.2263 20.9065 9.32339C19.6349 10.0274 18.4046 10.8037 17.2223 11.6491C16.9517 11.8368 16.5805 11.7711 16.3907 11.5022L16.3906 11.5022Z"
+      fill="#0A0A0A"/>
+<path d="M12.1349 11.5488C11.3585 11.2971 9.86732 10.8917 8.65319 11.0274L8.65298 11.0271C8.36274 11.0564 8.09446 10.8698 8.0208 10.5875C7.97497 10.418 8.00573 10.2372 8.10471 10.0924C8.2039 9.94736 8.36126 9.8532 8.53579 9.83436C9.98306 9.68223 11.6337 10.1234 12.5013 10.4048C12.659 10.4556 12.7888 10.5695 12.8595 10.7195C12.9302 10.8693 12.9357 11.042 12.8744 11.196L12.8729 11.1996V11.1993C12.7578 11.4925 12.4345 11.6455 12.1349 11.5488L12.1349 11.5488Z"
+      fill="#0A0A0A"/>
+<path d="M16.7111 22.0819C15.6487 21.7753 14.246 21.8096 13.4919 21.8588C13.1905 21.8782 12.9266 21.6583 12.8915 21.3584L12.8842 21.2978C12.8653 21.1423 12.9112 20.9858 13.0114 20.8652C13.1114 20.7447 13.2569 20.6708 13.4132 20.6608C14.253 20.6062 15.8128 20.5731 17.0727 20.9393C17.2311 20.9862 17.3613 21.0994 17.4297 21.2498C17.4981 21.4001 17.4979 21.5727 17.4293 21.7228L17.4054 21.7755H17.4052C17.2828 22.0365 16.9865 22.1672 16.7111 22.0819L16.7111 22.0819Z"
+      fill="#0A0A0A"/>
 </svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1390574f..e5693826 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -48,7 +48,7 @@ module.exports = {
     }
   },
   safelist: [{
-    pattern: /bg-(blue|sky|orange|green|red)-(500)/,
+    pattern: /bg-(blue|sky|orange|green|red)-(400|500|600|700)/,
   }, {
     pattern: /bg-gray-(100|300|500|700|900)/,
   },