From 020f7123a635e3ad7fd8284fd7ba98385aa4e2ef Mon Sep 17 00:00:00 2001
From: LordMathis <namesny.matus@gmail.com>
Date: Thu, 14 Jun 2018 16:48:56 +0200
Subject: [PATCH] Update posts style

---
 src/components/Navbar.js              | 17 +++++++++++++++++
 src/components/Navbar.scss            | 12 ++++++++++++
 src/components/Post.js                | 21 +++++++++++----------
 src/components/index.js               |  1 +
 src/containers/PostContainer.js       |  9 +++++----
 src/static/stylesheets/variables.scss |  2 +-
 6 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Navbar.js
 create mode 100644 src/components/Navbar.scss

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
new file mode 100644
index 0000000..381d240
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/src/components/Navbar.scss b/src/components/Navbar.scss
new file mode 100644
index 0000000..d38fda1
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Post.js b/src/components/Post.js
index 8dc470c..ff4364b 100644
--- a/src/components/Post.js
+++ b/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}>
-        <a href={this.props.post.link}>
-          <h1>{this.props.post.title}</h1>
-        </a>
-        <div className={contentStyle.content}>
-          <div className={styles.postDate}>
-            <h3>{this.props.post.published}</h3>
-          </div>
-          <div className={styles.postContent} dangerouslySetInnerHTML={{__html: this.props.post.body}}>
+      <div>
+        <Navbar />
+        <div className={contentStyle.contentWrapper}>
+          <Header header={this.props.post.title} />
+          <div className={contentStyle.content}>
+            <div className={styles.postDate}>
+              <h3>{this.props.post.published}</h3>
+            </div>
+            <div className={styles.postContent} dangerouslySetInnerHTML={{__html: this.props.post.body}}>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/index.js b/src/components/index.js
index 9fbb506..f887064 100644
--- a/src/components/index.js
+++ b/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';
diff --git a/src/containers/PostContainer.js b/src/containers/PostContainer.js
index 0de2a79..ea40d40 100644
--- a/src/containers/PostContainer.js
+++ b/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}
-            post={this.state.post} />
+      <Wrapper>
+        <Post isLoading={this.state.isLoading}
+              post={this.state.post} />
+      </Wrapper>
     );
   }
 }
diff --git a/src/static/stylesheets/variables.scss b/src/static/stylesheets/variables.scss
index 85f74fa..4d16c03 100644
--- a/src/static/stylesheets/variables.scss
+++ b/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;