🚸(frontend) introduce an icon on the login prompt for visual distinction

This will be useful when adding an alternative card to request the meeting
creator to start the recording.

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

@@ -1,6 +1,7 @@
 import { H, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { LoginButton } from '@/components/LoginButton'
+import { HStack } from '@/styled-system/jsx'
 
 interface LoginPromptProps {
   heading: string
@@ -22,16 +23,14 @@ export const LoginPrompt = ({ heading, body }: LoginPromptProps) => {
         flexDirection: 'column',
       })}
     >
-      <H
-        lvl={3}
-        className={css({
-          display: 'flex',
-          alignItems: 'center',
-          marginBottom: '0.35rem',
-        })}
-      >
-        {heading}
-      </H>
+      <HStack justify="start" alignItems="center" marginBottom="0.5rem">
+        <span className="material-symbols" aria-hidden={true}>
+          login
+        </span>
+        <H lvl={3} margin={false} padding={false}>
+          {heading}
+        </H>
+      </HStack>
       <Text variant="smNote" wrap="pretty">
         {body}
       </Text>

src/frontend/src/primitives/Text.tsx

@@ -106,6 +106,11 @@ export const text = cva({
         marginBottom: 1,
       },
     },
+    padding: {
+      false: {
+        padding: '0!',
+      },
+    },
     fullWidth: {
       true: {
         width: '100%',