styling

calblueprint · Dec 4, 2024 · f060778 · f060778
1 parent d2c2b57
commit f060778
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 52 deletions.
diff --git a/src/assets/images/check_small.svg b/src/assets/images/check_small.svg
diff --git 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 (
     <View style={styles.container}>
       <View style={styles.leftPanel}>
-        <View style={styles.selectTextContainer}>
-          <Text style={styles.selectText}>Select Resources Level:</Text>
+        <View style={styles.selectContainer}>
+          <Text style={styles.selectText}>Select Resources Level</Text>
+          <View style={styles.selectJurisdictionContainer}>
+            {jurisdiction.map(level => (
+              <View key={level} style={styles.checkButtonContainer}>
+                <TouchableOpacity style={styles.checkButton}></TouchableOpacity>
+                <Text style={styles.buttonText}>{level}</Text>
+              </View>
+            ))}
+          </View>
         </View>
-        <View style={styles.selectJurisdictionContainer}>
-          <View style={styles.checkButton}></View>
-          <View style={styles.checkButton}></View>
-        </View>
-        <View style={styles.selectTextContainer}>
-          <Text style={styles.selectText}>Select Resources Type:</Text>
-        </View>
-        {filters.map((filter, index) => (
-          <TouchableOpacity
-            key={index}
-            style={
-              selectedFilter === filter
-                ? styles.selectedFilterButton
-                : styles.filterButton
-            }
-            onPress={() => applyFilter(filter)}
-          >
-            <Text
+
+        <View style={styles.selectContainer}>
+          <Text style={styles.selectText}>Select Resources Type</Text>
+
+          {filters.map((filter, index) => (
+            <TouchableOpacity
+              key={index}
               style={
                 selectedFilter === filter
-                  ? styles.selectedButtonText
-                  : styles.buttonText
+                  ? styles.selectedFilterButton
+                  : styles.filterButton
               }
+              onPress={() => applyFilter(filter)}
             >
-              {filter}
-            </Text>
-          </TouchableOpacity>
-        ))}
+              <Text
+                style={
+                  selectedFilter === filter
+                    ? styles.selectedButtonText
+                    : styles.buttonText
+                }
+              >
+                {filter}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
       </View>
 
       <ScrollView style={styles.rightPanel}>

diff --git 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,