feat: use css to place the toolbox buttons

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

@@ -1,7 +1,9 @@
 // @flow
 
 import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
-import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
+import { BoxModel, ColorPalette } from '../../../base/styles';
+
+const BUTTON_SIZE = 50;
 
 // Toolbox, toolbar:
 
@@ -10,17 +12,17 @@ import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
  */
 const toolbarButton = {
     backgroundColor: schemeColor('button'),
-    borderRadius: 20,
+    borderRadius: BUTTON_SIZE / 2,
     borderWidth: 0,
     flex: 0,
     flexDirection: 'row',
-    height: 40,
+    height: BUTTON_SIZE,
     justifyContent: 'center',
 
     // XXX We probably tested BoxModel.margin and discovered it to be too small
     // for our taste.
     marginHorizontal: 7,
-    width: 40
+    width: BUTTON_SIZE
 };
 
 /**
@@ -51,7 +53,7 @@ const whiteToolbarButtonIcon = {
 /**
  * The Toolbox and toolbar related styles.
  */
-const styles = createStyleSheet({
+const styles = {
 
     /**
      * The style of the toolbar.
@@ -72,7 +74,7 @@ const styles = createStyleSheet({
         flexDirection: 'column',
         flexGrow: 0
     }
-});
+};
 
 export default styles;