Merge pull request #7 from brianlovin/cleanup

Cleanup

components/Header/Logo.js

@@ -0,0 +1,49 @@
+// @flow
+import React from 'react';
+
+const Logo = () => (
+  <svg
+    width="24"
+    height="29"
+    viewBox="0 0 24 29"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.2 20.0789C13.9174 19.6639 14.4 18.8883 14.4 18C14.4 16.6745 13.3255 15.6 12 15.6C10.6745 15.6 9.6 16.6745 9.6 18C9.6 18.8883 10.0826 19.6639 10.8 20.0789V21.6C10.8 22.2627 11.3373 22.8 12 22.8C12.6627 22.8 13.2 22.2627 13.2 21.6V20.0789Z"
+      fill="url(#paint0_linear)"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.3905 10.3689C20.2716 1.07667 18.9621 0 12 0C5.03792 0 3.72841 1.07667 3.60955 10.3689C0.484609 11.4315 0 13.8619 0 19.2C0 27.6 1.2 28.8 12 28.8C22.8 28.8 24 27.6 24 19.2C24 13.8619 23.5154 11.4315 20.3905 10.3689ZM15.8346 2.68544C14.928 2.44887 13.7752 2.39919 12 2.4C10.2248 2.39919 9.07196 2.44887 8.1654 2.68544C7.43904 2.8659 7.17441 3.09677 6.99522 3.34706C6.74561 3.69573 6.45306 4.39304 6.25866 5.87989C6.11609 6.95433 6.04544 8.2459 6.01655 9.85748C7.57941 9.66222 9.54084 9.6 12 9.6C14.4592 9.6 16.4206 9.66222 17.9835 9.85748C17.9546 8.2459 17.8839 6.95433 17.7413 5.8799C17.5469 4.39305 17.2544 3.69573 17.0048 3.34707C16.8256 3.09677 16.561 2.8659 15.8346 2.68544ZM2.70147 14.6661C2.48002 15.6848 2.4 17.1067 2.4 19.2C2.4 21.2932 2.48002 22.7152 2.70147 23.7339C2.90889 24.688 3.19322 25.0662 3.46977 25.2925C3.80835 25.5695 4.47216 25.8907 5.92343 26.1076C7.36508 26.323 9.31177 26.4 12 26.4C14.6882 26.4 16.6349 26.323 18.0766 26.1076C19.5278 25.8908 20.1916 25.5695 20.5302 25.2925C20.8068 25.0662 21.0911 24.688 21.2985 23.7339C21.52 22.7152 21.6 21.2932 21.6 19.2C21.6 17.1067 21.52 15.6848 21.2985 14.6661C21.0911 13.712 20.8068 13.3338 20.5302 13.1075C20.1916 12.8305 19.5278 12.5092 18.0766 12.2924C16.6349 12.077 14.6882 12 12 12C9.31177 12 7.36508 12.077 5.92343 12.2924C4.47216 12.5092 3.80836 12.8305 3.46977 13.1075C3.19323 13.3338 2.90889 13.712 2.70147 14.6661Z"
+      fill="url(#paint1_linear)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear"
+        x1="12"
+        y1="0"
+        x2="12"
+        y2="28.8"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#A913DE" />
+        <stop offset="1" stopColor="#6AC9FF" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear"
+        x1="12"
+        y1="0"
+        x2="12"
+        y2="28.8"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#A913DE" />
+        <stop offset="1" stopColor="#6AC9FF" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default Logo;

components/Header/index.js

@@ -1,8 +1,9 @@
 // @flow
 import * as React from 'react';
 import Link from 'next/link';
-import { Container, Logo, ButtonRowContainer } from './style';
+import { Container, ButtonRowContainer } from './style';
 import { PrimaryButton, GhostButton } from '../Button';
+import Logo from './Logo';
 
 type Props = {
   showHeaderShadow: boolean,
@@ -15,7 +16,7 @@ export default function Header(props: Props) {
     <Container showHeaderShadow={showHeaderShadow} data-cy="header">
       <Link href="/">
         <a style={{ display: 'flex', alignItems: 'center' }}>
-          <Logo>Security Checklist</Logo>
+          <Logo />
         </a>
       </Link>
 

components/Icon/index.js

@@ -81,7 +81,10 @@ export const Glyph = ({ glyph }: GlyphProps): any => {
     case 'app-store':
       return (
         <g>
-          <path d="M0 12.2339V9.24859C0 8.97514 0.224646 8.75147 0.499827 8.75147H5.77522L3.47843 12.7317H0.499827C0.224646 12.7317 0 12.5085 0 12.2339ZM3.75786 18.347L2.07429 19.4876C1.84775 19.6416 1.68755 19.5441 1.71896 19.2723L1.94361 17.3208C1.97486 17.0489 2.19531 16.9379 2.43371 17.0737L3.73663 17.8181C3.97463 17.9546 3.98439 18.1935 3.75786 18.347ZM4.16214 17.247L2.85922 16.5024C2.62102 16.3664 2.53709 16.0613 2.67565 15.824L8.70886 5.36562C8.84574 5.12798 9.15427 5.04466 9.39231 5.18251L10.6952 5.92514C10.9336 6.06298 11.0154 6.36834 10.8788 6.60511L4.84569 17.0642C4.70902 17.3015 4.40024 17.3828 4.16214 17.247ZM8.75382 12.7317L11.0506 8.75147H12.3731L14.2382 12.7317H8.75382ZM16.2343 13.9195C15.7128 13.6591 13.1151 7.69202 12.4495 6.13515C11.7833 4.57823 9.77148 0.433999 10.4222 0.111505C10.8851 -0.119688 12.5471 3.14366 13.7931 5.10282C15.0372 7.06207 17.6389 12.1137 17.9591 12.689C18.2776 13.2657 17.6526 13.7465 17.305 13.8904C16.9571 14.0344 16.7557 14.1779 16.2343 13.9195ZM17.9414 16.6622L17.1565 15.4278C16.9942 15.1709 17.0785 14.8539 17.3417 14.7185L18.0899 14.3354C18.3536 14.2013 18.6838 14.3101 18.8242 14.5787L19.4433 15.7644C19.5842 16.0325 19.4882 16.3767 19.2342 16.5283L18.6993 16.8468C18.4453 17.0002 18.1037 16.9166 17.9414 16.6622ZM20.8301 19.9001C20.6661 19.377 19.414 19.3425 18.8535 18.5549C18.2911 17.77 18.7559 17.3656 18.9511 17.179C21.2247 15.904 20.8301 19.9001 20.8301 19.9001ZM22 12.2339C22 12.5085 21.7754 12.7317 21.5002 12.7317H18.8595C18.8304 12.5782 18.7831 12.4247 18.7034 12.2807C18.6346 12.1582 18.4609 11.8279 18.2188 11.3674C17.8693 10.7029 17.3673 9.7524 16.8299 8.75147H21.4999C21.7752 8.75147 21.9998 8.97514 21.9998 9.24859V12.2339H22Z" />
+          <path d="M12.2058 17.2207C11.9485 17.2394 11.707 17.2523 11.5 17.2523C10.1315 17.2523 7.64606 16.8628 4.77537 15.7674C4.4045 15.6265 4.21906 15.2111 4.35994 14.8402C4.50081 14.4679 4.91625 14.2796 5.28856 14.4248C7.97956 15.4512 10.3169 15.8148 11.5 15.8148C11.7171 15.8148 11.9844 15.7976 12.2734 15.7717C12.3524 14.7094 12.489 13.7118 12.673 12.9398H9.34375C8.947 12.9398 8.625 12.6178 8.625 12.2211C8.625 9.21529 9.92019 5.49072 11.3217 2.87735H0.71875C0.322 2.87735 0 3.19935 0 3.5961V19.4086C0 19.8053 0.322 20.1273 0.71875 20.1273H12.3194C12.2187 19.239 12.1842 18.2327 12.2058 17.2207ZM5.75 6.4711C5.75 6.07435 6.072 5.75235 6.46875 5.75235C6.8655 5.75235 7.1875 6.07435 7.1875 6.4711V7.9086C7.1875 8.30535 6.8655 8.62735 6.46875 8.62735C6.072 8.62735 5.75 8.30535 5.75 7.9086V6.4711Z" />
+          <path d="M22.2813 2.87735H12.9792C11.7113 5.03216 10.2968 8.54685 10.0884 11.5023H13.6563C13.9021 11.5023 14.1306 11.6274 14.2629 11.8344C14.3951 12.0428 14.4124 12.303 14.3074 12.5244C14.0156 13.1497 13.8259 14.2897 13.7267 15.5633C14.8609 15.3505 16.2294 14.9912 17.7129 14.4262C18.0809 14.2825 18.4992 14.4679 18.6401 14.8417C18.7824 15.2125 18.5969 15.628 18.2246 15.7688C16.5083 16.4229 14.9371 16.8225 13.6519 17.0396C13.6246 18.1537 13.6606 19.2562 13.754 20.1273H22.2813C22.678 20.1273 23 19.8053 23 19.4086V3.5961C23 3.19935 22.678 2.87735 22.2813 2.87735ZM15.8125 7.9086C15.8125 8.30535 15.4905 8.62735 15.0938 8.62735C14.697 8.62735 14.375 8.30535 14.375 7.9086V6.4711C14.375 6.07435 14.697 5.75235 15.0938 5.75235C15.4905 5.75235 15.8125 6.07435 15.8125 6.4711V7.9086Z" />
+          <path d="M14.1651 0.213652C13.8848 -0.0666602 13.4291 -0.0666602 13.1488 0.213652C12.5882 0.77284 11.9442 1.71585 11.3217 2.87735H12.9792C13.409 2.1471 13.8216 1.57209 14.1651 1.22997C14.4454 0.949653 14.4454 0.493965 14.1651 0.213652Z" />
+          <path d="M14.168 21.7776C13.9797 21.5706 13.8417 20.951 13.754 20.1273H12.3194C12.4588 21.365 12.7247 22.3684 13.1488 22.7925C13.2868 22.9305 13.4622 22.9966 13.639 22.9966C13.8172 22.9966 13.9984 22.9276 14.1407 22.7925C14.4224 22.5237 14.4282 22.0665 14.168 21.7776Z" />
         </g>
       );
     case 'windows':

components/LoadingChecklistItem/index.js

@@ -4,71 +4,73 @@ import { ShimmerInboxThread, ShimmerBase, ShimmerLine, Cover } from './style';
 import Card from '../Card';
 
 const LoadingChecklistItem = () => (
-  <Card>
-    <ShimmerInboxThread>
-      <ShimmerBase>
-        <ShimmerLine />
-        <Cover
-          style={{
-            top: '0',
-            left: '40px',
-            height: '40px',
-            width: '16px',
-          }}
-        />
-        <Cover
-          style={{
-            top: '0',
-            left: '50%',
-            height: '40px',
-            width: '50%',
-          }}
-        />
+  <div style={{ marginTop: '24px' }}>
+    <Card>
+      <ShimmerInboxThread>
+        <ShimmerBase>
+          <ShimmerLine />
+          <Cover
+            style={{
+              top: '0',
+              left: '40px',
+              height: '40px',
+              width: '16px',
+            }}
+          />
+          <Cover
+            style={{
+              top: '0',
+              left: '50%',
+              height: '40px',
+              width: '50%',
+            }}
+          />
 
-        <Cover
-          style={{
-            top: '20px',
-            left: '40px',
-            height: '8px',
-            width: '50%',
-          }}
-        />
+          <Cover
+            style={{
+              top: '20px',
+              left: '40px',
+              height: '8px',
+              width: '50%',
+            }}
+          />
 
-        <Cover
-          style={{
-            top: '40px',
-            left: '0',
-            height: '16px',
-            width: '100%',
-          }}
-        />
-        <Cover
-          style={{
-            top: '40px',
-            left: '0',
-            height: '100%',
-            width: '48px',
-          }}
-        />
-        <Cover
-          style={{
-            top: '72px',
-            left: '48px',
-            height: '8px',
-            width: '100%',
-          }}
-        />
-        <Cover
-          style={{
-            top: '72px',
-            left: '35%',
-            height: '24px',
-            width: '100%',
-          }}
-        />
-      </ShimmerBase>
-    </ShimmerInboxThread>
-  </Card>
+          <Cover
+            style={{
+              top: '40px',
+              left: '0',
+              height: '16px',
+              width: '100%',
+            }}
+          />
+          <Cover
+            style={{
+              top: '40px',
+              left: '0',
+              height: '100%',
+              width: '48px',
+            }}
+          />
+          <Cover
+            style={{
+              top: '72px',
+              left: '48px',
+              height: '8px',
+              width: '100%',
+            }}
+          />
+          <Cover
+            style={{
+              top: '72px',
+              left: '35%',
+              height: '24px',
+              width: '100%',
+            }}
+          />
+        </ShimmerBase>
+      </ShimmerInboxThread>
+    </Card>
+  </div>
 );
 
 export default LoadingChecklistItem;

config/next-seo.js

@@ -7,17 +7,17 @@ export default {
     url: 'https://securitycheckli.st/',
     title: 'Security Checklist',
     description: 'A checklist for staying safe on the internet',
-    defaultImageWidth: 470,
-    defaultImageHeight: 470,
+    defaultImageWidth: 512,
+    defaultImageHeight: 512,
     images: [
       {
-        url: 'https://securitycheckli.st/static/og-image.jpg',
-        width: 470,
-        height: 470,
-        alt: 'Brian Lovin',
+        url: 'https://securitycheckli.st/static/og-image.png',
+        width: 512,
+        height: 512,
+        alt: 'Security Checklist',
       },
     ],
-    site_name: 'Brian Lovin',
+    site_name: 'Security Checklist',
   },
   twitter: {
     handle: '@brian_lovin',

pages/_app.js

@@ -44,7 +44,8 @@ class SecurityChecklistApp extends App {
         <GlobalStyles />
 
         <Head>
-          <meta name="theme-color" content="#16171A" key="theme-color" />
+          <meta name="theme-color" content="#FFF" key="theme-color" />
+
           <meta
             name="description"
             content="A checklist for staying safe on the internet"
@@ -52,15 +53,76 @@ class SecurityChecklistApp extends App {
 
           <link
             rel="apple-touch-icon"
-            sizes="180x180"
-            href="static/meta/apple-touch-icon.png"
+            sizes="57x57"
+            href="/static/apple-icon-57x57.png"
           />
-          <link rel="manifest" href="/static/meta/site.webmanifest" />
           <link
-            rel="mask-icon"
-            href="/static/meta/safari-pinned-tab.svg"
-            color="#16171A"
+            rel="apple-touch-icon"
+            sizes="60x60"
+            href="/static/apple-icon-60x60.png"
           />
+          <link
+            rel="apple-touch-icon"
+            sizes="72x72"
+            href="/static/apple-icon-72x72.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="76x76"
+            href="/static/apple-icon-76x76.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="114x114"
+            href="/static/apple-icon-114x114.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="120x120"
+            href="/static/apple-icon-120x120.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="144x144"
+            href="/static/apple-icon-144x144.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="152x152"
+            href="/static/apple-icon-152x152.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/static/apple-icon-180x180.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="192x192"
+            href="/static/android-icon-192x192.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/static/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="96x96"
+            href="/static/favicon-96x96.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/static/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/static/manifest.json" />
+          <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
+          <link rel="mask-icon" href="/static/pinned-tab.svg" color="#FFF" />
           <meta name="msapplication-TileColor" content="#ffffff" />
 
           <script

static/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

static/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

static/pinned-tab.svg

@@ -0,0 +1,4 @@
+<svg width="280" height="336" viewBox="0 0 280 336" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M154 234.254C162.369 229.413 168 220.364 168 210C168 194.536 155.464 182 140 182C124.536 182 112 194.536 112 210C112 220.364 117.631 229.413 126 234.254V252C126 259.732 132.268 266 140 266C147.732 266 154 259.732 154 252V234.254Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M237.889 120.971C236.502 12.5612 221.224 0 140 0C58.7758 0 43.4981 12.5612 42.1114 120.971C5.65377 133.368 0 161.723 0 224C0 322 14 336 140 336C266 336 280 322 280 224C280 161.723 274.346 133.368 237.889 120.971ZM184.737 31.3301C174.16 28.5701 160.711 27.9906 140 28C119.289 27.9906 105.84 28.5701 95.263 31.3301C86.7888 33.4355 83.7014 36.129 81.6109 39.0491C78.6987 43.1169 75.2857 51.2522 73.0177 68.5988C71.3543 81.1338 70.5301 96.2022 70.1931 115.004C88.4264 112.726 111.31 112 140 112C168.69 112 191.574 112.726 209.807 115.004C209.47 96.2021 208.646 81.1338 206.982 68.5988C204.714 51.2522 201.301 43.1169 198.389 39.0491C196.299 36.129 193.211 33.4355 184.737 31.3301ZM31.5172 171.104C28.9335 182.989 28 199.579 28 224C28 248.421 28.9335 265.011 31.5172 276.896C33.9371 288.027 37.2543 292.439 40.4806 295.079C44.4308 298.311 52.1752 302.059 69.1067 304.589C85.926 307.102 108.637 308 140 308C171.363 308 194.074 307.102 210.893 304.589C227.825 302.059 235.569 298.311 239.519 295.079C242.746 292.44 246.063 288.027 248.483 276.896C251.066 265.011 252 248.421 252 224C252 199.579 251.066 182.989 248.483 171.104C246.063 159.973 242.746 155.561 239.519 152.921C235.569 149.689 227.825 145.941 210.893 143.411C194.074 140.898 171.363 140 140 140C108.637 140 85.9259 140.898 69.1067 143.411C52.1752 145.941 44.4308 149.689 40.4807 152.921C37.2543 155.561 33.9371 159.973 31.5172 171.104Z" fill="black"/>
+</svg>