feat: improve readability and touchability (#191)

* feat: decouple typography of logo and header

* fix: vertically center text on android

* feat: improve touch zone of main navbar

* feat: match font to Apple HIG for modal titlebar

* feat: match font of body to Apple HIG

factor size by 16/14 for gurmukhi
use 1.75 for line-height

* feat: match vertical padding of line to horizontal

* feat: improve readability and touchability of search bar

* feat: improve readability of search results

* feat: improve readability of collections and bookmarks

* feat: improve touchability of back button

* feat: standardize icon size

* fix: revert fontsize of header icons in collections

* fix: lint

* style: line length

* refactor: inline a niche typography style

* refactor: calculate font measurements

* refactor: create units enum for styling

* feat: add mukta mahee unicode font for android

same font as default unicode font on iOS for gurmukhi

* fix: align corner buttons to edges

* fix: lint

* test: fix line.spec.tsx

* fix: import from src directories instead of build

* test: search for unicode converted Gurbani strings

* fix: remove double Typography in tree from BackButton

* build: update dependencies

* style: improve ResultProps typing alignment

Co-authored-by: Harjot Singh <[email protected]>

ios/Mobile.xcodeproj/project.pbxproj

@@ -15,12 +15,19 @@
 		2E8002D538C44BD2A0AE3604 /* OpenGurbaniAkhar-Black.otf in Resources */ = {isa = PBXBuildFile; fileRef = B409E7EF7B624198BCDB3691 /* OpenGurbaniAkhar-Black.otf */; };
 		32B80C1C53E04FB6B58026E3 /* NotoSansGurmukhiUI-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = EA70DA383E934E8197BDEC98 /* NotoSansGurmukhiUI-Bold.ttf */; };
 		34F5C7101BE4482A81834E72 /* NotoSans-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 06BF451B806A4B65A0A61477 /* NotoSans-Bold.ttf */; };
+		3E37BEA800964B8FBFE4A898 /* MuktaMahee-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B5BB46238EE04FF6859BC58E /* MuktaMahee-Bold.ttf */; };
 		3E7F083D043D4F60B08C6501 /* NotoSans-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = EE4053348D704510BA81B5D7 /* NotoSans-Light.ttf */; };
 		6172F2D35A4C3AA820D92908 /* libPods-Mobile.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 6423831EA8574132BED9D8CC /* libPods-Mobile.a */; };
 		7EF68E3733C33B6898317E18 /* libPods-Mobile-MobileTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ABFE59519B596E51CEFDCCC0 /* libPods-Mobile-MobileTests.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		8F8D43530E804F76B3DA421C /* MuktaMahee-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 18DCCD33AD114F47A5705648 /* MuktaMahee-Light.ttf */; };
+		9F3D953003614EEC9F08E5A4 /* MuktaMahee-ExtraBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3EDB3943A49F47A1B03E1FBB /* MuktaMahee-ExtraBold.ttf */; };
+		A2486A4FFC8848A48BCCFF6B /* MuktaMahee-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A682E7F506914B70B059FE31 /* MuktaMahee-Medium.ttf */; };
 		A8E30B0EA8514085B84E1EB5 /* NotoSansGurmukhiUI-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E5D285D340B846FF8B100F6F /* NotoSansGurmukhiUI-Regular.ttf */; };
+		BB47DC35FD204CB38E878A92 /* MuktaMahee-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 38268E5B0A9C4BCFAC8299FE /* MuktaMahee-Regular.ttf */; };
+		CDD8A57CBA66483799152BA9 /* MuktaMahee-ExtraLight.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1E064A20C1A644F59CECAF51 /* MuktaMahee-ExtraLight.ttf */; };
 		DE5882C202C9467C965A1D20 /* ShabadOsIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4CA99B3623274A749DB794ED /* ShabadOsIcons.ttf */; };
+		FDA38983951648E4A707D11A /* MuktaMahee-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1A5E734D22ED4716BE2E0ED5 /* MuktaMahee-SemiBold.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -45,10 +52,15 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Mobile/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Mobile/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Mobile/main.m; sourceTree = "<group>"; };
+		18DCCD33AD114F47A5705648 /* MuktaMahee-Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "MuktaMahee-Light.ttf"; path = "../assets/fonts/MuktaMahee-Light.ttf"; sourceTree = "<group>"; };
+		1A5E734D22ED4716BE2E0ED5 /* MuktaMahee-SemiBold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "MuktaMahee-SemiBold.ttf"; path = "../assets/fonts/MuktaMahee-SemiBold.ttf"; sourceTree = "<group>"; };
 		1D0AE47A65C8663E3B452821 /* Pods-Mobile-MobileTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Mobile-MobileTests.release.xcconfig"; path = "Target Support Files/Pods-Mobile-MobileTests/Pods-Mobile-MobileTests.release.xcconfig"; sourceTree = "<group>"; };
 		1DF448270E934F87A2DEF032 /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; };
+		1E064A20C1A644F59CECAF51 /* MuktaMahee-ExtraLight.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "MuktaMahee-ExtraLight.ttf"; path = "../assets/fonts/MuktaMahee-ExtraLight.ttf"; sourceTree = "<group>"; };
 		265CBA1037E2473083593511 /* MaterialIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; };
 		2BBE9AB0E408446E88639BD8 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = SimpleLineIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; };
+		38268E5B0A9C4BCFAC8299FE /* MuktaMahee-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "MuktaMahee-Regular.ttf"; path = "../assets/fonts/MuktaMahee-Regular.ttf"; sourceTree = "<group>"; };
+		3EDB3943A49F47A1B03E1FBB /* MuktaMahee-ExtraBold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "MuktaMahee-ExtraBold.ttf"; path = "../assets/fonts/MuktaMahee-ExtraBold.ttf"; sourceTree = "<group>"; };
 		434A1F8B49324803B5B8024C /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome5_Solid.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; };
 		4CA99B3623274A749DB794ED /* ShabadOsIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = ShabadOsIcons.ttf; path = ../assets/fonts/ShabadOsIcons.ttf; sourceTree = "<group>"; };
 		5A24F52A573B4FEF91C1DB28 /* Fontisto.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Fontisto.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = "<group>"; };
@@ -61,8 +73,10 @@
 		853AE48B70484D39865C4945 /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; };
 		8A5806CEDF9043D2A7A1F5AE /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; };
 		8C366ECE3A144761A7340297 /* EvilIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = EvilIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; };
+		A682E7F506914B70B059FE31 /* MuktaMahee-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "MuktaMahee-Medium.ttf"; path = "../assets/fonts/MuktaMahee-Medium.ttf"; sourceTree = "<group>"; };
 		ABFE59519B596E51CEFDCCC0 /* libPods-Mobile-MobileTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Mobile-MobileTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		B409E7EF7B624198BCDB3691 /* OpenGurbaniAkhar-Black.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "OpenGurbaniAkhar-Black.otf"; path = "../assets/fonts/OpenGurbaniAkhar-Black.otf"; sourceTree = "<group>"; };
+		B5BB46238EE04FF6859BC58E /* MuktaMahee-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "MuktaMahee-Bold.ttf"; path = "../assets/fonts/MuktaMahee-Bold.ttf"; sourceTree = "<group>"; };
 		BAFC77B987F84AE7A0F2EA6D /* FontAwesome.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; };
 		BFC4C4398D5A401D9D76A5C3 /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialCommunityIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; };
 		C0A881CF5CF3F2B244570E2A /* Pods-Mobile.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Mobile.debug.xcconfig"; path = "Target Support Files/Pods-Mobile/Pods-Mobile.debug.xcconfig"; sourceTree = "<group>"; };
@@ -194,6 +208,13 @@
 				1DF448270E934F87A2DEF032 /* Octicons.ttf */,
 				2BBE9AB0E408446E88639BD8 /* SimpleLineIcons.ttf */,
 				01E619D2BA0E46A6BD4D37CA /* Zocial.ttf */,
+				B5BB46238EE04FF6859BC58E /* MuktaMahee-Bold.ttf */,
+				3EDB3943A49F47A1B03E1FBB /* MuktaMahee-ExtraBold.ttf */,
+				1E064A20C1A644F59CECAF51 /* MuktaMahee-ExtraLight.ttf */,
+				18DCCD33AD114F47A5705648 /* MuktaMahee-Light.ttf */,
+				A682E7F506914B70B059FE31 /* MuktaMahee-Medium.ttf */,
+				38268E5B0A9C4BCFAC8299FE /* MuktaMahee-Regular.ttf */,
+				1A5E734D22ED4716BE2E0ED5 /* MuktaMahee-SemiBold.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -312,6 +333,13 @@
 				A8E30B0EA8514085B84E1EB5 /* NotoSansGurmukhiUI-Regular.ttf in Resources */,
 				2E8002D538C44BD2A0AE3604 /* OpenGurbaniAkhar-Black.otf in Resources */,
 				DE5882C202C9467C965A1D20 /* ShabadOsIcons.ttf in Resources */,
+				3E37BEA800964B8FBFE4A898 /* MuktaMahee-Bold.ttf in Resources */,
+				9F3D953003614EEC9F08E5A4 /* MuktaMahee-ExtraBold.ttf in Resources */,
+				CDD8A57CBA66483799152BA9 /* MuktaMahee-ExtraLight.ttf in Resources */,
+				8F8D43530E804F76B3DA421C /* MuktaMahee-Light.ttf in Resources */,
+				A2486A4FFC8848A48BCCFF6B /* MuktaMahee-Medium.ttf in Resources */,
+				BB47DC35FD204CB38E878A92 /* MuktaMahee-Regular.ttf in Resources */,
+				FDA38983951648E4A707D11A /* MuktaMahee-SemiBold.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/Mobile/Info.plist

@@ -36,7 +36,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UIAppFonts</key>
 	<array>
 		<string>NotoSans-Bold.ttf</string>
@@ -62,6 +62,13 @@
 		<string>Octicons.ttf</string>
 		<string>SimpleLineIcons.ttf</string>
 		<string>Zocial.ttf</string>
+		<string>MuktaMahee-Bold.ttf</string>
+		<string>MuktaMahee-ExtraBold.ttf</string>
+		<string>MuktaMahee-ExtraLight.ttf</string>
+		<string>MuktaMahee-Light.ttf</string>
+		<string>MuktaMahee-Medium.ttf</string>
+		<string>MuktaMahee-Regular.ttf</string>
+		<string>MuktaMahee-SemiBold.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>

ios/Podfile.lock

@@ -617,6 +617,6 @@ SPEC CHECKSUMS:
   Yoga: 32a18c0e845e185f4a2a66ec76e1fd1f958f22fa
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 7a7ce09a1290a1ee60ed2f6c82da8778c2143f1f
+PODFILE CHECKSUM: 5f4b430c92044121a36fdd0478d2d88e9b3ff143
 
 COCOAPODS: 1.11.2

src/components/BackButton.tsx

@@ -14,7 +14,6 @@ export type BackButtonProps = {
 const styles = StyleSheet.create( {
   label: {
     color: Colors.PrimaryText,
-    fontSize: 16,
   },
 } )
 

src/components/Button.tsx

@@ -1,6 +1,7 @@
 import { Pressable, PressableProps, StyleSheet, ViewProps } from 'react-native'
 
 import Colors from '../themes/colors'
+import Units from '../themes/units'
 import { mx } from '../themes/utils'
 import Typography from './Typography'
 
@@ -12,13 +13,14 @@ const styles = StyleSheet.create( {
     opacity: 0.6,
   },
   root: {
-    borderRadius: 10,
-    width: 75,
-    ...mx( 10 ),
+    borderRadius: Units.HorizontalLayoutMargin / 2,
+    ...mx( Units.HorizontalLayoutMargin / 2 ),
     height: '100%',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    minHeight: Units.MinimumTouchDimension,
+    minWidth: Units.MinimumTouchDimension,
   },
   text: {},
 } )

src/components/Navbar.tsx

@@ -3,26 +3,24 @@ import { StatusBar, StyleSheet, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 
 import Colors from '../themes/colors'
+import Units from '../themes/units'
 
 const styles = StyleSheet.create( {
   header: {
     backgroundColor: Colors.ModalSheetTitleBar,
     flexDirection: 'row',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
+    borderTopLeftRadius: Units.HorizontalLayoutMargin,
+    borderTopRightRadius: Units.HorizontalLayoutMargin,
     alignItems: 'center',
     justifyContent: 'space-between',
-    height: 50,
+    height: Units.MinimumTouchDimension + Units.HorizontalLayoutMargin / 2,
   },
   // this ensures these buttons are always clickable when they are visible
   liftUp: {
     zIndex: 10,
   },
   main: {
-    position: 'absolute',
     flexDirection: 'row',
-    justifyContent: 'center',
-    width: '100%',
   },
 } )
 

src/components/SearchBar.tsx

@@ -4,37 +4,37 @@ import Icon from 'react-native-vector-icons/Ionicons'
 
 import { OS } from '../lib/consts'
 import Colors from '../themes/colors'
-import Fonts from '../themes/fonts'
+import Units from '../themes/units'
 import { my } from '../themes/utils'
 
 const styles = StyleSheet.create( {
   clearButton: {
     color: Colors.SecondaryText,
-    opacity: 0.6,
+    fontSize: 18,
+    padding: Units.MinimumTouchDimension / 4,
   },
   clearButtonContainer: {
     ...my(),
-    marginLeft: -30,
-    borderRadius: 100,
   },
   searchBar: {
-    ...( OS.android && { paddingLeft: 10 } ),
-    ...( OS.ios && { padding: 10 } ),
+    ...( OS.android && { paddingLeft: Units.HorizontalLayoutMargin / 2 } ),
+    ...( OS.ios && { paddingLeft: Units.HorizontalLayoutMargin / 2 } ),
     flexDirection: 'row',
-    borderRadius: 10,
+    borderRadius: Units.HorizontalLayoutMargin / 2,
     backgroundColor: Colors.InputBox,
     width: '100%',
-    height: 36,
+    height: Units.MinimumTouchDimension,
   },
   searchIcon: {
     ...my(),
-    fontSize: 16,
+    fontSize: Units.MinimumTouchDimension / 2,
     color: Colors.SecondaryText,
   },
   searchInputBox: {
+    fontSize: Units.Base,
     flex: 1,
-    fontFamily: Fonts.NotoSansRegular,
-    marginLeft: 5,
+    ...( OS.android && { marginLeft: Units.Base / 4 } ),
+    ...( OS.ios && { marginLeft: Units.Base / 2 } ),
     color: Colors.PrimaryText,
     ...my(),
   },
@@ -62,7 +62,7 @@ const SearchBar = ( {
 
   return (
     <View style={[ styles.searchBar, style ]}>
-      <Icon name="search" size={25} style={styles.searchIcon} />
+      <Icon name="search" style={styles.searchIcon} />
 
       <TextInput
         ref={inputRef}
@@ -81,7 +81,7 @@ const SearchBar = ( {
       {!!input.length && (
         <View style={styles.clearButtonContainer}>
           <Pressable onPress={clearInput}>
-            <Icon style={styles.clearButton} name="close-circle" size={17} testID="clear-search" />
+            <Icon style={styles.clearButton} name="close-circle" testID="clear-search" />
           </Pressable>
         </View>
       )}

src/components/Typography.tsx

@@ -2,23 +2,27 @@ import { ReactNode } from 'react'
 import { StyleSheet, Text, TextProps } from 'react-native'
 
 import Colors from '../themes/colors'
-import Fonts from '../themes/fonts'
+import Units from '../themes/units'
 
 const styles = StyleSheet.create( {
   base: {
     color: Colors.PrimaryText,
   },
-  body: {},
+  body: {
+    fontSize: Units.Base,
+    lineHeight: Units.Base * Units.LineHeightMultiplier,
+    fontWeight: '400',
+  },
   button: {
     color: Colors.PrimaryText,
   },
-  header: {
-    fontSize: 18,
-    fontFamily: Fonts.NotoSansLight,
+  headline: {
+    fontSize: Units.Base,
+    fontWeight: '600',
   },
 } )
 
-type Variants = 'body' | 'header' | 'button'
+type Variants = 'body' | 'headline' | 'button'
 
 export type TypographyProps = TextProps & {
   children: ReactNode,

src/screens/Collections/Item.tsx

@@ -1,25 +1,30 @@
-import { Pressable, PressableProps, StyleSheet, Text } from 'react-native'
+import { Pressable, PressableProps, StyleSheet } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
+import Typography from '../../components/Typography'
+import { OS } from '../../lib/consts'
 import Colors from '../../themes/colors'
-import { py } from '../../themes/utils'
+import Fonts from '../../themes/fonts'
+import Units from '../../themes/units'
+import { px } from '../../themes/utils'
 
 const styles = StyleSheet.create( {
   chevron: {
     color: Colors.PrimaryText,
   },
   container: {
-    ...py( 21 ),
-    paddingLeft: 12,
+    ...px( Units.HorizontalLayoutMargin ),
+    minHeight: Units.MinimumTouchDimension * Units.LineHeightMultiplier,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    borderBottomWidth: 0.5,
+    borderBottomWidth: Units.Separator,
     borderBottomColor: Colors.Separator,
   },
   title: {
     color: Colors.PrimaryText,
-    fontSize: 14,
+    fontSize: Units.Base * Units.GurmukhiLatinRatio,
+    ...( OS.android && { fontFamily: Fonts.MuktaMahee } ),
   },
 } )
 
@@ -31,8 +36,8 @@ type CollectionItemProps = {
 
 const CollectionItem = ( { title, icon, onPress, ...props }: CollectionItemProps ) => (
   <Pressable style={styles.container} onPress={onPress} {...props}>
-    <Text style={styles.title}>{title}</Text>
-    {icon && <Icon style={styles.chevron} name={icon} size={25} />}
+    <Typography style={styles.title}>{title}</Typography>
+    {icon && <Icon style={styles.chevron} name={icon} size={Units.Title1} />}
   </Pressable>
 )
 

src/screens/Collections/Navbar.tsx

@@ -6,22 +6,18 @@ import BackButton from '../../components/BackButton'
 import Navbar from '../../components/Navbar'
 import Typography from '../../components/Typography'
 import Colors from '../../themes/colors'
-import { px } from '../../themes/utils'
+import Units from '../../themes/units'
 
 const styles = StyleSheet.create( {
-  backButton: {
-    marginLeft: -5,
-  },
   disabled: {
     color: Colors.Disabled,
   },
   headerIcon: {
-    ...px( 20 ),
-    fontSize: 22,
+    fontSize: Units.Title1,
     color: Colors.PrimaryText,
   },
-  heading: {
-    fontSize: 16,
+  rightButton: {
+    marginRight: Units.HorizontalLayoutMargin,
   },
 } )
 
@@ -31,9 +27,21 @@ const styles = StyleSheet.create( {
 const CollectionsNavbar = () => (
   <Navbar
     backgroundColor="transparent"
-    left={<BackButton testID="back-button" style={styles.backButton} variant="text" label={<IonIcon style={styles.headerIcon} name="arrow-back" />} />}
-    main={<Typography variant="header" style={styles.heading}>Collections</Typography>}
-    right={<AntIcon testID="add-button" style={[ styles.headerIcon, styles.disabled ]} name="plus" />}
+    left={(
+      <BackButton
+        testID="back-button"
+        variant="text"
+        label={<IonIcon style={styles.headerIcon} name="arrow-back" />}
+      />
+    )}
+    main={<Typography variant="headline">Collections</Typography>}
+    right={(
+      <AntIcon
+        testID="add-button"
+        style={[ styles.headerIcon, styles.disabled, styles.rightButton ]}
+        name="plus"
+      />
+    )}
   />
 )