[RN] Adjust toolbar button sizes / margins

- add 10px of padding on the sizes of the toolbar
- make the button margin smaller (from 10 to 7)
- increate the secondary button factor to 85%, thus rising the maximum secondary
  button size to 50 (from the previous 48)

react/features/conference/components/styles.js

@@ -27,9 +27,9 @@ export default createStyleSheet({
         bottom: BoxModel.margin,
         flexDirection: 'column',
         justifyContent: 'flex-end',
-        left: BoxModel.margin,
+        left: 0,
         position: 'absolute',
-        right: BoxModel.margin,
+        right: 0,
 
         // Both on Android and iOS there is the status bar which may be visible.
         // On iPhone X there is the notch. In the two cases BoxModel.margin is

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

@@ -35,7 +35,7 @@ const _BUTTON_COUNT = 4;
  * @private
  * @type number
  */
-const _BUTTON_SIZE_FACTOR = 0.8;
+const _BUTTON_SIZE_FACTOR = 0.85;
 
 /**
  * The type of {@link Toolbox}'s React {@code Component} props.
@@ -159,7 +159,8 @@ class Toolbox extends Component<Props, State> {
         let buttonSize
             = (width
                     - hangupButtonSize
-                    - (_BUTTON_COUNT * styles.toolbarButton.margin * 2))
+                    - (_BUTTON_COUNT
+                        * styles.toolbarButton.marginHorizontal * 2))
                 / _BUTTON_COUNT;
 
         // Make sure it's an even number.

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

@@ -15,8 +15,7 @@ const toolbarButton = {
     flexDirection: 'row',
     height: 40,
     justifyContent: 'center',
-    margin: BoxModel.margin,
+    marginHorizontal: 7,
-    marginBottom: BoxModel.margin / 2,
     opacity: 0.7,
     width: 40
 };
@@ -64,6 +63,8 @@ const styles = createStyleSheet({
         flexDirection: 'row',
         justifyContent: 'center',
         left: 0,
+        marginBottom: BoxModel.margin / 2,
+        paddingHorizontal: BoxModel.margin,
         position: 'absolute',
         right: 0
     },