💄(frontend) use dark theme for menus in the videoconference

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.

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"

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} />

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>

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

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',
   },
 })

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>

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}

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',
   },
 })

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',
   },
 })