Font family updated

ios/CovidApp/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -2,37 +2,52 @@
   "images" : [
     {
       "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
       "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "20x20"
     },
     {
       "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
       "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "29x29"
     },
     {
       "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
       "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}

ios/CovidApp/Info.plist

@@ -47,7 +47,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -80,6 +80,25 @@
 		<string>Octicons.ttf</string>
 		<string>Zocial.ttf</string>
 		<string>Fontisto.ttf</string>
+		<string>Poppins.ttf</string>
+		<string>Poppins-Black.ttf</string>
+		<string>Poppins-BlackItalic.ttf</string>
+		<string>Poppins-Bold.ttf</string>
+		<string>Poppins-BoldItalic.ttf</string>
+		<string>Poppins-ExtraBold.ttf</string>
+		<string>Poppins-ExtraBoldItalic.ttf</string>
+		<string>Poppins-ExtraLight.ttf</string>
+		<string>Poppins-ExtraLightItalic.ttf</string>
+		<string>Poppins-Italic.ttf</string>
+		<string>Poppins-Light.ttf</string>
+		<string>Poppins-LightItalic.ttf</string>
+		<string>Poppins-Medium.ttf</string>
+		<string>Poppins-MediumItalic.ttf</string>
+		<string>Poppins-Regular.ttf</string>
+		<string>Poppins-SemiBold.ttf</string>
+		<string>Poppins-SemiBoldItalic.ttf</string>
+		<string>Poppins-Thin.ttf</string>
+		<string>Poppins-ThinItalic.ttf</string>
 	</array>
 </dict>
 </plist>

react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: ['./assets/fonts/'],
+};

src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
-import { Text, TouchableOpacity } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+import { TextCA } from '@components/TextCA';
 import styles from './styles';
 
 type ButtonProps = {
@@ -25,7 +26,7 @@ export const Button: FC<ButtonProps> = ({
   const textStyle = textStyles[type];
   return (
     <TouchableOpacity style={containerStyle} onPress={onPress}>
-      <Text style={textStyle}>{title}</Text>
+      <TextCA style={textStyle}>{title}</TextCA>
     </TouchableOpacity>
   );
 };

src/components/CountryItem/CountryItem.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { Text, TouchableOpacity } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Country } from '@common-types/index';
 import styles from './styles';
+import { TextCA } from '@components/TextCA';
 
 type CountryItemProps = {
   country: Country;
@@ -16,9 +17,9 @@ export const CountryItem: FC<CountryItemProps> = ({
 
   return (
     <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Text style={styles.name}>
-        {country.Country} <Text style={styles.code}>({ISO2})</Text>
-      </Text>
+      <TextCA style={styles.name}>
+        {country.Country} <TextCA style={styles.code}>({ISO2})</TextCA>
+      </TextCA>
     </TouchableOpacity>
   );
 };

src/components/CountryItem/styles.ts

@@ -15,7 +15,7 @@ export default StyleSheet.create({
   name: {
     fontSize: fontSizes.M,
     color: colors.green,
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
   code: {
     fontSize: fontSizes.XS,

src/components/DateCasesItem/DateCasesItem.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import format from 'date-fns/format';
 import styles from './styles';
+import { TextCA } from '@components/TextCA';
 
 type DateCasesItemProps = {
   date: string;
@@ -18,8 +19,8 @@ export const DateCasesItem: FC<DateCasesItemProps> = ({
 
   return (
     <View style={styles.container}>
-      <Text style={styles.date}>{formatDate(date)}</Text>
-      <Text style={styles.cases}>{cases}</Text>
+      <TextCA style={styles.date}>{formatDate(date)}</TextCA>
+      <TextCA style={styles.cases}>{cases}</TextCA>
     </View>
   );
 };

src/components/DateCasesItem/styles.ts

@@ -12,13 +12,13 @@ export default StyleSheet.create({
   date: {
     fontSize: fontSizes.S,
     color: colors.white,
-    fontWeight: '400',
+    fontWeight: '300',
     marginLeft: spacings.XXL,
   },
   cases: {
     fontSize: fontSizes.S,
     color: colors.white,
-    fontWeight: 'bold',
+    fontWeight: '500',
     marginRight: spacings.XXL,
   },
 });

src/components/Divider/Divider.tsx

@@ -1,12 +1,13 @@
+import { TextCA } from '@components/TextCA';
 import React, { FC } from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 import styles from './styles';
 
 export const Divider: FC = (): JSX.Element => {
   return (
     <View style={styles.container}>
       <View style={styles.line} />
-      <Text style={styles.text}>OR</Text>
+      <TextCA style={styles.text}>OR</TextCA>
       <View style={styles.line} />
     </View>
   );

src/components/Input/styles.ts

@@ -12,5 +12,7 @@ export default StyleSheet.create({
     fontSize: fontSizes.S,
     paddingLeft: spacings.XS,
     marginVertical: spacings.XS,
+    fontFamily: 'Poppins-SemiBold',
+    fontWeight: '300',
   },
 });

src/components/TextCA/TextCA.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import { Text, TextProps } from 'react-native';
+import styles from './styles';
+
+export const TextCA: FC<TextProps> = ({ children, ...props }): JSX.Element => {
+  return (
+    <Text {...props} style={[styles.text, props.style]}>
+      {children}
+    </Text>
+  );
+};

src/components/TextCA/index.ts

@@ -0,0 +1 @@
+export * from './TextCA';

src/components/TextCA/styles.ts

@@ -0,0 +1,11 @@
+import { colors, fontSizes } from '@utils/styles';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  text: {
+    fontFamily: 'Poppins-SemiBold',
+    fontWeight: '400',
+    fontSize: fontSizes.L,
+    color: colors.black,
+  },
+});

src/navigation/index.tsx

@@ -41,6 +41,8 @@ const HomeStackComponent = (): JSX.Element => {
         headerTitleStyle: {
           color: colors.white,
           fontSize: fontSizes.L,
+          fontFamily: 'Poppins-SemiBold',
+          fontWeight: '500',
         },
       }}>
       <HomeStack.Screen
@@ -93,7 +95,8 @@ export const RootNavigator = (): JSX.Element => {
 
   return (
     <NavigationContainer>
-      <RootStack.Navigator>
+      <RootStack.Navigator
+        screenOptions={{ cardStyle: { backgroundColor: colors.blue } }}>
         {!isLoggedIn ? (
           <RootStack.Screen
             name="Login"

src/screens/ConfirmedCases/ConfirmedCases.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useContext, useState, FC } from 'react';
-import { View, Text, FlatList, ActivityIndicator } from 'react-native';
+import { View, FlatList, ActivityIndicator } from 'react-native';
 import { DateCasesItem, SortIcon } from '@components/index';
 import { getCasesByCountry } from '@services/index';
 import { store } from '@store/index';
@@ -8,6 +8,7 @@ import { ConfirmedCasesProps } from '@navigation/index';
 import { ConfirmedCases } from '@common-types/index';
 import styles from './styles';
 import { IAppContextWithDispatch } from '@store/types';
+import { TextCA } from '@components/TextCA';
 
 export const ConfirmedCasesFn: FC<ConfirmedCasesProps> = ({
   route,
@@ -62,23 +63,23 @@ export const ConfirmedCasesFn: FC<ConfirmedCasesProps> = ({
   if (!confirmedCases[id]?.length) {
     return (
       <View style={styles.container}>
-        <Text style={styles.title}>We're sorry!</Text>
-        <Text style={styles.subtitle}>
-          We do not have information for the selected country.
-        </Text>
+        <TextCA style={styles.title}>We're sorry!</TextCA>
+        <TextCA style={styles.subtitle}>
+          We don't have information for the selected country.
+        </TextCA>
       </View>
     );
   }
 
   return (
     <View style={styles.container}>
       <View style={styles.titlesContainer}>
-        <Text style={styles.date}>
+        <TextCA style={styles.date}>
           Date <SortIcon sort={sortByDate} />
-        </Text>
-        <Text style={styles.cases}>
+        </TextCA>
+        <TextCA style={styles.cases}>
           Cases <SortIcon sort={sortByCases} />
-        </Text>
+        </TextCA>
       </View>
       <FlatList
         style={styles.list}

src/screens/ConfirmedCases/styles.ts

@@ -16,32 +16,28 @@ export default StyleSheet.create({
   },
   date: {
     fontSize: fontSizes.M,
-    fontWeight: '600',
     color: colors.green,
     marginLeft: spacings.XXL,
   },
   cases: {
     fontSize: fontSizes.M,
-    fontWeight: '600',
     color: colors.green,
     marginRight: spacings.XXS,
   },
-  text: {
-    fontSize: fontSizes.XL,
-    fontWeight: '600',
-  },
   list: {
     width: '100%',
   },
   title: {
     fontSize: fontSizes.L,
-    fontWeight: '600',
+    fontWeight: '500',
     color: colors.white,
     marginBottom: spacings.M,
   },
   subtitle: {
     fontSize: fontSizes.S,
     fontWeight: '300',
     color: colors.white,
+    textAlign: 'center',
+    marginHorizontal: spacings.M,
   },
 });