Refactor page

Author: Turbo

src/App/RouteComponents.js

@@ -4,7 +4,7 @@ import { Route, Switch } from 'react-router';
 import Header from 'src/Components/Header';
 import Footer from 'src/Components/Footer';
 import Loading from 'src/Components/Loading';
-import { RedirectWithStatus } from 'src/Components/SSR';
+import { RedirectWithStatus } from 'src/Components/Route';
 
 /*
 * Create a Universal Component template, allowing SSR a component + Code Splitting

src/Components/Footer/index.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Image, Box } from 'rebass';
-import FlexBox from 'src/Components/FlexBox';
-import { TextBlock } from 'src/Components/Typo';
+import { FlexBox } from 'src/Components/Layout';
+import { Text } from 'src/Components/Typo';
 
 const imagePath = require('src/static/images/full-logo.svg');
 
-const BoxWithFooter = Box.withComponent('footer');
-
-const StyledFooter = styled(BoxWithFooter)`
+const StyledFooter = styled(Box)`
   width: 100%;
   min-height: max-content;
   position: absolute;
@@ -19,13 +17,13 @@ const StyledFooter = styled(BoxWithFooter)`
 `;
 
 const Footer = () => (
-  <StyledFooter py={[2, 3, 4]} px={[3, 4, 5]}>
+  <StyledFooter as="footer" py={[2, 3, 4]} px={[3, 4, 5]}>
     <FlexBox>
       <Image src={imagePath} alt="Brightizen" width="100px" />
 
-      <TextBlock color="black">
+      <Text color="black">
         Copyright © 2018 Brightizen
-      </TextBlock>
+      </Text>
     </FlexBox>
   </StyledFooter>
 );

src/Components/FormElements/Form/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import FlexBox from 'src/Components/FlexBox';
+import { FlexBox } from 'src/Components/Layout';
 
 const Form = ({ children, submit, ...rest }) => (
   <FlexBox {...rest}>

src/Components/FormElements/Input/InputField/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-// import Container from 'src/Components/Container';
+// import { Container } from 'src/Components/Layout';
 
 const arrowDown = 'static/icons/arrow_solid_black.svg';
 
@@ -52,8 +52,6 @@ const StyledInputField = styled.input`
   }
 `;
 
-// const StyledContainerInput = StyledInputField.withComponent('input');
-
 const InputField = ({
   id, placeholder, type, ...rest
 }) => (

src/Components/FormElements/Input/Label/index.js

@@ -6,15 +6,13 @@ import { Text } from 'rebass';
 const Label = ({
   id, label, children, ...rest
 }) => (
-  <StyledLabel htmlFor={id} {...rest}>
+  <StyledLabel as="label" htmlFor={id} {...rest}>
     {label}
     {children}
   </StyledLabel>
 );
 
-const TextWithLabel = Text.withComponent('label');
-
-const StyledLabel = styled(TextWithLabel)`
+const StyledLabel = styled(Text)`
   font-family: ${props => props.theme.fonts.body};
   display: flex;
   flex-direction: column;

src/Components/FormElements/Input/Validation/index.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Span } from 'src/Components/Typo';
+import { Text } from 'src/Components/Typo';
 
 const FormValidation = ({
   isShow, messageType, message, ...rest
 }) => (
-  <StyledFormValidation isShow={isShow} messageType={messageType} {...rest}>
+  <StyledFormValidation as="span" isShow={isShow} messageType={messageType} {...rest}>
     {message}
   </StyledFormValidation>
 );
 
-const StyledFormValidation = styled(Span)`
+const StyledFormValidation = styled(Text)`
   width: 100%;
   display: ${props => (props.isShow ? 'block' : 'none')};
   color: ${props => (props.messageType ? props.theme.colors[props.messageType] : props.theme.colors.black)};

src/Components/FormElements/Input/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import FlexBox from 'src/Components/FlexBox';
+import { FlexBox } from 'src/Components/Layout';
 import Label from './Label';
 import Validation from './Validation';
 import InputField from './InputField';

src/Components/HTML/index.js

@@ -6,13 +6,11 @@ const Markup = ({
     <head>
       <title>Brightizen</title>
       <meta charSet="utf-8" />
-      <meta name="theme-color" content="#1890ff">
-
+      <meta name="theme-color" content="#FF6D00">
       ${styles}
       ${pageTitle}
       ${pageMeta}
       ${pageLink}
-
       <meta name="description" content="This is the description of the website." />
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
       ${styles}

src/Components/Header/Brand.js

@@ -14,6 +14,7 @@ const Brand = ({
 
 const StyledBrand = styled(Image)`
   max-width: ${props => (props.width ? 'auto' : '100%')};
+  display: flex;
 `;
 
 Brand.defaultProps = {

src/Components/Header/MainNav.js

@@ -1,7 +1,12 @@
+import React from 'react';
 import styled from 'styled-components';
-import Container from 'src/Components/Container';
+import { Container } from 'src/Components/Layout';
 
-const MainNav = styled(Container)`
+const MainNav = ({ ...rest }) => (
+  <StyledMainNav as="header" {...rest} />
+);
+
+const StyledMainNav = styled(Container)`
   width: 100%;
   box-shadow: ${props => props.theme.boxShadows[0]};
   font-weight: ${props => props.theme.fontWeights[7]};

src/Components/Header/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import logo from 'src/static/images/full-logo.svg';
 
 import Head from 'src/Components/Head';
-import FlexBox from 'src/Components/FlexBox';
+import { FlexBox } from 'src/Components/Layout';
 import MainNav from './MainNav';
 import Brand from './Brand';
 

src/Components/CardBox/index.js renamed to src/Components/Layout/CardBox.js

@@ -0,0 +1,9 @@
+import CardBox from './CardBox';
+import Container from './Container';
+import FlexBox from './FlexBox';
+
+export {
+  CardBox,
+  Container,
+  FlexBox,
+};

src/Components/Container/index.js renamed to src/Components/Layout/Container.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Container from 'src/Components/Container';
+import { Container } from 'src/Components/Layout';
 
 const StyledAnchor = styled.a`
   cursor: ${props => (props.href ? 'pointer' : 'default')};

src/Components/FlexBox/index.js renamed to src/Components/Layout/FlexBox.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import Container from 'src/Components/Container';
+import { Container } from 'src/Components/Layout';
 
 const StyledLink = styled(Link)`
   display: ${props => props.display};

src/Components/Layout/index.js

@@ -1,22 +1,14 @@
 import styled from 'styled-components';
-import { Heading } from 'rebass';
+import { Heading as H } from 'rebass';
 
-const StyledHeading = styled(Heading)`
+const Heading = styled(H)`
   font-family: ${props => props.theme.fonts.headline};
 `;
 
-StyledHeading.defaultProps = {
+Heading.defaultProps = {
   fontSize: [2, 3, 4],
   lineHeight: 'title',
   m: 0,
 };
 
-const H1 = StyledHeading.withComponent('h1');
-const H2 = StyledHeading.withComponent('h2');
-const H3 = StyledHeading.withComponent('h3');
-
-export {
-  H1,
-  H2,
-  H3,
-};
+export default Heading;

src/Components/Navigation/Anchor/index.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Text as T } from 'rebass';
+
+const Text = styled(T)`
+  font-family: ${props => props.theme.fonts.body};
+`;
+
+Text.defaultProps = {
+  color: 'white',
+  fontSize: [0, 1, 2],
+  lineHeight: 'body',
+  m: 0,
+};
+
+export default Text;

src/Components/Navigation/NavLink/index.js

@@ -1,21 +1,4 @@
-import {
-  H1,
-  H2,
-  H3,
-} from './Heading';
-import {
-  TextBlock,
-  P,
-  Span,
-  Small,
-} from './TextBlock';
+import Heading from './Heading';
+import Text from './Text';
 
-export {
-  H1,
-  H2,
-  H3,
-  TextBlock,
-  P,
-  Span,
-  Small,
-};
+export { Heading, Text };

src/Components/SSR/HttpStatus/index.js renamed to src/Components/Route/HttpStatus/index.js

@@ -1,15 +1,13 @@
 import React from 'react';
-import { HttpStatus } from 'src/Components/SSR';
+import { HttpStatus } from 'src/Components/Route';
 import Head from 'src/Components/Head';
-import Footer from 'src/Components/Footer';
 
 const NotFound404 = () => (
   <HttpStatus httpStatus={404}>
     <Head title="Not found" />
     <div>
       <h1>Oops, nothing here!</h1>
     </div>
-    <Footer />
   </HttpStatus>
 );