From 0c828308aa1c09a53ebc3bde56d5fdbe97cce997 Mon Sep 17 00:00:00 2001
From: Finlay <fpiroth@calpoly.edu>
Date: Tue, 31 May 2022 18:30:07 -0700
Subject: [PATCH] tuned up the spacing on minority tags

---
 components/Home/Home.tsx               |  9 +++---
 components/Profile/ProfileSelector.tsx | 45 +++++++++++++++-----------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/components/Home/Home.tsx b/components/Home/Home.tsx
index 9cadb8a..95eed6f 100644
--- a/components/Home/Home.tsx
+++ b/components/Home/Home.tsx
@@ -38,9 +38,10 @@ const styles = StyleSheet.create({
   },
   minoritycellcontainer: {
     borderRadius: 20.35,
-    marginHorizontal: 8,
     marginTop: minorityGroupCellPadding,
-    width,
+    minWidth: width,
+    marginHorizontal: 5,
+    flexGrow: 0,
     height,
     flex: 1,
     flexDirection: "row",
@@ -52,13 +53,13 @@ const styles = StyleSheet.create({
     width: imgdimensions,
     height: imgdimensions,
     borderRadius: imgdimensions,
-    marginLeft: "5%",
-    marginRight: "5%",
+    marginHorizontal: 5,
   },
   minoritycelltitle: {
     fontFamily: "Mada-Medium",
     fontSize: 12,
     textAlign: "center",
+    paddingHorizontal: 10,
   },
   resultCard: {
     position: "absolute",
diff --git a/components/Profile/ProfileSelector.tsx b/components/Profile/ProfileSelector.tsx
index 706d34b..254b2b5 100644
--- a/components/Profile/ProfileSelector.tsx
+++ b/components/Profile/ProfileSelector.tsx
@@ -11,6 +11,7 @@ import {
   Image,
   Pressable,
   ImageSourcePropType,
+  ScrollView,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import defaultUser from "../../constants/defaultData";
@@ -158,23 +159,29 @@ function Base({ navigation }: BaseProps) {
           }
         />
         <Text style={styles.subtitle}>My Businesses</Text>
-        {user &&
-          businesses
-            .filter((b) => b.userID === user.id)
-            .map((b, i) => (
-              <BusinessSelector
-                key={b!.id}
-                business={b!}
-                onPress={() =>
-                  navigation.navigate("Business", { reduxIndex: i })
-                }
-              />
-            ))}
-        <Selector
-          title="Create New Business"
-          source={plusImage}
-          onPress={() => navigation.navigate("CreateBusiness")}
-        />
+        {user && (
+          <ScrollView
+            scrollEnabled={businesses.length > 3}
+            showsVerticalScrollIndicator={false}
+          >
+            {businesses
+              .filter((b) => b.userID === user.id)
+              .map((b, i) => (
+                <BusinessSelector
+                  key={b!.id}
+                  business={b!}
+                  onPress={() =>
+                    navigation.navigate("Business", { reduxIndex: i })
+                  }
+                />
+              ))}
+            <Selector
+              title="Create New Business"
+              source={plusImage}
+              onPress={() => navigation.navigate("CreateBusiness")}
+            />
+          </ScrollView>
+        )}
       </View>
       <Margin />
     </SafeAreaView>
@@ -199,8 +206,8 @@ const styles = StyleSheet.create({
     padding: 15,
     shadowColor: "#393939",
     shadowOpacity: 0.1,
-    shadowOffset: { width: 0, height: 30 },
-    shadowRadius: 30,
+    shadowOffset: { width: 0, height: 5 },
+    shadowRadius: 2.5,
   },
   selectorImage: {
     borderRadius: 100,