Homepage and container improvements

src/components/AnimatedContainer/AnimatedContainer.tsx

@@ -10,14 +10,7 @@ export interface props {
 export default function AnimatedContainer(props: props) {
   return (
     <MotiScrollView
-      contentContainerStyle={{
-        alignItems: "center",
-        alignSelf: "center",
-        justifyContent: "flex-start",
-        display: "flex",
-        flexDirection: "column",
-        flex: 1,
-      }}
+      contentContainerStyle={styles.container}
       from={{
         borderRadius: 0,
         backgroundColor: colors.orange_2,

src/routes/Home/Home.tsx

@@ -52,13 +52,17 @@ export default function Home() {
         return <MapView style={styles.map} initialRegion={ustpCoords} />;
       } else {
         return (
-          <Text style={styles.text_white_small}>
-            You must be within 1km of USTP to use Stud-E{"\n"}
-            {dist}km away from USTP {"\n"}
-            User Location:
-            {"\n"} Latitude {location.coords.latitude}
-            {"\n"} Longitude {location.coords.longitude}
-          </Text>
+          <View>
+            <Text style={styles.text_white_medium}>
+              You must be within 1km of USTP to use Stud-E{"\n"}
+            </Text>
+            <Text style={styles.text_white_small}>
+              {dist}km away from USTP {"\n"}
+              User Location:
+              {"\n"} Latitude {location.coords.latitude}
+              {"\n"} Longitude {location.coords.longitude}
+            </Text>
+          </View>
         );
       }
     } else {

src/styles.tsx

@@ -35,18 +35,13 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   container: {
-    flex: 1,
-    marginVertical: "5%",
-    width: "92%",
-    borderRadius: 15,
-    // backgroundColor: colors.blue_2,
     alignItems: "center",
     alignSelf: "center",
-    paddingTop: 32,
-    paddingBottom: 32,
-    justifyContent: "flex-start",
+    justifyContent: "center",
     display: "flex",
     flexDirection: "column",
+    flex: 1,
+    paddingHorizontal: 4,
   },
   flex_row: {
     display: "flex",
@@ -57,6 +52,7 @@ const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
+    justifyContent: "center",
   },
   text_white_tiny: {
     color: colors.text_default,