From dc81263292d5882aa2282e55122a28d98fadfc40 Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@gmail.com>
Date: Thu, 2 Jul 2020 11:43:42 -0700
Subject: [PATCH] feat: Add cookies dialog

---
 src/components/CookieApprovalDialog.js        |  46 +++++++
 .../CookieApprovalDialog.module.scss          | 113 ++++++++++++++++++
 src/components/Layout.js                      |   2 +
 3 files changed, 161 insertions(+)
 create mode 100644 src/components/CookieApprovalDialog.js
 create mode 100644 src/components/CookieApprovalDialog.module.scss

diff --git a/src/components/CookieApprovalDialog.js b/src/components/CookieApprovalDialog.js
new file mode 100644
index 000000000..f4bded451
--- /dev/null
+++ b/src/components/CookieApprovalDialog.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from './Button';
+import styles from './CookieApprovalDialog.module.scss';
+
+const CookieApprovalDialog = ({ className }) => {
+  return (
+    <div className={`${styles.container} ${className || ''}`}>
+      <div className={styles.content}>
+        <div className={styles.primaryContent}>
+          <h4 className={styles.heading}>
+            This site uses cookies{' '}
+            <span role="img" aria-label="Cookie emoji">
+              🍪
+            </span>
+          </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}`}
+            variant={Button.VARIANT.PRIMARY}
+          >
+            OK
+          </Button>
+          <Button
+            className={`${styles.ignoreButton}`}
+            variant={Button.VARIANT.NORMAL}
+          >
+            Reject
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CookieApprovalDialog.propTypes = {
+  className: PropTypes.string,
+};
+
+export default CookieApprovalDialog;
diff --git a/src/components/CookieApprovalDialog.module.scss b/src/components/CookieApprovalDialog.module.scss
new file mode 100644
index 000000000..3333a4690
--- /dev/null
+++ b/src/components/CookieApprovalDialog.module.scss
@@ -0,0 +1,113 @@
+.container {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  z-index: 10000;
+  background-color: rgba(28, 42, 47, 0.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: 0.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, 0.92);
+    box-shadow: 0 -1px 0 rgba(55, 72, 78, 0.4);
+  }
+
+  .description {
+    color: var(--color-neutrals-600);
+  }
+}
diff --git a/src/components/Layout.js b/src/components/Layout.js
index af75b4793..16243b8dd 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -6,6 +6,7 @@ import Footer from './Footer';
 import GlobalHeader from './GlobalHeader';
 import MobileHeader from './MobileHeader';
 import Sidebar from './Sidebar';
+import CookieApprovalDialog from './CookieApprovalDialog';
 import styles from './Layout.module.scss';
 import 'normalize.css';
 import './styles.scss';
@@ -34,6 +35,7 @@ const Layout = ({ children }) => {
           <Footer className={styles.footer} />
         </div>
       </div>
+      <CookieApprovalDialog />
     </div>
   );
 };