fix(mobile): 💄 Minor UI fixes

mobile/components/card-footer.js

@@ -11,9 +11,7 @@ export const CardFooter = ({ text }) => {
 
   const isWithinLast36Hours = checkIfWithinLast36Hours(createdAt)
 
-  const footerItems = [views && `${views} views`, timeAgo, readingTime && `${readingTime} mins read`]
-    .filter(Boolean)
-    .join(' · ')
+  const footerItems = [views && `${views} views`, timeAgo, readingTime && `${readingTime}`].filter(Boolean).join(' · ')
 
   return (
     <>

mobile/components/context-highlighted-word.js

@@ -15,7 +15,7 @@ const HighlightedWord = ({ word: { arabic } }) => {
   const textStyles = StyleSheet.create({
     arabicText: {
       ...sharedStyle.arabicBody,
-      color: theme.colors.primary,
+
       fontSize: 43,
       lineHeight: 75,
       paddingHorizontal: 5
@@ -24,9 +24,9 @@ const HighlightedWord = ({ word: { arabic } }) => {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const animateBorderOpacity = useCallback(() => {
-    const toValue = isBorderVisible ? 0.5 : 1
+    const toValue = isBorderVisible ? 0.2 : 1
     Animated.timing(borderOpacity, {
-      duration: 1000,
+      duration: 750,
       toValue,
       useNativeDriver: false
     }).start(() => {

mobile/components/context-highlighted.js

@@ -15,19 +15,34 @@ const WordsContextHighLighted = ({ arabicSentence, arabicWord, sentenceIsComplet
       fontSize: 43,
       lineHeight: 75,
       paddingHorizontal: 5
+    },
+    arabicTextInactive: {
+      ...sharedStyle.arabicBody,
+      color: theme.colors.outline,
+      fontSize: 43,
+      lineHeight: 75,
+      paddingHorizontal: 5
     }
   })
 
   const renderWords = () =>
-    arabicSentence.map((word) =>
-      word.id === arabicWord.id && !sentenceIsComplete ? (
-        <HighlightedWord word={word} key={word.id} />
-      ) : (
-        <Text style={textStyles.arabicText} key={word.id}>
-          {word.arabic}
-        </Text>
-      )
-    )
+    arabicSentence.map((word) => {
+      if (word.id === arabicWord.id && !sentenceIsComplete) {
+        return <HighlightedWord word={word} key={word.id} />
+      } else if (word.id > arabicWord.id) {
+        return (
+          <Text style={textStyles.arabicTextInactive} key={word.id}>
+            {word.arabic}
+          </Text>
+        )
+      } else {
+        return (
+          <Text style={textStyles.arabicText} key={word.id}>
+            {word.arabic}
+          </Text>
+        )
+      }
+    })
 
   return (
     <View style={{ direction: 'rtl', flexDirection: 'row', flexWrap: 'wrap', padding: 0, paddingBottom: 10 }}>

mobile/components/play-sound.js

@@ -14,7 +14,7 @@ export default function PlaySound({ audioFileNames, onPlayingWord, onFinish }) {
 
   const { isLoaded, playSound, stopSound } = useAudioPlayer()
   const [isPlaying, setIsPlaying] = useState(false)
-  const buttonText = isPlaying ? 'Stop' : 'Play'
+  const buttonText = isPlaying ? 'STOP' : 'PLAY'
 
   const silentBorderColor = theme.colors.elevation.level5
   const playingBorderColor = theme.colors.primary
@@ -94,7 +94,7 @@ export default function PlaySound({ audioFileNames, onPlayingWord, onFinish }) {
         borderColor: isPlaying ? playingBorderColor : silentBorderColor
       }}
     >
-      <Text style={{ ...sharedStyle.answerText }}>{buttonText}</Text>
+      <Text style={{ ...sharedStyle.actionTextPrimary }}>{buttonText}</Text>
     </Button>
   )
 }

mobile/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1445.2.358",
+  "version": "1445.2.359",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],

mobile/routes/root.js

@@ -1,5 +1,5 @@
 import { NavigationContainer } from '@react-navigation/native'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { Provider as PaperProvider } from 'react-native-paper'
 import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -19,42 +19,39 @@ const darkModeSelector = (state) => state.isDarkMode
 function Root() {
   const isDarkModeOn = useSelector(darkModeSelector)
 
-  // Using useMemo for better performance
-  const activeTheme = useMemo(() => {
-    return isDarkModeOn ? CombinedDarkTheme : CombinedDefaultTheme
-  }, [isDarkModeOn])
-
-  // Icon mapping
-  const getIconName = (routeName) => {
-    switch (routeName) {
-      case SCREENS.text: {
-        return 'text'
-      }
-      case SCREENS.words: {
-        return 'abjad-arabic'
-      }
-      case SCREENS.settings: {
-        return 'cog'
-      }
-      default: {
-        return 'question'
-      }
-    }
-  }
-
   return (
-    <PaperProvider theme={activeTheme}>
-      <NavigationContainer theme={activeTheme}>
+    <PaperProvider theme={isDarkModeOn.isDarkMode ? CombinedDefaultTheme : CombinedDarkTheme}>
+      <NavigationContainer theme={isDarkModeOn.isDarkMode ? CombinedDefaultTheme : CombinedDarkTheme}>
         <Tab.Navigator
           barStyle={{
-            backgroundColor: activeTheme.colors.background,
-            borderTopColor: activeTheme.colors.inverseOnSurface,
+            backgroundColor: isDarkModeOn.isDarkMode
+              ? CombinedDefaultTheme.colors.background
+              : CombinedDarkTheme.colors.background,
+            borderTopColor: isDarkModeOn.isDarkMode
+              ? CombinedDefaultTheme.colors.inverseOnSurface
+              : CombinedDarkTheme.colors.inverseOnSurface,
             borderTopWidth: 1,
             height: 75
           }}
           screenOptions={({ route }) => ({
             tabBarIcon: ({ color }) => {
-              const iconName = getIconName(route.name)
+              let iconName
+
+              switch (route.name) {
+                case SCREENS.text: {
+                  iconName = 'text'
+                  break
+                }
+                case SCREENS.words: {
+                  iconName = 'abjad-arabic'
+                  break
+                }
+                case SCREENS.settings: {
+                  iconName = 'cog'
+                  break
+                }
+              }
+
               return <MaterialCommunityIcons name={iconName} color={color} size={UIElements.TitleFont} />
             },
             tabBarLabel: ''

mobile/routes/text-tabs.js

@@ -38,10 +38,12 @@ export default function TextTabs({ route }) {
         <Fragment>
           <Tab.Navigator
             screenOptions={{
+              tabBarIndicatorStyle: {
+                height: 0 // This hides the active tab indicator
+              },
               tabBarLabelStyle: {
                 fontSize: 15,
-                fontWeight: 'bold',
-                textTransform: 'none'
+                fontWeight: 'bold'
               },
               tabBarStyle: {
                 backgroundColor: theme.colors.background

mobile/screens/text-bilingual-heading.js

@@ -28,7 +28,7 @@ export default function TextBilingualHeading({ heading }) {
         {caption}
       </Text>
 
-      <Divider style={style.divider} />
+      <Divider style={style.dividerHidden} />
     </>
   )
 }

mobile/screens/text-practice.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 import { View, ScrollView } from 'react-native'
-import { Surface, useTheme } from 'react-native-paper'
+import { Surface, useTheme, Divider } from 'react-native-paper'
 
 import TextPracticeWords from './text-practice-words.js'
 import { ActionButton } from '../components/action-button.js'
@@ -42,25 +42,25 @@ const TextPractice = () => {
     <>
       <ScrollView style={sharedStyle.container}>
         <Progress progress={currentSentence / (sentencesInText.length - 1)} />
-
-        {sentenceIsComplete ? (
-          sentenceControlMemoized
-        ) : (
-          <>
-            <Surface style={{ backgroundColor: theme.colors.elevation.level0, minHeight: 250, paddingTop: 15 }}>
+        <Surface style={{ backgroundColor: theme.colors.elevation.level0, minHeight: 250, paddingTop: 25 }}>
+          {sentenceIsComplete ? (
+            sentenceControlMemoized
+          ) : (
+            <>
               <WordsContextHighLighted
                 arabicSentence={sentencesInText[currentSentence].arabicWords}
                 currentWord={currentWord}
                 arabicWord={currentArabicWord}
               />
-            </Surface>
-            <TextPracticeWords
-              testID="textPracticeArabicWords"
-              currentWordsInSentence={currentWordsInSentence}
-              handlePress={handlePress}
-            />
-          </>
-        )}
+              <Divider style={sharedStyle.dividerHidden} />
+              <TextPracticeWords
+                testID="textPracticeArabicWords"
+                currentWordsInSentence={currentWordsInSentence}
+                handlePress={handlePress}
+              />
+            </>
+          )}
+        </Surface>
       </ScrollView>
       <TakbirCelebrate
         visible={celebrationSnackBarVisibility}

mobile/styles/common.js

@@ -42,7 +42,8 @@ export const useSharedStyles = (theme) => {
       actionButton: {
         marginVertical: BASE_MARGIN
       },
-      actionText: getTextStyle(onPrimary, 21, '700', 40, 'center', 0.75),
+      actionText: getTextStyle(onPrimary, 18, '800', 40, 'center', 2.5),
+      actionTextPrimary: getTextStyle(primary, 18, '800', 40, 'center', 2.5),
       answerText: getTextStyle(primary, 23, '600', 40),
       arabicBody: {
         ...getTextStyle(secondary, arabicFontSizeWeighted * 1.1, 'normal', arabicFontSize * 2.9, 'right'),
@@ -107,8 +108,8 @@ export const useSharedStyles = (theme) => {
         marginVertical: BASE_MARGIN
       },
       card: {
-        marginHorizontal: BASE_MARGIN,
-        marginVertical: 2 * BASE_MARGIN
+        marginHorizontal: 3 * BASE_MARGIN,
+        marginVertical: 1.5 * BASE_MARGIN
       },
       cardAction: {
         marginRight: BASE_MARGIN,
@@ -137,8 +138,8 @@ export const useSharedStyles = (theme) => {
         marginTop: BASE_MARGIN
       },
       dividerHidden: {
-        marginBottom: BASE_MARGIN,
-        marginTop: BASE_MARGIN,
+        marginBottom: BASE_MARGIN * 2,
+        marginTop: BASE_MARGIN * 2,
         opacity: 0
       },
       englishBody: {
@@ -182,7 +183,7 @@ export const useSharedStyles = (theme) => {
       progressBar: {
         backgroundColor: theme.colors.elevation.level5,
         borderRadius: 10,
-        height: 10,
+        height: 15,
         marginVertical: 10
       },
       reading: {