feat:#24 lint and format

frontend/public/themes/lara-dark-blue/theme.css

@@ -29,33 +29,66 @@
   --button-tertiary: color-mix(in srgb, var(--htwk-yellow), #ffffff 50%);
 
   --info-primary: var(--htwk-blau); /*#449bfc*/
-  --info-secondary: color-mix(in srgb,var(--htwk-blau),#ffffff 15%); /*#6cb0fc*/ 
+  --info-secondary: color-mix(
-  --info-tertiary: color-mix(in srgb,var(--htwk-blau),#ffffff 30%); /*#7fbafd*/ 
+    in srgb,
+    var(--htwk-blau),
+    #ffffff 15%
+  ); /*#6cb0fc*/
+  --info-tertiary: color-mix(
+    in srgb,
+    var(--htwk-blau),
+    #ffffff 30%
+  ); /*#7fbafd*/
 
-  --warning-primary: color-mix(in srgb,var(--htwk-yellow),#000000 15%); /*#fbc30c*/ 
+  --warning-primary: color-mix(
+    in srgb,
+    var(--htwk-yellow),
+    #000000 15%
+  ); /*#fbc30c*/
   --warning-secondary: var(--htwk-yellow); /*#fcd34d #fbcb2d*/
-  --warning-tertiary: color-mix(in srgb,var(--htwk-yellow),#ffffff 50%);/*#fde082*/
+  --warning-tertiary: color-mix(
+    in srgb,
+    var(--htwk-yellow),
+    #ffffff 50%
+  ); /*#fde082*/
 
-  --error-primary: color-mix(in srgb,var(--htwk-magenta),#000000 15%); /*#ff5757*/
+  --error-primary: color-mix(
+    in srgb,
+    var(--htwk-magenta),
+    #000000 15%
+  ); /*#ff5757*/
   --error-secondary: var(--htwk-magenta); /*#fca5a5*/
-  --error-tertiary: color-mix(in srgb,var(--htwk-magenta),#ffffff 50%); /*#ffe7e6*/
+  --error-tertiary: color-mix(
+    in srgb,
+    var(--htwk-magenta),
+    #ffffff 50%
+  ); /*#ffe7e6*/
 
   --success-primary: var(--htwk-gruen); /*#1ea97c*/
-  --success-secondary: color-mix(in srgb,var(--htwk-gruen),#ffffff 15%); /*#86efac*/
+  --success-secondary: color-mix(
-  --success-tertiary: color-mix(in srgb,var(--htwk-gruen),#ffffff 30%); /*#aaf4c5*/
+    in srgb,
+    var(--htwk-gruen),
+    #ffffff 15%
+  ); /*#86efac*/
+  --success-tertiary: color-mix(
+    in srgb,
+    var(--htwk-gruen),
+    #ffffff 30%
+  ); /*#aaf4c5*/
 
   --surface-a: var(--htwk-grau); /*#071426*/
-  --surface-b: var(--htwk-schwarz);/*#040d19*/;
+  --surface-b: var(--htwk-schwarz); /*#040d19*/
   --surface-c: rgba(255, 255, 255, 0.03);
-  --surface-d: var(--htwk-grau);/*#0b213f*/;
+  --surface-d: var(--htwk-grau); /*#0b213f*/
   --surface-e: var(--htwk-grau); /*#071426*/
   --surface-f: var(--htwk-grau); /*#071426*/
   --text-color: rgba(255, 255, 255, 0.87);
   --text-color-secondary: rgba(255, 255, 255, 0.6);
   --primary-color: var(--htwk-yellow); /*#93c5fd*/
   --primary-color-text: var(--htwk-schwarz); /*#1c2127*/
-  --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+  --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
-    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+    Segoe UI Symbol;
   --surface-0: var(--htwk-schwarz); /*#040d19*/
   --surface-50: #1d2530;
   --surface-100: #363d47;
@@ -86,7 +119,8 @@
   --surface-overlay: var(--htwk-grau); /*#071426*/
   --surface-border: var(--htwk-dunkelblau-60); /*#0b213f*/
   --surface-hover: rgba(255, 255, 255, 0.03);
-  --focus-ring: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5) /*rgba(147, 197, 253, 0.5)*/;
+  --focus-ring: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5)
+    /*rgba(147, 197, 253, 0.5)*/;
   --maskbg: rgba(0, 0, 0, 0.4);
   --highlight-bg: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
   --highlight-text-color: rgba(255, 255, 255, 0.87);
@@ -108,11 +142,17 @@ a:visited {
   color: var(--htwk-magenta);
 }
 
-a:hover, a:visited:hover {
+a:hover,
+a:visited:hover {
   color: white;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: 100;
 }
 
@@ -121,8 +161,18 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .p-component {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: normal;
 }
@@ -156,8 +206,18 @@ h1, h2, h3, h4, h5, h6 {
 
 .p-link {
   font-size: 1rem;
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   border-radius: 6px;
 }
 .p-link:focus {
@@ -340,8 +400,18 @@ h1, h2, h3, h4, h5, h6 {
   .p-autocomplete-multiple-container
   .p-autocomplete-input-token
   input {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -872,8 +942,18 @@ h1, h2, h3, h4, h5, h6 {
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -1303,8 +1383,18 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .p-inputtext {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   background: var(--htwk-schwarz); /*#040d19*/
@@ -5156,7 +5246,10 @@ h1, h2, h3, h4, h5, h6 {
 }
 .p-fileupload .p-fileupload-content.p-fileupload-highlight {
   border: 1px dashed var(--htwk-yellow); /*#93c5fd*/
-  background-color: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
+  background-color: rgba(
+    var(--htwk-yellow),
+    0.16
+  ); /*rgba(147, 197, 253, 0.16)*/
 }
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
@@ -7290,8 +7383,18 @@ h1, h2, h3, h4, h5, h6 {
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
 }
 
 .p-button-label {

frontend/public/themes/lara-light-blue/theme.css

@@ -53,8 +53,18 @@
 }
 
 .p-component {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: normal;
 }
@@ -88,8 +98,18 @@
 
 .p-link {
   font-size: 1rem;
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   border-radius: 6px;
 }
 .p-link:focus {
@@ -272,8 +292,18 @@
   .p-autocomplete-multiple-container
   .p-autocomplete-input-token
   input {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -795,8 +825,18 @@
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -1217,8 +1257,18 @@
 }
 
 .p-inputtext {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-size: 1rem;
   color: #495057;
   background: #ffffff;
@@ -7150,8 +7200,18 @@
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+  font-family:
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
 }
 
 .p-button-label {

frontend/src/components/MenuBar.vue

@@ -61,8 +61,8 @@ const items = computed(() => [
           :icon="item.icon"
           text
           severity="secondary"
-          @click="navigate"
           :class="item.route === $route.path ? 'active' : ''"
+          @click="navigate"
         />
       </router-link>
     </template>

frontend/src/components/ModuleSelection.vue

@@ -106,10 +106,14 @@ function toggleModule(module: Module) {
               <Button
                 class="w-9rem align-self-end my-2"
                 :icon="store.hasModule(item) ? 'pi pi-times' : 'pi pi-plus'"
-                :label="store.hasModule(item) ? $t('moduleSelection.selected') : $t('moduleSelection.unselected')"
+                :label="
-                @click="toggleModule(item)"
+                  store.hasModule(item)
+                    ? $t('moduleSelection.selected')
+                    : $t('moduleSelection.unselected')
+                "
                 outlined
                 :severity="store.hasModule(item) ? '' : 'secondary'"
+                @click="toggleModule(item)"
               />
             </div>
           </div>

frontend/src/view/DynamicPage.vue

@@ -24,10 +24,9 @@ const hasContent = computed(() => {
 </script>
 
 <template>
+  <div class="flex flex-column align-items-center mt-0">
     <div
-    class="flex flex-column align-items-center mt-0"
+      class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 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">