From d9dbededee0093def1ac342cebcd461fb8e4fb02 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 2 Jan 2026 14:28:41 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20enhance=20the=20visual?=
 =?UTF-8?q?=20hierarchy=20of=20the=20no=20access=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../recording/components/NoAccessView.tsx     | 49 ++++++++++---------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/features/recording/components/NoAccessView.tsx b/src/frontend/src/features/recording/components/NoAccessView.tsx
index 39872070..3ce279a2 100644
--- a/src/frontend/src/features/recording/components/NoAccessView.tsx
+++ b/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>
-      <Text
-        variant="note"
-        centered
-        className={css({
-          textStyle: 'sm',
-          marginBottom: '2.5rem',
-          marginTop: '0.25rem',
-          '@media (max-height: 700px)': {
-            marginBottom: '1rem',
-          },
-        })}
-      >
-        {t(`${i18nKey}.body`)}
-        <br />
-        {helpArticle && (
-          <A href={helpArticle} target="_blank">
-            {t(`${i18nKey}.linkMore`)}
-          </A>
-        )}
-      </Text>
+      <VStack gap={0} marginBottom={0}>
+        <H lvl={1} margin={'sm'} fullWidth centered>
+          {t(`${i18nKey}.heading`)}
+        </H>
+        <Text
+          variant="note"
+          centered
+          className={css({
+            textStyle: 'sm',
+            marginBottom: '2.5rem',
+            marginTop: '0.25rem',
+            '@media (max-height: 700px)': {
+              marginBottom: '1rem',
+            },
+          })}
+        >
+          {t(`${i18nKey}.body`)}
+          <br />
+          {helpArticle && (
+            <A href={helpArticle} target="_blank">
+              {t(`${i18nKey}.linkMore`)}
+            </A>
+          )}
+        </Text>
+      </VStack>
       {!isLoggedIn && (
         <LoginPrompt
           heading={t(`${i18nKey}.login.heading`)}