From f97c22f6e081366f8719a552ed8fc92d3e7886be Mon Sep 17 00:00:00 2001
From: Imbus <imbus64@protonmail.com>
Date: Thu, 14 Dec 2023 20:09:12 +0100
Subject: [PATCH] Basic styling

---
 App.tsx                           |  4 ++--
 src/components/PostView.tsx       | 16 ++++++++++++++--
 src/components/PostsContainer.tsx | 14 +++++++++++++-
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/App.tsx b/App.tsx
index 68db9ae..84c32e2 100644
--- a/App.tsx
+++ b/App.tsx
@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { PostsContainer } from './src/components/PostsContainer';
 
-export default function App() {
+export default function App(): JSX.Element {
   return (
     <View style={styles.container}>
       <Text>Open up App.tsx to start working on your app!</Text>
@@ -16,7 +16,7 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#fff', // For the "entire" app
     alignItems: 'center',
     justifyContent: 'center',
   },
diff --git a/src/components/PostView.tsx b/src/components/PostView.tsx
index 45e8bbf..924f72f 100644
--- a/src/components/PostView.tsx
+++ b/src/components/PostView.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text } from "react-native";
 import { Post } from "../util/api";
+import { StyleSheet } from "react-native";
 
 /**
  * This is the component that holds a single Post
@@ -14,8 +15,19 @@ export function PostView({ post }: { post: Post }): JSX.Element {
   const [thisPost, setThisPost] = React.useState<Post>(post);
 
   return (
-    <View style={{ flexDirection: "row", height: 100, padding: 20 }}>
-      <Text>{thisPost.content}</Text>
+    <View style={style.container}>
+      <Text style={style.font} >{thisPost.content}</Text>
     </View>
   );
 }
+
+const style = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    backgroundColor: '#fff',
+    paddingVertical: 5,
+  },
+  font: {
+    color: "#000",
+  }
+});
diff --git a/src/components/PostsContainer.tsx b/src/components/PostsContainer.tsx
index 61bc7fa..f9df1bb 100644
--- a/src/components/PostsContainer.tsx
+++ b/src/components/PostsContainer.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { View, Text } from "react-native";
 import { getPosts, Post } from "../util/api";
 import { PostView } from "./PostView";
+import { StyleSheet } from "react-native";
 
 export function PostsContainer(): JSX.Element {
   const [posts, setPosts] = React.useState<Post[]>([]);
@@ -15,7 +16,7 @@ export function PostsContainer(): JSX.Element {
   }, []);
 
   return (
-    <View style={{ height: 100, padding: 20 }}>
+    <View style={style.container}>
       <Text>Hello World!</Text>
       {posts.map((post) => (
         <PostView key={post.id} post={post} />
@@ -23,3 +24,14 @@ export function PostsContainer(): JSX.Element {
     </View>
   );
 }
+
+const style = StyleSheet.create({
+  container: {
+    height: '100%',
+    padding: 5,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    backgroundColor: '#fff', // For the container holding the posts
+  },
+});
\ No newline at end of file