in legal rights page fixed grid spacing, styling, etc.

calblueprint · Dec 7, 2024 · 82b6148 · 82b6148
1 parent 1d330d6
commit 82b6148
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 78 deletions.
diff --git a/src/components/LegalRightsItem/index.tsx b/src/components/LegalRightsItem/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, Pressable, Text } from 'react-native';
+import { Image, Pressable, Text, View } from 'react-native';
 import placeholderPoster from '@/assets/images/placeholder.png';
 import { getPosterLink } from '@/supabase/queries/storageQueries';
 import { VideoSectionItemProps } from '@/types/types';
@@ -24,7 +24,11 @@ export default function LegalRightsItem({
             : placeholderPoster
         }
       />
-      <Text style={styles.moduleTitle}>{section.title}</Text>
+      <View style={{ flex: 1 }}>
+        <Text style={styles.moduleTitle} numberOfLines={2}>
+          {section.title}
+        </Text>
+      </View>
     </Pressable>
   );
 }
diff --git a/src/components/LegalRightsItem/styles.ts b/src/components/LegalRightsItem/styles.ts
@@ -1,57 +1,24 @@
 import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
-  title: {
-    fontWeight: 'bold',
-    fontSize: 30,
-    padding: 10,
-    marginLeft: 20,
-  },
-  buttonContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 20,
-    paddingBottom: 15,
-  },
-  captionButtons: {
-    borderRadius: 30,
-    width: 400,
-    height: 50,
-    borderWidth: 1,
-    borderColor: '#D9D9D9',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  captionButtonsPressed: {
-    backgroundColor: '#D9D9D9',
-  },
-  buttonText: {
-    fontWeight: 'bold',
-  },
-  preaModulesView: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    gap: 20,
-    flex: 3,
-  },
   preaModule: {
-    paddingTop: 15,
-  },
-  moduleTitle: {
-    paddingTop: 10,
-    fontSize: 20,
-    fontWeight: 'semibold',
+    flex: 1,
+    margin: 5,
+    alignSelf: 'stretch',
   },
+
   modulePoster: {
-    width: 300,
-    height: 200,
+    width: '100%',
+    aspectRatio: 3 / 2,
     borderRadius: 10,
   },
-  tinyLogo: {
-    width: 20,
-    height: 20,
+
+  moduleTitle: {
+    paddingTop: 10,
+    fontSize: 20,
+    fontWeight: '600',
+    flexWrap: 'wrap',
+    width: '100%',
+    flexShrink: 1,
   },
 });
diff --git a/src/screens/LegalRights/index.tsx b/src/screens/LegalRights/index.tsx
@@ -95,15 +95,19 @@ export default function LegalRights({
       </View>
 
       <ScrollView>
-        <View style={styles.preaModulesView}>
-          {currentModules.map(section => (
-            <LegalRightsItem
-              key={section.id}
-              section={section}
-              onPress={goToVideo}
-            />
-          ))}
-        </View>
+        <FlatList
+          style={styles.preaGrid}
+          data={currentModules}
+          renderItem={({ item }) => (
+            <LegalRightsItem key={item.id} section={item} onPress={goToVideo} />
+          )}
+          numColumns={3}
+          columnWrapperStyle={{
+            justifyContent: 'space-between',
+            gap: 40,
+            marginBottom: 10,
+          }}
+        />
       </ScrollView>
     </>
   );

diff --git a/src/screens/LegalRights/styles.ts b/src/screens/LegalRights/styles.ts
@@ -29,26 +29,8 @@ export const styles = StyleSheet.create({
   buttonText: {
     fontWeight: 'bold',
   },
-  preaModulesView: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    gap: 20,
-    flex: 3,
-  },
-  preaModule: {
-    paddingTop: 15,
-  },
-  moduleTitle: {
-    paddingTop: 10,
-    fontSize: 20,
-    fontWeight: 'semibold',
-  },
-  modulePoster: {
-    width: 300,
-    height: 200,
-    borderRadius: 10,
+  preaGrid: {
+    paddingHorizontal: 60,
   },
   tinyLogo: {
     width: 20,