feat(toolbar): implement toolbar background color via configOverwrite for web and mobile

* Change toolbar background color from IFrame API #16468 fixed

* fix(toolbar #16468): implement toolbar background color via configOverwrite for web and mobile

* keep toolbarConfig defaults commented in config.js

* add trailing comma to commented toolbarConfig.backgroundColor

* fix: resolve linting errors

Fixes #16468

config.js

@@ -907,6 +907,8 @@ var config = {
     //     alwaysVisible: false,
     //     // Indicates whether the toolbar should still autohide when chat is open
     //     autoHideWhileChatIsOpen: false,
+    //     // Default background color for the main toolbar. Accepts any valid CSS color.
+    //     // backgroundColor: '#ffffff',
     // },
 
     // Overrides the buttons displayed in the main toolbar. Depending on the screen size the number of displayed

modules/API/API.js

@@ -340,6 +340,7 @@ function initCommands() {
 
             APP.store.dispatch(setAssumedBandwidthBps(value));
         },
+
         'set-blurred-background': blurType => {
             const tracks = APP.store.getState()['features/base/tracks'];
             const videoTrack = getLocalVideoTrack(tracks)?.jitsiTrack;

react/features/base/config/configType.ts

@@ -618,6 +618,10 @@ export interface IConfig {
     toolbarConfig?: {
         alwaysVisible?: boolean;
         autoHideWhileChatIsOpen?: boolean;
+        /**
+         * Background color for the main toolbar. Accepts any valid CSS color.
+         */
+        backgroundColor?: string;
         initialTimeout?: number;
         timeout?: number;
     };

react/features/toolbox/components/native/Toolbox.tsx

@@ -60,6 +60,7 @@ function Toolbox(props: IProps) {
 
     const { clientWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
     const { customToolbarButtons } = useSelector((state: IReduxState) => state['features/base/config']);
+    const toolbarBackgroundColor = useSelector((state: IReduxState) => state['features/base/config'].toolbarConfig?.backgroundColor);
     const {
         mainToolbarButtonsThresholds,
         toolbarButtons
@@ -79,6 +80,11 @@ function Toolbox(props: IProps) {
     const { buttonStylesBorderless, hangupButtonStyles } = _styles;
     const style = { ...styles.toolbox };
 
+    // Allow overriding the toolbox background color from config (configOverwrite/overwriteConfig).
+    if (toolbarBackgroundColor) {
+        style.backgroundColor = toolbarBackgroundColor as any;
+    }
+
     // We have only hangup and raisehand button in _iAmVisitor mode
     if (_iAmVisitor) {
         style.justifyContent = 'center';

react/features/toolbox/components/web/Toolbox.tsx

@@ -37,6 +37,11 @@ import Separator from './Separator';
  */
 interface IProps {
 
+    /**
+     * Optional toolbar background color passed as a prop.
+     */
+    toolbarBackgroundColor?: string;
+
     /**
      * Explicitly passed array with the buttons which this Toolbox should display.
      */
@@ -65,7 +70,8 @@ const useStyles = makeStyles()(() => {
  * @returns {ReactElement}
  */
 export default function Toolbox({
-    toolbarButtons
+    toolbarButtons,
+    toolbarBackgroundColor: toolbarBackgroundColorProp
 }: IProps) {
     const { classes, cx } = useStyles();
     const { t } = useTranslation();
@@ -92,7 +98,10 @@ export default function Toolbox({
     const localParticipant = useSelector(getLocalParticipant);
     const transcribing = useSelector(isTranscribing);
     const _isCCTabEnabled = useSelector(isCCTabEnabled);
-
+    // Read toolbar background color from config (if provided) or from props.
+    const toolbarBackgroundColorFromConfig = useSelector((state: IReduxState) =>
+        state['features/base/config'].toolbarConfig?.backgroundColor);
+    const toolbarBackgroundColor = toolbarBackgroundColorProp || toolbarBackgroundColorFromConfig;
     // Do not convert to selector, it returns new array and will cause re-rendering of toolbox on every action.
     const jwtDisabledButtons = getJwtDisabledButtons(transcribing, _isCCTabEnabled, localParticipant?.features);
 
@@ -242,7 +251,8 @@ export default function Toolbox({
     return (
         <div
             className = { cx(rootClassNames, shiftUp && 'shift-up') }
-            id = 'new-toolbox'>
+            id = 'new-toolbox'
+            style = { toolbarBackgroundColor ? { backgroundColor: toolbarBackgroundColor } : undefined }>
             <div className = { containerClassName }>
                 <div
                     className = 'toolbox-content-wrapper'