Camera settings enhancements (#908)

Author: pplaskie

web_ui/src/pages/camera-page/components/sidebar/device-settings-category.component.tsx

@@ -22,8 +22,8 @@ export const DeviceSettingsCategory = ({ name, configuration }: DeviceSettingsCa
     const { deviceConfig, setDeviceConfig } = useDeviceSettings();
 
     const updateDeviceConfig = (configName: string, value: string | number) => {
-        setDeviceConfig([
-            ...deviceConfig.map((currentConfig) => {
+        setDeviceConfig(
+            deviceConfig.map((currentConfig) => {
                 if (isEqual(configName, currentConfig.name)) {
                     return {
                         ...currentConfig,
@@ -32,14 +32,14 @@ export const DeviceSettingsCategory = ({ name, configuration }: DeviceSettingsCa
                 } else {
                     return currentConfig;
                 }
-            }),
-        ]);
+            })
+        );
     };
 
     return (
         <Disclosure isHidden={!configuration.length}>
             <DisclosureTitle UNSAFE_className={classes.sectionHeader}>{name}</DisclosureTitle>
-            <DisclosurePanel>
+            <DisclosurePanel UNSAFE_style={{ background: 'var(--spectrum-global-color-gray-75)' }}>
                 {configuration.map((currentOption) => {
                     const shouldDisplay = isSettingVisible(currentOption, deviceConfig, dependencies);
                     const { name: optionName, config, onChange } = currentOption;

web_ui/src/pages/camera-page/components/sidebar/device-settings-default-category.component.tsx

@@ -6,7 +6,6 @@ import { isEqual, isUndefined } from 'lodash-es';
 
 import { useDeviceSettings } from '../../providers/device-settings-provider.component';
 import { DeviceSettingsCategory } from './device-settings-category.component';
-import { DeviceSettingsDefaultCategory } from './device-settings-default-category.component';
 import { settingsMetadata } from './device-settings-metadata';
 
 const Header = ({ text }: { text: string }) => (
@@ -55,7 +54,6 @@ export const DeviceSettings = () => {
                 return <DeviceSettingsCategory name={categoryName} configuration={configuration} key={categoryName} />;
             })}
             <DeviceSettingsCategory name={defaultCategory} configuration={defaultCategoryAttributesKeys} />
-            <DeviceSettingsDefaultCategory deviceConfig={deviceConfig} />
         </View>
     );
 };

web_ui/src/pages/camera-page/components/sidebar/device-settings.component.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 
-import { DeviceConfiguration, SettingSelection } from '../providers/util';
+import { DeviceConfiguration } from '../providers/util';
 
 type UseCustomSettings = {
     isMirrored: boolean;
@@ -20,11 +20,11 @@ export const useCustomSettings = (): UseCustomSettings => {
             options: ['Off', 'On'],
             value: isMirrored ? 'On' : 'Off',
             defaultValue: 'Off',
-        } as SettingSelection,
+        },
         onChange: (value: number | string) => {
             setIsMirrored(value === 'On');
         },
-    };
+    } satisfies DeviceConfiguration;
 
     return {
         isMirrored,