feat: improve readability (#229)

src/screens/Collections/Item.tsx

@@ -14,7 +14,7 @@ const styles = StyleSheet.create( {
   },
   container: {
     ...px( Units.HorizontalLayoutMargin ),
-    minHeight: Units.MinimumTouchDimension * Units.LineHeightMultiplier,
+    minHeight: Units.MinimumTouchDimension * Units.ThumbFingerRatio,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -24,6 +24,7 @@ const styles = StyleSheet.create( {
   title: {
     color: Colors.PrimaryText,
     fontSize: Units.Base * Units.GurmukhiLatinRatio,
+    lineHeight: Units.Base * Units.GurmukhiLineHeightMultiplier,
     ...( OS.android && { fontFamily: Fonts.MuktaMahee } ),
   },
 } )

src/screens/Gurbani/BottomBar.tsx

@@ -17,7 +17,6 @@ const styles = StyleSheet.create( {
     bottom: 0,
     left: 0,
     right: 0,
-    opacity: 0.9,
   },
   button: {
     fontSize: 28,

src/screens/Gurbani/Line.tsx

@@ -8,21 +8,24 @@ import transliterators from '../../lib/transliterators'
 import Colors from '../../themes/colors'
 import Fonts from '../../themes/fonts'
 import Units from '../../themes/units'
-import { px, py } from '../../themes/utils'
+import { px } from '../../themes/utils'
 import { TranslationData } from '../../types/data'
 
 const styles = StyleSheet.create( {
   gurbani: {
     fontSize: Units.Base * Units.GurmukhiLatinRatio,
     ...( OS.android && { fontFamily: Fonts.MuktaMahee } ),
+    lineHeight: Units.Base * Units.GurmukhiLineHeightMultiplier,
   },
   root: {
     ...px( 20 ),
-    ...py( ( Units.Base * Units.LineHeightMultiplier ) / 2 ),
+    paddingTop: Units.Base * Units.LineHeightMultiplier,
   },
   text: {
     color: Colors.SecondaryText,
-    paddingTop: ( Units.Base * Units.LineHeightMultiplier ) / 4,
+  },
+  transliteration: {
+    paddingBottom: ( Units.Base * Units.LineHeightMultiplier ) / 4,
   },
 } )
 
@@ -52,21 +55,21 @@ const Line = ( {
   <View style={styles.root}>
     <Typography style={[ styles.gurbani ]}>{toUnicode( gurmukhi )}</Typography>
 
-    {translations
-      .filter( ( { translationSourceId } ) => translationSourceId === Languages.English )
-      .map( ( {
-        translationSourceId,
-        translation,
-      } ) => <Typography key={translationSourceId} style={styles.text}>{translation}</Typography> )}
-
     {transliterations.map( ( language ) => (
       <Typography
         key={language}
-        style={styles.text}
+        style={[ styles.text, styles.transliteration ]}
       >
         {transliterators[ language ]( toUnicode( gurmukhi ) )}
       </Typography>
     ) )}
+
+    {translations
+      .filter( ( { translationSourceId } ) => translationSourceId === Languages.English )
+      .map( ( {
+        translationSourceId,
+        translation,
+      } ) => <Typography key={translationSourceId} style={styles.text}>{translation}</Typography> )}
   </View>
 )
 

src/screens/Gurbani/Lines.tsx

@@ -2,16 +2,17 @@ import { stripVishraams } from 'gurmukhi-utils'
 import { FlatList, StyleSheet, View } from 'react-native'
 
 import Languages from '../../lib/languages'
+import Units from '../../themes/units'
 import { LineData } from '../../types/data'
 import Line from './Line'
 
 const styles = StyleSheet.create( {
   linesContent: {
-    paddingBottom: 50,
+    paddingBottom: 63 + ( Units.Base * Units.LineHeightMultiplier ) / 2,
   },
   root: {
     flex: 1,
-    marginBottom: -50,
+    marginBottom: -63,
   },
 } )
 

src/screens/Search/Result.tsx

@@ -17,13 +17,11 @@ import { px, py } from '../../themes/utils'
 const styles = StyleSheet.create( {
   gurbani: {
     fontSize: Units.Base * Units.GurmukhiLatinRatio,
+    lineHeight: Units.Base * Units.GurmukhiLineHeightMultiplier,
     ...( OS.android && {
       paddingBottom: 6,
       fontFamily: Fonts.MuktaMahee,
     } ),
-    ...( OS.ios && {
-      paddingBottom: 2.5,
-    } ),
   },
   header: {
     flexDirection: 'row',
@@ -32,6 +30,7 @@ const styles = StyleSheet.create( {
   },
   headerGurmukhi: {
     fontSize: Units.Footnote * Units.GurmukhiLatinRatio,
+    lineHeight: Units.Footnote * Units.GurmukhiLineHeightMultiplier,
     ...( OS.android && { fontFamily: Fonts.MuktaMahee } ),
   },
   root: {
@@ -43,7 +42,7 @@ const styles = StyleSheet.create( {
   },
   translation: {
     fontSize: Units.Footnote,
-    lineHeight: ( Units.Base * Units.LineHeightMultiplier ) / 2,
+    marginTop: -1,
   },
 } )
 

src/themes/units.ts

@@ -4,10 +4,12 @@ enum Units {
   Title1 = 28,
   Title2 = 22,
   Title3 = 20,
-  LineHeightMultiplier = 1.75,
   GurmukhiLatinRatio = 1.143,
+  LineHeightMultiplier = 1.25,
+  GurmukhiLineHeightMultiplier = 1.75,
   HorizontalLayoutMargin = 20,
   MinimumTouchDimension = 44,
+  ThumbFingerRatio = 1.5,
   Separator = 0.5,
 }