settings icon

squarenotsquare/src/screens/Home.js

@@ -3,6 +3,10 @@ import { BackHandler, Text, View } from "react-native";
 import { useState } from "react";
 import { styles } from './styles/AppStyles';
 import { TouchableOpacity } from "react-native-gesture-handler";
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Icons from '../themes/Icons';
+import Colors from "../themes/Colors";
+import Metrics from "../themes/Metrics";
 
 function Home(props){
 
@@ -12,6 +16,12 @@ function Home(props){
 
   return (
     <View style={[styles.flex]}>
+      <MaterialIcon
+        name={Icons.squareIcons.settings}
+        color={Colors.material.green400}
+        size={Metrics.icons.buttonIcon}
+        style={styles.endAlign}
+      />
       <View style={[styles.flexHalf, styles.spaceAround]}>
         <Text style={[styles.boldText, styles.headerTitleFont, styles.centeredText, styles.darkText]}>
           Square

squarenotsquare/src/screens/styles/AppStyles.js

@@ -68,17 +68,10 @@ export const styles = StyleSheet.create({
   blueText: {color: Colors.material.blue400},
   boldText: {fontWeight: 'bold'},
   
-  body: {
-    backgroundColor: Colors.material.light,
-  },
-
-  green: {
-    backgroundColor: Colors.material.green400
-  },
-
-  darkGreen: {
-    backgroundColor: Colors.material.green400dark
-  },
+  body: {backgroundColor: Colors.material.grey400},
+  lightBackground: {backgroundColor: Colors.material.light},
+  green: {backgroundColor: Colors.material.green400},
+  darkGreen: {backgroundColor: Colors.material.green400dark},
 
   splashLogo: {
     width: Metrics.images.splashLogo.width,

squarenotsquare/src/themes/Colors.js

@@ -5,6 +5,7 @@ class AppColors {
   
     //200
     blue200: '#90caf9',
+    grey200: '#eeeeee',
     
     //400
     blue400: '#5c6bc0',

squarenotsquare/src/themes/Metrics.js

@@ -29,7 +29,8 @@ class AppMetrics {
     }
   
     this.icons = {
-      splashIcon: this.normalize(100)
+      splashIcon: this.normalize(100),
+      buttonIcon: this.normalize(20)
     }
 
     this.images = {