From eaa7eea7f5ea6048acc02036277c525a6395f80d Mon Sep 17 00:00:00 2001
From: Anton <mail@antontranelis.de>
Date: Mon, 1 Jan 2024 21:08:45 +0100
Subject: [PATCH] some css fixes

---
 public/fear2.svg     | 21 ++++++++---
 src/ModalContent.tsx | 85 ++++++++++++++++++++++----------------------
 2 files changed, 59 insertions(+), 47 deletions(-)

diff --git a/public/fear2.svg b/public/fear2.svg
index abac368b..a51838b4 100644
--- a/public/fear2.svg
+++ b/public/fear2.svg
@@ -34,15 +34,15 @@
      inkscape:pagecheckerboard="0"
      inkscape:document-units="pt"
      showgrid="false"
-     inkscape:zoom="0.13385319"
-     inkscape:cx="-571.52168"
-     inkscape:cy="395.9562"
+     inkscape:zoom="0.189297"
+     inkscape:cx="800.32966"
+     inkscape:cy="697.31693"
      inkscape:window-width="1920"
      inkscape:window-height="1013"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
-     inkscape:current-layer="layer2"
+     inkscape:current-layer="layer3"
      fit-margin-top="0"
      fit-margin-left="0"
      fit-margin-right="0"
@@ -51,6 +51,19 @@
      id="metadata2">
 Created by potrace 1.15, written by Peter Selinger 2001-2017
 </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Layer 3">
+    <rect
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:30.7797;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:0.988235"
+       id="rect865"
+       width="1195.2804"
+       height="650.43323"
+       x="229.13701"
+       y="359.35092"
+       ry="3.011488" />
+  </g>
   <g
      inkscape:groupmode="layer"
      id="layer2"
diff --git a/src/ModalContent.tsx b/src/ModalContent.tsx
index f07f544b..1b54cf26 100644
--- a/src/ModalContent.tsx
+++ b/src/ModalContent.tsx
@@ -8,19 +8,18 @@ type ChapterProps = {
 export function Welcome1({ clickAction }: ChapterProps) {
     return (
         <>
-            <h3 className="tw-font-bold tw-text-lg">Welcome, glad you are here!</h3>
-            <img className="tw-float-right tw-w-32 tw-m-2" src="/earth.svg"></img>
-            <p className="tw-py-3">
-            In the 21st century, humanity is at a special point in its history. 
+            <h3 className="font-bold text-lg">Welcome, glad you are here!</h3>
+            <img className="float-right w-32 m-2" src="/earth.svg"></img>
+            <p className="py-3">
+                In the 21st century, humanity is at a special point in its history.
             </p>
-            <p className="tw-py-1">
+            <p className="py-1">
                 On the one hand, the people of Planet Earth are facing a multitude of fundamental crises.
-                </p>
-            <p className="tw-py-1">
+            </p>
+            <p className="py-1">
                 On the other hand, we have all the knowledge and technology to heal the planet and live in harmony with Mother Earth.                  </p>
-            <div className="tw-modal-action">
-                <label className="tw-btn" onClick={() => clickAction!()}>Next</label>
-
+            <div className="grid">
+                <label className="btn place-self-end mt-4" onClick={() => clickAction!()}>Next</label>
             </div>
         </>
     )
@@ -29,21 +28,21 @@ export function Welcome1({ clickAction }: ChapterProps) {
 export function Welcome2({ clickAction }: ChapterProps) {
     return (
         <>
-            <h3 className="tw-font-bold tw-text-lg"> Hypnosis and Disillusion </h3>
-            
-            <p className="tw-py-3">
-            Most people are still stuck in old ways of thinking and living.       </p>
-            <img className="tw-float-right tw-w-32 tw-mx-4 tw-my-2" src="/fear2.svg"></img>
+            <h3 className="font-bold text-lg"> Hypnosis and Disillusion </h3>
 
-            <p className="tw-py-1">
-            Hypnotised, they sit in front of screens in concrete blocks, flooded and disillusioned by irrelevant information.
+            <p className="py-3">
+                Most people are still stuck in old ways of thinking and living.       </p>
+            <img className="float-right w-32 mx-4 my-2" src="/fear2.svg"></img>
+
+            <p className="py-1">
+                Hypnotised, they sit in front of screens in concrete blocks, flooded and disillusioned by irrelevant information.
             </p>
 
-            <p className="tw-py-1">
+            <p className="py-1">
                 From an early age, they are trained to do alienated work and consume unhealthy and meaningless products.
-             </p>
-            <div className="tw-modal-action">
-                <label className="tw-btn" onClick={() => clickAction!()}>next</label>
+            </p>
+            <div className="grid">
+                <button className="btn place-self-end mt-4" onClick={() => clickAction!()}>next</button>
             </div>
         </>
     )
@@ -52,19 +51,19 @@ export function Welcome2({ clickAction }: ChapterProps) {
 export function Welcome3({ clickAction }: ChapterProps) {
     return (
         <>
-            <h3 className="tw-font-bold tw-text-lg">But Consciousness is rising </h3>
-            <p className="tw-py-3">
-            More and more people are waking up to what's really happening. </p>
-            <p className="tw-py-1">
-            They are in the process of understanding the potential that is within themselves and within the whole mankind.
+            <h3 className="font-bold text-lg">But Consciousness is rising </h3>
+            <p className="py-3">
+                More and more people are waking up to what's really happening. </p>
+            <p className="py-1">
+                They are in the process of understanding the potential that is within themselves and within the whole mankind.
             </p>
-                        <img className="tw-float-left tw-w-32 tw-mx-4" src="/camp3.svg"></img>
+            <img className="float-left w-32 mx-4" src="/camp3.svg"></img>
 
-            <p className="tw-py-1">
-                Starting to reconnect with our Mother Earth and beginning to question things that long times have been taken for granted. 
-             </p>
-            <div className="tw-modal-action">
-                <label className="tw-btn" onClick={() => clickAction!()}>next</label>
+            <p className="py-1">
+                Starting to reconnect with our Mother Earth and beginning to question things that long times have been taken for granted.
+            </p>
+            <div className="grid">
+                <label className="btn place-self-end mt-4" onClick={() => clickAction!()}>next</label>
             </div>
         </>
     )
@@ -73,16 +72,16 @@ export function Welcome3({ clickAction }: ChapterProps) {
 export function Welcome4({ clickAction }: ChapterProps) {
     return (
         <>
-            <h3 className="tw-font-bold tw-text-lg"> Gemeinsam erschaffen wir Strukturen </h3>
-            <ul className='tw-flex-row tw-pl-4 tw-mt-4'>
+            <h3 className="font-bold text-lg"> Gemeinsam erschaffen wir Strukturen </h3>
+            <ul className='flex-row pl-4 mt-4'>
                 <li>🥕 Essen & Trinken</li>
                 <li>🏡 Wohn- & Lebensraum</li>
                 <li>💬 Kommunikation</li>
                 <li>💡 Energie</li>
                 <li>🚐 Mobilität</li>
             </ul>
-            <div className="tw-modal-action">
-                <button className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Ich mach mit</button>
+            <div className="grid">
+                <button className="btn btn-neutral place-self-end" onClick={() => clickAction!()}>Ich mach mit</button>
             </div>
         </>
     )
@@ -96,7 +95,7 @@ export const ModalContent = () => {
 
     const [chapter, setChapter] = useState<number>(1);
     //const setQuestsOpen = useSetQuestOpen()
-    
+
 
 
     const ActiveChapter = () => {
@@ -107,19 +106,19 @@ export const ModalContent = () => {
                 return <Welcome2 clickAction={() => { setChapter(3) }} />
             case 3:
                 return <Welcome3 clickAction={() => {
-                    
+
                     close();
                     setTimeout(() => {
-                      //  setQuestsOpen(true);
+                        //  setQuestsOpen(true);
                         setChapter(1);
                     }, 1000);
-                    
+
                 }} />
             default: return <></>
         };
     };
 
-  return (
-    <ActiveChapter/>
-  )
+    return (
+        <ActiveChapter />
+    )
 }