feat(GDPR): cookie acceptance dialog

- adds component for cookie acceptance
- styles it + responsiveness + dark mode
- refines buttons styles across the board

Author: Daniel Golden

src/components/CookieApprovalDialog.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CookieApprovalDialog.module.scss';
+import withDarkMode from './withDarkMode';
+
+const CookieApprovalDialog = ({ className, darkMode }) => {
+  return (
+    <div className={`${styles.container} ${className || ''}`}>
+      <div className={styles.content}>
+        {/* <X className={styles.buttonClose} size={18} /> */}
+        <div className={styles.primaryContent}>
+          <h4 className={styles.heading}>This site uses cookies 🍪</h4>
+          <p className={styles.description}>
+            We rely on cookies to play videos, remember your preferences, and
+            analyze our website traffic. You consent to our cookies if you click
+            “OK”.
+          </p>
+        </div>
+        <div className={styles.ctaContainer}>
+          <button className={`button ${styles.approvalButton}`} type="button">
+            OK
+          </button>
+          <button
+            className={`button button-tertiary ${styles.ignoreButton}`}
+            type="button"
+          >
+            Reject
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CookieApprovalDialog.propTypes = {
+  className: PropTypes.string,
+  darkMode: PropTypes.object
+};
+
+export default withDarkMode(CookieApprovalDialog);

src/components/CookieApprovalDialog.module.scss

@@ -0,0 +1,108 @@
+.container {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  z-index: 10000;
+  background-color: rgba(28,42,47, .92);
+  box-shadow: 0px -0.249053px 4.26158px rgba(12, 48, 57, 0.0421718), 0px -0.598509px 10.2412px rgba(12, 48, 57, 0.0605839), 0px -1.12694px 19.2832px rgba(12, 48, 57, 0.075), 0px -2.01027px 34.3979px rgba(12, 48, 57, 0.0894161), 0px -3.75998px 64.3375px rgba(12, 48, 57, 0.107828), 0px -9px 154px rgba(12, 48, 57, 0.15);
+  backdrop-filter: blur(5px);
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1180px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 18px 0;
+}
+
+.heading {
+  color: #fff;
+  margin-top: 0;
+  margin-bottom: 2px;
+  line-height: 21px;
+}
+
+.description {
+  margin: 0 0 0px;
+  font-size: 13px;
+  line-height: 21px;
+  color: var(--color-neutrals-500);
+}
+
+.cta-container {
+  margin-left: 16px;
+  flex-shrink: 0;
+}
+
+.approval-button {
+  margin-right: 10px;
+  padding: 10px 30px;
+}
+
+.button-close {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: .75;
+}
+
+// ==============================================================
+// Responsive styles
+// ==============================================================
+@media screen and (max-width: 1200px) {
+  .content {
+    width: 100%;
+    padding: 18px 28px;
+  }
+
+  .heading {
+    margin-bottom: 6px;
+  }
+
+  .description {
+    line-height: 19px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .description {
+    margin-bottom: 16px;
+  }
+
+  .cta-container {
+    margin: 0;
+  }
+
+  .approval-button {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  
+  .ignore-button {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: var(--color-neutrals-700);
+  }
+}
+
+// ==============================================================
+// Dark mode
+// ==============================================================
+:global(.dark-mode) {
+  .container {
+    background-color: rgba(15,25,28, .92);
+    box-shadow: 0 -1px 0 rgba(55,72,78, .4);
+  }
+
+  .description {
+    color: var(--color-neutrals-600);
+  }
+}

src/components/layout.js

@@ -13,6 +13,7 @@ import Header from './Header';
 import Footer from './Footer';
 import './styles.scss';
 import favicon from '../images/favicon.svg';
+import CookieApprovalDialog from './CookieApprovalDialog';
 
 const Layout = ({
   children,
@@ -36,6 +37,7 @@ const Layout = ({
         {children}
       </main>
       <Footer editLink={editLink} />
+      <CookieApprovalDialog />
     </div>
   );
 };

src/components/styles.scss

@@ -436,14 +436,21 @@ select {
   } 
 
   .button {
-    color: var(--color-background);
+    background-color: var(--color-neutrals-800);
   }
 
   .button-secondary {
-    color: var(--color-brand-400);
+    color: var(--color-neutrals-800);
+    box-shadow: inset 0 0 0 2px var(--color-neutrals-800);
+    background-color: transparent;
   }
 
   .button-tertiary {
+    background-color: inherit;
     color: inherit;
+
+    &:hover {
+      background-color: var(--color-neutrals-100);
+    }
   }
 }

src/templates/project-page.js

@@ -237,7 +237,7 @@ const ProjectPage = props => {
             rel="noopener noreferrer"
           >
             <span className={styles.buttonIcon}>
-              <Edit color={darkMode.value ? '#70ccd3' : '#007e8a'} size={16} />
+              <Edit color={darkMode.value ? '#cedede' : '#007e8a'} size={16} />
             </span>
             Edit page
           </a>