From e614dbb7a5e873472ccf6a93c82b6859b6b25cac Mon Sep 17 00:00:00 2001
From: chelseajoe <chelseaj2021@gmail.com>
Date: Mon, 30 May 2022 16:51:36 -0400
Subject: [PATCH] styling

---
 components/UserIcon.js    | 11 ++++++++---
 constants/GlobalStyles.js |  3 +++
 screens/CalendarScreen.js |  1 +
 screens/RequestScreen.js  | 10 ++++++----
 screens/SettingsScreen.js | 14 +++++++-------
 5 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/components/UserIcon.js b/components/UserIcon.js
index b8e9ec5..19156fa 100644
--- a/components/UserIcon.js
+++ b/components/UserIcon.js
@@ -5,10 +5,15 @@ import {
 import { fonts, colors } from '../constants/GlobalStyles';
 
 const UserIcon = (props) => {
-  const { user, size } = props;
+  const {
+    user, size, fontsize, fontcolor,
+  } = props;
   return (
-    <View style={[styles.container, { backgroundColor: user.iconColor, height: size, width: size }]}>
-      <Text key={user.firstName}>{`${user.firstName[0]}${user.lastName[0]}`}</Text>
+    <View style={[styles.container, {
+      backgroundColor: user.iconColor, height: size, width: size,
+    }]}
+    >
+      <Text key={user.firstName} style={{ fontSize: fontsize, color: fontcolor }}>{`${user.firstName[0]}${user.lastName[0]}` }</Text>
     </View>
   );
 };
diff --git a/constants/GlobalStyles.js b/constants/GlobalStyles.js
index 1931a72..362792a 100644
--- a/constants/GlobalStyles.js
+++ b/constants/GlobalStyles.js
@@ -12,9 +12,11 @@ export const colors = {
   mediumSageGreen: '#C6DAC9',
   indigo300: '#C7C6E1',
   indigo700: '#2E2D4D',
+  indigo500: '#5D5B9A',
   lightGray: '#F4F5F4',
   loginGreen: '#57805B',
   backgroundGray: '#F2F2F2',
+  iconYellow: '#FFCD3D',
 };
 
 export const fonts = {
@@ -22,4 +24,5 @@ export const fonts = {
   smallText: 16,
   large24: 24,
   large22: 22,
+  iconFont: 37,
 };
diff --git a/screens/CalendarScreen.js b/screens/CalendarScreen.js
index 8843781..aad0c96 100644
--- a/screens/CalendarScreen.js
+++ b/screens/CalendarScreen.js
@@ -282,6 +282,7 @@ const styles = StyleSheet.create({
     color: colors.darkSageGreen,
     marginBottom: 10,
     marginTop: 10,
+    fontWeight: 'bold',
   },
   empty_title: {
     fontSize: fonts.large24,
diff --git a/screens/RequestScreen.js b/screens/RequestScreen.js
index 208c6c9..2065b57 100644
--- a/screens/RequestScreen.js
+++ b/screens/RequestScreen.js
@@ -52,10 +52,11 @@ const RequestScreen = (props) => {
         <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
           <Text style={styles.title}>Requests</Text>
           <TouchableOpacity
-            style={styles.newEvent}
+            style={styles.empty_addButton}
             onPress={() => setShowModal(!showModal)}
           >
-            <Text style={styles.plus}>+</Text>
+            <Text style={{ color: '#FFFFFF', fontSize: 40 }}>+</Text>
+
           </TouchableOpacity>
         </View>
 
@@ -108,8 +109,8 @@ const styles = StyleSheet.create({
     marginBottom: 3,
   },
   empty_addButton: {
-    backgroundColor: colors.darkSageGreen,
-    borderRadius: 20,
+    backgroundColor: colors.indigo700,
+    borderRadius: 25,
     width: 50,
     height: 50,
     alignItems: 'center',
@@ -131,6 +132,7 @@ const styles = StyleSheet.create({
     color: colors.indigo700,
     marginLeft: 20,
   },
+
   newEvent: {
     backgroundColor: colors.indigo700,
     borderRadius: 20,
diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js
index 92df28a..ef1f1e8 100644
--- a/screens/SettingsScreen.js
+++ b/screens/SettingsScreen.js
@@ -65,7 +65,7 @@ const SettingsScreen = (props) => {
   return (
     <SafeAreaView>
       <View style={styles.subContainer}>
-        <UserIcon key={user.id} user={user} size={90}> </UserIcon>
+        <UserIcon key={user.id} user={user} size={90} fontsize={fonts.iconFont}> </UserIcon>
       </View>
       <View style={styles.subContainer}>
         <Text style={styles.text}>First Name</Text>
@@ -88,21 +88,21 @@ const SettingsScreen = (props) => {
         <View style={styles.colorPicker}>
           {showXDarkPurple
             ? (
-              <TouchableOpacity style={styles.buttonDarkPurple} onPress={() => setnewIconColor(colors.indigo700)}>
+              <TouchableOpacity style={styles.buttonDarkPurple} onPress={() => setnewIconColor(colors.indigo500)}>
                 <Text style={{ textAlign: 'center', fontSize: 30 }}>X</Text>
               </TouchableOpacity>
             )
             : (
-              <TouchableOpacity style={styles.buttonDarkPurple} onPress={() => { setnewIconColor(colors.indigo700); setshowXDarkPurple(true); setShowXYellow(false); setshowXLightPurple(false); }} />
+              <TouchableOpacity style={styles.buttonDarkPurple} onPress={() => { setnewIconColor(colors.indigo500); setshowXDarkPurple(true); setShowXYellow(false); setshowXLightPurple(false); }} />
             )}
           {showXYellow
             ? (
-              <TouchableOpacity style={styles.buttonYellow} onPress={() => setnewIconColor('#FFFF00')}>
+              <TouchableOpacity style={styles.buttonYellow} onPress={() => setnewIconColor(colors.iconYellow)}>
                 <Text style={{ textAlign: 'center', fontSize: 30 }}>X</Text>
               </TouchableOpacity>
             )
             : (
-              <TouchableOpacity style={styles.buttonYellow} onPress={() => { setnewIconColor('#FFFF00'); setshowXDarkPurple(false); setShowXYellow(true); setshowXLightPurple(false); }} />
+              <TouchableOpacity style={styles.buttonYellow} onPress={() => { setnewIconColor(colors.iconYellow); setshowXDarkPurple(false); setShowXYellow(true); setshowXLightPurple(false); }} />
             )}
           {showXLightPurple
             ? (
@@ -169,7 +169,7 @@ const styles = StyleSheet.create({
     height: 30,
     width: 30,
     marginHorizontal: 10,
-    backgroundColor: 'purple',
+    backgroundColor: colors.indigo500,
     justifyContent: 'center',
   },
   buttonLightPurple: {
@@ -182,7 +182,7 @@ const styles = StyleSheet.create({
     height: 30,
     width: 30,
     marginHorizontal: 10,
-    backgroundColor: '#FFFF00',
+    backgroundColor: colors.iconYellow,
     justifyContent: 'center',
   },
 });