feat(toolbox): Fixed background color prop custom buttons (#15529)

* feat(toolbox): fixed backgroundColor prop for custom menu buttons

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { Image } from 'react-native';
+import { Image, View, ViewStyle } from 'react-native';
 import { SvgCssUri } from 'react-native-svg';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n/functions';
 import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 import styles from './styles';
 
@@ -13,6 +14,7 @@ interface IProps extends AbstractButtonProps {
     backgroundColor?: string;
     icon: any;
     id?: string;
+    isToolboxButton?: boolean;
     text?: string;
 }
 
@@ -40,20 +42,30 @@ class CustomOptionButton extends AbstractButton<IProps> {
         }
 
         if (this.iconSrc?.includes('svg')) {
-            iconComponent
-                = (
-                    <SvgCssUri
-                        style = { styles.iconImageStyles }
-                        uri = { this.iconSrc } />);
+            iconComponent = (
+                <SvgCssUri
+                    height = { BaseTheme.spacing[4] }
+                    uri = { this.iconSrc }
+                    width = { BaseTheme.spacing[4] } />
+            );
         } else {
-            iconComponent
-                = (
-                    <Image
-                        source = {{ uri: this.iconSrc }}
-                        style = { styles.iconImageStyles } />);
+            iconComponent = (
+                <Image
+                    height = { BaseTheme.spacing[4] }
+                    resizeMode = { 'contain' }
+                    source = {{ uri: this.iconSrc }}
+                    width = { BaseTheme.spacing[4] } />
+            );
         }
 
-        return iconComponent;
+        return (
+            <View
+                style = { this.props.isToolboxButton && [
+                    styles.toolboxButtonIconContainer,
+                    { backgroundColor: this.backgroundColor } ] as ViewStyle }>
+                { iconComponent }
+            </View>
+        );
     };
 
     label = this.text || '';

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

@@ -237,6 +237,7 @@ class OverflowMenu extends PureComponent<IProps, IState> {
                                 dispatch(customButtonPressed(id, text))
                             }
                             icon = { icon }
+                            isToolboxButton = { false }
                             key = { id }
                             text = { text } />
                     ))

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

@@ -126,6 +126,7 @@ function Toolbox(props: IProps) {
                             /* eslint-disable react/jsx-no-bind */
                             handleClick = { () => dispatch(customButtonPressed(id, text)) }
                             icon = { icon }
+                            isToolboxButton = { true }
                             key = { id } />
                     ))
                 }
@@ -145,7 +146,12 @@ function Toolbox(props: IProps) {
                 style = { style as ViewStyle }>
                 {
                     _customToolbarButtons
-                        ? renderCustomToolboxButtons()
+                        ? <>
+                            { renderCustomToolboxButtons() }
+                            { !_iAmVisitor && <OverflowMenuButton
+                                styles = { buttonStylesBorderless }
+                                toggledStyles = { toggledButtonStyles } /> }
+                        </>
                         : <>
                             {!_iAmVisitor && <AudioMuteButton
                                 styles = { buttonStylesBorderless }

react/features/toolbox/components/native/styles.ts

@@ -101,13 +101,16 @@ const styles = {
         maxWidth: 580,
         marginHorizontal: 'auto',
         marginVertical: BaseTheme.spacing[0],
-        paddingHorizontal: BaseTheme.spacing[1],
+        paddingHorizontal: BaseTheme.spacing[2],
         width: '100%'
     },
 
-    iconImageStyles: {
-        height: BaseTheme.spacing[4],
-        width: BaseTheme.spacing[4]
+    toolboxButtonIconContainer: {
+        alignItems: 'center',
+        borderRadius: BaseTheme.shape.borderRadius,
+        height: BaseTheme.spacing[7],
+        justifyContent: 'center',
+        width: BaseTheme.spacing[7]
     }
 };