feat:#24 lint and format

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,11 +24,10 @@ const hasContent = computed(() => {
 </script>
 
 <template>
-  <div 
+  <div class="flex flex-column align-items-center mt-0">
-    class="flex flex-column align-items-center mt-0"
+    <div
-  >
+      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 }"
-      :class="{'md:mt-8': hideContent}"
     >
       <h3 class="text-4xl">
         {{ headline }}
@@ -74,7 +73,7 @@ const hasContent = computed(() => {
 </template>
 
 <style scoped>
-  .transition-rolldown {
+.transition-rolldown {
-    transition: margin-top 0.5s ease-in-out;
+  transition: margin-top 0.5s ease-in-out;
-  }
+}
 </style>