💄(frontend) organize blurring options

Add visual container and a heading to indicate buttons are
blurring options.

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

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { useLocalParticipant } from '@livekit/components-react'
 import { LocalVideoTrack } from 'livekit-client'
-import { Text, P, ToggleButton } from '@/primitives'
+import { Text, P, ToggleButton, Div, H } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { HStack, VStack } from '@/styled-system/jsx'
 import {
@@ -92,8 +92,8 @@ export const Effects = () => {
           muted
           style={{
             transform: 'rotateY(180deg)',
-            minHeight: '173px',
+            minHeight: '175px',
-            borderRadius: '4px',
+            borderRadius: '8px',
           }}
         />
       ) : (
@@ -119,6 +119,24 @@ export const Effects = () => {
           </P>
         </div>
       )}
+      <Div
+        alignItems={'left'}
+        width={'100%'}
+        style={{
+          border: '1px solid #dadce0',
+          borderRadius: '8px',
+          margin: '0 .625rem',
+          padding: '0.5rem 1rem',
+        }}
+      >
+        <H
+          lvl={3}
+          style={{
+            marginBottom: '0.4rem',
+          }}
+        >
+          {t('heading')}
+        </H>
         {ProcessorWrapper.isSupported ? (
           <HStack>
             <ToggleButton
@@ -147,6 +165,7 @@ export const Effects = () => {
         ) : (
           <Text variant="sm">{t('notAvailable')}</Text>
         )}
+      </Div>
     </VStack>
   )
 }

src/frontend/src/locales/de/rooms.json

@@ -76,6 +76,7 @@
   "effects": {
     "activateCamera": "",
     "notAvailable": "",
+    "heading": "",
     "blur": {
       "light": "",
       "normal": "",

src/frontend/src/locales/en/rooms.json

@@ -74,6 +74,7 @@
   "effects": {
     "activateCamera": "Your camera is disabled. Choose an option to enable it.",
     "notAvailable": "The blur effect will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome :(",
+    "heading": "Blur",
     "blur": {
       "light": "Light blur",
       "normal": "Blur",

src/frontend/src/locales/fr/rooms.json

@@ -74,6 +74,7 @@
   "effects": {
     "activateCamera": "Votre camera est désactivée. Choisissez une option pour l'activer.",
     "notAvailable": "L'effet de flou sera bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome :(",
+    "heading": "Flou",
     "blur": {
       "light": "Léger flou",
       "normal": "Flou",