changes based on typography

Author: a-saran

src/components/logo.js

@@ -1,18 +1,9 @@
 import Link from "./link"
 import React from "react"
-import { Box } from "@chakra-ui/core"
+import { H2 } from "../components/typography";
 
 export const Logo = ({ title }) => (
-  <Box
-    as='h2'
-    marginTop={[0, 0]}
-    fontFamily='TiemposHeadline'
-    fontSize={[4, 'desktop.4']}
-  >
-    <Link
-      to="/"
-    >
-      {title}
-    </Link>
-  </Box>
+  <H2 marginTop={[0, 0]} >
+    <Link to="/">{title}</Link>
+  </H2>
 )

src/components/typo.js renamed to src/components/typography.js

@@ -123,22 +123,6 @@ const Li = (props) => (
   />
 )
 
-const Title = (props) => (
-  <PseudoBox
-    as='span'
-    fontFamily="heading"
-    fontSize={[4, 'desktop.4']}
-    lineHeight={2}
-    mt={[3, 4]}
-    mb={1}
-    p={0}
-    pb="2px"
-    borderBottom='1px'
-    borderColor="black.0"
-    {...props}
-  />
-);
-
 export {
-  H1, H2, H3, H4, H5, Title, P, B, Em, I, Ul, Ol, Li
+  H1, H2, H3, H4, H5, P, B, Em, I, Ul, Ol, Li
 }

src/pages/index.js

@@ -4,7 +4,7 @@ import { jsx } from "@emotion/core"
 import { graphql, navigate } from "gatsby"
 import Helmet from "react-helmet"
 import { Box, Text, Flex } from '@chakra-ui/core';
-import { H1, H3, P } from '../components/typo';
+import { H1, H3, P } from '../components/typography';
 
 import Layout from "../templates/layout"
 import SEO from "../components/seo"

src/pages/open-source-contributions.js

@@ -3,6 +3,7 @@ import { jsx } from "@emotion/core"
 import styled from "@emotion/styled"
 import Layout from "../templates/layout"
 import { Box, Flex, PseudoBox } from '@chakra-ui/core';
+import { H4, P, H2 } from "../components/typography";
 import { Link, graphql } from "gatsby"
 import Img from "gatsby-image"
 import SEO from "../components/seo"
@@ -66,11 +67,11 @@ const Card = ({ name, description, github, demo, image }) => {
               alt={name}
             />
           </Box>
-          <Text as='h4' m='0' padding="1" fontFamily='heading'>{name}</Text>
+          <H4 as='h4' m='0' padding="1" fontFamily='heading'>{name}</H4>
         </Flex>
         <Box height='2px' bg='black.2'/>
       </div>
-      <Text p="1">{description}</Text>
+      <P p="1">{description}</P>
       <Flex direction='row' justify='space-between' align='center' margin='0.5rem 1rem'>
         <OutboundLink as="a" href={github} target="_blank">
           GitHub
@@ -88,7 +89,7 @@ const Card = ({ name, description, github, demo, image }) => {
 const OpenSource = props => {
   return (
     <Layout>
-      <h2 as='h2'>Our Open Source Contributions</h2>
+      <H2 as='h2'>Our Open Source Contributions</H2>
       <SEO
         title="Our Open Source Contributions | Codebrahma"
         description="Codebrahma specializes in building custom web applications using technologies - ReactJS, Ruby on Rails, NodeJS, React Native, Android, iOS, Serverless. Checkout our open source contributions."
@@ -107,10 +108,10 @@ const OpenSource = props => {
         ]}
         url="https://codebrahma.com/open-source-contributions"
       />
-      <Text pt="2">
+      <P pt="2">
         Codebrahma dev team regularly contributes to open source. Some of our contributions can be found below. For more, you can checkout our&nbsp;
         <PlainLink as="a" href="https://github.com/Codebrahma" target="_blank" withUnderline>github page</PlainLink>.
-      </Text>
+      </P>
       <Flex wrap='wrap'>
         {projects.map(({ name, description, github, demo, image }) => (
           <Card