From 021e52d9ebf6db7c29b4eee8c7606c5665b0ca2f Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 19 Sep 2024 19:17:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20organize=20blurring=20?=
 =?UTF-8?q?options?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add visual container and a heading to indicate buttons are
blurring options.
---
 .../rooms/livekit/components/Effects.tsx      | 81 ++++++++++++-------
 src/frontend/src/locales/de/rooms.json        |  1 +
 src/frontend/src/locales/en/rooms.json        |  1 +
 src/frontend/src/locales/fr/rooms.json        |  1 +
 4 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/Effects.tsx b/src/frontend/src/features/rooms/livekit/components/Effects.tsx
index eb954167..b46ce0d4 100644
--- a/src/frontend/src/features/rooms/livekit/components/Effects.tsx
+++ b/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',
-            borderRadius: '4px',
+            minHeight: '175px',
+            borderRadius: '8px',
           }}
         />
       ) : (
@@ -119,34 +119,53 @@ export const Effects = () => {
           </P>
         </div>
       )}
-      {ProcessorWrapper.isSupported ? (
-        <HStack>
-          <ToggleButton
-            size={'sm'}
-            legacyStyle
-            aria-label={tooltipLabel(BlurRadius.LIGHT)}
-            tooltip={tooltipLabel(BlurRadius.LIGHT)}
-            isDisabled={processorPending}
-            onPress={async () => await toggleBlur(BlurRadius.LIGHT)}
-            isSelected={isSelected(BlurRadius.LIGHT)}
-          >
-            {t('blur.light')}
-          </ToggleButton>
-          <ToggleButton
-            size={'sm'}
-            legacyStyle
-            aria-label={tooltipLabel(BlurRadius.NORMAL)}
-            tooltip={tooltipLabel(BlurRadius.NORMAL)}
-            isDisabled={processorPending}
-            onPress={async () => await toggleBlur(BlurRadius.NORMAL)}
-            isSelected={isSelected(BlurRadius.NORMAL)}
-          >
-            {t('blur.normal')}
-          </ToggleButton>
-        </HStack>
-      ) : (
-        <Text variant="sm">{t('notAvailable')}</Text>
-      )}
+      <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
+              size={'sm'}
+              legacyStyle
+              aria-label={tooltipLabel(BlurRadius.LIGHT)}
+              tooltip={tooltipLabel(BlurRadius.LIGHT)}
+              isDisabled={processorPending}
+              onPress={async () => await toggleBlur(BlurRadius.LIGHT)}
+              isSelected={isSelected(BlurRadius.LIGHT)}
+            >
+              {t('blur.light')}
+            </ToggleButton>
+            <ToggleButton
+              size={'sm'}
+              legacyStyle
+              aria-label={tooltipLabel(BlurRadius.NORMAL)}
+              tooltip={tooltipLabel(BlurRadius.NORMAL)}
+              isDisabled={processorPending}
+              onPress={async () => await toggleBlur(BlurRadius.NORMAL)}
+              isSelected={isSelected(BlurRadius.NORMAL)}
+            >
+              {t('blur.normal')}
+            </ToggleButton>
+          </HStack>
+        ) : (
+          <Text variant="sm">{t('notAvailable')}</Text>
+        )}
+      </Div>
     </VStack>
   )
 }
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 09fe50ea..21b7e049 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -76,6 +76,7 @@
   "effects": {
     "activateCamera": "",
     "notAvailable": "",
+    "heading": "",
     "blur": {
       "light": "",
       "normal": "",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index ca12f331..68afa747 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/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",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 1378b7f2..36cc5779 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/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",