From 6fa6a060038c33cd847634ab4eedf99657194a6c Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Mon, 1 Aug 2022 22:44:13 -0500
Subject: [PATCH] square not square header

---
 squarenotsquare/src/screens/Home.js           | 22 ++++++++++++++++---
 .../src/screens/styles/AppStyles.js           |  9 ++++++++
 squarenotsquare/src/themes/Metrics.js         |  4 ++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/squarenotsquare/src/screens/Home.js b/squarenotsquare/src/screens/Home.js
index e836d60..9991e18 100644
--- a/squarenotsquare/src/screens/Home.js
+++ b/squarenotsquare/src/screens/Home.js
@@ -1,14 +1,30 @@
 import React from "react";
 import { Text, View } from "react-native";
 import { useState } from "react";
+import { styles } from './styles/AppStyles';
 
 function Home(props){
 
   return (
-    <View>
-      <Text style={{color: 'black'}}>test</Text>
+    <View style={[styles.flex]}>
+      <View style={[styles.flexHalf, styles.spaceAround]}>
+        <Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}>
+          Square
+          <Text style={[styles.green, styles.headerTitleFont, styles.centeredText, styles.lightText]}>
+            {' not '}
+          </Text>
+          <Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}>
+            Square
+          </Text>
+        </Text>
+      </View>
+      <View style={styles.flex}>
+        <Text style={[styles.largeFont, styles.centeredText, styles.darkText]}>
+          Loading...
+        </Text>
+      </View>
     </View>
-  );
+  )
 }
 
 export default Home;
\ No newline at end of file
diff --git a/squarenotsquare/src/screens/styles/AppStyles.js b/squarenotsquare/src/screens/styles/AppStyles.js
index f3675a2..e0b39bb 100644
--- a/squarenotsquare/src/screens/styles/AppStyles.js
+++ b/squarenotsquare/src/screens/styles/AppStyles.js
@@ -62,6 +62,7 @@ export const styles = StyleSheet.create({
   
   italic: {fontStyle: 'italic'},
   darkText: {color: Colors.fonts.dark},
+  lightText: {color: Colors.fonts.light},
   greyText: {color: Colors.material.grey600},
   redText: {color: Colors.material.red800},
   blueText: {color: Colors.material.blue400},
@@ -71,8 +72,16 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.material.light,
   },
 
+  green: {
+    backgroundColor: Colors.material.green400
+  },
+
   splashLogo: {
     width: Metrics.images.splashLogo.width,
     height: Metrics.images.splashLogo.height
+  },
+
+  smallMargin: {
+    margin: Metrics.margins.default
   }
 })
\ No newline at end of file
diff --git a/squarenotsquare/src/themes/Metrics.js b/squarenotsquare/src/themes/Metrics.js
index f150814..c7c08d1 100644
--- a/squarenotsquare/src/themes/Metrics.js
+++ b/squarenotsquare/src/themes/Metrics.js
@@ -38,6 +38,10 @@ class AppMetrics {
         height: this.screenWidth * 0.33
       }
     }
+
+    this.margins = {
+      default: this.normalize(5)
+    }
   }
 
   normalize(size){