changed typography components

Author: a-saran

src/components/categorylink.js

@@ -1,7 +1,7 @@
-import {Link} from 'gatsby'
+import { Link } from 'gatsby'
 import { PseudoBox } from '@chakra-ui/core';
 
-export default (props) => <PseudoBox 
+export default (props) => <PseudoBox
   as={Link}
   bg='tint'
   color='black.1'

src/components/developmentServices.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, Text } from '@chakra-ui/core';
+import { Box } from '@chakra-ui/core';
+import { P } from './typography'
 
 import Title from './title';
 
@@ -16,9 +17,9 @@ export default () => (
     >
       Fast, modular and Bug free React JS development service
     </Title>
-    <Text>
+    <P>
       We develop your application with atleast 30% faster than other development companies.
-    </Text>
+    </P>
 
     <Title
       fontSize={[2, 'desktop.2']}
@@ -28,9 +29,9 @@ export default () => (
     >
       Javascript Lovers
     </Title>
-    <Text>
+    <P>
       We specialise in servicing modern JavaScript based web & mobile applications. We are experts in developing applications in React.js, AngularJS, Node.js
-    </Text>
+    </P>
 
     <Title
       fontSize={[2, 'desktop.2']}
@@ -40,9 +41,9 @@ export default () => (
     >
       Expert React JS Developers
     </Title>
-    <Text>
+    <P>
       We have a set of skilful React JS developers who are updated with current React Eco System
-    </Text>
+    </P>
 
     <Title
       fontSize={[2, 'desktop.2']}
@@ -52,8 +53,8 @@ export default () => (
     >
       Best React JS development Service history
     </Title>
-    <Text>
+    <P>
       We have 15+ React projects delivered to clients in quick time
-    </Text>
+    </P>
   </Box>
 );

src/components/pagination.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import {Link} from 'gatsby';
+import { Link } from 'gatsby';
 
 const Wrapper = styled('div')`
   display: flex;

src/components/project.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "@emotion/core"
-import { Box, Flex, Text } from "@chakra-ui/core"
+import { Box, Flex } from "@chakra-ui/core"
+import { P } from './typography'
 import PlainLink from "./link"
 import NonStretchedImage from "./nonStretchedImage"
 import Title from './title'
@@ -31,7 +32,7 @@ export default ({ title, image, description, link, reverse = false }) => (
       </PlainLink>
 
       <Box mt={[1, 2]}>
-        <Text>{description}</Text>
+        <P>{description}</P>
       </Box>
     </Flex>
   </Flex>

src/pages/our-process.mdx

@@ -1,6 +1,7 @@
 import SEO from './../components/seo'
 import VimeoVideoContainer from './../components/vimeoVideoContainer'
-import { Flex, Box, Text } from "@chakra-ui/core"
+import { Flex, Box } from "@chakra-ui/core"
+import { H4, P } from "../components/typography"
 
 <SEO
   title="Agile Software Development for Web and Mobile Development"
@@ -14,8 +15,8 @@ import { Flex, Box, Text } from "@chakra-ui/core"
 ## What clients provide us
 <Flex flexDirection="column" mt="2" >
   <Box width={'100%'} pr="1">
-    <Text as='h4' fontFamily='heading'>1. App Design</Text>
-    <Text>We accept designs in Figma, Zeplin, Sketch, Invision and etc.</Text>
+    <H4>1. App Design</H4>
+    <P>We accept designs in Figma, Zeplin, Sketch, Invision and etc.</P>
   </Box>
   <Box width={'100%'}>
     <iframe
@@ -32,8 +33,8 @@ import { Flex, Box, Text } from "@chakra-ui/core"
 
 <Flex flexDirection="column" mt="2" >
   <Box width={'100%'} pr="1">
-    <Text as='h4' fontFamily='heading'>1. Design system written in React</Text>
-    <Text>Design system is a collection of reusable components written in React, guided by clear standards like Airbnb, that can be assembled together to build your applications.</Text>
+    <H4>1. Design system written in React</H4>
+    <P>Design system is a collection of reusable components written in React, guided by clear standards like Airbnb, that can be assembled together to build your applications.</P>
   </Box>
   <Box width={'100%'}>
     <iframe
@@ -48,11 +49,11 @@ import { Flex, Box, Text } from "@chakra-ui/core"
 
 <Flex flexDirection="column" mt="2" >
   <Box width={'100%'} pr="1">
-    <Text as='h4' fontFamily='heading'>2. Backend API tests and documentation on Postman</Text>
-    <Text>
+    <H4>2. Backend API tests and documentation on Postman</H4>
+    <P>
       Our backend developers builds API schema and tests on Postman before the actual API development starts. 
       The frontend development team starts development with no wait, by making use of the mock API server and documentation provided by Postman for our API schema. 
-    </Text>
+    </P>
   </Box>
   <VimeoVideoContainer>
     <iframe
@@ -68,11 +69,11 @@ import { Flex, Box, Text } from "@chakra-ui/core"
 </Flex>
 
 <Flex flexDirection="column" mt="3">
-  <Box width={'100%'} pr="1">
-    <Text as='h4' fontFamily='heading'>3. App developed with React</Text>
-    <Text>Based on the design, a complete React app developed with the help of design-system and APIs created above. The code will comply with Airbnb standards.</Text>
+  <Box width='100%' pr="1">
+    <H4>3. App developed with React</H4>
+    <P>Based on the design, a complete React app developed with the help of design-system and APIs created above. The code will comply with Airbnb standards.</P>
   </Box>
-  <Box width={'100%'}>
+  <Box width='100%'>
     <iframe
       src="https://codesandbox.io/embed/vigorous-platform-9b61d?autoresize=1&codemirror=1&fontsize=14&theme=dark&view=editor"
       style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
@@ -86,8 +87,8 @@ import { Flex, Box, Text } from "@chakra-ui/core"
 
 <Flex flexDirection="column" mt="3">
   <Box width={'100%'} pr="1">
-    <Text as='h4' fontFamily='heading'>4. Deployed Website / Mobile App</Text>
-    <Text>Cloud hosting is done for websites. Mobile Apps are published to Android / iOS stores.</Text>
+    <H4>4. Deployed Website / Mobile App</H4>
+    <P>Cloud hosting is done for websites. Mobile Apps are published to Android / iOS stores.</P>
   </Box>
   <Box width={'100%'}>
     <iframe

src/pages/solutions.js

@@ -6,7 +6,8 @@ import Layout from "../templates/layout"
 import Link from "../components/link"
 import SEO from "../components/seo"
 import Title from "../components/title"
-import { Box, Flex, Text } from '@chakra-ui/core';
+import { Box, Flex } from '@chakra-ui/core';
+import { H1, H4, P } from "../components/typography"
 
 const SolutionsContainer = ({ title, children }) => (
   <Box mb='5'>
@@ -49,7 +50,7 @@ const Solution = ({ title, image, link }) => (
           objectPosition="50% 50%"
           alt={title}
         />
-        <Text as='h4' fontFamily='heading' textAlign="center">{title}</Text>
+        <H4 textAlign="center">{title}</H4>
       </Flex>
     </Box>
   </Link>
@@ -88,8 +89,8 @@ const SolutionPage = ({ data }) => (
       url="https://codebrahma.com/solutions"
     />
     <Box mb='4'>
-      <Text as='h1' fontFamily='heading'>Our Solutions</Text>
-      <Text>We have great expertise in building web and mobile apps.</Text>
+      <H1>Our Solutions</H1>
+      <P>We have great expertise in building web and mobile apps.</P>
     </Box>
 
     <SolutionsContainer title="Web">

src/pages/thank-you.js

@@ -1,9 +1,10 @@
 import React from "react"
 import { Link } from "gatsby"
-import { Box, Text } from '@chakra-ui/core';
+import { Box } from '@chakra-ui/core';
 import { Main } from "theme-ui"
 import SEO from "../components/seo"
 import { Helmet } from "react-helmet"
+import { P } from "../components/typography"
 
 const ThankYou = () => {
   return (
@@ -30,16 +31,16 @@ const ThankYou = () => {
       />
       <Main mt="7">
         <Box textAlign="center">
-          <Text fontSize="6" mb="4">
+          <P fontSize="6" mb="4">
             Thank You!
-          </Text>
-          <Text fontSize="3" mb="4">
+          </P>
+          <P fontSize="3" mb="4">
             We will get back to you within 24 hours. Our typical response time
             is 5 minutes.
-          </Text>
-          <Text fontSize="3">
+          </P>
+          <P fontSize="3">
             <Link to="/">Back to Homepage</Link>
-          </Text>
+          </P>
         </Box>
       </Main>
     </>

src/pages/work.js

@@ -4,7 +4,7 @@ import { graphql } from "gatsby"
 import Layout from "../templates/layout"
 import SEO from "../components/seo"
 import Project from "../components/project"
-import { Text } from '@chakra-ui/core';
+import { I, H1, P } from "../components/typography"
 
 const WorkPage = ({ data }) => (
   <Layout>
@@ -38,8 +38,8 @@ const WorkPage = ({ data }) => (
       image={data.serverless_screenshot.publicURL}
       url="https://codebrahma.com/work"
     />
-    <Text as="h1" fontFamily='heading'>Our Work</Text>
-    <Text>We have built 50+ apps over the last 6 years. We have listed a few</Text>
+    <H1>Our Work</H1>
+    <P>We have built 50+ apps over the last 6 years. We have listed a few</P>
     <Project
       title="Rippling"
       description="Codebrahma built the complete browser and mobile app for this fast growing
@@ -64,7 +64,7 @@ const WorkPage = ({ data }) => (
     <br />
     <br />
     <br />
-    <Text as='i'>And many more projects!!</Text>
+    <I>And many more projects!!</I>
   </Layout>
 )
 

src/templates/blog-post-layout.js

@@ -3,7 +3,8 @@ import Layout from "./layout"
 import { MDXRenderer } from "gatsby-plugin-mdx"
 import { graphql } from "gatsby"
 import Helmet from "react-helmet"
-import { Flex, Box, Text } from "@chakra-ui/core"
+import { Flex, Box } from "@chakra-ui/core"
+import { H1, I } from "../components/typography"
 import { getCategory, slugify } from "../utils"
 import CategoryLink from "../components/categorylink"
 import PlainLink from "../components/link"
@@ -13,11 +14,11 @@ const Sidebar = ({ author, category, tags }) => (
   <div>
     <Box my={2}>
       <Box display='flex' fontSize={[0, 0]} justifyContent="center" lineHeight='0'>
-        <Text as='h1'>Written by</Text>
+        <H1 as='h1'>Written by</H1>
       </Box>
       <Flex justifyContent="center" mt="0.5rem">
         <PlainLink to={`/author/${slugify(author)}`}>
-          <Text as='i'>{author}</Text>
+          <I>{author}</I>
           <br />
         </PlainLink>
       </Flex>
@@ -52,7 +53,7 @@ const Sidebar = ({ author, category, tags }) => (
               return (
                 <Box key={tag} p="0.125rem">
                   <PlainLink key={tag} to={`/tag/${slug}`}>
-                    <Text as='i'>#{slug}</Text>
+                    <I>#{slug}</I>
                   </PlainLink>
                 </Box>
               )
@@ -89,7 +90,7 @@ class BlogLayout extends React.Component {
         <Flex flexWrap="wrap">
           <Box width={["100%", 2 / 3]}>
             <Box mb={4}>
-              <Text as='h1'>{title}</Text>
+              <H1>{title}</H1>
             </Box>
             <MDXRenderer>{body}</MDXRenderer>
           </Box>

src/templates/preview.js

@@ -1,7 +1,8 @@
 import { jsx } from '@emotion/core'
 /** @jsx jsx */
 import styled from '@emotion/styled'
-import { PseudoBox, Box, Text } from '@chakra-ui/core'
+import { PseudoBox, Box } from '@chakra-ui/core'
+import { H3, H4, P } from "../components/typography"
 import Layout from '../templates/layout'
 import PlainLink  from '../components/link'
 import { Link } from 'gatsby'
@@ -82,29 +83,29 @@ const HeadingLink = (props) => (
 // refactoring the Link beautifully with invert etc
 const Blog = ({ frontmatter })=>(
   <Box>
-    <Text as='h3'>
+    <H3>
       <HeadingLink ml='-5px' to={frontmatter.link}>
         {frontmatter.title}
       </HeadingLink>
-    </Text>
+    </H3>
     {getCategory(frontmatter) && (
       <CategoryLink to={`/category/${slugify(getCategory(frontmatter))}`}>
         {getCategory(frontmatter)}
       </CategoryLink>
     )}
     <Box marginTop='2'>
-      <Text>{frontmatter.description}</Text>
+      <P>{frontmatter.description}</P>
       <Box marginTop='1'>
-        <Text fontSize={[0,0]} color='black.2'>
+        <P fontSize={[0,0]} color='black.2'>
           {getTags(frontmatter) && getTags(frontmatter).map((tag,i)=> {
             const slug = slugify(tag)
             return (
               <TagLink key={tag} to={`/tag/${slug}`}>
-                <Text as='i'>#{slug}</Text>
+                <I>#{slug}</I>
               </TagLink>
             )
           })}
-        </Text>
+        </P>
       </Box>
     </Box>
     <Box marginBottom={3} marginTop={1}>
@@ -139,15 +140,15 @@ const JournalPage = ({
         value,
       })
     } />
-    <Text as='h4' color='black.1'>
+    <H4 color='black.1'>
       {getHeading({
         isFirstPage,
         currentPage,
         totalPages,
         type,
         value,
       })}
-    </Text>
+    </H4>
     <Box marginTop={6} width={['100%', 2/3]}>
     {blogs.map((blog,i) => (
       <div key={blog.childMdx.frontmatter.title}>