complated

screens/e-services/ui/EServicesCategoryScreen.tsx

@@ -5,7 +5,6 @@ import { Image } from 'expo-image';
 import { router } from 'expo-router';
 import { ChevronLeft, XIcon } from 'lucide-react-native';
 import React, { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { ActivityIndicator, FlatList, Modal, Text, TouchableOpacity, View } from 'react-native';
 import { RefreshControl } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -14,16 +13,15 @@ import { eservices_api } from '../lib/api';
 
 const dark = {
   bg: '#0f172a',
-  card: '#1f2937',
+  card: '#334155',
   border: '#1e293b',
   muted: '#334155',
-  text: '#f8fafc',
-  subText: '#cbd5f5',
+  text: '#E5B037',
+  subText: '#0B0F2C',
 };
 
 export default function EServicesCategoryScreen() {
   const { isDark } = useTheme();
-  const { t } = useTranslation();
   const [modalVisible, setModalVisible] = useState(false);
   const webviewRef = useRef<WebView>(null);
   const [webUrl, setWebUrl] = React.useState<string | null>(null);
@@ -88,7 +86,7 @@ export default function EServicesCategoryScreen() {
       <FlatList
         data={categories}
         keyExtractor={(item) => `${item.id}-${item.name}`}
-        contentContainerStyle={{ gap: 12 }}
+        contentContainerStyle={{ gap: 12, paddingBottom: 80 }}
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
@@ -97,52 +95,34 @@ export default function EServicesCategoryScreen() {
             colors={['#3b82f6']}
           />
         }
-        ListHeaderComponent={() => (
-          <View>
-            <Text
-              style={{
-                fontSize: 22,
-                fontWeight: '800',
-                color: isDark ? dark.text : '#020617',
-              }}
-            >
-              {t('Davlat xizmatlari kategoriyalari')}
-            </Text>
-
-            <Text
-              style={{
-                fontSize: 14,
-                marginTop: 4,
-                color: isDark ? dark.subText : '#64748b',
-              }}
-            >
-              {t('Kerakli xizmat turini tanlang')}
-            </Text>
-          </View>
-        )}
         renderItem={({ item }) => (
           <TouchableOpacity
             activeOpacity={0.7}
             onPress={() => handlePress(item)}
             style={{
-              backgroundColor: isDark ? dark.card : '#ffffff',
-              padding: 14,
+              marginHorizontal: 1,
+              backgroundColor: isDark ? '#FDFDFD' : '#ffffff',
               borderRadius: 16,
               flexDirection: 'row',
               alignItems: 'center',
               borderWidth: isDark ? 1 : 0,
               borderColor: isDark ? dark.border : 'transparent',
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.15,
+              shadowRadius: 4,
+              elevation: 2,
             }}
           >
             <View
               style={{
-                width: 120,
-                height: 70,
+                width: '100%',
+                height: 100,
                 borderRadius: 12,
-                backgroundColor: isDark ? dark.muted : '#e2e8f0',
                 alignItems: 'center',
                 justifyContent: 'center',
                 marginRight: 14,
+                padding: 2,
                 overflow: 'hidden',
               }}
             >
@@ -156,31 +136,6 @@ export default function EServicesCategoryScreen() {
                 <Text style={{ fontWeight: '700', color: dark.text }}>{item.name[0]}</Text>
               )}
             </View>
-
-            <View style={{ flex: 1 }}>
-              <Text
-                numberOfLines={2}
-                style={{
-                  fontSize: 16,
-                  fontWeight: item.id === 0 ? '700' : '600',
-                  color: isDark ? dark.text : '#020617',
-                }}
-              >
-                {item.name}
-              </Text>
-
-              {item.id === 0 && (
-                <Text
-                  style={{
-                    fontSize: 13,
-                    marginTop: 4,
-                    color: dark.subText,
-                  }}
-                >
-                  Tezkor va qulay xizmat
-                </Text>
-              )}
-            </View>
           </TouchableOpacity>
         )}
       />