Merge pull request #2184 from edenmind/YunusAndreasson/issue2166

api/package.json

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

mobile/components/context-highlighted-word.js

@@ -13,6 +13,8 @@ const HighlightedWord = ({ word }) => {
         ...sharedStyle.englishBody,
         color: theme.colors.onPrimary,
         backgroundColor: theme.colors.secondary,
+        borderBottomColor: theme.colors.secondary,
+        borderBottomWidth: 1,
         marginHorizontal: 3,
         paddingHorizontal: 5,
         paddingBottom: 0,

mobile/components/modal-scroll-view.js

@@ -2,17 +2,16 @@ import { Button, Divider, Modal, Portal, Text, useTheme } from 'react-native-pap
 import PropTypes from 'prop-types'
 import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
-
-import * as Haptics from 'expo-haptics'
 import { useSharedStyles } from '../styles/common.js'
+
 // eslint-disable-next-line putout/destructuring-as-function-argument
 const ModalScrollView = ({
   title,
   content,
   visible,
   hideModal,
   height = '93%',
-  close = 'CLOSE',
+  close = 'CLOSE ',
   titleLanguage = 'arabic',
   icon
 }) => {
@@ -23,22 +22,21 @@ const ModalScrollView = ({
       marginBottom: 0,
       marginTop: 10
     },
-
     containerStyle: {
       backgroundColor: theme.colors.background,
       borderRadius: 15,
       height,
       margin: 10,
-      padding: 10
+      padding: 5
     },
-
     titleStyle: {
       ...sharedStyled.arabicHeading,
       alignSelf: 'center',
       marginHorizontal: 10,
       textAlign: 'center',
       writingDirection: 'rtl'
     },
+
     titleStyleEnglish: {
       alignSelf: 'center',
       fontFamily: 'philosopher',
@@ -49,26 +47,21 @@ const ModalScrollView = ({
     }
   })
 
-  //a function that triggers a haptic feedback and then runs hideModal
-  const hideModalWithHaptic = () => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
-    hideModal()
-  }
-
   return (
     <Portal>
       <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.containerStyle}>
         {title && (
           <>
             <Text style={titleLanguage === 'english' ? styles.titleStyleEnglish : styles.titleStyle}>{title}</Text>
+
             <Divider />
           </>
         )}
         <ScrollView>
-          <View style={{ margin: 5, padding: 5, paddingTop: 15 }}>{content}</View>
+          <View style={{ margin: 5, padding: 5 }}>{content}</View>
         </ScrollView>
         <Divider />
-        <Button onPress={hideModalWithHaptic} style={styles.buttonPadding} mode="elevated" icon={icon}>
+        <Button onPress={hideModal} style={styles.buttonPadding} mode="elevated" icon={icon}>
           {close}
         </Button>
       </Modal>

mobile/components/snack-button.js

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import { Snackbar, Text, useTheme } from 'react-native-paper'
+import { View } from 'react-native'
 
 const SnackButton = (props) => {
   const theme = useTheme()
@@ -12,7 +13,7 @@ const SnackButton = (props) => {
       duration={props.duration}
       style={{
         color: theme.colors.primary,
-        backgroundColor: theme.colors.elevation.level5
+        backgroundColor: theme.colors.tertiaryContainer
       }}
     >
       <Text
@@ -22,13 +23,14 @@ const SnackButton = (props) => {
           textAlign: 'center'
         }}
       >
-        ✨
+        🏆
       </Text>
 
       <Text
         style={{
-          color: theme.colors.primary,
+          color: theme.colors.tertiary,
           textAlign: 'center',
+          fontSize: 20,
           fontWeight: '700'
         }}
         variant="titleMedium"

mobile/constants/screens.js

@@ -3,9 +3,9 @@ const SCREENS = {
   settings: 'About',
   text: 'Texts',
   home: 'Texts',
-  words: 'Vocabulary',
-  bilingual: 'Bilingual',
-  arabic: 'Arabic',
+  words: 'Words',
+  bilingual: 'Explore',
+  arabic: 'Read',
   english: 'Eng',
   quiz: 'Practice',
   related: 'More',

mobile/constants/screens.test.js

@@ -14,11 +14,11 @@ it('shinyOlive should be correct', () => {
 })
 
 it('bilingual should be correct', () => {
-  expect(SCREENS.bilingual).toBe('Bilingual')
+  expect(SCREENS.bilingual).toBe('Explore')
 })
 
 it('bilingual should be correct', () => {
-  expect(SCREENS.arabic).toBe('Arabic')
+  expect(SCREENS.arabic).toBe('Read')
 })
 
 it('bilingual should be correct', () => {

mobile/constants/ui.js

@@ -3,11 +3,13 @@ const UI = {
   openArabic: 'OpenArabic',
   texts: 'Texts',
   null: '',
-  study: 'STUDY',
-  play: 'PLAY',
+  study: 'Study',
+  play: 'Play',
   root: 'ROOT',
-  explain: 'EXPLAIN',
-  playSentence: 'PLAY SENTENCE'
+  explain: 'Explain',
+  playSentence: 'Play Sentence',
+  explainWords: 'Explain Words',
+  report: 'Report Error'
 }
 
 export default UI

mobile/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1444.4.297",
+  "version": "1444.4.298",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],
@@ -73,8 +73,8 @@
     "@babel/preset-typescript": "^7.18.6",
     "@testing-library/react-native": "^11.2.0",
     "@types/jest": "^29.1.1",
-    "axios-mock-adapter": "^1.21.4",
-    "eslint": "^8.42.0",
+    "axios-mock-adapter": "^1.21.5",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
@@ -88,7 +88,7 @@
     "jest": "^29.2.1",
     "jest-expo": "^48.0.0",
     "prettier": "^2.8.8",
-    "putout": "^29.13.1",
+    "putout": "^29.15.0",
     "react-test-renderer": "^18.2.0",
     "redux-mock-store": "^1.5.4"
   },

mobile/redux/reducers.js

@@ -65,9 +65,9 @@ const initialStateTexts = {
 
 const initialStateWords = {
   words: [
-    { arabic: 'سلام', english: 'peace', alternative1: 'upon', alternative2: 'you' },
-    { arabic: 'ماء', english: 'water', alternative1: 'wind', alternative2: 'fire' },
-    { arabic: 'شمس', english: 'sun', alternative1: 'moon', alternative2: 'stars' }
+    { arabic: ' ', english: ' ', alternative1: ' ', alternative2: ' ' },
+    { arabic: ' ', english: ' ', alternative1: ' ', alternative2: ' ' },
+    { arabic: ' ', english: ' ', alternative1: ' ', alternative2: ' ' }
   ]
 }
 

mobile/routes/__snapshots__/root.test.js.snap

@@ -5,6 +5,8 @@ exports[`<Root /> screen with name "Texts" should match snapshot 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],

mobile/routes/__snapshots__/text-drawer.test.js.snap

@@ -5,6 +5,8 @@ exports[`<TextDrawer /> matches snapshot 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],

mobile/routes/__snapshots__/text-tabs.test.js.snap

@@ -5,6 +5,8 @@ exports[`<TextTabs /> when isLoading is true, should match snapshot 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],

mobile/routes/text-drawer.js

@@ -18,7 +18,7 @@ export default function TextDrawer() {
   const { categories } = useSelector(selector)
   const dispatch = useDispatch()
   const hijriYear = `${packageJson.version} ١٤٤٤ هـ`
-  const [isDarkModeOn, setIsDarkModeOn] = React.useState(false)
+  const [isDarkModeOn, setIsDarkModeOn] = React.useState(true)
   const theme = useTheme()
 
   const style = StyleSheet.create({

mobile/routes/words.js

@@ -43,6 +43,7 @@ export default function Words() {
                 <Fragment>
                   <Button
                     textColor={theme.colors.error}
+                    icon={'stop'}
                     onPress={() => {
                       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
                       dispatch({

mobile/screens/__snapshots__/text-bilingual-sentences.test.js.snap

@@ -5,6 +5,8 @@ exports[`<Sentence /> renders without crashing 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],

mobile/screens/__snapshots__/text-list-card.test.js.snap

@@ -5,6 +5,8 @@ exports[`<CategoryCard /> renders correctly 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],
@@ -49,6 +51,8 @@ exports[`<CategoryCard /> renders correctly with no arabic text 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],
@@ -92,6 +96,8 @@ exports[`<CategoryCard /> renders correctly with no author 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],
@@ -136,6 +142,8 @@ exports[`<CategoryCard /> renders correctly with no category 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],
@@ -180,6 +188,8 @@ exports[`<CategoryCard /> renders correctly with no english text 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],
@@ -223,6 +233,8 @@ exports[`<CategoryCard /> renders correctly with no image 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],
@@ -268,6 +280,8 @@ exports[`<CategoryCard /> renders correctly with no source 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],
@@ -313,6 +327,8 @@ exports[`<CategoryCard /> renders correctly with no texts 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],
@@ -354,6 +370,8 @@ exports[`<CategoryCard /> renders correctly with no texts 2`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],

mobile/screens/__snapshots__/text-list.test.js.snap

@@ -5,6 +5,8 @@ exports[`<Category /> renders correctly 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],

mobile/screens/__snapshots__/text-settings.test.js.snap

@@ -5,6 +5,8 @@ exports[`<TextSettingsScreen /> renders correctly 1`] = `
   value={
     {
       "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
       "store": {
         "@@observable": [Function],
         "dispatch": [Function],