diff --git a/components/guide-header/index.js b/components/guide-header/index.js index 13c1df3c6..41d5a2ce7 100644 --- a/components/guide-header/index.js +++ b/components/guide-header/index.js @@ -1,4 +1,14 @@ -import { AuthorImage, GuideAuthor, GuideDate, GuideMeta, GuideSubtitle, GuideTitle, HeaderWrap } from './style'; +import { + ActionItems, + AuthorImage, + EditGuide, + GuideAuthor, + GuideDate, + GuideMeta, + GuideSubtitle, + GuideTitle, + HeaderWrap, +} from './style'; const GuideHeader = (props) => ( @@ -9,9 +19,13 @@ const GuideHeader = (props) => ( · Wednesday, October 9th 2019 + · + Edit this Guide Design Patterns for Humans An ultra-simplified explanation to design patterns + + ); diff --git a/components/guide-header/style.js b/components/guide-header/style.js index 9042744e8..b2ad42691 100644 --- a/components/guide-header/style.js +++ b/components/guide-header/style.js @@ -3,6 +3,7 @@ import styled from 'styled-components'; export const HeaderWrap = styled.div` padding: 80px 15px 45px; text-align: center; + margin-bottom: 50px; `; export const GuideTitle = styled.h1` @@ -26,7 +27,9 @@ export const GuideMeta = styled.p` export const GuideDate = styled.span` margin-left: 7px; + margin-right: 7px; `; + export const GuideAuthor = styled.a` margin-right: 7px; font-weight: 500; @@ -36,9 +39,16 @@ export const GuideAuthor = styled.a` color: #101010; } `; + export const AuthorImage = styled.img` width: 22px; height: 22px; border-radius: 100%; margin-right: 10px; -`; \ No newline at end of file +`; + +export const EditGuide = styled.a` + margin-left: 7px; +`; + +export const ActionItems = styled.div``; \ No newline at end of file