Updated UI and Added some accessibility features

codeAbinash · May 12, 2023 · d5d35c8 · d5d35c8
1 parent 38f01c0
commit d5d35c8
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 15 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -103,8 +103,8 @@ android {
         applicationId "com.englishdictionary.rn"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 2
-        versionName "2.0"
+        versionCode 3
+        versionName "2.0.1"
     }
 
     splits {

diff --git a/app/screens/Home/Favorites.tsx b/app/screens/Home/Favorites.tsx
@@ -55,7 +55,7 @@ const Favorites = ({ navigation }: any) => {
       <View className='p-5 gap-5 bg-white dark:bg-black'>
         <Text className='text-2xl font-bold mt-4 ml-5 text-[#222] dark:text-[#ddd]'>Favorite Words</Text>
         <View className='h-[85%] justify-center items-center'>
-          <Image source={icons.favorites} style={{ width: 60, height: 60, resizeMode: 'contain', tintColor: '#999999' }} />
+          <Image source={icons.favorites} style={{ width: 55, height: 55, resizeMode: 'contain', tintColor: '#999999' }} />
           <Text className='text-lg mt-7'>
             No favorite words yet.
           </Text>

diff --git a/app/screens/Home/Home.tsx b/app/screens/Home/Home.tsx
@@ -73,16 +73,16 @@ const Home = ({ navigation }: any) => {
           </View>
         </View>
       </View>
-      <View className='p-5'>
-        <Text className='text-lg font-bold text-black dark:text-white'>Check your memory</Text>
-        <TouchableOpacity className='bg-[#99999933] mt-2 rounded-3xl overflow-hidden' activeOpacity={0.6}
+      <View className='p-5 pt-4'>
+        <TouchableOpacity className='bg-[#99999933] rounded-3xl overflow-hidden' activeOpacity={0.6}
           onPress={randomWord ? () => navigation.navigate('Search', { search: randomWord }) : () => { }}
         >
           <View className='h-44 justify-center items-center'>
             {
-              !randomWord ? <Text className='text-lg text-black dark:text-white'>Add words to your favorites to see them here</Text>
+              !randomWord ? <Text className='text-lg text-black dark:text-white text-center'>{"Add words to your favorites\n to see them here"}</Text>
                 : <Text className='text-3xl font-bold text-black dark:text-white'>{randomWord}</Text>
             }
+            <Text className='text-sm font-normal text-center text-[#999999cc]'>Check your memory</Text>
           </View>
         </TouchableOpacity>
         <View className='justify-end items-end pt-2 pr-3'>
@@ -98,6 +98,7 @@ const Home = ({ navigation }: any) => {
         <Text className='mt-44 text-lg text-center' style={{ color: colors.get('accent') }}>More Features are coming soon</Text>
 
       </View>
+
     </View >
   )
 }

diff --git a/app/screens/Home/More.tsx b/app/screens/Home/More.tsx
@@ -83,6 +83,11 @@ const More = ({ navigation }: any) => {
             </TouchableOpacity>
           })}
         </View>
+
+        <Text className='mt-20 text-center text-black dark:text-white'>
+          Made with ❤️ by Abinash
+        </Text>
+
       </View>
     </ScrollView>
   )

diff --git a/app/screens/Home/Search.tsx b/app/screens/Home/Search.tsx
@@ -68,7 +68,6 @@ const Search = ({ navigation, route }: any) => {
    async function search(word: string) {
       word = lastSearchedWord = word.trim()
 
-
       if (!word) {
          setSearchedResult(null)
          setSearchedWord('')
@@ -128,12 +127,9 @@ const Search = ({ navigation, route }: any) => {
    }
 
    useEffect(() => {
-
       return () => {
          lastSearchedWord = ''
       }
-
-
    }, [searchWord])
 
 
@@ -203,9 +199,9 @@ function SearchResultUI(data: any, word: any, search: Function, toggleFavorite:
                <View className=''>
                   <View className='flex-row justify-between items-center p-5'>
                      <View>
-                        <Text className='text-black dark:text-white text-3xl font-bold'>{result.word}</Text>
+                        <Text className='text-black dark:text-white text-3xl font-bold' selectable>{result.word}</Text>
                         {/* <Text className='text-lg'>{result.phonetic || 'Phonetics is not available'}</Text> */}
-                        <Text className='text-lg text-black dark:text-white'>{result.phonetic || getPhoneticsText(result) || '...'}</Text>
+                        <Text selectable className='text-lg text-black dark:text-white'>{result.phonetic || getPhoneticsText(result) || '...'}</Text>
                      </View>
                      <View className='flex-row mt-2'>
                         <TouchableOpacity className='p-3' onPress={() => toggleFavorite()}>
@@ -229,13 +225,13 @@ function SearchResultUI(data: any, word: any, search: Function, toggleFavorite:
                                        return <View className='pt-6' key={index}>
                                           <View className=''>
                                              {/* <Text className='text-lg text-black dark:text-white font-bold'>{index + 1}. </Text> */}
-                                             <Text className='text-lg text-black dark:text-white'> {'\u2022  ' + definitions.definition}</Text>
+                                             <Text selectable className='text-lg text-black dark:text-white'> {'\u2022  ' + definitions.definition}</Text>
                                           </View>
                                           {  // Check if the example is available
                                              definitions.example &&
                                              <View className=''>
                                                 {/* <Text className='text-base font-bold italic'>Example : </Text> */}
-                                                <Text className='text-lg pl-4 italic'>e.g.  {definitions.example}</Text>
+                                                <Text selectable className='text-lg pl-4 italic'>e.g.  {definitions.example}</Text>
                                              </View>
                                           }
                                           { // Check if the synonyms are available