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]};