website ui changes

.gitignore

@@ -2,5 +2,5 @@ npm-debug.log
 node_modules/**/*
 yarn-error.log
 .DS_Store
-
-.now
+.idea
+.now

website/.gitignore

@@ -6,4 +6,4 @@ build/**/*
 web-build
 build
 
-.now
+.now

website/App.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { Dimensions, StatusBar, View } from "react-native";
-import { version } from "@expo/vector-icons/package.json";
+import packageJson from "@expo/vector-icons/package.json";
 import {
   AntDesign,
   Octicons,
@@ -16,7 +16,6 @@ import {
   MaterialIcons,
   MaterialCommunityIcons,
   SimpleLineIcons,
-  Ocitcons,
   Zocial,
   Fontisto,
 } from "@expo/vector-icons";
@@ -46,16 +45,12 @@ const ShowHeader = IsPwa || !IsSmallScreen;
 
 const linking = {
   config: {
-    Index: {
-      initialRouteName: "List",
-      path: "/",
       screens: {
         List: "/",
         Help: "help",
         Details: {
           path: ":family/:name",
         },
-      },
     },
   },
 };
@@ -78,7 +73,7 @@ function Browsing() {
         name="List"
         component={List}
         options={{
-          title: `@expo/vector-icons@${version}`,
+          title: `@expo/vector-icons@${packageJson.version}`,
         }}
       />
       <BrowsingStack.Screen name="Details" component={Detail} />

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,33 @@ 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,
+    textAlign: "center",
     paddingVertical: 15,
+    justifyContent: "center",
     alignItems: "center",
-    borderBottomWidth: 1,
-    borderBottomColor: "#e3e3e3",
+    gap: 6,
+    backgroundColor: "#fafafa",
+    width: "100%",
   },
   textView: {
     flexDirection: "column",
-    marginLeft: 20,
   },
   name: {
     fontSize: 18,
-    fontWeight: "bold",
+    fontWeight: "500",
   },
   family: {
     fontSize: 13,
     fontWeight: "normal",
+    color: "#7e7e7e",
   },
 });