💄 Update button styles

screens/moves/MoveDetailScreen.tsx

@@ -35,7 +35,10 @@ const MoveDetailScreen = ({ navigation, route }: Props) => {
 
     return (
         <ScrollView style={styles.container}>
-            <Button title="Edit Move" onPress={() => navigation.navigate(MOVE_FORM, { move: move })}/>
+            <Button
+                title="Edit Move"
+                color={styles.updateButton.backgroundColor}
+                onPress={() => navigation.navigate(MOVE_FORM, { move: move })}/>
             <Text style={styles.title}>Name: {move?.name}</Text>
             <Text style={styles.detail}>Category: {move?.category}</Text>
             <Text style={styles.detail}>Power: {move?.power}</Text>
@@ -50,6 +53,9 @@ const MoveDetailScreen = ({ navigation, route }: Props) => {
 };
 
 const styles = StyleSheet.create({
+    updateButton: {
+        backgroundColor: '#BA22DA',
+    },
     container: {
         flex: 1,
         backgroundColor: '#FFFFFF',

screens/moves/MoveListScreen.tsx

@@ -49,7 +49,10 @@ const MoveListScreen = ({ navigation }: Props) => {
             <FlatList
                 data={moves}
                 ListHeaderComponent={
-                    <Button title="Add Move" onPress={() => navigation.navigate(MOVE_FORM, { move: undefined })}/>
+                    <Button
+                        title="Add Move"
+                        color={styles.addButton.backgroundColor}
+                        onPress={() => navigation.navigate(MOVE_FORM, { move: undefined })}/>
                 }
                 renderItem={({ item }) => (
                     <View style={styles.listItemContainer}>
@@ -77,6 +80,9 @@ const styles = StyleSheet.create({
     deleteButton: {
         backgroundColor: '#FF6961',
     },
+    addButton: {
+        backgroundColor: '#BADA55',
+    },
     listItemContainer: {
         flexDirection: 'row',
         justifyContent: 'space-between',