Refactor styled components

[dann-tran]

• [x] create a StyledSafeAreaView component to be used as a container for every screen

  • base is SafeAreaView component
  • paddingRight and paddingLeft set to 20px (or set in %?).
    

• [x] create a StyledText component

  • base is Text component
  • has props.sizeVariant that serves a role similar to h1, h2, etc. in HTML. each sizeVariant has a fixed fontSize and has no semantic meaning. 24 when sizeVariant="h1", 20 for h2, 18 for h3, 16 for h4
  • has props.fontVariant to standardize the fontFamily. JosefinSans when fontVariant="h1", Lato for h2, Ubuntu for h3
    

• [x] create a StyledButton component

  • base is Button component
  • has props.outlined that can take two values true or false. if outlined=false, the button is filled.
  • has props.colorVariant that can take two values black or white. e.g. if outlined=true && colorVariant="white", the button's outlineColor is black and the backgroundColor is white
    

• [x] create a StyledSearchBar component

  • base is TextInput component
  • height: 40, borderBottomWidth: 1, width: '100%'
  • placeholder is Search with color: "grey" (or should use hex?)
  • once user types in a string, the color is black

• [x] create a Card components for preview, results page, explore page

• [x] create a Color component