Home screen footer

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>
   )
 }

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,

squarenotsquare/src/themes/Colors.js

@@ -32,6 +32,7 @@ class AppColors {
   
   fonts = {
     dark: '#000000',
+    grey: '#757575',
     light: '#ffffff'
   };
 }

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){