From f8f0001ed73e2282731f84d45131e69f50824dc7 Mon Sep 17 00:00:00 2001
From: Anton <mail@antontranelis.de>
Date: Sun, 23 Jul 2023 09:57:40 +0200
Subject: [PATCH] Quests closeable

---
 src/Components/Gaming/Quests.tsx | 11 +++++++++--
 src/Components/TitleCard.tsx     |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx
index fa133005..392f21ff 100644
--- a/src/Components/Gaming/Quests.tsx
+++ b/src/Components/Gaming/Quests.tsx
@@ -1,14 +1,17 @@
 import * as React from 'react'
 
 export function Quests() {
-    return (
+
+    const [open, setOpen] = React.useState(true);
+
+    if (open) return (
         <>
             <input type="checkbox" id="quests" className="tw-modal-toggle" />
 
             <div className="tw-card tw-w-48 tw-bg-base-100 tw-shadow-xl tw-absolute tw-bottom-4 tw-left-4 tw-z-1000">
                 <div className="tw-card-body tw-p-4 tw-pt-0">
                     <div className="tw-card-actions tw-justify-end">
-                        <label className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2">✕</label>
+                        <label className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2" onClick={()=>setOpen(false)}>✕</label>
                     </div>
                     <h2 className="tw-card-title tw-m-auto ">Level 1</h2>
                     <ul className='tw-flex-row'>
@@ -21,4 +24,8 @@ export function Quests() {
             </div>
         </>
     )
+
+    else return (
+        <></>
+    )
 }
diff --git a/src/Components/TitleCard.tsx b/src/Components/TitleCard.tsx
index da6045a6..6b617e7a 100644
--- a/src/Components/TitleCard.tsx
+++ b/src/Components/TitleCard.tsx
@@ -11,7 +11,7 @@ interface TitleCardProps {
   
   function TitleCard({title, children, topMargin, TopSideButtons} : TitleCardProps){
       return(
-          <div className={"tw-card tw-w-full tw-p-6 tw-mb-8 tw-bg-base-100 tw-shadow-xl tw-h-fit " + (topMargin || "tw-mt-6")}>
+          <div className={"tw-card tw-w-full tw-p-6 tw-mb-16 tw-bg-base-100 tw-shadow-xl tw-h-fit " + (topMargin || "tw-mt-6")}>
 
             {/* Title for Card */}
               <Subtitle styleClass={TopSideButtons ? "tw-inline-block" : ""}>