From 96df2f2f053eb3711264da6461e366bc5cb33ab0 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 7 Jul 2023 15:27:32 +0800
Subject: [PATCH] Polished animated container and homepage

---
 .../AnimatedContainer/AnimatedContainer.tsx   | 46 ++++++++++++-------
 src/routes/Home/Home.tsx                      |  2 +-
 src/styles.tsx                                |  2 +-
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/components/AnimatedContainer/AnimatedContainer.tsx b/src/components/AnimatedContainer/AnimatedContainer.tsx
index 91f6bfb..4c8667a 100644
--- a/src/components/AnimatedContainer/AnimatedContainer.tsx
+++ b/src/components/AnimatedContainer/AnimatedContainer.tsx
@@ -9,22 +9,34 @@ export interface props {
 
 export default function AnimatedContainer(props: props) {
   return (
-    <View style={styles.container}>
-      <MotiScrollView
-        from={{
-          opacity: 0,
-          backgroundColor: colors.orange_1,
-          flex: 1,
-        }}
-        animate={{
-          opacity: 1,
-          backgroundColor: colors.blue_2,
-          flex: 1,
-        }}
-        transition={{ type: "timing", duration: 300 }}
-      >
-        {props.children}
-      </MotiScrollView>
-    </View>
+    <MotiScrollView
+      contentContainerStyle={{
+        alignItems: "center",
+        alignSelf: "center",
+        justifyContent: "flex-start",
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+      }}
+      from={{
+        borderRadius: 0,
+        backgroundColor: colors.orange_2,
+        paddingTop: 4,
+        paddingBottom: 4,
+        marginHorizontal: "4%",
+        marginVertical: "5%",
+      }}
+      animate={{
+        borderRadius: 15,
+        backgroundColor: colors.blue_2,
+        paddingTop: 16,
+        paddingBottom: 16,
+        marginHorizontal: "4%",
+        marginVertical: "5%",
+      }}
+      transition={{ type: "timing", duration: 300 }}
+    >
+      {props.children}
+    </MotiScrollView>
   );
 }
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index f8f409a..5375e58 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -47,7 +47,7 @@ export default function Home() {
   };
   function CustomMap() {
     if (dist !== null && location !== null) {
-      if (dist <= 1) {
+      if (dist >= 1) {
         // Just switch this condition for map debugging
         return <MapView style={styles.map} initialRegion={ustpCoords} />;
       } else {
diff --git a/src/styles.tsx b/src/styles.tsx
index f4d8f5d..e528322 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
     marginVertical: "5%",
     width: "92%",
     borderRadius: 15,
-    backgroundColor: colors.blue_2,
+    // backgroundColor: colors.blue_2,
     alignItems: "center",
     alignSelf: "center",
     paddingTop: 32,