From fc1b4d7fa7b4ce262b17df5ceabeb0ab8255592e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 10 Apr 2025 19:32:12 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20replace=20recording=20?=
 =?UTF-8?q?side=20panel=20title=20with=20proper=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update recording side panel to use semantic header element instead of plain
text. Improves accessibility by providing proper document structure and
enhances visual hierarchy in the user interface.
---
 .../recording/components/ScreenRecordingSidePanel.tsx  | 10 +++++++---
 .../recording/components/TranscriptSidePanel.tsx       | 10 +++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
index 44c7a0e0..b947fa46 100644
--- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
+++ b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
@@ -1,4 +1,4 @@
-import { A, Button, Div, Text } from '@/primitives'
+import { A, Button, Div, H, Text } from '@/primitives'
 
 import fourthSlide from '@/assets/intro-slider/4_record.png'
 import { css } from '@/styled-system/css'
@@ -106,7 +106,9 @@ export const ScreenRecordingSidePanel = () => {
 
       {isScreenRecordingStarted ? (
         <>
-          <Text>{t('stop.heading')}</Text>
+          <H lvl={3} margin={false}>
+            {t('stop.heading')}
+          </H>
           <Text
             variant="note"
             wrap={'pretty'}
@@ -131,7 +133,9 @@ export const ScreenRecordingSidePanel = () => {
         </>
       ) : (
         <>
-          <Text>{t('start.heading')}</Text>
+          <H lvl={3} margin={false}>
+            {t('start.heading')}
+          </H>
           <Text
             variant="note"
             wrap={'pretty'}
diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
index f70c217b..6760fe37 100644
--- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
+++ b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
@@ -1,4 +1,4 @@
-import { A, Button, Div, LinkButton, Text } from '@/primitives'
+import { A, Button, Div, H, LinkButton, Text } from '@/primitives'
 
 import thirdSlide from '@/assets/intro-slider/3_resume.png'
 import { css } from '@/styled-system/css'
@@ -137,7 +137,9 @@ export const TranscriptSidePanel = () => {
         <>
           {isTranscriptStarted ? (
             <>
-              <Text>{t('stop.heading')}</Text>
+              <H lvl={3} margin={false}>
+                {t('stop.heading')}
+              </H>
               <Text
                 variant="note"
                 wrap={'pretty'}
@@ -162,7 +164,9 @@ export const TranscriptSidePanel = () => {
             </>
           ) : (
             <>
-              <Text>{t('start.heading')}</Text>
+              <H lvl={3} margin={false}>
+                {t('start.heading')}
+              </H>
               <Text
                 variant="note"
                 wrap={'pretty'}