fix(react-toolbars): Adjusts some styles and icons in mobile toolbars

react/features/toolbar/components/Toolbar.native.js

@@ -106,7 +106,7 @@ class Toolbar extends AbstractToolbar {
      * @returns {ReactElement}
      */
     _renderSecondaryToolbar() {
-        const iconStyle = styles.whiteIcon;
+        const iconStyle = styles.secondaryToolbarIcon;
         const style = styles.secondaryToolbarButton;
         const underlayColor = 'transparent';
 
@@ -116,7 +116,7 @@ class Toolbar extends AbstractToolbar {
         return (
             <View style = { styles.secondaryToolbar }>
                 <ToolbarButton
-                    iconName = 'reload'
+                    iconName = 'switch-camera'
                     iconStyle = { iconStyle }
                     onClick = { this._toggleCameraFacingMode }
                     style = { style }
@@ -156,7 +156,7 @@ class Toolbar extends AbstractToolbar {
 Object.assign(Toolbar.prototype, {
     audioIcon: 'microphone',
     audioMutedIcon: 'mic-disabled',
-    videoIcon: 'webCam',
+    videoIcon: 'camera',
     videoMutedIcon: 'camera-disabled'
 });
 

react/features/toolbar/components/styles.js

@@ -6,7 +6,7 @@ import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
  * @type {Object}
  */
 const button = {
-    borderRadius: 35,
+    borderRadius: 30,
     borderWidth: 0,
     flex: 0,
     flexDirection: 'row',
@@ -16,6 +16,22 @@ const button = {
     width: 60
 };
 
+/**
+ * Small toolbar button.
+ *
+ * @type {{borderRadius: number, flex: number, flexDirection: string,
+ * height: number, justifyContent: string, margin: number, width: number}}
+ */
+const smallButton = {
+    borderRadius: 15,
+    flex: 0,
+    flexDirection: 'column',
+    height: 30,
+    justifyContent: 'center',
+    margin: BoxModel.margin / 2,
+    width: 30
+};
+
 /**
  * The base style for icons.
  *
@@ -27,6 +43,16 @@ const icon = {
     fontSize: 24
 };
 
+/**
+ * Small toolbar button icon.
+ *
+ * @type {{fontSize: number}}
+ */
+const smallIcon = {
+    ...icon,
+    fontSize: 16
+};
+
 /**
  * The base style for toolbars.
  *
@@ -65,7 +91,7 @@ export const styles = createStyleSheet({
     primaryToolbarButton: {
         ...button,
         backgroundColor: ColorPalette.white,
-        opacity: 0.8
+        opacity: 0.7
     },
 
     /**
@@ -76,16 +102,17 @@ export const styles = createStyleSheet({
         ...toolbar,
         bottom: 0,
         flexDirection: 'column',
-        right: 0,
+        right: BoxModel.margin,
-        top: 0
+        top: BoxModel.margin * 2
     },
 
     /**
      * The style of button in secondaryToolbar.
      */
     secondaryToolbarButton: {
-        ...button,
+        ...smallButton,
-        backgroundColor: 'transparent'
+        backgroundColor: ColorPalette.darkGrey,
+        opacity: 0.7
     },
 
     /**
@@ -105,5 +132,13 @@ export const styles = createStyleSheet({
     whiteIcon: {
         ...icon,
         color: ColorPalette.white
+    },
+
+    /**
+     * The secondary toolbar icon style.
+     */
+    secondaryToolbarIcon: {
+        ...smallIcon,
+        color: ColorPalette.white
     }
 });