moon and stuff

src/App.js

@@ -1,4 +1,4 @@
-import logo from './logo.svg';
+//import logo from './logo.svg';
 import './App.css';
 
 import TopBar from './TopBar';
@@ -9,7 +9,7 @@ import Home from './Home';
 
 function App() {
   return (
-    <div className="flex">
+    <div className="body">
       <Home />
       <TopBar />
       <BottomBar />

src/Home.js

@@ -1,8 +1,8 @@
 const Home = () => {
     return (
-        <div className="fixed flex bg-black text-secondary top-16 bottom-8 w-screen h-screen">
-            <div className="fixed flex justify-center">
-                <p>fuuuuuuuuuuuuuuuck</p>
+      <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>
         </div>
       </div>
     );

src/Moon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <path d="M50 0 A50 50 0 0 0 50 100 Z" fill="yellow" stroke="black"/>
+</svg>

src/TopBar.js

@@ -1,6 +1,6 @@
 const TopBar = () => {
     return (
-        <div className="fixed top-0 left-0 h-16 w-screen flex flex-row bg-primary text-secondary 
+        <div className="fixed top-0 left-0 h-14 w-screen flex flex-row bg-primary text-secondary 
         shadow-sm justify-center items-center space-x-2">
         <div className="topbar-clickables">
                 <div className="center left-0 flex justify-center items-center">
@@ -22,10 +22,9 @@ const TopBar = () => {
                     </div>
                     <div className="fixed right-0 mr-6">                       
                         <div className="DarkModeButton">
-                            <svg className="ml-4 flex items-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"></path>
+                            <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>
                             </svg>
-                            <span className="ml-2">123</span>
                         </div>
                     </div>
                 </div>
@@ -34,5 +33,4 @@ const TopBar = () => {
     );
 };
 
-
 export default TopBar;

src/index.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 @tailwind variants;
+@import url(https://fonts.googleapis.com/css2?family=Sarabun);
 
 @layer components {
   .TopButton {
@@ -14,9 +15,7 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Sarabun', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }