28 change seek help page + styling (#31)

* [refactor] nav to seekhelp

* resource level styling

* styling

* remove check, wait for angeline's pr

* [refactor] nav to seekhelp

* styling

* level logic and right panel styling

* decrease slice

* font colors

* small changes

* small changes to appease eslint

---------

Co-authored-by: philipye314 <[email protected]>

App.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import NavigationBar from '@/navigation/BottomTabNavigator';
 

src/components/Resource/Resource.tsx

@@ -24,7 +24,7 @@ export default function ResourceT({
             <Text style={styles.orgName}>{org_name}</Text>
             {!expanded && (
               <Text style={styles.summaryPreview}>
-                {summary.slice(0, 60)}...
+                {summary.slice(0, 80)}...
               </Text>
             )}
           </TouchableOpacity>
@@ -40,19 +40,20 @@ export default function ResourceT({
           >
             <Text style={styles.summary}>{summary}</Text>
 
-            <View style={styles.infoContainer}>
-              <Text style={styles.label}>Address:</Text>
-              <Text style={styles.info}>{address}</Text>
-            </View>
-
-            <View style={styles.infoContainer}>
-              <Text style={styles.label}>Office:</Text>
-              <Text style={styles.info}>{phone_number}</Text>
-            </View>
+            <View style={styles.fieldsContainer}>
+              <View style={styles.infoContainer}>
+                <Text style={styles.label}>Address:</Text>
+                <Text style={styles.info}>{address}</Text>
+              </View>
+              <View style={styles.infoContainer}>
+                <Text style={styles.label}>Office:</Text>
+                <Text style={styles.info}>{phone_number}</Text>
+              </View>
 
-            <View style={styles.infoContainer}>
-              <Text style={styles.label}>Office Hours:</Text>
-              <Text style={styles.info}>{office_hours}</Text>
+              <View style={styles.infoContainer}>
+                <Text style={styles.label}>Office Hours:</Text>
+                <Text style={styles.info}>{office_hours}</Text>
+              </View>
             </View>
           </TouchableOpacity>
         )}

src/components/Resource/styles.tsx

@@ -4,46 +4,53 @@ export const styles = StyleSheet.create({
   resourceCard: {
     backgroundColor: '#fff',
     borderRadius: 10,
-    padding: 15,
-    margin: 20,
+    paddingHorizontal: 30,
+    paddingVertical: 25,
     shadowColor: '#000',
-    shadowOpacity: 0.1,
-    shadowRadius: 5,
-    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 3 },
+    rowGap: 10,
   },
   headerContent: {
     flexDirection: 'column',
     width: '95%',
   },
   orgName: {
-    fontSize: 18,
-    paddingTop: 5,
+    fontSize: 24,
     fontWeight: 'bold',
+    color: '#444444',
   },
   summaryPreview: {
-    fontSize: 14,
-    color: '#666',
-    paddingBottom: 5,
+    marginTop: 10,
+    fontSize: 18,
+    color: '#9B9B9B',
   },
   expandedContent: {
-    marginTop: 10,
+    rowGap: 15,
   },
   summary: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 10,
+    fontSize: 18,
+    color: '#4C4C4C',
   },
+  fieldsContainer: {
+    flexDirection: 'column',
+    rowGap: 5,
+  },
+
   infoContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: 10,
   },
+
   label: {
     fontWeight: '600',
+    fontSize: 18,
     marginRight: 5,
+    color: '#4C4C4C',
   },
   info: {
-    fontSize: 14,
-    color: '#333',
+    fontSize: 18,
+    color: '#4C4C4C',
   },
 });

src/components/TabBarItem/TabBarItem.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Text, View } from 'react-native';
 
 // import { colors } from '@/styles/colors';

src/navigation/BottomTabNavigator.tsx

@@ -26,6 +26,7 @@ export default function NavigationBar() {
       screenOptions={{
         tabBarActiveTintColor: colors.orange,
         tabBarInactiveTintColor: colors.grey,
+        headerShown: false,
       }}
     >
       <Tab.Screen

src/navigation/stacks/SeekHelpNavigator.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import SeekHelp from '@/screens/SeekHelp';
-import ResourceList from '@/screens/SeekHelp/ResourceList';
 import { SeekHelpStackParams } from '../types';
 
 const SeekHelpStack = createNativeStackNavigator<SeekHelpStackParams>();
@@ -10,7 +9,6 @@ export default function SeekHelpNavigator() {
   return (
     <SeekHelpStack.Navigator>
       <SeekHelpStack.Screen name="SeekHelp" component={SeekHelp} />
-      <SeekHelpStack.Screen name="ResourceList" component={ResourceList} />
     </SeekHelpStack.Navigator>
   );
 }

src/screens/HealingResources/HFHGuide/index.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Pressable, ScrollView, Text, View } from 'react-native';
-import RenderHTML from 'react-native-render-html';
+import { ScrollView, Text, View } from 'react-native';
+import RenderHTML, { MixedStyleRecord } from 'react-native-render-html';
 import { useFonts } from 'expo-font';
 import { HealingScreenProps } from '@/navigation/types';
-import { MixedStyleRecord } from 'react-native-render-html';
 import {
   getNextSubheadingId,
   getSubheadingById,
@@ -95,4 +94,4 @@ const htmlStyles: MixedStyleRecord = {
     lineHeight: 24,
     color: '#444',
   },
-};
+};

src/screens/Home/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Image, Text, TouchableOpacity, View } from 'react-native';
-import logo from 'src/assets/images/JDI_LOGO.png';
+import { Text, TouchableOpacity, View } from 'react-native';
 import { styles } from './styles';
 
 export default function HomeScreen() {