From 994f3352669fa999d8d4583d8973eafc98d7025a Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 16 Jan 2025 14:54:07 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(front)=20add=20customization=20to=20S?=
 =?UTF-8?q?electToggleDevice?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want to be able to change the variant of this component.
---
 .../components/controls/SelectToggleDevice.tsx     | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

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 f336c711..3a45baac 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
@@ -19,6 +19,7 @@ import { Shortcut } from '@/features/shortcuts/types'
 
 import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
 import { css } from '@/styled-system/css'
+import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -67,14 +68,16 @@ type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
     onActiveDeviceChange: (deviceId: string) => void
     source: SelectToggleSource
+    variant?: NonNullable<ButtonRecipeProps>['variant']
+    menuVariant?: 'dark' | 'light'
     hideMenu?: boolean
-    variant?: 'dark' | 'light'
   }
 
 export const SelectToggleDevice = <T extends ToggleSource>({
   onActiveDeviceChange,
   hideMenu,
-  variant = 'light',
+  variant = 'primaryDark',
+    menuVariant = 'light',
   ...props
 }: SelectToggleDeviceProps<T>) => {
   const config = selectToggleDeviceConfig[props.source]
@@ -99,6 +102,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
       <ToggleDevice
         {...trackProps}
         config={config}
+        variant={variant}
         toggleButtonProps={{
           ...(hideMenu
             ? {
@@ -108,13 +112,13 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         }}
       />
       {!hideMenu && (
-        <Menu variant={variant}>
+        <Menu variant={menuVariant}>
           <Button
             tooltip={selectLabel}
             aria-label={selectLabel}
             groupPosition="right"
             square
-            variant={trackProps.enabled ? 'primaryDark' : 'error2'}
+            variant={trackProps.enabled ? variant : 'error2'}
           >
             <RiArrowDownSLine />
           </Button>
@@ -128,7 +132,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
               setActiveMediaDevice(value as string)
               onActiveDeviceChange(value as string)
             }}
-            variant={variant}
+            variant={menuVariant}
           />
         </Menu>
       )}