From 662efba1cc5b435e6d5c3427c0c9ef6bfcf3da8c Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 25 Nov 2018 14:26:45 -0800
Subject: [PATCH] Start modal

---
 src/App.css | 27 +++++++++++++++++++++++++++
 src/App.js  | 20 +++++++++++++-------
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index 6b48bce9..d0996d06 100644
--- a/src/App.css
+++ b/src/App.css
@@ -21,3 +21,30 @@
   position: absolute;
   background: white;
 }
+
+.overlay {
+  /* recommendation:
+     don't focus on the number "1000" here, but rather,
+     you should have a documented system for z-index and 
+     follow that system. This number should be pretty
+     high on the scale in that system.
+  */
+  z-index: 1000;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: red;
+  width: 600px;
+  max-width: 100%;
+}
diff --git a/src/App.js b/src/App.js
index e2a413a3..f6b55591 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React from "react";
 import skins from "./skins.json";
 import "./App.css";
 import LoadQueue from "./LoadQueue";
+import { Overlay } from "./Overlay";
 
 const hashes = Object.keys(skins);
 
@@ -213,13 +214,18 @@ class App extends React.Component {
       );
     }
     return (
-      <div
-        style={{
-          height: Math.ceil(hashes.length / columnCount) * SKIN_HEIGHT,
-          position: "relative"
-        }}
-      >
-        {skinElements}
+      <div>
+        <div
+          style={{
+            height: Math.ceil(hashes.length / columnCount) * SKIN_HEIGHT,
+            position: "relative"
+          }}
+        >
+          {skinElements}
+        </div>
+        <Overlay>
+          <h1>Hello</h1>
+        </Overlay>
       </div>
     );
   }