✨ Add email form

Sergei Orlow · Sergei Orlow · commit f0a03596495e · 2021-03-08T01:00:20.000+03:00
diff --git a/src/colours.js b/src/colours.js
@@ -1,5 +1,5 @@
 export const Colours = {
-	PRIMARY: '#CEB3AB',
+	PRIMARY: '#c29da6',
 	SECONDARY: '#DCDFB6',
 	LIGHT: '#F2E6BE',
 	ACCENT: '#FF7F00',
diff --git a/src/components/subscription-form.js b/src/components/subscription-form.js
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -6,6 +6,7 @@ import { Centralise } from '../components/centralise'
 import { Layout } from '../layout'
 import { PostPreview } from '../components/post-preview'
 import Seo from '../components/seo'
+import SubscriptionForm from '../components/subscription-form'
 
 const List = styled.ul`
 	list-style: none;
@@ -31,6 +32,8 @@ const Index = ({ data }) => (
 					</li>
 				))}
 			</List>
+
+			<SubscriptionForm />
 		</Centralise>
 	</Layout>
 )
diff --git a/src/pages/subscription-confirmation.js b/src/pages/subscription-confirmation.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Centralise } from '../components/centralise'
+import Seo from '../components/seo'
+import { Layout } from '../layout'
+
+const SubscriptionConfirmationPage = () => (
+	<Layout>
+		<Seo
+			title='Thanks!'
+			description='It must be the wrong place.'
+			meta={[
+				{
+					name: 'robots',
+					content: 'noindex, nofollow',
+				},
+			]}
+		/>
+		<Centralise css={{ textAlign: 'center', marginTop: '10rem' }}>
+			<h1>
+				All done!{' '}
+				<span role='img' aria-label='high fives'>
+					🙌
+				</span>
+			</h1>
+			<p>
+				You should get an approval email shortly. Click the button there if you didn&apos;t change
+				your mind.
+			</p>
+		</Centralise>
+	</Layout>
+)
+
+export default SubscriptionConfirmationPage
diff --git a/src/pages/thanks-for-subscribing.js b/src/pages/thanks-for-subscribing.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Centralise } from '../components/centralise'
+import Seo from '../components/seo'
+import { Layout } from '../layout'
+
+const ThanksForSubscribingPage = () => (
+	<Layout>
+		<Seo
+			title='Thanks for subscribing!'
+			description='Thanks to subscribing to my newsletter.'
+			meta={[
+				{
+					name: 'robots',
+					content: 'noindex, nofollow',
+				},
+			]}
+		/>
+		<Centralise css={{ textAlign: 'center', marginTop: '10rem' }}>
+			<h1>Thank you for subscribing!</h1>
+			<p>
+				You should get an approval email shortly. Click the button there if you didn&apos;t change
+				your mind.
+			</p>
+		</Centralise>
+	</Layout>
+)
+
+export default ThanksForSubscribingPage
diff --git a/src/templates/blog-post-template.js b/src/templates/blog-post-template.js
@@ -12,6 +12,7 @@ import { SmallText } from '../components/small-text'
 import { Colours } from '../colours'
 import { useSiteMetadata } from '../hooks/use-site-metadata'
 import Seo from '../components/seo'
+import SubscriptionForm from '../components/subscription-form'
 
 const Hero = styled(BackgroundImage)`
 	width: 100%;
@@ -114,6 +115,8 @@ const PageTemplate = ({ data }) => {
 						</a>
 						.
 					</SmallText>
+
+					<SubscriptionForm />
 				</Centralise>
 			</Article>
 		</Layout>
diff --git a/src/templates/tag-template.js b/src/templates/tag-template.js
@@ -7,6 +7,7 @@ import styled from '@emotion/styled'
 import { PostPreview } from '../components/post-preview'
 import { SmallText } from '../components/small-text'
 import Seo from '../components/seo'
+import SubscriptionForm from '../components/subscription-form'
 
 const List = styled.ul`
 	list-style: none;
@@ -42,6 +43,8 @@ const TagTemplate = ({ pageContext, data }) => {
 					This page contains all articles tagged with #{pageContext.tag}. Currently there are
 					<strong> {data.allMarkdownRemark.edges.length}</strong>.
 				</SmallText>
+
+				<SubscriptionForm />
 			</Centralise>
 		</Layout>
 	)
