diff --git a/src/assets/images/check_small.svg b/src/assets/images/check_small.svg new file mode 100644 index 0000000..033d6c2 --- /dev/null +++ b/src/assets/images/check_small.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/screens/SeekHelp/index.tsx b/src/screens/SeekHelp/index.tsx index a50a8ff..e153fbb 100644 --- a/src/screens/SeekHelp/index.tsx +++ b/src/screens/SeekHelp/index.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState } from 'react'; import { ScrollView, Text, TouchableOpacity, View } from 'react-native'; +import Check from 'src/assets/images/check_small.svg'; import ResourceT from '@/components/Resource/Resource'; import { getSeekHelpData } from '@/supabase/queries/generalQueries'; import { Resource as ResourceType } from '@/types/types'; @@ -57,37 +58,43 @@ export default function ResourceList() { return ( - - Select Resources Level: + + Select Resources Level + + {jurisdiction.map(level => ( + + + {level} + + ))} + - - - - - - Select Resources Type: - - {filters.map((filter, index) => ( - applyFilter(filter)} - > - + Select Resources Type + + {filters.map((filter, index) => ( + applyFilter(filter)} > - {filter} - - - ))} + + {filter} + + + ))} + diff --git a/src/screens/SeekHelp/styles.ts b/src/screens/SeekHelp/styles.ts index 7d79750..96ab5a4 100644 --- a/src/screens/SeekHelp/styles.ts +++ b/src/screens/SeekHelp/styles.ts @@ -9,8 +9,10 @@ export const styles = StyleSheet.create({ leftPanel: { flexDirection: 'column', width: '23%', - backgroundColor: '#f7f9fc', + backgroundColor: '#F7F9FC', paddingHorizontal: 10, + rowGap: 30, // distance between select resource level and resource type + paddingTop: 20, // distance from top of left panel }, rightPanel: { display: 'flex', @@ -21,56 +23,45 @@ export const styles = StyleSheet.create({ padding: 10, }, filterButton: { - backgroundColor: '#f7f9fc', - borderRadius: 5, - paddingVertical: 20, - paddingHorizontal: 25, + borderRadius: 10, + paddingVertical: 15, + paddingHorizontal: 20, width: '100%', alignItems: 'flex-start', - justifyContent: 'center', - borderWidth: 1, - borderColor: '#f7f9fc', }, selectedFilterButton: { - backgroundColor: '#e8e8e8', - borderColor: '#e8e8e8', + backgroundColor: '#E6EAF1', + borderColor: '#E6EAF1', borderRadius: 10, - marginVertical: 10, - marginLeft: 5, - paddingVertical: 10, + paddingVertical: 15, paddingHorizontal: 20, - width: '95%', alignItems: 'flex-start', - borderWidth: 1, - justifyContent: 'center', - shadowColor: '#000', - shadowOpacity: 0.1, - shadowRadius: 5, - shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.08, + shadowRadius: 3, + shadowOffset: { width: 0, height: 3 }, }, selectedButtonText: { - fontSize: 16, + fontSize: 18, color: '#444', fontWeight: '600', }, buttonText: { - fontSize: 16, + fontSize: 18, color: '#444', }, selectJurisdictionContainer: { backgroundColor: '#FFF', - marginHorizontal: 18, borderRadius: 10, padding: 22, shadowColor: '#000', shadowOpacity: 0.08, shadowRadius: 3, - shadowOffset: { width: -2, height: 3 }, + shadowOffset: { width: 0, height: 3 }, rowGap: 32, }, - selectTextContainer: { - marginVertical: 10, + selectContainer: { marginHorizontal: 15, + rowGap: 10, }, selectText: { color: '#9B9B9B', @@ -80,6 +71,11 @@ export const styles = StyleSheet.create({ lineHeight: 21, letterSpacing: -0.154, }, + checkButtonContainer: { + flexDirection: 'row', + columnGap: 20, + width: '100%', + }, checkButton: { borderRadius: 5, borderWidth: 1,