♻️ Refactor frontend code

src/views/SettingsView.vue

@@ -13,6 +13,7 @@ const gitHash = GITVERSION;
 
 <template>
   <div class="settings">
+    <!-- Filtering -->
     <h2>{{ $t("settings.heading.filtering") }}</h2>
     <p>{{ $t("settings.text.filtering") }}</p>
     <select v-model="classFilter">
@@ -23,6 +24,8 @@ const gitHash = GITVERSION;
       <option value="other">{{ $t("settings.other") }}</option>
     </select>
     <div class="spacer"></div>
+
+    <!-- Timetable Groups -->
     <h2>{{ $t("settings.heading.timetableGroups") }}</h2>
     <p>{{ $t("settings.text.timetableGroups") }}</p>
     <select v-model="timetableGroups" multiple>
@@ -36,6 +39,8 @@ const gitHash = GITVERSION;
       </option>
     </select>
     <div class="spacer"></div>
+
+    <!-- Language -->
     <h2>{{ $t("settings.heading.language") }}</h2>
     <p>{{ $t("settings.text.language") }}</p>
     <select v-model="language">
@@ -48,6 +53,8 @@ const gitHash = GITVERSION;
       </option>
     </select>
     <div class="spacer"></div>
+
+    <!-- About -->
     <h2>{{ $t("settings.heading.about") }}</h2>
     <p>{{ $t("settings.text.about") }}</p>
     <div class="spacer"></div>
@@ -74,6 +81,12 @@ select {
   outline: none;
   border: 2px solid var(--element-border-input);
   border-radius: 5px;
+  background-color: var(--element-color);
+  transition: background-color 0.2s;
+}
+
+select:hover {
+  background-color: var(--element-color-hover);
 }
 
 select[multiple] {