fix(mobile): 🐛 Minor UI fixes

mobile/components/modal-scroll-view.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { StyleSheet, View, Dimensions } from 'react-native'
 import { Modal, Portal, useTheme, Button } from 'react-native-paper'
 
-const ModalScrollView = ({ content, visible, hideModal }) => {
+const ModalScrollView = ({ content, visible, hideModal, closeText = 'Stop' }) => {
   const theme = useTheme()
 
   const styles = StyleSheet.create({
@@ -23,8 +23,8 @@ const ModalScrollView = ({ content, visible, hideModal }) => {
     <Portal>
       <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.containerStyle}>
         <View style={styles.closeButton}>
-          <Button textColor={theme.colors.outline} onPress={hideModal}>
-            Close
+          <Button textColor={theme.colors.error} onPress={hideModal}>
+            {closeText}
           </Button>
         </View>
 
@@ -37,6 +37,7 @@ const ModalScrollView = ({ content, visible, hideModal }) => {
 export default ModalScrollView
 
 ModalScrollView.propTypes = {
+  closeText: PropTypes.string,
   content: PropTypes.any.isRequired,
   hideModal: PropTypes.func.isRequired,
   visible: PropTypes.bool.isRequired

mobile/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1445.2.401",
+  "version": "1445.2.402",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],
@@ -31,7 +31,7 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@reduxjs/toolkit": "^1.9.7",
-    "axios": "^1.6.0",
+    "axios": "^1.6.1",
     "axios-retry": "^3.8.1",
     "deepmerge": "^4.3.1",
     "expo": "^49.0.16",

mobile/screens/text-practice-setup-sections.js

@@ -38,7 +38,7 @@ export default function TextPracticeSetupSections({
     {
       isChecked: checkedReading,
       label: 'Reading',
-      note: 'Exercises to boost comprehension.',
+      note: 'Reading exercises to boost comprehension.',
       onToggle: () => {
         if (checkedReading && totalChecked === 1) {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Error)
@@ -50,7 +50,7 @@ export default function TextPracticeSetupSections({
     {
       isChecked: checkedVocabulary,
       label: 'Vocabulary',
-      note: 'Curated word lists and flashcards.',
+      note: 'Word lists to increase vocabulary.',
       onToggle: () => {
         if (checkedVocabulary && totalChecked === 1) {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Error)

mobile/screens/text-practice-setup.js

@@ -24,6 +24,7 @@ export default function TextPracticeSetup() {
   const [content, setContent] = useState()
   const [isPlaying, setIsPlaying] = useState(false)
   const [showRepeat, setShowRepeat] = useState(true)
+  const [closeText, setCloseText] = useState('Stop')
 
   const [checkedListening, setCheckedListening] = React.useState(true)
   const [checkedReading, setCheckedReading] = React.useState(true)
@@ -41,6 +42,7 @@ export default function TextPracticeSetup() {
 
   // Start the practice and open the modal with practice content
   const handleStartPractice = () => {
+    setCloseText('Stop')
     setContent(
       <TextPractice
         checkedListening={checkedListening}
@@ -59,6 +61,7 @@ export default function TextPracticeSetup() {
   // Open the modal with the preview content
   const handlePreviewContent = () => {
     setPracticeOrPreviewVisible(true)
+    setCloseText('Close')
     setContent(
       <TextPracticeSetupPreview
         isPlaying={isPlaying}
@@ -92,7 +95,12 @@ export default function TextPracticeSetup() {
         </Button>
         <ButtonAction onPress={handleStartPractice} text="PRACTICE" />
       </View>
-      <ModalScrollView visible={practiceOrPreviewVisible} content={content} hideModal={handleClosePracticeModal} />
+      <ModalScrollView
+        visible={practiceOrPreviewVisible}
+        content={content}
+        hideModal={handleClosePracticeModal}
+        closeText={closeText}
+      />
     </>
   )
 }

mobile/styles/common.js

@@ -259,8 +259,8 @@ export const useSharedStyles = (theme) => {
         backgroundColor: theme.colors.elevation.level0,
         flex: 1,
         height: '100%',
-        justifyContent: 'center',
-        paddingBottom: 200,
+        paddingTop: 50,
+        verticalAlign: 'middle',
         width: '100%'
       },
       wordText: {

mobile/yarn.lock

@@ -4985,14 +4985,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "axios@npm:1.6.0"
+"axios@npm:^1.6.1":
+  version: 1.6.1
+  resolution: "axios@npm:1.6.1"
   dependencies:
     follow-redirects: "npm:^1.15.0"
     form-data: "npm:^4.0.0"
     proxy-from-env: "npm:^1.1.0"
-  checksum: f069d938a05d2293e27c7cd6f0c08a1cb764f7cc43a1e637572f8d5928837ecd735890ad67a867d696094ee4b8b4dfdb3727a57aae600845e4c295581cb32f9a
+  checksum: fb091af3ad47d70fdcba5e71654b9e3c56947d93d8b2375dd0b4db63de9982adab6235aebc514488aa289c7faf103b09e8911280e6f6b1112d1604fe5f111f71
   languageName: node
   linkType: hard
 
@@ -11412,7 +11412,7 @@ __metadata:
     "@reduxjs/toolkit": "npm:^1.9.7"
     "@testing-library/react-native": "npm:^12.3.2"
     "@types/jest": "npm:^29.5.7"
-    axios: "npm:^1.6.0"
+    axios: "npm:^1.6.1"
     axios-mock-adapter: "npm:^1.22.0"
     axios-retry: "npm:^3.8.1"
     deepmerge: "npm:^4.3.1"