anims

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);
   }
-}
+}

src/App.js

@@ -7,6 +7,8 @@ import SideBar from './SideBar';
 
 import Home from './Home';
 
+
+
 function App() {
   return (
     <div className="body">

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>
     );

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>

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
   }
 }