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,