From 25037d45904597b99c065dbe0e2d8dc9d688566b Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Tue, 2 Aug 2022 19:30:51 -0500
Subject: [PATCH] settings icon

---
 squarenotsquare/src/screens/Home.js             | 10 ++++++++++
 squarenotsquare/src/screens/styles/AppStyles.js | 15 ++++-----------
 squarenotsquare/src/themes/Colors.js            |  1 +
 squarenotsquare/src/themes/Metrics.js           |  3 ++-
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/squarenotsquare/src/screens/Home.js b/squarenotsquare/src/screens/Home.js
index 8e825f6..9327bf2 100644
--- a/squarenotsquare/src/screens/Home.js
+++ b/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
diff --git a/squarenotsquare/src/screens/styles/AppStyles.js b/squarenotsquare/src/screens/styles/AppStyles.js
index 9ca9ad0..e7421a9 100644
--- a/squarenotsquare/src/screens/styles/AppStyles.js
+++ b/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,
diff --git a/squarenotsquare/src/themes/Colors.js b/squarenotsquare/src/themes/Colors.js
index 1c9545a..ab7f64f 100644
--- a/squarenotsquare/src/themes/Colors.js
+++ b/squarenotsquare/src/themes/Colors.js
@@ -5,6 +5,7 @@ class AppColors {
   
     //200
     blue200: '#90caf9',
+    grey200: '#eeeeee',
     
     //400
     blue400: '#5c6bc0',
diff --git a/squarenotsquare/src/themes/Metrics.js b/squarenotsquare/src/themes/Metrics.js
index 3b9e926..13e84d5 100644
--- a/squarenotsquare/src/themes/Metrics.js
+++ b/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 = {