add new page header and decrease marging

src/pages/EventsTable.vue

@@ -1,11 +1,11 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('events') }}</h4>
+    <SiteTitle :title="$t('events')" />
-
     <EventsTable />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import EventsTable from 'src/vueLib/tables/events/EventsTable.vue';
 </script>

src/pages/GroupTable.vue

@@ -1,10 +1,11 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('groups') }}</h4>
+    <SiteTitle :title="$t('groups')" />
     <GroupTable />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import GroupTable from 'src/vueLib/tables/group/GroupTable.vue';
 </script>

src/pages/MembersTable.vue

@@ -1,10 +1,13 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('members') }}</h4>
+    <SiteTitle :title="$t('members')" />
+    <div class="q-pa-md">
       <MembersTable />
+    </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import MembersTable from 'src/vueLib/tables/members/MembersTable.vue';
 </script>

src/pages/ResponsibleTable.vue

@@ -1,11 +1,11 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('responsibles') }}</h4>
+    <SiteTitle :title="$t('responsibles')" />
-
     <ResponsibleTable />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import ResponsibleTable from 'src/vueLib/tables/responsible/ResponsibleTable.vue';
 </script>

src/pages/SettingsPage.vue

@@ -1,6 +1,5 @@
 <template>
-  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
+  <SiteTitle :title="$t('userSettings')" />
-
   <div class="text-h2 flex flex-center">
     <q-card class="q-gutter-md">
       <div>
@@ -152,6 +151,7 @@ import { useNotify } from 'src/vueLib/general/useNotify';
 import { type Settings } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { setLocalSettings } from 'src/localstorage/localStorage';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 
 const { NotifyResponse } = useNotify();
 const colorGroup = ref(false);

src/pages/UserSettings.vue

@@ -1,6 +1,5 @@
 <template>
-  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
+  <SiteTitle :title="$t('userSettings')" />
-
   <div class="q-pa-md">
     <div class="q-gutter-y-md">
       <q-card>
@@ -35,6 +34,7 @@
 import { ref } from 'vue';
 import UserTable from 'src/vueLib/tables/users/UserTable.vue';
 import RoleTable from 'src/vueLib/tables/roles/RoleTable.vue';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 
 const tab = ref('users');
 </script>

src/router/routes.ts

@@ -25,12 +25,12 @@ const routes: RouteRecordRaw[] = [
       },
       {
         path: 'responsible',
-        component: () => import('pages/ResponsibleTable.vue'),
+        component: () => import('src/pages/ResponsibleTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
       {
         path: 'group',
-        component: () => import('pages/GroupTable.vue'),
+        component: () => import('src/pages/GroupTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
       {

src/vueLib/general/SiteTitle.vue

@@ -0,0 +1,12 @@
+<template>
+  <h4 class="text-primary text-bold text-center" :style="{ margin: props.marging + 'px' }">
+    {{ props.title }}
+  </h4>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: { type: String },
+  marging: { type: Number, default: 28 },
+});
+</script>