From b8cd404ecbdc6712435f411c9cf6bd65f517d530 Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Tue, 2 Aug 2022 21:15:08 -0500
Subject: [PATCH] Home screen footer

---
 squarenotsquare/src/screens/Home.js             | 5 +++++
 squarenotsquare/src/screens/styles/AppStyles.js | 9 ++++++++-
 squarenotsquare/src/themes/Colors.js            | 1 +
 squarenotsquare/src/themes/Metrics.js           | 7 ++++++-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/squarenotsquare/src/screens/Home.js b/squarenotsquare/src/screens/Home.js
index 9327bf2..6200581 100644
--- a/squarenotsquare/src/screens/Home.js
+++ b/squarenotsquare/src/screens/Home.js
@@ -45,6 +45,11 @@ function Home(props){
           </Text>
         </TouchableOpacity>
       </View>
+      <View style={[styles.footer, styles.centeredJustify]}>
+        <Text style={[styles.greyText, styles.tinyFont, styles.centeredText]}>
+          0.0.1a    Atonal Software    August 2, 2022
+        </Text>
+      </View>
     </View>
   )
 }
diff --git a/squarenotsquare/src/screens/styles/AppStyles.js b/squarenotsquare/src/screens/styles/AppStyles.js
index e7421a9..a1e5b65 100644
--- a/squarenotsquare/src/screens/styles/AppStyles.js
+++ b/squarenotsquare/src/screens/styles/AppStyles.js
@@ -63,7 +63,7 @@ export const styles = StyleSheet.create({
   italic: {fontStyle: 'italic'},
   darkText: {color: Colors.fonts.dark},
   lightText: {color: Colors.fonts.light},
-  greyText: {color: Colors.material.grey600},
+  greyText: {color: Colors.fonts.grey},
   redText: {color: Colors.material.red800},
   blueText: {color: Colors.material.blue400},
   boldText: {fontWeight: 'bold'},
@@ -82,6 +82,13 @@ export const styles = StyleSheet.create({
     margin: Metrics.margins.default
   },
 
+  footer: {
+    margin: Metrics.margins.default,
+    height: Metrics.screenSections.footerHeight,
+    borderTopWidth: Metrics.borders.width,
+    borderTopColor: Colors.material.grey400
+  },
+
   menuButton: {
     borderRadius: Metrics.buttons.borderRadius,
     width: Metrics.buttons.menuButton.width,
diff --git a/squarenotsquare/src/themes/Colors.js b/squarenotsquare/src/themes/Colors.js
index ab7f64f..aad1233 100644
--- a/squarenotsquare/src/themes/Colors.js
+++ b/squarenotsquare/src/themes/Colors.js
@@ -32,6 +32,7 @@ class AppColors {
   
   fonts = {
     dark: '#000000',
+    grey: '#757575',
     light: '#ffffff'
   };
 }
diff --git a/squarenotsquare/src/themes/Metrics.js b/squarenotsquare/src/themes/Metrics.js
index 13e84d5..4138996 100644
--- a/squarenotsquare/src/themes/Metrics.js
+++ b/squarenotsquare/src/themes/Metrics.js
@@ -25,7 +25,8 @@ class AppMetrics {
 
     this.screenSections = {
       headerHeight: this.normalize(20),
-      sectionWidth: this.screenWidth
+      sectionWidth: this.screenWidth,
+      footerHeight: this.normalize(10)
     }
   
     this.icons = {
@@ -51,6 +52,10 @@ class AppMetrics {
         width: this.screenWidth * 0.7
       }
     }
+
+    this.borders = {
+      width: 1
+    }
   }
 
   normalize(size){