From 484a03258bea816bbe5c224d7b248b05f877c2b3 Mon Sep 17 00:00:00 2001
From: Muhammad Zahran Agung Dewantoro <muhammad.zahran@ui.ac.id>
Date: Wed, 3 Nov 2021 12:53:19 +0300
Subject: [PATCH] feat: refine styling exosystem homepage and category list

---
 src/components/Cards/VerticalCard.tsx         |   1 +
 .../carousel/VerticalEcosystemCarousel.tsx    |   4 +-
 .../ecosystem/BusinessEcosystemScreen.tsx     | 148 ++++++++----------
 .../ecosystem/CategoryEcosystemListScreen.tsx |   2 +
 .../ecosystem/EcosystemDetailScreen.tsx       |   2 -
 .../ecosystem/RecommendedEcosystemScreen.tsx  |  55 ++++---
 6 files changed, 103 insertions(+), 109 deletions(-)

diff --git a/src/components/Cards/VerticalCard.tsx b/src/components/Cards/VerticalCard.tsx
index 8e352c7..2c988de 100644
--- a/src/components/Cards/VerticalCard.tsx
+++ b/src/components/Cards/VerticalCard.tsx
@@ -67,6 +67,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.3,
     shadowRadius: 6,
     elevation: 4,
+    borderRadius: 8,
   },
   cardContainer: {
     width: containerDimension,
diff --git a/src/components/carousel/VerticalEcosystemCarousel.tsx b/src/components/carousel/VerticalEcosystemCarousel.tsx
index e6f79e1..745ecce 100644
--- a/src/components/carousel/VerticalEcosystemCarousel.tsx
+++ b/src/components/carousel/VerticalEcosystemCarousel.tsx
@@ -59,10 +59,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
   },
   slide: {
-    width: 210,
     justifyContent: "center",
     alignItems: "center",
-    marginRight: 16,
+    paddingHorizontal: 8,
+    paddingBottom: 5,
   },
 });
 
diff --git a/src/screens/ecosystem/BusinessEcosystemScreen.tsx b/src/screens/ecosystem/BusinessEcosystemScreen.tsx
index 102b007..fd8d3eb 100644
--- a/src/screens/ecosystem/BusinessEcosystemScreen.tsx
+++ b/src/screens/ecosystem/BusinessEcosystemScreen.tsx
@@ -16,6 +16,7 @@ import { IEcosystem } from "../../types/firestore/ecosystems";
 import { IUser } from "../../types/firestore/User";
 import { getCategories } from "../../service/firestore/categories";
 import { ICategory } from "../../types/firestore";
+
 const BusinessEcosystemScreen = () => {
   const nav = useNavigation();
   const user: IUser = useAppSelector((state) => state.user);
@@ -39,39 +40,27 @@ const BusinessEcosystemScreen = () => {
   }, []);
 
   return (
-    <ScrollView style={styles.container}>
-      <View>
+    <ScrollView>
+      <View style={styles.container}>
         <Text style={styles.textLink}>Selamat Datang, {user.firstName}</Text>
-      </View>
-      <Spacer variant="xl" />
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", {
-              screen: "Recommended",
-              params: { headerTitle: "Ekosistem Saya", toFetch: "myEcosystem" },
-            });
-          }}
-        >
-          <Text style={styles.textLink}>Ekosistem Saya</Text>
-        </TouchableOpacity>
-      </View>
-      <Spacer variant="xl" />
-      <View>
+        <Spacer variant="xl" />
+        <Text style={styles.textTitle}>Ekosistem Bisnis</Text>
+        <Spacer variant="xl" />
         <SmallButton
           text={"Buat Ekosistem Bisnis"}
           onPress={() =>
-            nav.navigate("CreateEcosystem", { screen: "CreateEcosystemScreen" })
+            nav.navigate("CreateEcosystem", {
+              screen: "CreateEcosystemScreen",
+            })
           }
           colors={"primary"}
         />
-      </View>
-      <Spacer variant="xl" />
-      <View style={styles.headContainer}>
-        <View style={styles.textContainer}>
-          <Text style={styles.subTitle}>Ekosistem Saya</Text>
-        </View>
-        <View>
+        <Spacer variant="xl" />
+
+        <View style={styles.headContainer}>
+          <View style={styles.textContainer}>
+            <Text style={styles.subTitle}>Ekosistem Saya</Text>
+          </View>
           <TouchableOpacity
             onPress={() =>
               nav.navigate("Ecosystem", {
@@ -83,18 +72,15 @@ const BusinessEcosystemScreen = () => {
               })
             }
           >
-            <Text style={{ fontSize: 16, color: Colors.text.link }}>
-              Lihat Semua
-            </Text>
+            <Text style={styles.textSeeAll}>Lihat Semua</Text>
           </TouchableOpacity>
         </View>
-      </View>
-      <Spacer variant="xl" />
-      <View style={styles.headContainer}>
-        <View style={styles.textContainer}>
-          <Text style={styles.subTitle}>Sudah bergabung</Text>
-        </View>
-        <View>
+        <Spacer variant="xl" />
+
+        <View style={styles.headContainer}>
+          <View style={styles.textContainer}>
+            <Text style={styles.subTitle}>Sudah Bergabung</Text>
+          </View>
           <TouchableOpacity
             onPress={() =>
               nav.navigate("Ecosystem", {
@@ -103,20 +89,17 @@ const BusinessEcosystemScreen = () => {
               })
             }
           >
-            <Text style={{ fontSize: 16, color: Colors.text.link }}>
-              Lihat Semua
-            </Text>
+            <Text style={styles.textSeeAll}>Lihat Semua</Text>
           </TouchableOpacity>
         </View>
-      </View>
-      <Spacer variant="l" />
-      <VerticalEcosystemCarousel list={listBergabung} />
-      <Spacer variant="xl" />
-      <View style={styles.headContainer}>
-        <View style={styles.textContainer}>
-          <Text style={styles.subTitle}>Kategori Bisnis</Text>
-        </View>
-        <View>
+        <Spacer variant="l" />
+        <VerticalEcosystemCarousel list={listBergabung} />
+        <Spacer variant="xl" />
+
+        <View style={styles.headContainer}>
+          <View style={styles.textContainer}>
+            <Text style={styles.subTitle}>Kategori Bisnis</Text>
+          </View>
           <TouchableOpacity
             onPress={() =>
               nav.navigate("Ecosystem", {
@@ -127,20 +110,17 @@ const BusinessEcosystemScreen = () => {
               })
             }
           >
-            <Text style={{ fontSize: 16, color: Colors.text.link }}>
-              Lihat Semua
-            </Text>
+            <Text style={styles.textSeeAll}>Lihat Semua</Text>
           </TouchableOpacity>
         </View>
-      </View>
-      <Spacer variant="l" />
-      <CategoryHorizontalCarousel list={listCategory} />
-      <Spacer variant="xl" />
-      <View style={styles.headContainer}>
-        <View style={styles.textContainer}>
-          <Text style={styles.subTitle}>Paling Populer</Text>
-        </View>
-        <View>
+        <Spacer variant="l" />
+        <CategoryHorizontalCarousel list={listCategory} />
+        <Spacer variant="xl" />
+
+        <View style={styles.headContainer}>
+          <View style={styles.textContainer}>
+            <Text style={styles.subTitle}>Paling Populer</Text>
+          </View>
           <TouchableOpacity
             onPress={() =>
               nav.navigate("Ecosystem", {
@@ -152,20 +132,17 @@ const BusinessEcosystemScreen = () => {
               })
             }
           >
-            <Text style={{ fontSize: 16, color: Colors.text.link }}>
-              Lihat Semua
-            </Text>
+            <Text style={styles.textSeeAll}>Lihat Semua</Text>
           </TouchableOpacity>
         </View>
-      </View>
-      <Spacer variant="l" />
-      <VerticalEcosystemCarousel list={listData} />
-      <Spacer variant="xl" />
-      <View style={styles.headContainer}>
-        <View style={styles.textContainer}>
-          <Text style={styles.subTitle}>Terbaru Minggu Ini</Text>
-        </View>
-        <View>
+        <Spacer variant="l" />
+        <VerticalEcosystemCarousel list={listData} />
+        <Spacer variant="xl" />
+
+        <View style={styles.headContainer}>
+          <View style={styles.textContainer}>
+            <Text style={styles.subTitle}>Terbaru Minggu Ini</Text>
+          </View>
           <TouchableOpacity
             onPress={() =>
               nav.navigate("Ecosystem", {
@@ -174,15 +151,12 @@ const BusinessEcosystemScreen = () => {
               })
             }
           >
-            <Text style={{ fontSize: 16, color: Colors.text.link }}>
-              Lihat Semua
-            </Text>
+            <Text style={styles.textSeeAll}>Lihat Semua</Text>
           </TouchableOpacity>
         </View>
+        <Spacer variant="l" />
+        <VerticalEcosystemCarousel list={listTerbaru} />
       </View>
-      <Spacer variant="l" />
-      <VerticalEcosystemCarousel list={listTerbaru} />
-      <Spacer variant="xl" />
     </ScrollView>
   );
 };
@@ -197,24 +171,28 @@ const styles = StyleSheet.create({
     fontSize: 24,
     color: Colors.text.link,
   },
-  text: {
+  textTitle: {
     fontSize: 24,
     color: Colors.text.title,
   },
+  subTitle: {
+    fontSize: 20,
+    color: Colors.text.subtitle,
+  },
+  textSeeAll: {
+    fontSize: 16,
+    color: Colors.text.link,
+  },
   textContainer: {
     flex: 1,
-    paddingRight: 118,
+    marginTop: 4,
   },
   headContainer: {
+    flex: 1,
     flexDirection: "row",
-    justifyContent: "space-between",
     paddingBottom: 16,
     alignItems: "center",
   },
-  subTitle: {
-    fontSize: 20,
-    color: Colors.text.subtitle,
-  },
 });
 
 export default BusinessEcosystemScreen;
diff --git a/src/screens/ecosystem/CategoryEcosystemListScreen.tsx b/src/screens/ecosystem/CategoryEcosystemListScreen.tsx
index a3bae20..8fbf7d7 100644
--- a/src/screens/ecosystem/CategoryEcosystemListScreen.tsx
+++ b/src/screens/ecosystem/CategoryEcosystemListScreen.tsx
@@ -64,7 +64,9 @@ const CategoryEcosystemListScreen = ({
         ItemSeparatorComponent={() => <Spacer variant={"l"} />}
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
+        ListFooterComponent={() => <Spacer variant={"xl"} />}
       />
+      <Spacer variant={"xl"} />
     </ScrollView>
   );
 };
diff --git a/src/screens/ecosystem/EcosystemDetailScreen.tsx b/src/screens/ecosystem/EcosystemDetailScreen.tsx
index e9bcf00..fc6c80b 100644
--- a/src/screens/ecosystem/EcosystemDetailScreen.tsx
+++ b/src/screens/ecosystem/EcosystemDetailScreen.tsx
@@ -46,9 +46,7 @@ const EcosystemDetailScreen = ({
           </View>
           <View style={styles.bodyWrapper}>
             <MaterialIcons name={"star"} style={styles.iconStar} size={30} />
-
             <View style={styles.textWrapper}>
-              {/* <Text style={styles.iconText}>{rate}</Text> */}
               <Text style={styles.iconText}>{rating}</Text>
             </View>
           </View>
diff --git a/src/screens/ecosystem/RecommendedEcosystemScreen.tsx b/src/screens/ecosystem/RecommendedEcosystemScreen.tsx
index 6a5847e..eb84157 100644
--- a/src/screens/ecosystem/RecommendedEcosystemScreen.tsx
+++ b/src/screens/ecosystem/RecommendedEcosystemScreen.tsx
@@ -10,6 +10,7 @@ import { RootState } from "../../redux/store";
 import { IEcosystem } from "../../types/firestore/ecosystems";
 import HorizontalCards from "../../components/Cards/HorizontalCards";
 import { useNavigation } from "@react-navigation/core";
+import Spacer from "../../components/Spacer/Spacer";
 
 const RecommendedEcosystemScreen = ({
   route,
@@ -53,32 +54,42 @@ const RecommendedEcosystemScreen = ({
 
   const renderItem: ListRenderItem<IEcosystem> = ({ item }) => (
     <View>
-      <HorizontalCards
-        title={item.name}
-        image={item.pic}
-        member={item.followerCount.toString()}
-        onPress={() => {
-          nav.navigate("Ecosystem", {
-            screen: "EcosystemDetails",
-            params: {
-              headerTitle: item.name,
-              title: item.name,
-              desc: item.description,
-              image: item.pic,
-              member: item.followerCount.toString(),
-              rating: item.rating.toString(),
-            },
-          });
-        }}
-        rate={item.rating.toString()}
-      />
+      <View style={styles.horizontalCard}>
+        <HorizontalCards
+          title={item.name}
+          image={item.pic}
+          member={item.followerCount.toString()}
+          onPress={() => {
+            nav.navigate("Ecosystem", {
+              screen: "EcosystemDetails",
+              params: {
+                headerTitle: item.name,
+                title: item.name,
+                desc: item.description,
+                image: item.pic,
+                member: item.followerCount.toString(),
+                rating: item.rating.toString(),
+              },
+            });
+          }}
+          rate={item.rating.toString()}
+        />
+      </View>
     </View>
   );
 
   return (
     <View style={styles.container}>
       <View>
-        {ecosystems && <FlatList data={ecosystems} renderItem={renderItem} />}
+        {ecosystems && (
+          <FlatList
+            data={ecosystems}
+            renderItem={renderItem}
+            ItemSeparatorComponent={() => <Spacer variant={"l"} />}
+            ListHeaderComponent={() => <Spacer variant={"xl"} />}
+            ListFooterComponent={() => <Spacer variant={"xl"} />}
+          />
+        )}
       </View>
     </View>
   );
@@ -91,6 +102,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     justifyContent: "center",
   },
+  horizontalCard: {
+    paddingHorizontal: 4,
+    paddingTop: 2,
+  },
 });
 
 export default RecommendedEcosystemScreen;
-- 
GitLab