💄(frontend) refactor meeting tools presentation

Follow Robin’s suggestion on the meeting tool layout presentation. The result
does not yet exactly match the Figma design, and I took some freedom to stay
closer to a Google Meet–like layout.

In the initial approach, it was hard to understand that the full option was
clickable. Adding a light background improves discoverability and usability.

src/frontend/src/features/rooms/livekit/components/Tools.tsx

@@ -3,7 +3,6 @@ import { css } from '@/styled-system/css'
 import { Button as RACButton } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { ReactNode } from 'react'
-import { RiFileTextFill, RiLiveFill } from '@remixicon/react'
 import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
 import {
   useIsRecordingModeEnabled,
@@ -11,7 +10,6 @@ import {
   useHasRecordingAccess,
   TranscriptSidePanel,
   ScreenRecordingSidePanel,
-  useIsRecordingActive,
 } from '@/features/recording'
 import { FeatureFlags } from '@/features/analytics/enums'
 import { useConfig } from '@/api/useConfig'
@@ -22,7 +20,6 @@ export interface ToolsButtonProps {
   description: string
   onPress: () => void
   isBetaFeature?: boolean
-  isActive?: boolean
 }
 
 const ToolButton = ({
@@ -31,7 +28,6 @@ const ToolButton = ({
   description,
   onPress,
   isBetaFeature = false,
-  isActive = false,
 }: ToolsButtonProps) => {
   return (
     <RACButton
@@ -42,9 +38,9 @@ const ToolButton = ({
         justifyContent: 'start',
         paddingY: '0.5rem',
         paddingX: '0.75rem 1.5rem',
-        borderRadius: '5px',
+        borderRadius: '30px',
-        gap: '1.25rem',
         width: 'full',
+        backgroundColor: 'gray.50',
         textAlign: 'start',
         '&[data-hovered]': {
           backgroundColor: 'primary.50',
@@ -55,59 +51,64 @@ const ToolButton = ({
     >
       <div
         className={css({
-          height: '50px',
+          height: '40px',
-          minWidth: '50px',
+          minWidth: '40px',
           borderRadius: '25px',
-          backgroundColor: 'primary.800',
+          marginRight: '0.75rem',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           position: 'relative',
+          background: 'primary.800',
+          color: 'white',
         })}
       >
         {icon}
-        {isBetaFeature && (
-          <div
-            className={css({
-              position: 'absolute',
-              backgroundColor: 'primary.50',
-              color: 'primary.800',
-              fontSize: '12px',
-              fontWeight: 500,
-              borderRadius: '4px',
-              paddingX: '4px',
-              paddingBottom: '1px',
-              bottom: -8,
-              right: -8,
-            })}
-          >
-            BETA
-          </div>
-        )}
       </div>
       <div>
         <Text
           margin={false}
           as="h3"
-          className={css({ display: 'flex', gap: 0.25 })}
+          className={css({
+            display: 'flex',
+            gap: 0.25,
+            fontWeight: 'semibold',
+          })}
         >
           {title}
-          {isActive && (
+          {isBetaFeature && (
             <div
               className={css({
-                backgroundColor: 'primary.500',
+                display: 'flex',
-                height: '10px',
+                backgroundColor: 'primary.50',
-                width: '10px',
+                color: 'primary.600',
-                marginTop: '5px',
+                fontSize: '12px',
-                borderRadius: '100%',
+                lineHeight: '24px',
+                fontWeight: 700,
+                borderRadius: '10px',
+                paddingX: '4px',
+                marginLeft: '5px',
               })}
-            />
+            >
+              BETA
+            </div>
           )}
         </Text>
         <Text as="p" variant="smNote" wrap="pretty">
           {description}
         </Text>
       </div>
+      <div
+        className={css({
+          marginLeft: 'auto',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}
+      >
+        <span className="material-symbols">chevron_forward</span>
+      </div>
     </RACButton>
   )
 }
@@ -122,17 +123,11 @@ export const Tools = () => {
     RecordingMode.Transcript
   )
 
-  const isTranscriptActive = useIsRecordingActive(RecordingMode.Transcript)
-
   const hasScreenRecordingAccess = useHasRecordingAccess(
     RecordingMode.ScreenRecording,
     FeatureFlags.ScreenRecording
   )
 
-  const isScreenRecordingActive = useIsRecordingActive(
-    RecordingMode.ScreenRecording
-  )
-
   switch (activeSubPanelId) {
     case SubPanelId.TRANSCRIPT:
       return <TranscriptSidePanel />
@@ -150,6 +145,7 @@ export const Tools = () => {
       flexGrow={1}
       flexDirection="column"
       alignItems="start"
+      gap={0.5}
     >
       <Text
         variant="note"
@@ -157,8 +153,8 @@ export const Tools = () => {
         className={css({
           textStyle: 'sm',
           paddingX: '0.75rem',
+          marginBottom: '1rem',
         })}
-        margin="md"
       >
         {t('body')}{' '}
         {data?.support?.help_article_more_tools && (
@@ -172,22 +168,20 @@ export const Tools = () => {
       </Text>
       {isTranscriptEnabled && (
         <ToolButton
-          icon={<RiFileTextFill size={24} color="white" />}
+          icon={<span className="material-symbols">speech_to_text</span>}
           title={t('tools.transcript.title')}
           description={t('tools.transcript.body')}
           onPress={() => openTranscript()}
           isBetaFeature
-          isActive={isTranscriptActive}
         />
       )}
       {hasScreenRecordingAccess && (
         <ToolButton
-          icon={<RiLiveFill size={24} color="white" />}
+          icon={<span className="material-symbols">mode_standby</span>}
           title={t('tools.screenRecording.title')}
           description={t('tools.screenRecording.body')}
           onPress={() => openScreenRecording()}
           isBetaFeature
-          isActive={isScreenRecordingActive}
         />
       )}
     </Div>