refactor: added ContentPage component

also updated styling for h1-h3

src/assets/main.css

@@ -8,11 +8,15 @@ html {
   @apply text-gray-900 dark:text-gray-50;
 }
 
-h2 {
+.h1 {
   @apply text-2xl font-medium;
 }
 
-h3 {
+.h2 {
+  @apply text-xl font-medium;
+}
+
+.h3 {
   @apply text-lg font-medium;
 }
 

src/components/ContentPage.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <div class="space-y-8">
+    <p v-if="title" class="h2">{{ title }}</p>
+    <slot name="divider">
+      <hr />
+    </slot>
+    <div class="max-w-4xl" v-bind="$attrs">
+      <slot></slot>
+    </div>
+  </div>
+</template>

src/components/NotificationHandler.vue

@@ -30,7 +30,7 @@ notificationEngine.$onAction(({ name, after }) => {
           <FontAwesomeIcon :icon="faCheckCircle" class="h-full w-full" />
         </div>
         <div class="space-y-1">
-          <h3 class="text-sm">{{ $t(notification.title) }}</h3>
+          <p class="h3 text-sm">{{ $t(notification.title) }}</p>
           <small class="text-gray-500 dark:text-gray-400">{{ $t(notification.description) }}</small>
         </div>
         <button class="h-3.5 w-3.5 shrink-0" @click="notificationEngine.remove(id)">

src/views/UserAccount.vue

@@ -9,6 +9,7 @@ import { MessageBag } from '@/lib/validation'
 import { useI18n } from 'vue-i18n'
 import { useAuth } from '@/composables/useAuth'
 import { useNotificationEngine } from '@/stores/useNotificationEngine'
+import ContentPage from '@/components/ContentPage.vue'
 
 interface ChangePasswordResponse {
   status: 'success' | 'failure'
@@ -137,14 +138,12 @@ async function changePassword() {
 </script>
 
 <template>
-  <div class="space-y-8">
-    <h2>{{ $t('account_settings.title') }}</h2>
-    <hr />
-    <div class="grid max-w-3xl grid-cols-1 gap-x-6 gap-y-6 lg:grid-cols-2">
+  <ContentPage :title="$t('account_settings.title')">
+    <div class="grid grid-cols-1 gap-x-6 gap-y-6 lg:grid-cols-2">
       <div class="space-y-1">
-        <h3>
+        <p>
           {{ $t('account_settings.change_password') }}
-        </h3>
+        </p>
         <p class="description-text">{{ $t('account_settings.change_password_description') }}</p>
         <ul class="description-text list-disc pl-6">
           <li v-for="(product, key) in products" :key="key">
@@ -208,5 +207,5 @@ async function changePassword() {
         </NeButton>
       </form>
     </div>
-  </div>
+  </ContentPage>
 </template>