From 104861eb73ed76aa8a02e998f851d0f2c6ec9ac8 Mon Sep 17 00:00:00 2001
From: masterElmar <18119527+masterElmar@users.noreply.github.com>
Date: Mon, 20 Nov 2023 18:38:01 +0100
Subject: [PATCH] fix:#69 format, lint, tiny info buttons

---
 frontend/src/components/FaqPage.vue           | 211 ++++++++++++------
 frontend/src/components/ModuleInformation.vue |  37 ++-
 .../editCalendar/EditAdditionalModules.vue    |  33 ++-
 .../components/editCalendar/EditModules.vue   |  10 +-
 frontend/src/i18n/translations/de.json        |  14 +-
 frontend/src/view/AdditionalModules.vue       |  39 +++-
 frontend/src/view/EditCalendarView.vue        |  12 +-
 frontend/src/view/ImprintPage.vue             |   2 +-
 frontend/src/view/PrivacyPolicy.vue           |   2 +-
 9 files changed, 246 insertions(+), 114 deletions(-)

diff --git a/frontend/src/components/FaqPage.vue b/frontend/src/components/FaqPage.vue
index cdb8efa..9296436 100644
--- a/frontend/src/components/FaqPage.vue
+++ b/frontend/src/components/FaqPage.vue
@@ -1,141 +1,216 @@
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h1>{{$t('faqView.headline')}}</h1>
+      <h1>{{ $t("faqView.headline") }}</h1>
     </div>
 
     <div class="flex flex-column col-7">
       <div class="grid my-2">
         <div class="col">
-          {{$t('faqView.firstQuestion')}}
+          {{ $t("faqView.firstQuestion") }}
         </div>
         <div class="col">
-          {{$t('faqView.firstAnswer')}}
+          {{ $t("faqView.firstAnswer") }}
         </div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.secondQuestion')}}</div>
+        <div class="col">{{ $t("faqView.secondQuestion") }}</div>
         <div class="col">
-          {{$t('faqView.secondAnswer')}}
+          {{ $t("faqView.secondAnswer") }}
         </div>
       </div>
 
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.thirdQuestion')}}</div>
+        <div class="col">{{ $t("faqView.thirdQuestion") }}</div>
         <div class="col">
           <Accordion>
             <AccordionTab :header="$t('faqView.thirdAnswer.tabTitle')">
               <ol>
-                <li>{{$t('faqView.thirdAnswer.google.first')}}</li>
+                <li>{{ $t("faqView.thirdAnswer.google.first") }}</li>
                 <li>
-                  {{$t('faqView.thirdAnswer.google.second')}}
+                  {{ $t("faqView.thirdAnswer.google.second") }}
                 </li>
                 <li>
-                  {{$t('faqView.thirdAnswer.google.third')}}
+                  {{ $t("faqView.thirdAnswer.google.third") }}
                 </li>
               </ol>
             </AccordionTab>
-            <AccordionTab :header="$t('faqView.thirdAnswer.microsoft_outlook.title')">
-              <p>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.title')}}</p>
+            <AccordionTab
+              :header="$t('faqView.thirdAnswer.microsoft_outlook.title')"
+            >
+              <p>
+                {{
+                  $t("faqView.thirdAnswer.microsoft_outlook.outlook_2010.title")
+                }}
+              </p>
 
               <ol>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.first')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.second')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.third')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth')}}</li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.first",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.second",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.third",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth",
+                    )
+                  }}
+                </li>
               </ol>
 
-              <p>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.title')}}</p>
+              <p>
+                {{
+                  $t("faqView.thirdAnswer.microsoft_outlook.outlook_2007.title")
+                }}
+              </p>
 
               <ol>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.first')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.second')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.third')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth')}}</li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.first",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.second",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.third",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth",
+                    )
+                  }}
+                </li>
               </ol>
             </AccordionTab>
             <AccordionTab :header="$t('faqView.thirdAnswer.apple_osx.title')">
               <ol>
-                <li>{{$t('faqView.thirdAnswer.apple_osx.first')}}</li>
-                <li>{{$t('faqView.thirdAnswer.apple_osx.second')}}</li>
-                <li>{{$t('faqView.thirdAnswer.apple_osx.third')}}</li>
-                <li>{{$t('faqView.thirdAnswer.apple_osx.fourth')}}</li>
+                <li>{{ $t("faqView.thirdAnswer.apple_osx.first") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.apple_osx.second") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.apple_osx.third") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.apple_osx.fourth") }}</li>
               </ol>
             </AccordionTab>
             <AccordionTab :header="$t('faqView.thirdAnswer.thunderbird.title')">
               <ol>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.one') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.two') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.three') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.four') }} </li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.five') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.six') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.seven') }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.one") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.two") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.three") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.four") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.five") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.six") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.seven") }}</li>
               </ol>
             </AccordionTab>
             <AccordionTab :header="$t('faqView.thirdAnswer.iphone.title')">
-              <p>{{$t('faqView.thirdAnswer.iphone.description')}}</p>
+              <p>{{ $t("faqView.thirdAnswer.iphone.description") }}</p>
 
               <ol>
-                <li>{{$t('faqView.thirdAnswer.iphone.one')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.two')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.three')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.four')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.five')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.six')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.seven')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.eight')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.nine')}}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.one") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.two") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.three") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.four") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.five") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.six") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.seven") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.eight") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.nine") }}</li>
               </ol>
             </AccordionTab>
             <AccordionTab header="Android">
-              <p>{{$t('faqView.thirdAnswer.android.description')}}</p>
+              <p>{{ $t("faqView.thirdAnswer.android.description") }}</p>
             </AccordionTab>
             <AccordionTab header="Windows Phone">
-              <p>{{$t('faqView.thirdAnswer.windows_phone.description')}}</p>
+              <p>{{ $t("faqView.thirdAnswer.windows_phone.description") }}</p>
               <ol>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.one')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.two')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.three')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.four')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.five')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.six')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.seven')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.eight')}}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.one") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.two") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.three") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.four") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.five") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.six") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.seven") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.eight") }}</li>
               </ol>
             </AccordionTab>
           </Accordion>
         </div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.fourthQuestion')}}</div>
-        <div class="col">{{$t('faqView.fourthAnswer')}}</div>
+        <div class="col">{{ $t("faqView.fourthQuestion") }}</div>
+        <div class="col">{{ $t("faqView.fourthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.fifthQuestion')}}</div>
-        <div class="col">{{$t('faqView.fifthAnswer')}}</div>
+        <div class="col">{{ $t("faqView.fifthQuestion") }}</div>
+        <div class="col">{{ $t("faqView.fifthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col my-2">{{$t('faqView.sixthQuestion')}}</div>
-        <div class="col">{{$t('faqView.sixthAnswer')}}</div>
+        <div class="col my-2">{{ $t("faqView.sixthQuestion") }}</div>
+        <div class="col">{{ $t("faqView.sixthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.seventhQuestion')}}</div>
-        <div class="col">{{$t('faqView.seventhAnswer')}}</div>
+        <div class="col">{{ $t("faqView.seventhQuestion") }}</div>
+        <div class="col">{{ $t("faqView.seventhAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.eighthQuestion')}}</div>
-        <div class="col">{{$t('faqView.eighthAnswer')}}</div>
+        <div class="col">{{ $t("faqView.eighthQuestion") }}</div>
+        <div class="col">{{ $t("faqView.eighthAnswer") }}</div>
       </div>
       <p>
-        {{$t('faqView.notFound')}}<br />
-        <a href="/imprint">{{$t('faqView.contact')}}</a>
+        {{ $t("faqView.notFound") }}<br />
+        <a href="/imprint">{{ $t("faqView.contact") }}</a>
       </p>
     </div>
   </div>
diff --git a/frontend/src/components/ModuleInformation.vue b/frontend/src/components/ModuleInformation.vue
index 893a917..902e6ec 100644
--- a/frontend/src/components/ModuleInformation.vue
+++ b/frontend/src/components/ModuleInformation.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import {inject} from "vue";
-import {Module} from "../model/module.ts";
-import {Event} from "../model/event.ts";
+import { inject } from "vue";
+import { Module } from "../model/module.ts";
+import { Event } from "../model/event.ts";
 import moment from "moment-timezone";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14,10 +14,10 @@ function formatTimestamp(timestampString: string): string {
   const timestamp = moment(timestampString);
 
   // Die Zeitzone auf "Europe/Berlin" setzen
-  const berlinTime = timestamp.tz('Europe/Berlin');
+  const berlinTime = timestamp.tz("Europe/Berlin");
 
   // Das gewünschte Format für die Ausgabe festlegen
-  return berlinTime.format('DD.MM.YYYY HH:mm');
+  return berlinTime.format("DD.MM.YYYY HH:mm");
 }
 
 function sortModuleEventsByStart(events: Event[]) {
@@ -43,8 +43,14 @@ function sortModuleEventsByStart(events: Event[]) {
       <tr>
         <td>
           <div class="card">
-            <DataTable :value="sortModuleEventsByStart(module.events)" table-style="min-width: 50rem">
-              <Column field="day" :header="$t('moduleInformation.day')"></Column>
+            <DataTable
+              :value="sortModuleEventsByStart(module.events)"
+              table-style="min-width: 50rem"
+            >
+              <Column
+                field="day"
+                :header="$t('moduleInformation.day')"
+              ></Column>
               <Column field="start" :header="$t('moduleInformation.start')">
                 <template #body="slotProps">
                   {{ formatTimestamp(slotProps.data.start) }}
@@ -52,12 +58,21 @@ function sortModuleEventsByStart(events: Event[]) {
               </Column>
               <Column field="end" :header="$t('moduleInformation.end')">
                 <template #body="slotProps">
-                  {{formatTimestamp( slotProps.data.end) }}
+                  {{ formatTimestamp(slotProps.data.end) }}
                 </template>
               </Column>
-              <Column field="rooms" :header="$t('moduleInformation.room')"></Column>
-              <Column field="eventType" :header="$t('moduleInformation.type')"></Column>
-              <Column field="week" :header="$t('moduleInformation.week')"></Column>
+              <Column
+                field="rooms"
+                :header="$t('moduleInformation.room')"
+              ></Column>
+              <Column
+                field="eventType"
+                :header="$t('moduleInformation.type')"
+              ></Column>
+              <Column
+                field="week"
+                :header="$t('moduleInformation.week')"
+              ></Column>
             </DataTable>
           </div>
         </td>
diff --git a/frontend/src/components/editCalendar/EditAdditionalModules.vue b/frontend/src/components/editCalendar/EditAdditionalModules.vue
index 5eff5e9..4c99aa1 100644
--- a/frontend/src/components/editCalendar/EditAdditionalModules.vue
+++ b/frontend/src/components/editCalendar/EditAdditionalModules.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, Ref } from "vue";
-import { Module } from "@/model/module.ts";
-import { fetchAllModules } from "@/api/fetchCourse.ts";
+import { Module } from "../../model/module.ts";
+import { fetchAllModules } from "../../api/fetchCourse.ts";
 import moduleStore from "../../store/moduleStore";
 import { MultiSelectAllChangeEvent } from "primevue/multiselect";
 import router from "../../router";
-import { fetchModule } from "@/api/fetchModule.ts";
+import { fetchModule } from "../../api/fetchModule.ts";
 import { useDialog } from "primevue/usedialog";
-import {useI18n} from "vue-i18n";
+import { useI18n } from "vue-i18n";
 
 const dialog = useDialog();
 const { t } = useI18n({ useScope: "global" });
@@ -75,11 +75,19 @@ function selectChange() {
 }
 
 function itemsLabel(selectedModules: Module[]): string {
-  return (selectedModules ? selectedModules.length : 0) != 1 ? t("additionalModules.modules") : t("additionalModules.module");
+  return (selectedModules ? selectedModules.length : 0) != 1
+    ? t("additionalModules.modules")
+    : t("additionalModules.module");
 }
 
 function itemsLabelWithNumber(selectedModules: Module[]): string {
-  return selectedModules.length.toString() + " " + itemsLabel(selectedModules) + " " + t("additionalModules.dropDownFooterSelected");
+  return (
+    selectedModules.length.toString() +
+    " " +
+    itemsLabel(selectedModules) +
+    " " +
+    t("additionalModules.dropDownFooterSelected")
+  );
 }
 </script>
 
@@ -103,9 +111,9 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
         :placeholder="$t('additionalModules.dropDown')"
         :auto-filter-focus="true"
         :show-toggle-all="false"
+        :selected-items-label="itemsLabelWithNumber(selectedModules)"
         @change="selectChange()"
         @selectall-change="onSelectAllChange($event)"
-        :selectedItemsLabel="itemsLabelWithNumber(selectedModules)"
       >
         <template #option="slotProps">
           <div class="flex justify-content-between w-full">
@@ -116,6 +124,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
             </div>
             <div class="flex align-items-center justify-content-center ml-2">
               <Button
+                class="small-button"
                 icon="pi pi-info"
                 severity="secondary"
                 rounded
@@ -139,7 +148,9 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
       </MultiSelect>
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{ $t("additionalModules.nextStep") }}</Button>
+      <Button @click="nextStep()">{{
+        $t("additionalModules.nextStep")
+      }}</Button>
     </div>
   </div>
 </template>
@@ -152,4 +163,10 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
 :deep(.custom-multiselect li) {
   height: unset;
 }
+
+.small-button.p-button {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
 </style>
diff --git a/frontend/src/components/editCalendar/EditModules.vue b/frontend/src/components/editCalendar/EditModules.vue
index 16bfa44..bb5c3f6 100644
--- a/frontend/src/components/editCalendar/EditModules.vue
+++ b/frontend/src/components/editCalendar/EditModules.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { computed, Ref, ref } from "vue";
-import { Module } from "@/model/module.ts";
+import { Module } from "../../model/module.ts";
 import moduleStore from "../../store/moduleStore";
-import { fetchAllModules } from "@/api/fetchCourse.ts";
-import { saveIndividualFeed } from "@/api/createFeed.ts";
+import { fetchAllModules } from "../../api/fetchCourse.ts";
+import { saveIndividualFeed } from "../../api/createFeed.ts";
 import tokenStore from "../../store/tokenStore";
 import router from "../../router";
 import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
-import { onlyWhitespace } from "@/helpers/strings.ts";
+import { onlyWhitespace } from "../../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
 
@@ -154,7 +154,7 @@ async function finalStep() {
     <div
       class="flex align-items-center justify-content-center border-round m-2"
     >
-      <Button @click="finalStep()" >{{ $t("renameModules.nextStep") }}</Button>
+      <Button @click="finalStep()">{{ $t("renameModules.nextStep") }}</Button>
     </div>
   </div>
 </template>
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index 00a3e26..c4f54d6 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -132,13 +132,13 @@
       },
       "thunderbird": {
         "title": "Thunderbird",
-        "one" : "Erstelle deinen Kalender und kopiere den Link.",
-        "two" : "Im Menü “Termine und Aufgaben” den Punkt “Kalender” wählen. ",
-        "three" : "Links siehst du die Kalenderübersicht. In diesem Bereich über die rechte Maustaste klicken und im darauf erscheinenden Kontextmenü “Neuer Kalender” anklicken.",
-        "four" : "Du hast die Wahl zwischen “Auf meinem Computer” und “Im Netzwerk”. Bitte letzteres wählen und “Fortsetzen” klicken.",
-        "five" : "Im folgenden Fenster lässt du das “Format” wie es ist (“iCalender”).",
-        "six" : "Unter \"Adresse\" den kopierten Kalenderlink einfügen.",
-        "seven" : "Anschließend kannst du noch einen Namen vergeben und weitere Einstellungen nach Belieben vornehmen."
+        "one": "Erstelle deinen Kalender und kopiere den Link.",
+        "two": "Im Menü “Termine und Aufgaben” den Punkt “Kalender” wählen. ",
+        "three": "Links siehst du die Kalenderübersicht. In diesem Bereich über die rechte Maustaste klicken und im darauf erscheinenden Kontextmenü “Neuer Kalender” anklicken.",
+        "four": "Du hast die Wahl zwischen “Auf meinem Computer” und “Im Netzwerk”. Bitte letzteres wählen und “Fortsetzen” klicken.",
+        "five": "Im folgenden Fenster lässt du das “Format” wie es ist (“iCalender”).",
+        "six": "Unter \"Adresse\" den kopierten Kalenderlink einfügen.",
+        "seven": "Anschließend kannst du noch einen Namen vergeben und weitere Einstellungen nach Belieben vornehmen."
       },
       "iphone": {
         "title": "iPhone",
diff --git a/frontend/src/view/AdditionalModules.vue b/frontend/src/view/AdditionalModules.vue
index 252f155..bbb647e 100644
--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import {defineAsyncComponent, ref, Ref} from "vue";
-import {Module} from "../model/module.ts";
-import {fetchAllModules} from "../api/fetchCourse.ts";
+import { defineAsyncComponent, ref, Ref } from "vue";
+import { Module } from "../model/module.ts";
+import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
-import {MultiSelectAllChangeEvent} from "primevue/multiselect";
+import { MultiSelectAllChangeEvent } from "primevue/multiselect";
 import router from "../router";
-import {fetchModule} from "../api/fetchModule.ts";
-import {useDialog} from "primevue/usedialog";
-import {useI18n} from "vue-i18n";
+import { fetchModule } from "../api/fetchModule.ts";
+import { useDialog } from "primevue/usedialog";
+import { useI18n } from "vue-i18n";
 
 const dialog = useDialog();
 const { t } = useI18n({ useScope: "global" });
@@ -76,11 +76,19 @@ function selectChange() {
 }
 
 function itemsLabel(selectedModules: Module[]): string {
-  return (selectedModules ? selectedModules.length : 0) != 1 ? t("additionalModules.modules") : t("additionalModules.module");
+  return (selectedModules ? selectedModules.length : 0) != 1
+    ? t("additionalModules.modules")
+    : t("additionalModules.module");
 }
 
 function itemsLabelWithNumber(selectedModules: Module[]): string {
-  return selectedModules.length.toString() + " " + itemsLabel(selectedModules) + " " + t("additionalModules.dropDownFooterSelected");
+  return (
+    selectedModules.length.toString() +
+    " " +
+    itemsLabel(selectedModules) +
+    " " +
+    t("additionalModules.dropDownFooterSelected")
+  );
 }
 </script>
 
@@ -104,9 +112,9 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
         :placeholder="$t('additionalModules.dropDown')"
         :auto-filter-focus="true"
         :show-toggle-all="false"
+        :selected-items-label="itemsLabelWithNumber(selectedModules)"
         @change="selectChange()"
         @selectall-change="onSelectAllChange($event)"
-        :selectedItemsLabel="itemsLabelWithNumber(selectedModules)"
       >
         <template #option="slotProps">
           <div class="flex justify-content-between w-full">
@@ -117,6 +125,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
             </div>
             <div class="flex align-items-center justify-content-center ml-2">
               <Button
+                class="small-button"
                 icon="pi pi-info"
                 severity="secondary"
                 rounded
@@ -140,7 +149,9 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
       </MultiSelect>
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{ $t("additionalModules.nextStep") }}</Button>
+      <Button @click="nextStep()">{{
+        $t("additionalModules.nextStep")
+      }}</Button>
     </div>
   </div>
 </template>
@@ -153,4 +164,10 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
 :deep(.custom-multiselect li) {
   height: unset;
 }
+
+.small-button.p-button {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
 </style>
diff --git a/frontend/src/view/EditCalendarView.vue b/frontend/src/view/EditCalendarView.vue
index e0fa2dc..50a2de5 100644
--- a/frontend/src/view/EditCalendarView.vue
+++ b/frontend/src/view/EditCalendarView.vue
@@ -77,12 +77,20 @@ function loadCalendar(): void {
     <div
       class="flex align-items-center justify-content-center border-round m-2"
     >
-      <InputText v-model="token" type="text" autofocus @keyup.enter="loadCalendar" />
+      <InputText
+        v-model="token"
+        type="text"
+        autofocus
+        @keyup.enter="loadCalendar"
+      />
     </div>
     <div
       class="flex align-items-center justify-content-center border-round m-2"
     >
-      <Button :label="$t('editCalendarView.loadCalendar')" @click="loadCalendar" />
+      <Button
+        :label="$t('editCalendarView.loadCalendar')"
+        @click="loadCalendar"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/view/ImprintPage.vue b/frontend/src/view/ImprintPage.vue
index 0d6c69b..cb4297b 100644
--- a/frontend/src/view/ImprintPage.vue
+++ b/frontend/src/view/ImprintPage.vue
@@ -3,7 +3,7 @@
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
     <div class="flex align-items-center justify-content-center h-4rem mt-2">
-      <h3 class="text-4xl">{{$t("imprint")}}</h3>
+      <h3 class="text-4xl">{{ $t("imprint") }}</h3>
     </div>
     <div class="flex flex-column col-7">
       <p>nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.</p>
diff --git a/frontend/src/view/PrivacyPolicy.vue b/frontend/src/view/PrivacyPolicy.vue
index 0d44f8c..3f00f32 100644
--- a/frontend/src/view/PrivacyPolicy.vue
+++ b/frontend/src/view/PrivacyPolicy.vue
@@ -3,7 +3,7 @@
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
     <div class="flex align-items-center justify-content-center h-4rem mt-2">
-      <h3 class="text-4xl">{{$t("privacy")}}</h3>
+      <h3 class="text-4xl">{{ $t("privacy") }}</h3>
     </div>
     <div class="flex flex-column col-7">
       <h1>Datenschutzerklärung</h1>