chore: updated colors, types styles and props

Author: hmarques98

template/src/components/molecules/Typography/Typography.tsx

@@ -37,10 +37,10 @@ const variantStyle = (theme: DefaultTheme) => {
     prop: 'variant',
     variants: {
       regular: {
-        fontFamily: 'heading',
+        fontFamily: 'body',
       },
       bold: {
-        fontFamily: 'body',
+        fontFamily: 'heading',
       },
     },
   });

template/src/components/organisms/CardPeoples.tsx

@@ -20,9 +20,9 @@ const CardPeoples = ({ name, homeworld, onPress }: CardPeopleProps) => {
         variant="rounded"
         height={80}
         onPress={onPress}
-        bg={theme.colors.primary}>
-        <Typography color={theme.colors.white}>{name}</Typography>
-        <Typography color={theme.colors.white}>{homeworld}</Typography>
+        bg={'primary'}>
+        <Typography color={'secondary'}>{name}</Typography>
+        <Typography color={'secondary'}>{homeworld}</Typography>
       </Button>
     </Box>
   );

template/src/screens/CharacterDetail.tsx

@@ -1,15 +1,12 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
-
 import { CommonStackParamList } from 'screens';
 import { Box } from 'components/molecules/Box';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { PADDING } from 'styles/spacing';
 import { StatusBar, StyleSheet } from 'react-native';
 import { theme } from 'theme';
 import { Typography } from 'components/molecules/Typography';
 import UserAvatar from 'react-native-user-avatar';
-import { FONT_SIZE_16 } from 'styles/typography';
 import { Button } from 'components/molecules/Button';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { WINDOW_DEVICE_WIDTH } from '@utils/constants';
@@ -35,16 +32,16 @@ const CharacterDetailScreen = () => {
           {name}
         </Typography>
         <Box my={'md'}>
-          <Typography variant="bold" color={'white'} fontSize={FONT_SIZE_16}>
+          <Typography variant="bold" color={'white'} fontSize="ls">
             Gender - {restProperties.gender}
           </Typography>
-          <Typography variant="bold" color={'white'} fontSize={FONT_SIZE_16}>
+          <Typography variant="bold" color={'white'} fontSize="ls">
             Hair color - {restProperties.hair_color}
           </Typography>
-          <Typography variant="bold" color={'white'} fontSize={FONT_SIZE_16}>
+          <Typography variant="bold" color={'white'} fontSize="ls">
             Eye color - {restProperties.eye_color}
           </Typography>
-          <Typography variant="bold" color={'white'} fontSize={FONT_SIZE_16}>
+          <Typography variant="bold" color={'white'} fontSize="ls">
             Skin color - {restProperties.skin_color}
           </Typography>
         </Box>
@@ -74,7 +71,7 @@ export default CharacterDetailScreen;
 const styles = StyleSheet.create({
   safeArea: {
     flex: 1,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.backgroundColor,
   },
 });
 

template/src/screens/Home.tsx

@@ -4,7 +4,6 @@ import { Button } from 'components/molecules/Button';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { StyleSheet, StatusBar } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { FONT_SIZE_16 } from 'styles/typography';
 
 import { theme } from 'theme';
 
@@ -127,7 +126,7 @@ const HomeScreen = () => {
     <SafeAreaView style={styles.safeArea}>
       <StatusBar barStyle="light-content" />
       <Box flex={1} alignItems="center" paddingTop={'sm'}>
-        <Typography color={'secondary'} fontSize={FONT_SIZE_16} variant="bold">
+        <Typography color={'primary'} fontSize={'xl'} variant="bold">
           STAR WARS API
         </Typography>
         <Box
@@ -147,10 +146,7 @@ const HomeScreen = () => {
                   width: 60,
                 }}
               />
-              <Typography
-                variant="bold"
-                fontSize={FONT_SIZE_16}
-                color={'white'}>
+              <Typography variant="bold" fontSize={'ls'} color={'white'}>
                 We are finding information about
               </Typography>
             </Box>
@@ -226,6 +222,6 @@ export default HomeScreen;
 const styles = StyleSheet.create({
   safeArea: {
     flex: 1,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.backgroundColor,
   },
 });

template/src/styles/colors.ts

@@ -1,6 +1,7 @@
 // DEFAULT
-export const PRIMARY = '#1D1C83';
-export const SECONDARY = '#030065';
+export const PRIMARY = '#E0F2E9';
+export const SECONDARY = '#114B5F';
+export const BACKGROUND_COLOR = '#3C887E';
 export const WHITE = '#F9F7FE';
 export const BLACK = '#1B1F23';
 

template/styled.d.ts

@@ -21,6 +21,7 @@ declare module 'styled-components' {
       green: string;
       grayLight: string;
       success: string;
+      backgroundColor: string;
     };
     typography: {
       FONT_REGULAR: string;

template/theme.ts

@@ -19,6 +19,7 @@ const theme: DefaultTheme = {
     green: colors.GREEN,
     grayLight: colors.GRAY_LIGHT,
     success: colors.SUCCESS,
+    backgroundColor: colors.BACKGROUND_COLOR,
   },
   typography: {
     FONT_REGULAR: typography.FONT_FAMILY_REGULAR,
@@ -53,8 +54,8 @@ const theme: DefaultTheme = {
     xxl: 64,
   },
   fonts: {
-    body: '',
-    heading: '',
+    body: 'RobotoMono-Regular',
+    heading: 'RobotoMono-Bold',
   },
 };