fix:#20 rearranged page layout

frontend/src/components/DarkModeSwitcher.vue

@@ -60,7 +60,7 @@ onMounted(() => {
   <Button
     id="dark-mode-switcher"
     size="small"
-    class="p-button-rounded w-full md:w-auto"
+    class="p-button-rounded md:w-auto"
     style="margin-right: 1rem"
     :severity="isDark ? 'warning' : 'success'"
     @click="toggleTheme()"

frontend/src/i18n/translations/de.json

@@ -252,6 +252,8 @@
   },
   "settings": {
     "headline": "Einstellungen",
-    "subTitle": "Hier kannst du deine Einstellungen bearbeiten."
+    "subTitle": "Hier kannst du deine Einstellungen bearbeiten.",
+    "language": "Sprache einstellen",
+    "darkMode": "Design auswählen"
   }
 }

frontend/src/i18n/translations/en.json

@@ -252,6 +252,8 @@
   },
   "settings": {
     "headline": "Settings",
-    "subTitle": "Here you can change your settings."
+    "subTitle": "Here you can change your settings.",
+    "language": "Choose your language",
+    "darkMode": "Switch page theme"
   }
 }

frontend/src/i18n/translations/ja.json

@@ -252,6 +252,8 @@
   },
   "settings": {
     "headline": "設定",
-    "subTitle": "ここで設定を編集できます。"
+    "subTitle": "ここで設定を編集できます。",
+    "language": "言語",
+    "darkMode": "ダークモード"
   }
 }

frontend/src/view/SettingsView.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 
 import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
-import {ref} from "vue";
+import { ref } from "vue";
 import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
 
 const icon = "pi pi-cog";
@@ -22,36 +22,48 @@ function handleDarkModeToggled(isDarkVar: boolean) {
       class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown md:mt-8"
     >
       <h3 class="text-4xl">
-        {{ $t('settings.headline') }}
+        {{ $t("settings.headline") }}
       </h3>
       <i v-if="icon" :class="icon" style="font-size: 2rem"></i>
     </div>
     <div v-if="$t('settings.subTitle')" class="flex justify-content-center">
-      <h5 class="text-2xl m-2">{{ $t('settings.subTitle') }}</h5>
+      <h5 class="text-2xl m-2">{{ $t("settings.subTitle") }}</h5>
     </div>
     <div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
-      <slot name="selection" flex-specs="flex-1 m-0"></slot>
+      <slot flex-specs="flex-1 m-0" name="selection"></slot>
     </div>
     <div
-                :class="[
+class="opacity-100 transition-all transition-duration-500 transition-ease-in-out w-full lg:w-8"
-              'opacity-100',
-              'transition-all',
-              'transition-duration-500',
-              'transition-ease-in-out',
-                   'w-full',
-        'lg:w-8',
-      ]"
     >
-
+      <div class="flex flex-column justify-content-center">
+        <div class="grid my-2">
+          <div class="col text-center">
+            {{ $t("settings.language") }}
+          </div>
+          <div class="col text-center">
+            <LocaleSwitcher />
+          </div>
+        </div>
+        <div class="grid my-2">
+          <div class="col text-center">
+            {{ $t("settings.darkMode") }}
+          </div>
+          <div class="col text-center">
             <DarkModeSwitcher
               @dark-mode-toggled="handleDarkModeToggled"
             ></DarkModeSwitcher>
-        <LocaleSwitcher></LocaleSwitcher>
+          </div>
-
+        </div>
+      </div>
     </div>
   </div>
 </template>
-
 <style scoped>
 
+.col {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 </style>