From c63aecdf7996e4caba5d913b20e825a1ca7e9053 Mon Sep 17 00:00:00 2001
From: Stuart Taylor <staylor1012@gmail.com>
Date: Fri, 3 Aug 2018 10:33:18 +0100
Subject: [PATCH] fix(css): Typography and layout

---
 common/app/helperComponents/SlimWidthRow.js |  2 +-
 news/NewsApp.js                             | 24 ++++++++++++++++++++-
 news/routes/Show/Show.js                    | 15 ++++---------
 news/routes/Show/components/Author.js       |  8 +++++--
 4 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/common/app/helperComponents/SlimWidthRow.js b/common/app/helperComponents/SlimWidthRow.js
index 68119ceb73..5d39d05ee2 100644
--- a/common/app/helperComponents/SlimWidthRow.js
+++ b/common/app/helperComponents/SlimWidthRow.js
@@ -5,7 +5,7 @@ import { Row, Col } from 'react-bootstrap';
 function SlimWidthRow({ children, ...restProps }) {
   return (
     <Row {...restProps}>
-      <Col md={ 4 } mdOffset={ 4 } sm={ 12 }>
+      <Col md={ 6 } mdOffset={ 3 } sm={ 12 }>
         { children }
       </Col>
     </Row>
diff --git a/news/NewsApp.js b/news/NewsApp.js
index 0ace6a717e..2d8e1345d7 100644
--- a/news/NewsApp.js
+++ b/news/NewsApp.js
@@ -13,11 +13,33 @@ const styles = `
 .app-layout li,
 .app-layout a,
 .app-layout span {
-  font-size: 18px;
+  font-size: 21.5px;
 }
 .app-layout hr {
   background-image: linear-gradient(to right, rgba(0, 100, 0, 0), rgba(0, 100, 0, 0.75), rgba(0, 100, 0, 0));
 }
+
+.app-layout p {
+  paddin-top: 8px;
+}
+
+ .app-layout h1, .app-layout h2, .app-layout h3, .app-layout h4, .app-layout h5, .app-layout h6
+ {
+   padding-top: 35px;
+   padding-bottom: 0px;
+ }
+
+.app-layout h1 {
+  font-size: 42px;
+}
+
+.app-layout h2 {
+  font-size: 34px;
+}
+
+.app-layout h3 {
+  font-size: 32px;
+}
 `;
 /* eslint-enable max-len */
 function NewsApp() {
diff --git a/news/routes/Show/Show.js b/news/routes/Show/Show.js
index ef622f297d..ac5cb05908 100644
--- a/news/routes/Show/Show.js
+++ b/news/routes/Show/Show.js
@@ -13,6 +13,9 @@ const propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired
   }),
+  location: PropTypes.shape({
+    state: PropTypes.object
+  }),
   match: PropTypes.shape({
     params: PropTypes.shape({
       username: PropTypes.string,
@@ -29,17 +32,6 @@ const youtubeOpts = {
 };
 
 const styles = `
-  article figure {
-    width: calc(100vw - 30px);
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin-left: -50vw;
-    margin-right: -50vw;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
 
   .feature-image-wrapper {
     padding-top: 32px;
@@ -91,6 +83,7 @@ class ShowArticle extends Component {
     }
     if (article) {
       const [, shortId] = slug.split('--');
+      /* eslint-disable react/no-did-mount-set-state */
       return this.setState(
         {
           fetchState: {
diff --git a/news/routes/Show/components/Author.js b/news/routes/Show/components/Author.js
index 5189237061..91e7fdf5a7 100644
--- a/news/routes/Show/components/Author.js
+++ b/news/routes/Show/components/Author.js
@@ -21,12 +21,16 @@ const styles = `
   .author-bio {
     display: flex;
     flex-direction: column;
-    margin-left: 10px;
+    margin-left: 30px;
   }
 
   .author-bio span {
     font-size: 16px;
   }
+
+  .author-block {
+    text-decoration: none;
+  }
 `;
 
 function Author({ author: { name, avatar, bio } }) {
@@ -38,7 +42,7 @@ function Author({ author: { name, avatar, bio } }) {
       <img height='50px' src={avatar} />
       <div className='author-bio'>
         <a href='https://www.freecodecamp.org/quincylarson'>
-          <span>{name}</span>
+          <span>By {name}</span>
         </a>
         <span>{bio.slice(0, 101)}</span>
       </div>