From ca147cdbf847998f827ac5c324883ceff9534389 Mon Sep 17 00:00:00 2001
From: Zoey <friendlypossum@netc.fr>
Date: Sun, 14 Jan 2024 13:00:51 +0100
Subject: [PATCH] anims

---
 src/App.css   | 29 +++++++++++++++++------------
 src/App.js    |  2 ++
 src/Home.js   |  2 +-
 src/TopBar.js |  6 ++++++
 src/index.css |  3 ++-
 5 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index 93d4651..e982296 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,21 +3,17 @@
 @tailwind utilities;
 @tailwind variants;
 
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+  .DarkModeButton {
+    animation: DarkModeButton-spin 2.5s ease-in-out infinite alternate;
   }
 }
 
+.H1Welcome {
+  //animation: Welcome-spin 1ms infinite ease-in-out;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -33,11 +29,20 @@
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
+@keyframes DarkModeButton-spin {
+  from {
+    transform: rotate(-10deg);
+  }
+  to {
+    transform: rotate(10deg);
+  }
+}
+
+@keyframes Welcome-spin {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index eb86802..4c22d61 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,8 @@ import SideBar from './SideBar';
 
 import Home from './Home';
 
+
+
 function App() {
   return (
     <div className="body">
diff --git a/src/Home.js b/src/Home.js
index 078f695..3da107b 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -2,7 +2,7 @@ const Home = () => {
     return (
       <div className="flex bg-black text-secondary top-14 bottom-8 w-screen h-screen">
         <div className="flex items-center justify-center text-4xl mx-auto">
-          <h1 className="text-center">Welcome fellow traveller!</h1>
+          <h1 className="H1Welcome">Welcome fellow traveller!</h1>
         </div>
       </div>
     );
diff --git a/src/TopBar.js b/src/TopBar.js
index 63b5681..5f37c48 100644
--- a/src/TopBar.js
+++ b/src/TopBar.js
@@ -24,6 +24,12 @@ const TopBar = () => {
                         <div className="DarkModeButton">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="half-crescent-moon">
                                 <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                                <title>Popup Title</title>
+                                <desc>
+                                    <p>Paragraph 1</p>
+                                    <p>Paragraph 2</p>
+                                    <p>Paragraph 3</p>
+                                </desc>
                             </svg>
                         </div>
                     </div>
diff --git a/src/index.css b/src/index.css
index d953083..981ac2d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,7 +9,8 @@
     @apply hover:text-texthover cursor-pointer transition-colors duration-300;
   }
   .DarkModeButton {
-    @apply cursor-pointer
+    @apply cursor-pointer text-secondary bg-violet-950
+     border-4 border-violet-950 rounded-md
   }
 }