fix: adjust headline sizes across the webui (#1504)

(cherry picked from commit 0db0a02)

Author: AlexAndBear

packages/web-app-activities/src/views/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 v-text="$gettext('Activities')" />
+  <h1 class="text-lg" v-text="$gettext('Activities')" />
   <div class="w-full mb-4">
     <item-filter
       ref="mediaTypeFilter"

packages/web-app-app-store/src/views/AppList.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <h2 class="mt-0 app-list-headline">
+    <h1 class="mt-0 text-lg app-list-headline">
       {{ $gettext('App Store') }}
       <app-contextual-helper />
-    </h2>
+    </h1>
     <div class="flex items-center mb-4">
       <oc-text-input
         id="apps-filter"

packages/web-runtime/src/components/Account/AppTokens.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="authStore.userContextReady" id="preferences-panel-app-tokens">
     <div class="flex items-center mb-4">
-      <h1 class="mt-0" v-text="$gettext('App Tokens')" />
+      <h1 class="m-0 text-lg" v-text="$gettext('App Tokens')" />
       <oc-button
         v-if="!authAppServiceDisabled"
         size="small"
@@ -22,12 +22,15 @@
         )
       "
     />
-    <p
+    <no-content-message
       v-else-if="!appTokens.length"
-      class="ml-2"
+      icon="key-2"
       data-testid="no-app-tokens-available"
-      v-text="$gettext('No app tokens available.')"
-    />
+    >
+      <template #message>
+        <span v-text="$gettext('No app tokens available.')" />
+      </template>
+    </no-content-message>
     <div v-else>
       <oc-table class="app-token-table" :data="visibleAppTokens" :fields="tableFields">
         <template #label="{ item }">
@@ -84,6 +87,7 @@ import { useGettext } from 'vue3-gettext'
 import AppTokenModal from '../Modals/AppTokenModal.vue'
 import { AppToken, AppTokenListSchema } from '../../helpers/appTokens'
 import { FieldType } from '@opencloud-eu/design-system/helpers'
+import { NoContentMessage } from '@opencloud-eu/web-pkg/src'
 
 const { $gettext, current: currentLanguage } = useGettext()
 const { dispatchModal } = useModals()

packages/web-runtime/src/pages/account/accountCalendar.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="account-calendar">
-    <h1 class="mt-0" v-text="$gettext('Calendar')" />
+    <h1 class="text-lg mt-1" v-text="$gettext('Calendar')" />
     <span v-if="!isCalDavAvailable" class="flex flex-row items-center">
       <oc-icon name="information" size="small" fill-type="line" class="mr-1" />
 

packages/web-runtime/src/pages/account/accountExtensions.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="account-extensions">
-    <h1 class="mt-0" v-text="$gettext('Extensions')" />
+    <h1 class="text-lg mt-1" v-text="$gettext('Extensions')" />
     <no-content-message
       v-if="!extensionPointsWithUserPreferences.length"
       id="account-extensions-empty"

packages/web-runtime/src/pages/account/accountGDPR.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="account-gdpr">
-    <h1 class="mt-0" v-text="$gettext('GDPR')" />
+    <h1 class="text-lg mt-1" v-text="$gettext('GDPR')" />
     <account-table
       :fields="[
         $gettext('GDPR action name'),

packages/web-runtime/src/pages/account/accountInformation.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="account-information">
     <div class="flex justify-between items-center w-full">
-      <h1 class="mt-0" v-text="$gettext('Account Information')" />
+      <h1 class="mt-1 text-lg" v-text="$gettext('Account Information')" />
       <oc-button
         v-if="accountEditLink"
         type="a"

packages/web-runtime/src/pages/account/accountPreferences.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="account-preferences">
-    <h1 class="mt-0" v-text="$gettext('Preferences')" />
+    <h1 class="text-lg mt-1" v-text="$gettext('Preferences')" />
     <app-loading-spinner v-if="isLoading" />
     <template v-else>
       <account-table

packages/web-runtime/tests/unit/pages/account/__snapshots__/accountInformation.spec.ts.snap

@@ -86,7 +86,7 @@ exports[`account information page > header section > edit url button > should be
 exports[`account information page > public link context > should render a limited view 1`] = `
 "<div id="account-information">
   <div class="flex justify-between items-center w-full">
-    <h1 class="mt-0">Account Information</h1>
+    <h1 class="mt-1 text-lg">Account Information</h1>
     <!--v-if-->
   </div>
   <div class="account-table account-page-info mt-6">