diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js
new file mode 100644
index 00000000..30751514
--- /dev/null
+++ b/frontend/src/components/article/index.js
@@ -0,0 +1,16 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('@ui/shared/functions');
+
+const {
+ default: styled
+} = Styled;
+
+const {
+ remcalc
+} = fns;
+
+module.exports = styled.article`
+ margin-top: ${remcalc(78)};
+`;
diff --git a/frontend/src/components/footer/index.js b/frontend/src/components/footer/index.js
new file mode 100644
index 00000000..50f9215a
--- /dev/null
+++ b/frontend/src/components/footer/index.js
@@ -0,0 +1,7 @@
+const Styled = require('styled-components');
+
+const {
+ default: styled
+} = Styled;
+
+module.exports = styled.footer``;
diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js
new file mode 100644
index 00000000..306cfa6f
--- /dev/null
+++ b/frontend/src/components/header/index.js
@@ -0,0 +1,46 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const Column = require('@ui/components/column');
+const Container = require('@ui/components/container');
+const fns = require('@ui/shared/functions');
+const logo = require('@resources/logo.png');
+const Row = require('@ui/components/row');
+
+const {
+ default: styled
+} = Styled;
+
+const {
+ remcalc
+} = fns;
+
+const StyledHeader = styled.header`
+ height: ${remcalc(78)};
+ background-color: #ffffff;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0
+`;
+
+const StyledLogo = styled.img`
+ padding-top: ${remcalc(21)};
+ padding-bottom: ${remcalc(21)};
+`;
+
+const Header = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+module.exports = Header;
diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js
index 758d09de..a42b984b 100644
--- a/frontend/src/containers/app.js
+++ b/frontend/src/containers/app.js
@@ -1,8 +1,13 @@
const React = require('react');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router');
+const Styled = require('styled-components');
const actions = require('@state/actions');
+const Article = require('@components/article');
+const Base = require('@ui/components/base');
+const Footer = require('@components/footer');
+const Header = require('@components/header');
const Home = require('@containers/home');
const NotFound = require('@containers/not-found');
@@ -19,6 +24,10 @@ const {
Match
} = ReactRouter;
+const {
+ injectGlobal
+} = Styled;
+
const App = connect()(React.createClass({
propTypes: {
children: React.PropTypes.node,
@@ -35,6 +44,10 @@ const App = connect()(React.createClass({
// that doens't pass it's instance to matched routes
// wait for react-router-redux@5
dispatch(updateRouter(router));
+
+ injectGlobal`
+ ${Base.global}
+ `;
},
render: function() {
const {
@@ -46,9 +59,9 @@ const App = connect()(React.createClass({
}
return (
-
+
{children}
-
+
);
}
}));
@@ -56,14 +69,18 @@ const App = connect()(React.createClass({
module.exports = (props) => {
return (
-
-
+
+
+
+
+
+
);
};
diff --git a/frontend/src/resources/logo.png b/frontend/src/resources/logo.png
new file mode 100644
index 00000000..b3367991
Binary files /dev/null and b/frontend/src/resources/logo.png differ
diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js
index 7d8b91aa..55432799 100644
--- a/ui/src/components/base/index.js
+++ b/ui/src/components/base/index.js
@@ -476,3 +476,5 @@ module.exports = styled.div`
-webkit-appearance: none;
}
`;
+
+module.exports.global = require('./global');