home screen buttons

squarenotsquare/src/screens/Home.js

@@ -2,13 +2,14 @@ import React from "react";
 import { Text, View } from "react-native";
 import { useState } from "react";
 import { styles } from './styles/AppStyles';
+import { TouchableOpacity } from "react-native-gesture-handler";
 
 function Home(props){
 
   return (
     <View style={[styles.flex]}>
       <View style={[styles.flexHalf, styles.spaceAround]}>
-        <Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}>
+        <Text style={[styles.boldText, styles.headerTitleFont, styles.centeredText, styles.darkText]}>
           Square
           <Text style={[styles.green, styles.headerTitleFont, styles.centeredText, styles.lightText]}>
             {' not '}
@@ -18,10 +19,17 @@ function Home(props){
           </Text>
         </Text>
       </View>
-      <View style={styles.flex}>
+      <View style={[styles.flex, styles.centeredItems, styles.spaceEvenly]}>
-        <Text style={[styles.largeFont, styles.centeredText, styles.darkText]}>
+        <TouchableOpacity style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}>
-          Loading...
+          <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
+            Start
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}>
+          <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
+            High Scores
           </Text>
+        </TouchableOpacity>
       </View>
     </View>
   )

squarenotsquare/src/screens/styles/AppStyles.js

@@ -76,6 +76,10 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.material.green400
   },
 
+  darkGreen: {
+    backgroundColor: Colors.material.green400dark
+  },
+
   splashLogo: {
     width: Metrics.images.splashLogo.width,
     height: Metrics.images.splashLogo.height
@@ -83,5 +87,11 @@ export const styles = StyleSheet.create({
 
   smallMargin: {
     margin: Metrics.margins.default
+  },
+
+  menuButton: {
+    borderRadius: Metrics.buttons.borderRadius,
+    width: Metrics.buttons.menuButton.width,
+    height: Metrics.buttons.menuButton.height
   }
 })

squarenotsquare/src/themes/Metrics.js

@@ -42,6 +42,14 @@ class AppMetrics {
     this.margins = {
       default: this.normalize(5)
     }
+
+    this.buttons = {
+      borderRadius: 10,
+      menuButton: {
+        height: this.normalize(30),
+        width: this.screenWidth * 0.7
+      }
+    }
   }
 
   normalize(size){