Update posts style

src/components/Navbar.js

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import config from '../utils/config.json';
+import '../static/stylesheets/globals.scss';
+import styles from './Navbar.scss';
+
+export default class Navbar extends Component {
+
+  render () {
+    return (
+      <div className={styles.navbar}>
+        <a href='/'>
+          <h3>{config.name}</h3>
+        </a>
+      </div>
+    )
+  }
+}

src/components/Navbar.scss

@@ -0,0 +1,12 @@
+@import "../static/stylesheets/variables.scss";
+
+.navbar {
+  background-color: $blue;
+  text-align: left;
+  padding: 2px;
+}
+
+h3 {
+  color: $white;
+  padding-left: 5px;
+}

src/components/Post.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Spinner} from '.';
+import {Spinner, Header, Navbar} from '.';
 import '../static/stylesheets/globals.scss';
 import contentStyle from '../static/stylesheets/content.scss';
 import styles from './Post.scss';
@@ -16,15 +16,16 @@ export default class Post extends Component {
     }
 
     return (
-      <div className={contentStyle.contentWrapper}>
+      <div>
-        <a href={this.props.post.link}>
+        <Navbar />
-          <h1>{this.props.post.title}</h1>
+        <div className={contentStyle.contentWrapper}>
-        </a>
+          <Header header={this.props.post.title} />
-        <div className={contentStyle.content}>
+          <div className={contentStyle.content}>
-          <div className={styles.postDate}>
+            <div className={styles.postDate}>
-            <h3>{this.props.post.published}</h3>
+              <h3>{this.props.post.published}</h3>
-          </div>
+            </div>
-          <div className={styles.postContent} dangerouslySetInnerHTML={{__html: this.props.post.body}}>
+            <div className={styles.postContent} dangerouslySetInnerHTML={{__html: this.props.post.body}}>
+            </div>
           </div>
         </div>
       </div>

src/components/index.js

@@ -6,4 +6,5 @@ export { default as NotFoundPage } from './NotFoundPage';
 export { default as Spinner } from './Spinner';
 export { default as Header } from './Header';
 export { default as Wrapper } from './Wrapper';
+export { default as Navbar } from './Navbar';
 export { default as App } from './App';

src/containers/PostContainer.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import axios from 'axios';
-import {Post} from '../components';
+import {Post, Wrapper} from '../components';
 
 export default class PostContainer extends Component {
   constructor() {
@@ -15,7 +15,6 @@ export default class PostContainer extends Component {
     const url = '/api/post/' + this.props.match.params.postname;
 
     axios.get(url).then((res) => {
-      console.log(res.data);
       this.setState({
         isLoading: false,
         post: res.data,
@@ -25,8 +24,10 @@ export default class PostContainer extends Component {
 
   render() {
     return (
-      <Post isLoading={this.state.isLoading}
+      <Wrapper>
-            post={this.state.post} />
+        <Post isLoading={this.state.isLoading}
+              post={this.state.post} />
+      </Wrapper>
     );
   }
 }

src/static/stylesheets/variables.scss

@@ -2,6 +2,6 @@ $font-header: 'Concert One', cursive;
 $font-paragraph: 'Open Sans', sans-serif;
 $white: #fdfdfd;
 $black: #2f2f2f;
-$blue: #0a6cf5;
+$blue: #144A98;
 $break-medium: 768px;
 $break-large: 1200px;