2 files changed, 159 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx
new file mode 100644
index 0000000000..fdfdf22db2
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx
@@ -0,0 +1,56 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+
+export class ModalOverlayWrapper extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = this.onKeyDown.bind(this);
+  }
+
+  // The intended behaviour is to listen for an escape key
+  // but not for a click; see Bug 1582242
+  onKeyDown(event) {
+    if (event.key === "Escape") {
+      this.props.onClose(event);
+    }
+  }
+
+  componentWillMount() {
+    this.props.document.addEventListener("keydown", this.onKeyDown);
+    this.props.document.body.classList.add("modal-open");
+  }
+
+  componentWillUnmount() {
+    this.props.document.removeEventListener("keydown", this.onKeyDown);
+    this.props.document.body.classList.remove("modal-open");
+  }
+
+  render() {
+    const { props } = this;
+    let className = props.unstyled ? "" : "modalOverlayInner active";
+    if (props.innerClassName) {
+      className += ` ${props.innerClassName}`;
+    }
+    return (
+      <div
+        className="modalOverlayOuter active"
+        onKeyDown={this.onKeyDown}
+        role="presentation"
+      >
+        <div
+          className={className}
+          aria-labelledby={props.headerId}
+          id={props.id}
+          role="dialog"
+        >
+          {props.children}
+        </div>
+      </div>
+    );
+  }
+}
+
+ModalOverlayWrapper.defaultProps = { document: global.document };
diff --git a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
new file mode 100644
index 0000000000..a1006c9437
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
@@ -0,0 +1,103 @@
+// Variable for the about:welcome modal scrollbars
+$modal-scrollbar-z-index: 1100;
+
+.activity-stream {
+  &.modal-open {
+    overflow: hidden;
+  }
+}
+
+.modalOverlayOuter {
+  background: var(--newtab-overlay-color);
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: none;
+  z-index: $modal-scrollbar-z-index;
+  overflow: auto;
+
+  &.active {
+    display: flex;
+  }
+}
+
+.modalOverlayInner {
+  min-width: min-content;
+  width: 100%;
+  max-width: 960px;
+  position: relative;
+  margin: auto;
+  background: var(--newtab-background-color-secondary);
+  box-shadow: $shadow-large;
+  border-radius: 4px;
+  display: none;
+  z-index: $modal-scrollbar-z-index;
+
+  // modal takes over entire screen
+  @media(max-width: 960px) {
+    height: 100%;
+    top: 0;
+    left: 0;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  &.active {
+    display: block;
+  }
+
+  h2 {
+    color: var(--newtab-text-primary-color);
+    text-align: center;
+    font-weight: 200;
+    margin-top: 30px;
+    font-size: 28px;
+    line-height: 37px;
+    letter-spacing: -0.13px;
+
+    @media(max-width: 960px) {
+      margin-top: 100px;
+    }
+
+    @media(max-width: 850px) {
+      margin-top: 30px;
+    }
+  }
+
+  .footer {
+    border-top: $border-secondary;
+    border-radius: 4px;
+    height: 70px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    background-color: $white;
+
+    // if modal is short enough, footer becomes sticky
+    @media(max-width: 850px) and (max-height: 730px) {
+      position: sticky;
+    }
+
+    // if modal is narrow enough, footer becomes sticky
+    @media(max-width: 650px) and (max-height: 600px) {
+      position: sticky;
+    }
+
+    .modalButton {
+      margin-top: 20px;
+      min-width: 150px;
+      height: 30px;
+      padding: 4px 30px 6px;
+      font-size: 15px;
+
+      &:focus,
+      &.active,
+      &:hover {
+        @include fade-in-card;
+      }
+    }
+  }
+}