fix: Fix inconsistencies in styling management- colocate all styles i…

…nto their own external style scripts

components/atoms/Button/Button.js

@@ -1,34 +1,21 @@
 import React from "react";
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
+import { Text, TouchableOpacity } from "react-native";
+
+import ButtonStyles from "./ButtonStyles";
 
 function Button({ onPress, text, innerColor, style, transform }) {
   return (
-    <TouchableOpacity onPress={onPress} style={[styles.button, style]}>
+    <TouchableOpacity onPress={onPress} style={[ButtonStyles.button, style]}>
       <Text
-        style={{
-          textAlign: "center",
-          color: innerColor,
-          fontSize: 17,
-          fontWeight: "700",
-          textTransform: transform && "uppercase"
-        }}
+        style={[
+          ButtonStyles.buttonText,
+          { color: innerColor, textTransform: transform && "uppercase" }
+        ]}
       >
         {text}
       </Text>
     </TouchableOpacity>
   );
 }
 
-const styles = StyleSheet.create({
-  button: {
-    color: "#dac",
-    marginLeft: 20,
-    marginRight: 20,
-    padding: 17,
-    borderRadius: 4,
-    justifyContent: "center",
-    marginBottom: 20
-  }
-});
-
 export default Button;

components/atoms/Button/ButtonStyles.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+
+const ButtonStyles = StyleSheet.create({
+  button: {
+    color: "#dac",
+    marginLeft: 20,
+    marginRight: 20,
+    padding: 17,
+    borderRadius: 4,
+    justifyContent: "center",
+    marginBottom: 20
+  },
+  buttonText: {
+    textAlign: "center",
+    fontSize: 17,
+    fontWeight: "700"
+  }
+});
+
+export default ButtonStyles;

components/atoms/Deck/Deck.js

@@ -1,29 +1,25 @@
 import { Ionicons } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
 import React from "react";
-import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
+import { Text, TouchableHighlight, View } from "react-native";
 
 import { UDACITY_BLUE, WHITE } from "../../../utils/colors";
+import DeckStyles from "./DeckStyles";
 
 export default function Deck({ deck, onPress }) {
   const { title, questions } = deck;
   const count = questions.length;
 
   return (
-    <View style={styles.card}>
+    <View style={DeckStyles.card}>
       <TouchableHighlight onPress={onPress}>
         <LinearGradient
           colors={["#24a0ed", UDACITY_BLUE]}
-          style={{
-            padding: 15,
-            justifyContent: "center",
-            borderRadius: 7,
-            height: "100%"
-          }}
+          style={DeckStyles.linearGradient}
         >
-          <Text style={styles.title}>{title}</Text>
+          <Text style={DeckStyles.titleText}>{title}</Text>
 
-          <Text style={{ color: WHITE, fontSize: 16 }}>
+          <Text style={DeckStyles.countText}>
             {count} {count === 0 || count > 1 ? "flashcards" : "flashcard"}
           </Text>
           <Ionicons name="md-albums" size={30} color={WHITE} />
@@ -32,21 +28,3 @@ export default function Deck({ deck, onPress }) {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  card: {
-    borderColor: WHITE,
-    borderWidth: 1,
-    borderRadius: 4,
-    marginBottom: 20,
-    shadowColor: "0 4px 8px 0 rgba(0,0,0,0.2)",
-    minHeight: 100,
-    flex: 1
-  },
-  title: {
-    fontSize: 24,
-    color: WHITE,
-    fontWeight: "700",
-    marginBottom: 10
-  }
-});

components/atoms/Deck/DeckStyles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+
+import { WHITE } from "../../../utils/colors";
+
+const DeckStyles = StyleSheet.create({
+  card: {
+    borderColor: WHITE,
+    borderWidth: 1,
+    borderRadius: 4,
+    marginBottom: 20,
+    shadowColor: "0 4px 8px 0 rgba(0,0,0,0.2)",
+    minHeight: 100,
+    flex: 1
+  },
+  titleText: {
+    fontSize: 24,
+    color: WHITE,
+    fontWeight: "700",
+    marginBottom: 10
+  },
+  countText: { color: WHITE, fontSize: 16 },
+  linearGradient: {
+    padding: 15,
+    justifyContent: "center",
+    borderRadius: 7,
+    height: "100%"
+  }
+});
+
+export default DeckStyles;

components/atoms/Question/Question.js

@@ -1,15 +1,10 @@
 import React, { Component } from "react";
-import {
-  Dimensions,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View
-} from "react-native";
+import { Text, TouchableOpacity, View } from "react-native";
 import CardFlip from "react-native-card-flip";
 
 import { UDACITY_BLUE } from "../../../utils/colors";
 import Button from "../Button/Button";
+import QuestionStyles from "./QuestionStyles";
 
 class Question extends Component {
   state = {
@@ -34,27 +29,27 @@ class Question extends Component {
     const { question, answer } = questionData;
 
     return (
-      <View style={styles.container}>
-        <CardFlip style={styles.cardContainer} ref={this.cardFlipRef}>
+      <View style={QuestionStyles.container}>
+        <CardFlip style={QuestionStyles.cardContainer} ref={this.cardFlipRef}>
           <TouchableOpacity
             activeOpacity={1}
-            style={styles.card}
+            style={QuestionStyles.card}
             isShowing={this.state.frontSideUp}
             onPress={() => this.handleCardFlip()}
           >
-            <Text style={styles.label}>{question}</Text>
+            <Text style={QuestionStyles.label}>{question}</Text>
           </TouchableOpacity>
           <TouchableOpacity
             activeOpacity={1}
-            style={[styles.card, styles.answer]}
+            style={[QuestionStyles.card, QuestionStyles.answer]}
             isShowing={!this.state.frontSideUp}
             onPress={() => this.handleCardFlip()}
           >
-            <Text style={styles.label}>{answer}</Text>
+            <Text style={QuestionStyles.label}>{answer}</Text>
           </TouchableOpacity>
         </CardFlip>
 
-        <Text style={{ color: "lightgray", margin: 10 }}>
+        <Text style={QuestionStyles.flipTipText}>
           Tap the flashcard to flip it!
         </Text>
 
@@ -74,39 +69,4 @@ class Question extends Component {
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center"
-  },
-  cardContainer: {
-    width: Math.round(Dimensions.get("window").width) - 70,
-    minHeight: 200,
-    alignContent: "center"
-  },
-  card: {
-    width: "100%",
-    height: "100%",
-    borderRadius: 10,
-    padding: 20,
-    backgroundColor: UDACITY_BLUE,
-    shadowColor: "rgba(0,0,0,0.5)",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.5,
-    justifyContent: "center"
-  },
-  answer: {
-    backgroundColor: "#18b300"
-  },
-  label: {
-    textAlign: "center",
-    fontSize: 22,
-    fontFamily: "System",
-    color: "#ffffff",
-    backgroundColor: "transparent"
-  }
-});
-
 export default Question;

components/atoms/Question/QuestionStyles.js

@@ -0,0 +1,41 @@
+import { Dimensions, StyleSheet } from "react-native";
+
+import { UDACITY_BLUE } from "../../../utils/colors";
+
+const QuestionStyles = StyleSheet.create({
+  container: {
+    alignItems: "center"
+  },
+  cardContainer: {
+    width: Math.round(Dimensions.get("window").width) - 70,
+    minHeight: 200,
+    alignContent: "center"
+  },
+  card: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 10,
+    padding: 20,
+    backgroundColor: UDACITY_BLUE,
+    shadowColor: "rgba(0,0,0,0.5)",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.5,
+    justifyContent: "center"
+  },
+  answer: {
+    backgroundColor: "#18b300"
+  },
+  label: {
+    textAlign: "center",
+    fontSize: 22,
+    fontFamily: "System",
+    color: "#ffffff",
+    backgroundColor: "transparent"
+  },
+  flipTipText: { color: "lightgray", margin: 10 }
+});
+
+export default QuestionStyles;

components/molecules/DeckList/DeckList.js

@@ -1,11 +1,11 @@
 import React, { Component } from "react";
-import { FlatList, SafeAreaView, StyleSheet, Text, View } from "react-native";
+import { FlatList, SafeAreaView, Text, View } from "react-native";
 import { connect } from "react-redux";
 
 import { receiveDeckEntries } from "../../../actions";
 import { fetchDeckResults } from "../../../utils/API";
 import Deck from "../../atoms/Deck/Deck";
-import { WHITE } from "../../../utils/colors";
+import DeckListStyles from "./DeckListStyles";
 
 class DeckList extends Component {
   componentDidMount() {
@@ -26,7 +26,7 @@ class DeckList extends Component {
   render() {
     const { decks, data } = this.props;
     return decks.length > 0 ? (
-      <View style={styles.container}>
+      <View style={DeckListStyles.container}>
         <SafeAreaView>
           <FlatList
             data={decks}
@@ -41,26 +41,15 @@ class DeckList extends Component {
         </SafeAreaView>
       </View>
     ) : (
-      <View style={styles.textContainer}>
-        <Text style={{ fontSize: 20 }}>No decks have been created</Text>
+      <View style={DeckListStyles.textContainer}>
+        <Text style={DeckListStyles.noDecksText}>
+          No decks have been created
+        </Text>
       </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: WHITE,
-    padding: 10
-  },
-  textContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center"
-  }
-});
-
 function mapStateToProps(state) {
   return {
     data: state,

components/molecules/DeckList/DeckListStyles.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+
+import { WHITE } from "../../../utils/colors";
+
+const DeckListStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: WHITE,
+    padding: 10
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  noDecksText: { fontSize: 20 }
+});
+
+export default DeckListStyles;