diff --git a/components/BottomShare/index.js b/components/BottomShare/index.js new file mode 100644 index 0000000..6662a13 --- /dev/null +++ b/components/BottomShare/index.js @@ -0,0 +1,21 @@ +// @flow +import React from 'react'; +import Card from '../Card'; +import ShareButtons from '../ShareButtons'; +import { CardContent, TopBorder } from './style'; +import { SmallHeading, SmallSubheading } from '../Page/style'; + +const BottomShare = () => ( + + + + Feeling more secure? + + Spread the word about improving online privacy and security + + + + +); + +export default BottomShare; diff --git a/components/BottomShare/style.js b/components/BottomShare/style.js new file mode 100644 index 0000000..aa08645 --- /dev/null +++ b/components/BottomShare/style.js @@ -0,0 +1,23 @@ +// @flow +import styled from 'styled-components'; + +export const CardContent = styled.div` + padding: 24px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + + @media (max-width: 768px) { + padding-top: 40px; + } +`; + +export const TopBorder = styled.div` + width: 100%; + height: 4px; + background-image: linear-gradient(to left, #a913de, #6ac9ff); + border-radius: 6px 6px 0 0; +`; diff --git a/components/Checklist/style.js b/components/Checklist/style.js index 535ac4f..342e70a 100644 --- a/components/Checklist/style.js +++ b/components/Checklist/style.js @@ -4,6 +4,6 @@ import styled from 'styled-components'; export const Grid = styled.div` display: grid; grid-template-columns: 1fr; - margin-top: 32px; + margin-top: 48px; width: 100%; `; diff --git a/components/ChecklistItem/style.js b/components/ChecklistItem/style.js index 1c9bde5..cacc8e6 100644 --- a/components/ChecklistItem/style.js +++ b/components/ChecklistItem/style.js @@ -76,17 +76,25 @@ export const Checkbox = styled.span` height: 32px; border-radius: 4px; border: 1px solid - ${props => (props.isChecked ? theme.success.default : theme.border.default)}; + ${props => (props.isChecked ? theme.bg.default : theme.border.default)}; background: ${props => props.isChecked ? theme.success.default : theme.bg.wash}; cursor: pointer; position: relative; + background-image: ${props => + props.isChecked + ? 'radial-gradient(circle at top right, #a913de, #6ac9ff)' + : 'none'}; + box-shadow: ${props => + props.isChecked ? 'inset 0 0 1px rgba(0,0,0,0.4)' : 'none'}; &:hover { - ${Shadows.default}; - border: 1px solid - ${props => - props.isChecked ? theme.success.default : theme.border.active}; + ${props => !props.isChecked && Shadows.default}; + background: ${theme.bg.default}; + background-image: ${props => + props.isChecked + ? 'radial-gradient(circle at top right, #a913de, #6ac9ff)' + : 'none'}; } &:after { diff --git a/components/Header/Logo.js b/components/Header/Logo.js index 211599b..310bfec 100644 --- a/components/Header/Logo.js +++ b/components/Header/Logo.js @@ -9,22 +9,26 @@ const Logo = () => ( fill="none" xmlns="http://www.w3.org/2000/svg" > - - + @@ -33,9 +37,9 @@ const Logo = () => ( diff --git a/components/Page/index.js b/components/Page/index.js index 83612f1..c3075cc 100644 --- a/components/Page/index.js +++ b/components/Page/index.js @@ -13,14 +13,12 @@ import { SectionHeading, Heading, Subheading, - LargeHeading, - LargeSubheading, InnerContainer, ScrollToTop, } from './style'; import * as gtag from '../../lib/gtag'; -export { SectionHeading, Heading, Subheading, LargeHeading, LargeSubheading }; +export { SectionHeading, Heading, Subheading }; type Props = { children: Node, diff --git a/components/Page/style.js b/components/Page/style.js index 903f6f7..2d86d6f 100644 --- a/components/Page/style.js +++ b/components/Page/style.js @@ -75,12 +75,16 @@ export const Subheading = styled.h4` } `; -export const LargeHeading = styled(Heading)` - font-size: 32px; +export const SmallHeading = styled(Heading)` + font-size: 30px; + margin-bottom: 4px; + margin-top: 8px; `; -export const LargeSubheading = styled(Subheading)` +export const SmallSubheading = styled(Subheading)` font-size: 20px; + margin-top: 4px; + margin-bottom: 32px; `; export const ScrollToTop = styled.button` diff --git a/components/ShareButtons/style.js b/components/ShareButtons/style.js index 5946ddd..45e9a2a 100644 --- a/components/ShareButtons/style.js +++ b/components/ShareButtons/style.js @@ -5,8 +5,6 @@ export const Container = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; - margin-top: 40px; - margin-bottom: 16px; width: 100%; button { diff --git a/pages/index.js b/pages/index.js index f8ef05e..625a04c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -4,6 +4,7 @@ import Page, { SectionHeading, Heading, Subheading } from '../components/Page'; import type { GetInitialProps } from '../types'; import Checklist from '../components/Checklist'; import ShareButtons from '../components/ShareButtons'; +import BottomShare from '../components/BottomShare'; class Index extends React.Component<{}> { static async getInitialProps({ res }: GetInitialProps) { @@ -28,9 +29,13 @@ class Index extends React.Component<{}> { +
+ + + ); } diff --git a/static/android-icon-144x144.png b/static/android-icon-144x144.png index f3594a0..266176c 100644 Binary files a/static/android-icon-144x144.png and b/static/android-icon-144x144.png differ diff --git a/static/android-icon-192x192.png b/static/android-icon-192x192.png index a3300c5..16b7a57 100644 Binary files a/static/android-icon-192x192.png and b/static/android-icon-192x192.png differ diff --git a/static/android-icon-36x36.png b/static/android-icon-36x36.png index f7848c3..9b83f81 100644 Binary files a/static/android-icon-36x36.png and b/static/android-icon-36x36.png differ diff --git a/static/android-icon-48x48.png b/static/android-icon-48x48.png index 708bbe5..c91694d 100644 Binary files a/static/android-icon-48x48.png and b/static/android-icon-48x48.png differ diff --git a/static/android-icon-72x72.png b/static/android-icon-72x72.png index 7ceb0b6..9c4f4c0 100644 Binary files a/static/android-icon-72x72.png and b/static/android-icon-72x72.png differ diff --git a/static/android-icon-96x96.png b/static/android-icon-96x96.png index 2dac94b..a089eab 100644 Binary files a/static/android-icon-96x96.png and b/static/android-icon-96x96.png differ diff --git a/static/apple-icon-114x114.png b/static/apple-icon-114x114.png index dcaedba..53947f2 100644 Binary files a/static/apple-icon-114x114.png and b/static/apple-icon-114x114.png differ diff --git a/static/apple-icon-120x120.png b/static/apple-icon-120x120.png index fc595f3..f0abcb9 100644 Binary files a/static/apple-icon-120x120.png and b/static/apple-icon-120x120.png differ diff --git a/static/apple-icon-144x144.png b/static/apple-icon-144x144.png index f3594a0..266176c 100644 Binary files a/static/apple-icon-144x144.png and b/static/apple-icon-144x144.png differ diff --git a/static/apple-icon-152x152.png b/static/apple-icon-152x152.png index dc0e378..e97cbbf 100644 Binary files a/static/apple-icon-152x152.png and b/static/apple-icon-152x152.png differ diff --git a/static/apple-icon-180x180.png b/static/apple-icon-180x180.png index e903fad..6634e95 100644 Binary files a/static/apple-icon-180x180.png and b/static/apple-icon-180x180.png differ diff --git a/static/apple-icon-57x57.png b/static/apple-icon-57x57.png index 3272046..22f72c5 100644 Binary files a/static/apple-icon-57x57.png and b/static/apple-icon-57x57.png differ diff --git a/static/apple-icon-60x60.png b/static/apple-icon-60x60.png index f45ae31..669b3b8 100644 Binary files a/static/apple-icon-60x60.png and b/static/apple-icon-60x60.png differ diff --git a/static/apple-icon-72x72.png b/static/apple-icon-72x72.png index 7ceb0b6..9c4f4c0 100644 Binary files a/static/apple-icon-72x72.png and b/static/apple-icon-72x72.png differ diff --git a/static/apple-icon-76x76.png b/static/apple-icon-76x76.png index 59fcc93..3de1155 100644 Binary files a/static/apple-icon-76x76.png and b/static/apple-icon-76x76.png differ diff --git a/static/apple-icon-precomposed.png b/static/apple-icon-precomposed.png index 5897c1f..2d5d9cf 100644 Binary files a/static/apple-icon-precomposed.png and b/static/apple-icon-precomposed.png differ diff --git a/static/apple-icon.png b/static/apple-icon.png index 5897c1f..2d5d9cf 100644 Binary files a/static/apple-icon.png and b/static/apple-icon.png differ diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png index 628ee61..7c5db09 100644 Binary files a/static/favicon-16x16.png and b/static/favicon-16x16.png differ diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png index f74f51b..5de2630 100644 Binary files a/static/favicon-32x32.png and b/static/favicon-32x32.png differ diff --git a/static/favicon-96x96.png b/static/favicon-96x96.png index 2dac94b..a089eab 100644 Binary files a/static/favicon-96x96.png and b/static/favicon-96x96.png differ diff --git a/static/favicon.ico b/static/favicon.ico index 0c2b0d4..5ac692e 100644 Binary files a/static/favicon.ico and b/static/favicon.ico differ diff --git a/static/ms-icon-144x144.png b/static/ms-icon-144x144.png index f3594a0..266176c 100644 Binary files a/static/ms-icon-144x144.png and b/static/ms-icon-144x144.png differ diff --git a/static/ms-icon-150x150.png b/static/ms-icon-150x150.png index 3230170..f7c13ff 100644 Binary files a/static/ms-icon-150x150.png and b/static/ms-icon-150x150.png differ diff --git a/static/ms-icon-310x310.png b/static/ms-icon-310x310.png index af428ac..e45b34e 100644 Binary files a/static/ms-icon-310x310.png and b/static/ms-icon-310x310.png differ diff --git a/static/ms-icon-70x70.png b/static/ms-icon-70x70.png index 71b103e..4afbe6d 100644 Binary files a/static/ms-icon-70x70.png and b/static/ms-icon-70x70.png differ diff --git a/static/og-image.png b/static/og-image.png index fe224b3..5880c87 100644 Binary files a/static/og-image.png and b/static/og-image.png differ