🚸(frontend) enhance the visual hierarchy of the no access view

Rework the visual hierarchy of the “no access” view to align it with other
presentation modes and ensure the title order is clear and understandable for
users.

src/frontend/src/features/recording/components/NoAccessView.tsx

@@ -1,8 +1,9 @@
-import { A, Div, Text } from '@/primitives'
+import { A, Div, H, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 import { LoginPrompt } from './LoginPrompt'
 import { useUser } from '@/features/auth'
+import { VStack } from '@/styled-system/jsx'
 
 interface NoAccessViewProps {
   i18nKeyPrefix: string
@@ -50,27 +51,31 @@ export const NoAccessView = ({
           },
         })}
       />
-      <Text>{t(`${i18nKey}.heading`)}</Text>
+      <VStack gap={0} marginBottom={0}>
-      <Text
+        <H lvl={1} margin={'sm'} fullWidth centered>
-        variant="note"
+          {t(`${i18nKey}.heading`)}
-        centered
+        </H>
-        className={css({
+        <Text
-          textStyle: 'sm',
+          variant="note"
-          marginBottom: '2.5rem',
+          centered
-          marginTop: '0.25rem',
+          className={css({
-          '@media (max-height: 700px)': {
+            textStyle: 'sm',
-            marginBottom: '1rem',
+            marginBottom: '2.5rem',
-          },
+            marginTop: '0.25rem',
-        })}
+            '@media (max-height: 700px)': {
-      >
+              marginBottom: '1rem',
-        {t(`${i18nKey}.body`)}
+            },
-        <br />
+          })}
-        {helpArticle && (
+        >
-          <A href={helpArticle} target="_blank">
+          {t(`${i18nKey}.body`)}
-            {t(`${i18nKey}.linkMore`)}
+          <br />
-          </A>
+          {helpArticle && (
-        )}
+            <A href={helpArticle} target="_blank">
-      </Text>
+              {t(`${i18nKey}.linkMore`)}
+            </A>
+          )}
+        </Text>
+      </VStack>
       {!isLoggedIn && (
         <LoginPrompt
           heading={t(`${i18nKey}.login.heading`)}