From b6be442f6c2f36188596f072ce5bbe6d204d1631 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 19 Aug 2020 15:25:07 -0700
Subject: [PATCH 1/2] fix(Overlay): bump the z-index to ensure it sits on top
 of everything

This should address the issue seen in the open source site where the
search overlay is not currently displayed on top of everything else.
This fits with the [new z-index
scale](https://github.com/newrelic/opensource-website/pull/608#issuecomment-676723812).
---
 packages/gatsby-theme-newrelic/src/components/Overlay.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-newrelic/src/components/Overlay.js b/packages/gatsby-theme-newrelic/src/components/Overlay.js
index 30b597121..c5beb1cad 100644
--- a/packages/gatsby-theme-newrelic/src/components/Overlay.js
+++ b/packages/gatsby-theme-newrelic/src/components/Overlay.js
@@ -38,7 +38,7 @@ const Overlay = ({ children, onCloseOverlay, isOpen = false }) => {
     <Portal>
       <div
         css={css`
-          z-index: 100;
+          z-index: 1000;
           position: fixed;
           top: 0;
           left: 0;

From 2a50ee68bf638fb710f163d2dabc7483d427486f Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 19 Aug 2020 15:27:23 -0700
Subject: [PATCH 2/2] test: update snapshots

---
 .../__snapshots__/GlobalHeader.test.js.snap   | 54 ++++++-------------
 1 file changed, 15 insertions(+), 39 deletions(-)

diff --git a/packages/gatsby-theme-newrelic/src/components/__tests__/__snapshots__/GlobalHeader.test.js.snap b/packages/gatsby-theme-newrelic/src/components/__tests__/__snapshots__/GlobalHeader.test.js.snap
index d8358b595..734628c44 100644
--- a/packages/gatsby-theme-newrelic/src/components/__tests__/__snapshots__/GlobalHeader.test.js.snap
+++ b/packages/gatsby-theme-newrelic/src/components/__tests__/__snapshots__/GlobalHeader.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Matches snapshot 1`] = `
-.emotion-66 {
+.emotion-65 {
   background-color: var(--color-neutrals-100);
   overflow: hidden;
   position: -webkit-sticky;
@@ -10,11 +10,11 @@ exports[`Matches snapshot 1`] = `
   z-index: 80;
 }
 
-.dark-mode .emotion-66 {
+.dark-mode .emotion-65 {
   background-color: var(--color-dark-100);
 }
 
-.emotion-65 {
+.emotion-64 {
   height: 36px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -30,7 +30,7 @@ exports[`Matches snapshot 1`] = `
 }
 
 .emotion-28 {
-  z-index: 100;
+  z-index: 1000;
   position: fixed;
   top: 0;
   left: 0;
@@ -1616,7 +1616,7 @@ exports[`Matches snapshot 1`] = `
   color: var(--color-dark-700);
 }
 
-.emotion-64 {
+.emotion-63 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -1630,7 +1630,7 @@ exports[`Matches snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-64 > li {
+.emotion-63 > li {
   -webkit-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   margin-left: 1rem;
@@ -1687,18 +1687,14 @@ exports[`Matches snapshot 1`] = `
   color: var(--secondary-text-hover-color);
 }
 
-.emotion-63 {
+.emotion-62 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.emotion-63.emotion-63 {
-  margin-left: 1.5rem;
-}
-
-.emotion-61 {
+.emotion-60 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1731,34 +1727,23 @@ exports[`Matches snapshot 1`] = `
   border-radius: 0.125rem;
 }
 
-.emotion-61:hover {
+.emotion-60:hover {
   -webkit-transform: translate3d(0,-1px,0);
   -ms-transform: translate3d(0,-1px,0);
   transform: translate3d(0,-1px,0);
 }
 
-.emotion-61:hover {
+.emotion-60:hover {
   color: var(--color-white);
   background-color: var(--color-brand-500);
 }
 
-.emotion-60 {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  width: 1em;
-  height: 1em;
-  margin-right: 0.5rem;
-}
-
 <div
-  className="emotion-66"
+  className="emotion-65"
   data-swiftype-index={false}
 >
   <div
-    className="emotion-65"
+    className="emotion-64"
   >
     <div
       className="emotion-28"
@@ -1965,7 +1950,7 @@ exports[`Matches snapshot 1`] = `
       </ul>
     </nav>
     <ul
-      className="emotion-64"
+      className="emotion-63"
     >
       <li>
         <a
@@ -2004,25 +1989,16 @@ exports[`Matches snapshot 1`] = `
         </svg>
       </li>
       <li
-        className="emotion-63"
+        className="emotion-62"
       >
         <a
-          className="emotion-61 emotion-62"
+          className="emotion-60 emotion-61"
           href="https://newrelic.com/signup"
           rel="noopener noreferrer"
           size="extraSmall"
           target="_blank"
           variant="primary"
         >
-          <svg
-            className="emotion-60"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"
-            />
-          </svg>
           <span>
             Sign up
           </span>