Info modal skeleton

2 files changed, 37 insertions, 13 deletions

diff --git a/src/Geshem.css b/src/Geshem.css
index b99a95c..0a719d7 100644
--- a/src/Geshem.css
+++ b/src/Geshem.css
@@ -6,6 +6,31 @@
   font-family: monospace;
 }
 
+#info {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  color: white;
+  font-family: monospace;
+}
+
+#info-button {
+  font-size: 2em;
+  background: #777;
+  padding: 10px 14px;
+  border-radius: 7px;
+}
+
+#info-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+  padding: 30px;
+  background: #777;
+}
+
 #date {
   font-size: 1.4em;
 }
diff --git a/src/Info.js b/src/Info.js
index dd04a08..c6b688d 100644
--- a/src/Info.js
+++ b/src/Info.js
@@ -1,22 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 
 function Info(props) {
   const [open, setOpen] = useState(false);
 
-  if (images.length > 0) {
-    const ds = images[slider].substr(5, 13);
-    datetime = LuxonDateTime.fromFormat(ds, "yyyyMMdd/HHmm", {
-      zone: "utc"
-    }).setZone("Asia/Jerusalem");
-  }
-
-  const date = datetime ? datetime.toFormat("dd-MM-y") : "";
-  const time = datetime ? datetime.toFormat("HH:mm") : "";
-
   return (
     <div id="info">
-      <div id="info-button">?</div>
-      <div id="info-modal">This is the info page</div>
+      <div
+        id="info-button"
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        ?
+      </div>
+      <div id="info-modal" style={{ display: open ? "block" : "none" }}>
+        This is the info page
+      </div>
     </div>
   );
 }