JS or not better notifications

src/components/Atoms/Alert.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import styled from 'styled-components'
+import { borderradius, size } from "../tokens";
+
+const Alert = styled.div`
+    background: rgba(255,255,255,0.2);
+    border-radius: ${borderradius.small};
+    padding: ${size.half} ${size.double};
+`
+
+export default Alert

src/components/Atoms/Alert.unit.test.tsx

@@ -0,0 +1,11 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+import Alert from './Alert'
+
+describe('<Alert />', () => {
+  beforeEach(cleanup)
+  it('Should render', () => {
+    const { container } = render(<Alert />)
+    expect(container).toMatchSnapshot()
+  })
+})

src/components/Atoms/__snapshots__/Alert.unit.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Alert /> Should render 1`] = `
+.c0 {
+  background: rgba(255,255,255,0.2);
+  border-radius: 0.25rem;
+  padding: 0.5rem 2rem;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+</div>
+`;

src/components/Organisms/Footer.tsx

@@ -1,15 +1,15 @@
 import { withPrefix } from "gatsby";
 import React, { FC } from "react";
 import styled from "styled-components";
-import NavItem from "../../components/Molecules/NavItem";
+import Alert from "../Atoms/Alert";
 import Column from "../Atoms/Column";
 import Container from "../Atoms/Container";
 import Link from "../Atoms/Link";
 import List from "../Atoms/List";
 import Row from "../Atoms/Row";
 import Wrapper from "../Atoms/Wrapper";
 import { IPrimaryNavProps, ISecondaryNavProps } from "../Templates/Layout";
-import { borderradius, colors, effects, size } from "../tokens";
+import { colors, effects, size } from "../tokens";
 
 export interface IFooterProps extends IPrimaryNavProps, ISecondaryNavProps {
   siteTitle: string;
@@ -67,11 +67,13 @@ const Footer: FC<IFooterProps> = ({ siteTitle, siteDescription }) => (
     >
       <Container>
         <Row size={1}>
-          {typeof window === 'undefined' ? (
-            <p>You're currently on the <i>javascript disabled</i> version of the site. To enable the site search and some pretty animations, <a href="https://jsenabled.deliciousreverie.co.uk">view the javascript enabled react app</a>.</p>
-          ) : (
-            <p>You're currently on the <i>javascript enabled</i> version of the site. if you need to conserve your battery or CPU, <a href="https://deliciousreverie.co.uk">view the HTML & CSS only site</a>.</p>
-          ) }
+          <Alert>
+            {typeof window === 'undefined' ? (
+              <p>You're currently on the <i>javascript disabled</i> version of the site. To enable the site search and some pretty animations, <a href="https://jsenabled.deliciousreverie.co.uk">view the javascript enabled react app</a>.</p>
+            ) : (
+              <p>You're currently on the <i>javascript enabled</i> version of the site. if you need to conserve your battery or CPU, <a href="https://deliciousreverie.co.uk">view the HTML & CSS only site</a>.</p>
+            ) }
+          </Alert>
         </Row>
         <Row size={1}>
           <Column>

src/components/tokens.ts

@@ -37,6 +37,7 @@ export const breakpoint: IBreakpoint = {
 
 export const size: ISize = {
   zero: "0rem",
+  half: "0.5rem",
   single: "1rem",
   singleplushalf: "1.5rem",
   double: "2rem",

src/components/types.ts

@@ -32,6 +32,7 @@ export interface IBreakpoint {
 
 export interface ISize {
   zero: string;
+  half: string;
   single: string;
   singleplushalf: string;
   double: string;