From 6587863afb1efcc9f89b5b7d51dd2229137ac23b Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 21 Jan 2025 01:02:51 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20use=20dark=20theme=20f?=
 =?UTF-8?q?or=20menus=20in=20the=20videoconference?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inspired by GMeet. Actually, these menus are horrible to work with.
This is clearly some technical debt. I fixed the styles, but not the
code, we should refactor them to make easy to chose between two
variant, a light and a dark one.
---
 .../livekit/components/controls/Options/OptionsButton.tsx | 2 +-
 .../components/controls/Options/OptionsMenuItems.tsx      | 6 +++---
 .../livekit/components/controls/SelectToggleDevice.tsx    | 5 ++++-
 .../livekit/prefabs/ControlBar/DesktopControlBar.tsx      | 2 ++
 src/frontend/src/primitives/Box.tsx                       | 8 ++++++--
 src/frontend/src/primitives/Menu.tsx                      | 4 +++-
 src/frontend/src/primitives/MenuList.tsx                  | 7 ++++++-
 src/frontend/src/primitives/Separator.tsx                 | 2 +-
 src/frontend/src/primitives/menuRecipe.ts                 | 8 ++++++--
 9 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
index 70021a37..17afa759 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
@@ -8,7 +8,7 @@ export const OptionsButton = () => {
 
   return (
     <>
-      <Menu>
+      <Menu variant="dark">
         <Button
           square
           variant="primaryDark"
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
index 9581e73b..44bb780f 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
@@ -26,7 +26,7 @@ export const OptionsMenuItems = () => {
       <MenuSection>
         <MenuItem
           onAction={() => toggleEffects()}
-          className={menuRecipe({ icon: true }).item}
+          className={menuRecipe({ icon: true, variant: 'dark' }).item}
         >
           <RiAccountBoxLine size={20} />
           {t('effects')}
@@ -37,13 +37,13 @@ export const OptionsMenuItems = () => {
         <MenuItem
           href={GRIST_FORM}
           target="_blank"
-          className={menuRecipe({ icon: true }).item}
+          className={menuRecipe({ icon: true, variant: 'dark' }).item}
         >
           <RiMegaphoneLine size={20} />
           {t('feedback')}
         </MenuItem>
         <MenuItem
-          className={menuRecipe({ icon: true }).item}
+          className={menuRecipe({ icon: true, variant: 'dark' }).item}
           onAction={() => setDialogOpen(true)}
         >
           <RiSettings3Line size={20} />
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
index 55b93712..9d940f66 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
@@ -67,10 +67,12 @@ type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
     onActiveDeviceChange: (deviceId: string) => void
     source: SelectToggleSource
+    variant?: 'dark' | 'light'
   }
 
 export const SelectToggleDevice = <T extends ToggleSource>({
   onActiveDeviceChange,
+  variant = 'light',
   ...props
 }: SelectToggleDeviceProps<T>) => {
   const config = selectToggleDeviceConfig[props.source]
@@ -93,7 +95,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
       })}
     >
       <ToggleDevice {...trackProps} config={config} />
-      <Menu>
+      <Menu variant={variant}>
         <Button
           tooltip={selectLabel}
           aria-label={selectLabel}
@@ -113,6 +115,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
             setActiveMediaDevice(value as string)
             onActiveDeviceChange(value as string)
           }}
+          variant={variant}
         />
       </Menu>
     </div>
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
index bc82d28f..0dab2b99 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
@@ -62,6 +62,7 @@ export function DesktopControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveAudioInputDeviceId(deviceId ?? '')
             }
+            variant="dark"
           />
           <SelectToggleDevice
             source={Track.Source.Camera}
@@ -72,6 +73,7 @@ export function DesktopControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveVideoInputDeviceId(deviceId ?? '')
             }
+            variant="dark"
           />
           {browserSupportsScreenSharing && (
             <ScreenShareToggle
diff --git a/src/frontend/src/primitives/Box.tsx b/src/frontend/src/primitives/Box.tsx
index 1ba59ef8..7770c44c 100644
--- a/src/frontend/src/primitives/Box.tsx
+++ b/src/frontend/src/primitives/Box.tsx
@@ -30,7 +30,7 @@ const box = cva({
       },
     },
     variant: {
-      default: {
+      light: {
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'box.border',
@@ -46,6 +46,10 @@ const box = cva({
         backgroundColor: 'box.bg',
         color: 'control.text',
       },
+      dark: {
+        backgroundColor: 'primaryDark.50',
+        borderColord: 'primaryDark.50',
+      },
     },
     size: {
       default: {
@@ -57,7 +61,7 @@ const box = cva({
     },
   },
   defaultVariants: {
-    variant: 'default',
+    variant: 'light',
     size: 'default',
   },
 })
diff --git a/src/frontend/src/primitives/Menu.tsx b/src/frontend/src/primitives/Menu.tsx
index d26765e9..75777b0a 100644
--- a/src/frontend/src/primitives/Menu.tsx
+++ b/src/frontend/src/primitives/Menu.tsx
@@ -8,15 +8,17 @@ import { Box } from './Box'
  */
 export const Menu = ({
   children,
+  variant = 'light',
 }: {
   children: [trigger: ReactNode, menu: ReactNode]
+  variant?: 'dark' | 'light'
 }) => {
   const [trigger, menu] = children
   return (
     <MenuTrigger>
       {trigger}
       <StyledPopover>
-        <Box size="sm" type="popover">
+        <Box size="sm" type="popover" variant={variant}>
           {menu}
         </Box>
       </StyledPopover>
diff --git a/src/frontend/src/primitives/MenuList.tsx b/src/frontend/src/primitives/MenuList.tsx
index da5022bd..4ce4e75c 100644
--- a/src/frontend/src/primitives/MenuList.tsx
+++ b/src/frontend/src/primitives/MenuList.tsx
@@ -10,6 +10,7 @@ export const MenuList = <T extends string | number = string>({
   onAction,
   selectedItem,
   items = [],
+  variant = 'light',
   ...menuProps
 }: {
   onAction: (key: T) => void
@@ -18,7 +19,11 @@ export const MenuList = <T extends string | number = string>({
 } & MenuProps<unknown> &
   RecipeVariantProps<typeof menuRecipe>) => {
   const [variantProps] = menuRecipe.splitVariantProps(menuProps)
-  const classes = menuRecipe({ extraPadding: true, ...variantProps })
+  const classes = menuRecipe({
+    extraPadding: true,
+    variant: variant,
+    ...variantProps,
+  })
   return (
     <Menu
       selectionMode={selectedItem !== undefined ? 'single' : undefined}
diff --git a/src/frontend/src/primitives/Separator.tsx b/src/frontend/src/primitives/Separator.tsx
index 811566fe..55cdb140 100644
--- a/src/frontend/src/primitives/Separator.tsx
+++ b/src/frontend/src/primitives/Separator.tsx
@@ -4,7 +4,7 @@ import { Separator as RACSeparator } from 'react-aria-components'
 export const Separator = styled(RACSeparator, {
   base: {
     height: '1px',
-    background: 'gray.400',
+    background: 'primaryDark.200',
     margin: '4px 0',
   },
 })
diff --git a/src/frontend/src/primitives/menuRecipe.ts b/src/frontend/src/primitives/menuRecipe.ts
index 8e412c73..68c9c7ab 100644
--- a/src/frontend/src/primitives/menuRecipe.ts
+++ b/src/frontend/src/primitives/menuRecipe.ts
@@ -46,7 +46,11 @@ export const menuRecipe = sva({
           },
         },
       },
-      dark: {},
+      dark: {
+        item: {
+          color: 'white',
+        },
+      },
     },
     extraPadding: {
       true: {
@@ -67,6 +71,6 @@ export const menuRecipe = sva({
     },
   },
   defaultVariants: {
-    variant: 'dark',
+    variant: 'light',
   },
 })