💄(frontend) replace recording side panel title with proper header

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.

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'}

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'}