Update the UI

Author: salihgueler

App.tsx

@@ -131,36 +131,50 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ username }) => {
     switch (gameState) {
       case "idle":
         return (
-          <>
+          <View style={styles.gameContainer}>
             <Text style={styles.welcomeText}>Welcome {username}!</Text>
-            <Button title="Search Game" onPress={handleSearchGame} />
-          </>
+            <View style={styles.buttonContainer}>
+              <Button
+                title="Search Game"
+                onPress={handleSearchGame}
+                color="#eba74c"
+              />
+            </View>
+          </View>
         );
       case "searching":
         return (
-          <>
+          <View style={styles.gameContainer}>
             <Text style={styles.quizText}>Searching for a game now</Text>
-            <ActivityIndicator style={styles.activityIndicator} size="large" />
-          </>
+            <ActivityIndicator
+              style={styles.activityIndicator}
+              size="large"
+              color="#eba74c"
+            />
+          </View>
         );
       case "found":
         return (
-          <>
+          <View style={styles.gameContainer}>
             <Text style={styles.quizText}>
               Questions are getting generated now...
             </Text>
-            <ActivityIndicator style={styles.activityIndicator} size="large" />
-          </>
+            <ActivityIndicator
+              style={styles.activityIndicator}
+              size="large"
+              color="#eba74c"
+            />
+          </View>
         );
       case "quiz":
-        if (!game) return <Text>Loading game...</Text>;
+        if (!game) return <Text style={styles.quizText}>Loading game...</Text>;
 
         const question = game.questions[currentQuestion];
         if (currentQuestion === game.questions.length) {
           return (
-            <>
+            <View style={styles.gameContainer}>
               <Text style={styles.quizText}>Quiz is over!</Text>
-              <Text style={styles.quizText}>
+              <Text style={styles.resultText}>
                 {game.playerOneScore === game.playerTwoScore
                   ? `It's a tie with ${game.playerOneScore}!`
                   : (game.playerOneScore ?? 0) > (game.playerTwoScore ?? 0)
@@ -171,52 +185,137 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ username }) => {
                       game.playerTwoId === username ? "You" : game.playerTwoId
                     } won with ${game.playerTwoScore} points!`}
               </Text>
-            </>
+            </View>
           );
         }
         return (
-          <>
-            <Text>{question?.question}</Text>
-            {question?.options.map((option) => (
-              <Button
-                key={option}
-                title={option}
-                onPress={() => {
-                  if (option === question.correctAnswer) {
-                    if (game.playerOneId === username) {
-                      client.models.Game.update({
-                        id: game.id,
-                        playerOneScore: (game.playerOneScore ?? 0) + 10,
-                        currentQuestion,
-                      });
-                    } else {
-                      client.models.Game.update({
-                        id: game.id,
-                        playerTwoScore: (game.playerTwoScore ?? 0) + 10,
-                        currentQuestion,
-                      });
-                    }
-                  } else {
-                    client.models.Game.update({
-                      id: game.id,
-                      currentQuestion,
-                    });
-                  }
-                }}
-              />
-            ))}
-          </>
+          <View style={styles.gameContainer}>
+            <Text style={styles.questionText}>{question?.question}</Text>
+            <View style={styles.optionsContainer}>
+              {question?.options.map((option) => (
+                <View style={styles.optionButton} key={option}>
+                  <Button
+                    title={option}
+                    color="#eba74c"
+                    onPress={() => {
+                      if (option === question.correctAnswer) {
+                        if (game.playerOneId === username) {
+                          client.models.Game.update({
+                            id: game.id,
+                            playerOneScore: (game.playerOneScore ?? 0) + 10,
+                            currentQuestion,
+                          });
+                        } else {
+                          client.models.Game.update({
+                            id: game.id,
+                            playerTwoScore: (game.playerTwoScore ?? 0) + 10,
+                            currentQuestion,
+                          });
+                        }
+                      } else {
+                        client.models.Game.update({
+                          id: game.id,
+                          currentQuestion,
+                        });
+                      }
+                    }}
+                  />
+                </View>
+              ))}
+            </View>
+          </View>
         );
       case "error":
-        return <Text style={styles.welcomeText}>There is an error.</Text>;
+        return (
+          <View style={styles.gameContainer}>
+            <Text style={[styles.welcomeText, styles.errorText]}>
+              There is an error.
+            </Text>
+          </View>
+        );
       default:
-        return <Text>Unknown state</Text>;
+        return <Text style={styles.quizText}>Unknown state</Text>;
     }
   };
 
   return <View style={styles.contentContainer}>{renderContent()}</View>;
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  signOutButton: {
+    alignSelf: "flex-end",
+    margin: 16,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  gameContainer: {
+    width: "100%",
+    alignItems: "center",
+    padding: 20,
+    borderRadius: 10,
+    backgroundColor: "#fff",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  welcomeText: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "#333",
+    marginBottom: 20,
+  },
+  buttonContainer: {
+    width: "80%",
+    marginTop: 20,
+  },
+  quizText: {
+    fontSize: 18,
+    marginBottom: 16,
+    color: "#333",
+    textAlign: "center",
+  },
+  questionText: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#333",
+    marginBottom: 24,
+    textAlign: "center",
+  },
+  resultText: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#eba74c",
+    textAlign: "center",
+  },
+  optionsContainer: {
+    width: "100%",
+    marginTop: 20,
+  },
+  optionButton: {
+    marginVertical: 8,
+    width: "100%",
+  },
+  activityIndicator: {
+    padding: 16,
+  },
+  errorText: {
+    color: "red",
+  },
+});
+
 const App: React.FC = () => {
   const [username, setUsername] = useState<string>("");
 
@@ -241,29 +340,4 @@ const App: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  signOutButton: {
-    alignSelf: "flex-end",
-  },
-  contentContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  welcomeText: {
-    fontSize: 18,
-    fontWeight: "bold",
-  },
-  quizText: {
-    fontSize: 16,
-    marginBottom: 16,
-  },
-  activityIndicator: {
-    padding: 16,
-  },
-});
-
 export default App;