fix(mobile): 💄 minor style changes

Signed-off-by: Yunus Andréasson <yunus@edenmind.com>
edenmind · Nov 10, 2023 · d85530f · d85530f
1 parent 1db98ca
commit d85530f
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 93 deletions.
diff --git a/mobile/.yarn/install-state.gz b/mobile/.yarn/install-state.gz
diff --git a/mobile/components/english-arabic-text.js b/mobile/components/english-arabic-text.js
@@ -33,7 +33,11 @@ export const EnglishArabicText = ({
 
   return (
     <>
-      <ArabicWords sentence={{ arabic, english, words }} currentPlayingWordIndex={currentPlayingWordIndex} />
+      <ArabicWords
+        sentence={{ arabic, english, words }}
+        currentPlayingWordIndex={currentPlayingWordIndex}
+        setCurrentPlayingWordIndex={setCurrentPlayingWordIndex}
+      />
       <Text style={[sharedStyle.englishBody, { color: theme.colors.secondary, fontSize: 21 }]}>
         {showRepeat && transliterateArabicToEnglish(arabic)}
       </Text>

diff --git a/mobile/components/english-arabic-word.js b/mobile/components/english-arabic-word.js
@@ -10,7 +10,11 @@ import { useAudioPlayer } from '../hooks/use-audio-player.js'
 import { getAdaptiveFontSize } from '../services/ui-services.js'
 import { useSharedStyles } from '../styles/common.js'
 
-export default function EnglishArabicWord({ sentence: { words }, currentPlayingWordIndex }) {
+export default function EnglishArabicWord({
+  sentence: { words },
+  currentPlayingWordIndex,
+  setCurrentPlayingWordIndex
+}) {
   const theme = useTheme()
   const sharedStyle = useSharedStyles(theme)
   const [selectedWordIndex, setSelectedWordIndex] = useState()
@@ -61,9 +65,10 @@ export default function EnglishArabicWord({ sentence: { words }, currentPlayingW
         dispatch({ payload: false, type: 'SET_AUDIO' })
         setSelectedWordIndex()
         setSingleWordPressed(false)
+        setCurrentPlayingWordIndex()
       }, 3000)
     },
-    [dispatch, playSound, shownWords]
+    [dispatch, playSound, setCurrentPlayingWordIndex, shownWords]
   )
 
   return (
@@ -138,5 +143,6 @@ EnglishArabicWord.propTypes = {
         filename: PropTypes.string
       })
     ).isRequired
-  })
+  }),
+  setCurrentPlayingWordIndex: PropTypes.func.isRequired
 }
diff --git a/mobile/components/practice-checkbox.js b/mobile/components/practice-checkbox.js
@@ -9,7 +9,7 @@ export function PracticeCheckbox({ label, note, isChecked, onToggle }) {
   const textColor = isChecked ? theme.colors.onBackground : theme.colors.outline
 
   return (
-    <TouchableOpacity onPress={onToggle} activeOpacity={0.7}>
+    <TouchableOpacity onPress={onToggle} activeOpacity={0.9}>
       <View
         style={{
           alignItems: 'center',

diff --git a/mobile/components/practice-highlighted-word.js b/mobile/components/practice-highlighted-word.js
@@ -15,6 +15,7 @@ const PracticeHighlightedWord = ({ word: { arabic } }) => {
   const textStyles = StyleSheet.create({
     arabicText: {
       ...sharedStyle.arabicBody,
+      color: theme.colors.tertiary,
       fontSize: 50,
       lineHeight: 95,
       paddingHorizontal: 5

diff --git a/mobile/package.json b/mobile/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1445.2.403",
+  "version": "1445.2.404",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],

diff --git a/mobile/routes/text-drawer.js b/mobile/routes/text-drawer.js
@@ -98,7 +98,7 @@ export default function TextDrawer() {
       initialParams={{ category: category.name }}
       options={{
         drawerLabel: category.name,
-        drawerLabelStyle: { fontFamily: 'philosopher', fontSize: 21 },
+        drawerLabelStyle: { fontSize: 19 },
         headerShown: true,
         title: category.name
       }}
@@ -159,7 +159,7 @@ export default function TextDrawer() {
       initialParams={{ category: 'All' }}
       options={({ navigation }) => ({
         drawerLabel: SCREENS.home,
-        drawerLabelStyle: { fontFamily: 'philosopher', fontSize: 21 },
+        drawerLabelStyle: { fontSize: 19 },
         headerRight: () => (
           <Button textColor={theme.colors.secondary} icon={'cog'} onPress={() => navigation.navigate('Settings')} />
         ),
@@ -176,7 +176,7 @@ export default function TextDrawer() {
       screenOptions={{
         backgroundColor: theme.colors.surface,
         drawerStyle: {
-          width: 300
+          width: 250
         },
         headerStyle: {
           backgroundColor: theme.colors.background

diff --git a/mobile/screens/text-practice-setup-sections.js b/mobile/screens/text-practice-setup-sections.js
@@ -10,52 +10,52 @@ import { useSharedStyles } from '../styles/common.js'
 
 export default function TextPracticeSetupSections({
   heading: { image },
-  checkedListening,
-  checkedReading,
-  checkedVocabulary,
-  setCheckedListening,
-  setCheckedReading,
-  setCheckedVocabulary
+  isListeningEnabled,
+  isReadingEnabled,
+  isVocabularyEnabled,
+  setIsListeningEnabled,
+  setIsReadingEnabled,
+  setIsVocabularyEnabled
 }) {
   const theme = useTheme()
   const style = useSharedStyles(theme)
 
-  const totalChecked = [checkedListening, checkedReading, checkedVocabulary].filter(Boolean).length
+  const totalChecked = [isListeningEnabled, isReadingEnabled, isVocabularyEnabled].filter(Boolean).length
 
   const checkboxes = [
     {
-      isChecked: checkedListening,
+      isChecked: isListeningEnabled,
       label: 'Listening',
-      note: 'Audio lessons for clear understanding.',
+      note: 'Audio lessons for clear understanding',
       onToggle: () => {
-        if (checkedListening && totalChecked === 1) {
+        if (isListeningEnabled && totalChecked === 1) {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Error)
-        } else if (!checkedListening || totalChecked > 1) {
-          setCheckedListening(!checkedListening)
+        } else if (!isListeningEnabled || totalChecked > 1) {
+          setIsListeningEnabled(!isListeningEnabled)
         }
       }
     },
     {
-      isChecked: checkedReading,
+      isChecked: isReadingEnabled,
       label: 'Reading',
-      note: 'Reading exercises to boost comprehension.',
+      note: 'Reading exercises to boost comprehension',
       onToggle: () => {
-        if (checkedReading && totalChecked === 1) {
+        if (isReadingEnabled && totalChecked === 1) {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Error)
-        } else if (!checkedReading || totalChecked > 1) {
-          setCheckedReading(!checkedReading)
+        } else if (!isReadingEnabled || totalChecked > 1) {
+          setIsReadingEnabled(!isReadingEnabled)
         }
       }
     },
     {
-      isChecked: checkedVocabulary,
+      isChecked: isVocabularyEnabled,
       label: 'Vocabulary',
-      note: 'Word lists to increase vocabulary.',
+      note: 'Word lists to increase vocabulary',
       onToggle: () => {
-        if (checkedVocabulary && totalChecked === 1) {
+        if (isVocabularyEnabled && totalChecked === 1) {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Error)
-        } else if (!checkedVocabulary || totalChecked > 1) {
-          setCheckedVocabulary(!checkedVocabulary)
+        } else if (!isVocabularyEnabled || totalChecked > 1) {
+          setIsVocabularyEnabled(!isVocabularyEnabled)
         }
       }
     }
@@ -73,10 +73,7 @@ export default function TextPracticeSetupSections({
         />
       </View>
 
-      <Text
-        variant="labelLarge"
-        style={{ color: theme.colors.onBackground, paddingLeft: 15, paddingTop: 10, textAlign: 'left' }}
-      >
+      <Text variant="labelLarge" style={{ color: theme.colors.onBackground, paddingLeft: 15, paddingTop: 5 }}>
         Setup Practice Session
       </Text>
 
@@ -94,9 +91,6 @@ export default function TextPracticeSetupSections({
 }
 
 TextPracticeSetupSections.propTypes = {
-  checkedListening: PropTypes.bool.isRequired,
-  checkedReading: PropTypes.bool.isRequired,
-  checkedVocabulary: PropTypes.bool.isRequired,
   heading: PropTypes.shape({
     author: PropTypes.string.isRequired,
     image: PropTypes.string.isRequired,
@@ -108,7 +102,10 @@ TextPracticeSetupSections.propTypes = {
     views: PropTypes.string.isRequired,
     words: PropTypes.string.isRequired
   }),
-  setCheckedListening: PropTypes.func.isRequired,
-  setCheckedReading: PropTypes.func.isRequired,
-  setCheckedVocabulary: PropTypes.func.isRequired
+  isListeningEnabled: PropTypes.bool.isRequired,
+  isReadingEnabled: PropTypes.bool.isRequired,
+  isVocabularyEnabled: PropTypes.bool.isRequired,
+  setIsListeningEnabled: PropTypes.func.isRequired,
+  setIsReadingEnabled: PropTypes.func.isRequired,
+  setIsVocabularyEnabled: PropTypes.func.isRequired
 }
diff --git a/mobile/screens/text-practice-setup.js b/mobile/screens/text-practice-setup.js
@@ -1,6 +1,7 @@
 /* eslint-disable react-redux/useSelector-prefer-selectors */
 import 'react-native-gesture-handler'
 
+import * as Haptics from 'expo-haptics'
 import React, { useState } from 'react'
 import { View } from 'react-native'
 import { useTheme, Button, Text } from 'react-native-paper'
@@ -11,7 +12,6 @@ import TextPracticeHeading from './text-practice-setup-sections.js'
 import TextPractice from './text-practice.js'
 import { ButtonAction } from '../components/button-action.js'
 import ModalScrollView from '../components/modal-scroll-view.js'
-import Spinner from '../components/spinner.js'
 import { useSharedStyles } from '../styles/common.js'
 
 export default function TextPracticeSetup() {
@@ -26,31 +26,29 @@ export default function TextPracticeSetup() {
   const [showRepeat, setShowRepeat] = useState(true)
   const [closeText, setCloseText] = useState('Stop')
 
-  const [checkedListening, setCheckedListening] = React.useState(true)
-  const [checkedReading, setCheckedReading] = React.useState(true)
-  const [checkedVocabulary, setCheckedVocabulary] = React.useState(true)
+  const [isListeningEnabled, setIsListeningEnabled] = React.useState(true)
+  const [isReadingEnabled, setIsReadingEnabled] = React.useState(true)
+  const [isVocabularyEnabled, setIsVocabularyEnabled] = React.useState(true)
 
   // Close the modal and stop audio if playing
   const handleClosePracticeModal = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
     setPracticeOrPreviewVisible(false)
     setIsPlaying(false)
     dispatch({ payload: false, type: 'SET_AUDIO' })
     dispatch({ payload: false, type: 'SET_AUDIO_SHOULD_PLAY_READING' })
     dispatch({ payload: false, type: 'SET_AUDIO_SHOULD_PLAY_VOCABULARY' })
     dispatch({ payload: false, type: 'SET_AUDIO_SHOULD_PLAY_LISTENING' })
   }
-
+  // isListeningEnabled, isReadingEnabled, isVocabularyEnabled
   // Start the practice and open the modal with practice content
   const handleStartPractice = () => {
     setCloseText('Stop')
     setContent(
       <TextPractice
-        checkedListening={checkedListening}
-        checkedReading={checkedReading}
-        checkedVocabulary={checkedVocabulary}
-        isListeningSelected={checkedListening}
-        isReadingSelected={checkedReading}
-        isVocabularySelected={checkedVocabulary}
+        isListeningEnabled={isListeningEnabled}
+        isReadingEnabled={isReadingEnabled}
+        isVocabularyEnabled={isVocabularyEnabled}
       />
     )
     setPracticeOrPreviewVisible(true)
@@ -73,21 +71,16 @@ export default function TextPracticeSetup() {
     )
   }
 
-  // If the text title is not available, show a spinner
-  if (!text.title) {
-    return <Spinner />
-  }
-
   return (
     <>
       <TextPracticeHeading
         heading={text}
-        checkedListening={checkedListening}
-        checkedReading={checkedReading}
-        checkedVocabulary={checkedVocabulary}
-        setCheckedListening={setCheckedListening}
-        setCheckedReading={setCheckedReading}
-        setCheckedVocabulary={setCheckedVocabulary}
+        isListeningEnabled={isListeningEnabled}
+        isReadingEnabled={isReadingEnabled}
+        isVocabularyEnabled={isVocabularyEnabled}
+        setIsListeningEnabled={setIsListeningEnabled}
+        setIsReadingEnabled={setIsReadingEnabled}
+        setIsVocabularyEnabled={setIsVocabularyEnabled}
       />
       <View style={sharedStyle.container}>
         <Button onPress={handlePreviewContent} style={sharedStyle.buttonAnswer}>

diff --git a/mobile/screens/text-practice-vocabulary.js b/mobile/screens/text-practice-vocabulary.js
@@ -65,9 +65,9 @@ export const PracticeVocabulary = ({ handleContinue }) => {
     <>
       <Surface style={sharedStyle.wordSurface}>
         <Pressable onPress={handlePressOnWord}>
-          <Text style={[sharedStyle.wordText, { color: theme.colors.secondary, fontSize }]}>{arabic}</Text>
+          <Text style={[sharedStyle.wordText, { color: theme.colors.onBackground, fontSize }]}>{arabic}</Text>
         </Pressable>
-        <Text style={[sharedStyle.englishBody, { color: theme.colors.tertiary, fontSize: 23 }]}>
+        <Text style={[sharedStyle.englishBody, { color: theme.colors.secondary, fontSize: 23 }]}>
           {transliterateArabicToEnglish(arabic)}
         </Text>
       </Surface>