Fix color props

Author: hayanisaid

packages/app/src/Clock.js

@@ -51,6 +51,7 @@ class Clock extends React.Component {
         <Text style={styles.time}>
           {this.state.time}
         </Text>
+       
         {/*<Text style={styles.time}>
           {this.state.time}
         </Text>

packages/app/src/Sidebar.js

@@ -28,11 +28,7 @@ const styles = StyleSheet.create({
     lineHeight: 40,
     backgroundColor: 'orange',
   },
-  buttonContainer:{
-      bottom:0,
-      position:"absolute"
-    
-  }
+
 });
 
 class Item extends React.Component {
@@ -64,20 +60,19 @@ class Sidebar extends Component {
     return (
       <View style={styles.sidebar}>
         {/*<View style={styles.container}>*/}
+        <Button
+          color={"#000"}
+         title="Click Me 🚀"
+         onClick = {()=>{alert('hi')}}
+        />
         <FocusableItem
           focusKey="sidebar-item-1"
           text="Rio de Janeiro"
           idx={120}
         />
         <FocusableItem focusKey="sidebar-item-2" text="Kyoto" idx={160} />
         <FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
-        <View style={styles.buttonContainer}>
-        <Button
-        color="#2196F3''"
-         title="Navigate"
-         onClick = {()=>{}}
-        />
-        </View>
+        
 
         {/*</View>*/}
       </View>

packages/react-ape/renderer/elements/Button.js

@@ -8,6 +8,7 @@
 import {ButtonDefaults} from '../constants';
 import {trackMousePosition,isMouseInside} from '../utils'
 import type {CanvasComponentContext} from '../types'
+
 //TODO adjust Opacity when focus, Blur
 type PressEvent = {||};
 type ButtonProps = {|
@@ -67,18 +68,21 @@ type ButtonProps = {|
 |};
 
 function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, parentLayout) {
-  const {spatialGeometry } = parentLayout;
   const {ctx} = apeContext;
 
   // If is relative and x and y haven't be processed, don't render
-  if (!spatialGeometry) return null;
   // start drawing the canvas
+  console.log('[PROPS]',props)
   const {title, color} = props;
+  if(!title){
+    throw Error("Title required!")
+  }
   const borderRadius = ButtonDefaults.containerStyle.borderRadius;
   const backgroundColor = ButtonDefaults.containerStyle.backgroundColor;
-  let x = spatialGeometry.x || 0;
-  let y = spatialGeometry.y || 0;
-  let width = x + y * title.length /3;
+  let x = 40;
+  let y = 300;
+  const textWidth = ctx.measureText(title).width;
+  let width =  textWidth * 1.5;
   let height = ButtonDefaults.containerStyle.height;
   let globalStyle = {
     width: width,
@@ -91,20 +95,19 @@ function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, par
   };
   const resetStyle = newStyle => {
     globalStyle = {...globalStyle, newStyle};
-    console.log('style)))))', globalStyle);
+
   };
   const redrawButton = ctx => {
     // TODO reset Style on focus
     let newStyle = {
       lineWidth: 2,
       borderColor: '#ccc',
     };
-    //let prevStyle = globalStyle
     resetStyle(newStyle);
   };
 
   ctx.beginPath();
-  ctx.fillStyle = backgroundColor;
+  ctx.fillStyle = color || ButtonDefaults.containerStyle.backgroundColor
   ctx.moveTo(x, y);
   /**
 *  Top Right Radius
@@ -137,10 +140,16 @@ function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, par
   ctx.strokeStyle = globalStyle.borderColor;
   ctx.stroke();
   ctx.fillStyle =  ButtonDefaults.textStyle.color;
-  ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
-  //ctx.fillText('Start', x+ width/2 , y + height / 2);
-  ctx.textAlign = 'center';
-  ctx.fillText(title, x + width / 2, y + height / 2);
+
+  //set the fontSize
+const fontArgs = ctx.font.split(' ');
+const newSize =` ${ButtonDefaults.textStyle.fontSize}px`;
+  ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1];
+
+// ctx.textAlign = 'center';
+
+// ctx.fillText(title,  400 / 2, y + height / 2,textWidth);
+ctx.fillText(title , (x + textWidth /2.5), y + height /2);
   ctx.closePath();
 
   const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
@@ -179,6 +188,8 @@ Note onClick will need to share scope with this function to work properly.
 
 }
 
+
+
 export default function createButtonInstance(props: ButtonProps): mixed {
   return {
     type: 'Button',