website ui changes

.gitignore

@@ -3,4 +3,5 @@ node_modules/**/*
 yarn-error.log
 .DS_Store
 
-.now
+.now
+.vscode

website/components/FilterButton.js

@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: '#515460',
-    width: 90,
+    width: 100,
     paddingVertical: 5,
   },
 });

website/components/ListItem.js

@@ -4,7 +4,7 @@ import Icon from "./Icon";
 
 const ListItem = ({ name, family, onPress }) => {
   return (
-    <TouchableOpacity onPress={onPress}>
+    <TouchableOpacity onPress={onPress} style={styles.mainContainer}>
       <View style={styles.container}>
         <View style={{ width: 50, justifyContent: 'center', alignItems: 'center' }}>
           <Icon family={family} name={name} size={30} />
@@ -20,25 +20,40 @@ const ListItem = ({ name, family, onPress }) => {
 };
 
 const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    width: "49.5%",
+    marginRight: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   container: {
-    flexDirection: "row",
-    paddingLeft: 20,
+    // flexDirection: "row",
+    // paddingLeft: 20,
+    textAlign: "center",
     paddingVertical: 15,
+    justifyContent: "center",
     alignItems: "center",
-    borderBottomWidth: 1,
-    borderBottomColor: "#e3e3e3",
+    gap: 6,
+    // borderBottomWidth: 1,
+    // borderBottomColor: "#e3e3e3",
+    // borderWidth: 1,
+    // borderColor: "#e3e3e3",
+    backgroundColor: "#fafafa",
+    width: "100%",
   },
   textView: {
     flexDirection: "column",
-    marginLeft: 20,
+    // marginLeft: 20,
   },
   name: {
     fontSize: 18,
-    fontWeight: "bold",
+    fontWeight: "500",
   },
   family: {
     fontSize: 13,
     fontWeight: "normal",
+    color: "#7e7e7e",
   },
 });