From dc519b0fec36058b77c6e06ee3119fbb454358d5 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 8 Nov 2019 17:34:06 +0400
Subject: [PATCH] Update page header and add roadmap button

---
 components/icon-row-block/style.js |  2 +-
 components/page-header/index.js    | 27 ++++++++++++++++++++++-----
 components/page-header/style.js    | 22 ++++++++++++++++++++++
 pages/roadmaps.js                  |  5 ++++-
 4 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/components/icon-row-block/style.js b/components/icon-row-block/style.js
index e8d84f272..7899be341 100644
--- a/components/icon-row-block/style.js
+++ b/components/icon-row-block/style.js
@@ -9,7 +9,7 @@ export const SubmitWrap = styled.div`
 
   svg {
     height: 25px;
-    color: dimgrey;
+    color: #d6d6d6;
   }
 `;
 
diff --git a/components/page-header/index.js b/components/page-header/index.js
index d119f2a39..bf12d0de0 100644
--- a/components/page-header/index.js
+++ b/components/page-header/index.js
@@ -1,10 +1,27 @@
-import { HeaderWrap, Subtitle, Title } from './style';
+import { HeaderWrap, HeaderButtons, HeaderButton, Subtitle, Title } from './style';
 
-const PageHeader = (props) => (
+const PageHeader = ({
+  title,
+  subtitle,
+  children,
+  primaryButtonText,
+  primaryButtonUrl,
+  secondaryButtonText,
+  secondaryButtonUrl,
+}) => (
   <HeaderWrap>
-    <Title>Developer Roadmaps</Title>
-    <Subtitle>We continue to improve these roadmaps and add new ones, subscribe to get occasional updates</Subtitle>
-    { props.children }
+    <Title>{ title }</Title>
+    <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />
+
+    {
+      (primaryButtonText || secondaryButtonText) &&
+      <HeaderButtons>
+        { primaryButtonText && <HeaderButton primary href={primaryButtonUrl}>{ primaryButtonText }</HeaderButton> }
+        { secondaryButtonText && <HeaderButton href={secondaryButtonUrl}>{ secondaryButtonText }</HeaderButton> }
+      </HeaderButtons>
+    }
+
+    { children }
   </HeaderWrap>
 );
 
diff --git a/components/page-header/style.js b/components/page-header/style.js
index 88b0eef11..c50d31e28 100644
--- a/components/page-header/style.js
+++ b/components/page-header/style.js
@@ -8,9 +8,31 @@ export const HeaderWrap = styled.div`
 export const Title = styled.h1`
   font-size: 48px;
   font-weight: 700;
+  margin-bottom: 12px;
 `;
 
 export const Subtitle = styled.p`
   font-size: 16px;
   color: #444;
+  
+  a {
+    color: inherit;
+    font-weight: 700;
+  }
+`;
+
+export const HeaderButton = styled.a`
+  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px 0;
+  padding: 9px 25px;
+  background: ${ props => props.primary ? '#101010' : '#ffffff' } !important;
+  color: ${ props => props.primary ? '#ffffff' : '#101010' } !important;
+  border-radius: 4px;
+  margin-left: ${ props => !props.primary ? '15px': 0 };
+  cursor: pointer;
+  font-size: 15px;
+  display: inline-block;
+`;
+
+export const HeaderButtons = styled.div`
+  margin: 30px 0 0;
 `;
diff --git a/pages/roadmaps.js b/pages/roadmaps.js
index 896fadcc7..803d3a3b4 100644
--- a/pages/roadmaps.js
+++ b/pages/roadmaps.js
@@ -13,7 +13,10 @@ const RoadmapsList = () => (
   <DefaultLayout>
     <SiteNav />
     <div className="container">
-      <PageHeader />
+      <PageHeader
+        title="Developer Roadmaps"
+        subtitle="We continue to improve these roadmaps and add new ones, <a href='/signup'>subscribe to get occasional updates</a>"
+      />
     </div>
     <div className="pt-5 pb-5 bg-light border-top">
       <div className="container">