dark theme color scheme

frontend/src/components/MenuBar.vue

@@ -19,22 +19,22 @@ const items = computed(() => [
   {
     label: t("roomFinder"),
     icon: "pi pi-fw pi-calendar",
-    route: `rooms`,
+    route: "/rooms",
   },
   {
     label: t("faq"),
     icon: "pi pi-fw pi-book",
-    route: `faq`,
+    route: "/faq",
   },
   {
     label: t("imprint"),
     icon: "pi pi-fw pi-id-card",
-    route: `imprint`,
+    route: "/imprint",
   },
   {
     label: t("privacy"),
     icon: "pi pi-fw pi-exclamation-triangle",
-    route: `privacy-policy`,
+    route: "/privacy-policy",
   },
 ]);
 </script>
@@ -62,6 +62,7 @@ const items = computed(() => [
           text
           severity="secondary"
           @click="navigate"
+          :class="item.route === $route.path ? 'active' : ''"
         />
       </router-link>
     </template>
@@ -79,4 +80,17 @@ const items = computed(() => [
   background-color: transparent;
   border: none;
 }
+
+:deep(.p-button .p-button-label::after) {
+  content: "";
+  display: block;
+  width: 0;
+  height: 2px;
+  background: var(--primary-color);
+  transition: width 0.3s;
+}
+
+:deep(.p-button.active .p-button-label::after) {
+  width: 100%;
+}
 </style>

frontend/src/components/ModuleSelection.vue

@@ -103,14 +103,13 @@ function toggleModule(module: Module) {
               class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4"
             >
               <p class="text-lg flex-1 align-self-stretch">{{ item.name }}</p>
-              <ToggleButton
+              <Button
                 class="w-9rem align-self-end my-2"
-                off-icon="pi pi-times"
-                :off-label="$t('moduleSelection.unselected')"
-                on-icon="pi pi-check"
-                :on-label="$t('moduleSelection.selected')"
-                :model-value="store.hasModule(item)"
-                @update:model-value="toggleModule(item)"
+                :icon="store.hasModule(item) ? 'pi pi-times' : 'pi pi-plus'"
+                :label="store.hasModule(item) ? $t('moduleSelection.selected') : $t('moduleSelection.unselected')"
+                @click="toggleModule(item)"
+                outlined
+                :severity="store.hasModule(item) ? '' : 'secondary'"
               />
             </div>
           </div>

frontend/src/main.ts

@@ -1,3 +1,5 @@
+import "source-sans-pro/source-sans-pro.css";
+
 import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";

frontend/src/view/DynamicPage.vue

@@ -27,7 +27,7 @@ const hasContent = computed(() => {
   <div 
     class="flex flex-column align-items-center mt-0"
   >
-    <div class="flex align-items-center justify-content-center gap-2 mx-2 transition-rolldown"
+    <div class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown"
       :class="{'md:mt-8': hideContent}"
     >
       <h3 class="text-4xl">