fix(mobile): 💄 Fix incorrect margin

mobile/components/card-footer.js

@@ -7,28 +7,43 @@ export const CardFooter = ({ text }) => {
   const theme = useTheme()
 
   const isWithinLast36Hours = checkIfWithinLast36Hours(text.createdAt)
-  const footer = `${text.views} views · ${text.timeAgo} · ${text.readingTime}  `
+
+  function appendIfDefined(value, label, resultArray) {
+    if (value) {
+      resultArray.push(`${value} ${label}`)
+    }
+  }
+
+  function constructFooter(text) {
+    const footerItems = []
+
+    appendIfDefined(text.views, 'views', footerItems)
+    appendIfDefined(text.timeAgo, '', footerItems) // No label for timeAgo
+    appendIfDefined(text.readingTime, '', footerItems, '3 mins read') // No label for readingTime
+
+    return footerItems.join(' · ')
+  }
+
+  const footer = constructFooter(text)
 
   return (
     <>
       {isWithinLast36Hours && (
         <Chip
-          selectedColor={theme.colors.onTertiaryContainer}
           mode={'flat'}
           compact={true}
           style={{
             position: 'absolute',
-            left: 'auto',
-            right: 10,
-            bottom: 10,
-            backgroundColor: theme.colors.tertiaryContainer
+            left: 15,
+            bottom: 14,
+            backgroundColor: theme.colors.elevation.level0
           }}
         >
           New ☀️
         </Chip>
       )}
 
-      <Text variant="labelSmall" style={{ color: theme.colors.outline }}>
+      <Text variant="labelSmall" style={{ color: theme.colors.outline, position: 'absolute', right: 15, bottom: 20 }}>
         {footer}
       </Text>
     </>

mobile/package.json

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

mobile/screens/text-list-card-grammar.js

@@ -22,36 +22,38 @@ export default function TextListCardGrammar({ text, navigation, setShouldReload
   }
 
   const content = (
-    <Card.Content>
-      <CategoryChip category="GRAMMAR" />
-      <Text
-        style={{
-          fontFamily: 'uthman',
-          width: '97%',
-          fontSize: 100,
-          textAlign: 'center',
-          color: theme.colors.secondary,
-          paddingBottom: 15
-        }}
-      >
-        {text.arabic}
-      </Text>
-      <Text
-        style={{
-          width: '97%',
-          fontFamily: 'philosopher',
-          fontSize: 25,
-          textAlign: 'center',
-          color: theme.colors.tertiary,
-          paddingBottom: 50
-        }}
-      >
-        {text.english.charAt(0).toUpperCase() + text.english.slice(1)}
-      </Text>
-      <Card.Actions style={{ ...sharedStyle.card }}>
+    <>
+      <Card.Content>
+        <CategoryChip category="GRAMMAR" />
+        <Text
+          style={{
+            fontFamily: 'uthman',
+            width: '97%',
+            fontSize: 100,
+            textAlign: 'center',
+            color: theme.colors.secondary,
+            paddingBottom: 15
+          }}
+        >
+          {text.arabic}
+        </Text>
+        <Text
+          style={{
+            width: '97%',
+            fontFamily: 'philosopher',
+            fontSize: 25,
+            textAlign: 'center',
+            color: theme.colors.tertiary,
+            paddingBottom: 50
+          }}
+        >
+          {text.english.charAt(0).toUpperCase() + text.english.slice(1)}
+        </Text>
+      </Card.Content>
+      <Card.Actions style={{ ...sharedStyle.cardAction }}>
         <CardFooter text={text} />
       </Card.Actions>
-    </Card.Content>
+    </>
   )
 
   return <PressableCard content={content} onPress={onPress} />

mobile/screens/text-list-card-quote.js

@@ -28,25 +28,23 @@ export default function TextListCardQuote({ text }) {
   }, [englishHadith, hadithTitle, text.texts.arabic])
 
   const content = (
-    <Card style={{ ...sharedStyle.card }} testID="textCard" mode="elevated">
+    <>
       <Card.Content>
         <CategoryChip category="QUOTE" />
         <Divider style={{ ...sharedStyle.dividerHidden }} />
+
+        <EnglishArabic arabic={text.texts.arabic} english={englishHadith} />
         <Text variant="labelMedium" style={{ color: theme.colors.outline, paddingBottom: 10 }}>
           {hadithTitle}
         </Text>
-        <Divider style={{ ...sharedStyle.dividerHidden }} />
-        <EnglishArabic arabic={text.texts.arabic} english={englishHadith} />
-        <Divider style={{ ...sharedStyle.divider }} />
       </Card.Content>
-      <Card.Actions style={{ ...sharedStyle.cardAction }}>
+      <Card.Actions>
         <PlaySound
           audioFileNames={`https://openarabic.ams3.digitaloceanspaces.com/audio/${text.sentences[0].filename}`}
           buttonText={UI.play}
         />
-        <AnswerButton onPress={() => onShare} text={UI.explainWords} />
       </Card.Actions>
-    </Card>
+    </>
   )
 
   return <PressableCard content={content} />

mobile/screens/words-setup.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import { ScrollView } from 'react-native'
+import { ScrollView, View } from 'react-native'
 import { useTheme } from 'react-native-paper'
 import { useSharedStyles } from '../styles/common.js'
 import * as Haptics from 'expo-haptics'
@@ -69,7 +69,9 @@ const WordsSetup = ({
 
       <WordsSetupDifficultyLevel difficultyLevel={difficultyLevel} />
 
-      <ActionButton onPress={handlePress} text="START LEARNING" />
+      <View style={{ marginTop: 10 }}>
+        <ActionButton onPress={handlePress} text="START LEARNING" />
+      </View>
     </ScrollView>
   )
 }

mobile/styles/common.js

@@ -107,7 +107,7 @@ export const useSharedStyles = (theme) => {
       cardAction: {
         marginRight: BASE_MARGIN,
         paddingBottom: BASE_PADDING * 2,
-        paddingTop: BASE_PADDING
+        paddingTop: BASE_PADDING * 2.5
       },
       cardSubTitle: {
         color: outline
@@ -124,7 +124,7 @@ export const useSharedStyles = (theme) => {
         marginTop: BASE_MARGIN
       },
       dividerHidden: {
-        marginBottom: EXTRA_MARGIN,
+        marginBottom: BASE_MARGIN,
         marginTop: BASE_MARGIN,
         opacity: 0
       },