From 4ba79f63d004f8c1a88fc282897c1d9a771f9d9f Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel.kluge.98@gmx.de>
Date: Sat, 5 Feb 2022 00:31:04 +0100
Subject: [PATCH] Close button

---
 components/ProjectModal.tsx    | 14 +++++---------
 styles/ProjectModal.module.css | 26 ++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/components/ProjectModal.tsx b/components/ProjectModal.tsx
index 4edbf53..555c86f 100644
--- a/components/ProjectModal.tsx
+++ b/components/ProjectModal.tsx
@@ -2,6 +2,7 @@ import type { NextPage } from "next";
 import { useEffect, useRef, useState } from "react";
 import asciidoctor from "asciidoctor";
 import styles from "../styles/ProjectModal.module.css";
+import Link from "next/link";
 
 interface ModalInput {
     project: string;
@@ -37,7 +38,7 @@ Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/fron
                 if (res.status !== 200) setProjectData(projectServerErrorHtml);
                 res.text().then(data => {
                     try {
-                        const adDoc = ad.load(data, {attributes: {showtitle: true}});
+                        const adDoc = ad.load(data, { attributes: { showtitle: true } });
                         setProjectData(adDoc.convert(adDoc).toString() + generateFooter(project, adDoc.getAttribute("docdatetime")));
                     } catch {
                         setProjectData(projectServerErrorHtml);
@@ -54,17 +55,12 @@ Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/fron
 
     }, [projectData, visible]);
 
-    const onEscClose = (e: React.KeyboardEvent) => {
-        console.log(e);
-        if (e.key === "Escape") {
-            //e.preventDefault();
-            setVisible(false);
-        }
-    };
-    
     if (!visible) return <></>;
 
     return <div className={styles.modal}>
+        <a href="javascript:void(0);" onClick={() => setVisible(false)}>
+            <div className={styles.modalClose}><div className={styles.modalCloseAlign}>X</div></div>
+        </a>
         <div ref={containerRef} className={`${styles.modalContainer} asciidoc`}>
         </div>
     </div>;
diff --git a/styles/ProjectModal.module.css b/styles/ProjectModal.module.css
index 4097eb2..b0efe6e 100644
--- a/styles/ProjectModal.module.css
+++ b/styles/ProjectModal.module.css
@@ -17,4 +17,30 @@
     padding: 20px;
     border-radius: 20px;
     overflow-y: auto;
+    position: relative;
+}
+
+.modalClose {
+    float: right;
+    position: relative;
+    background: #555;
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    font-family: sans-serif;
+    margin-bottom: -20px;
+    z-index: 100;
+    /*text-align: center;*/
+    /*padding: auto 0;*/
+}
+
+.modalCloseAlign {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: block;
+    color: #fff;
+    text-decoration: none;
 }
\ No newline at end of file