css styles changed to tailwind

.eslintrc.json

@@ -1,6 +1,13 @@
 {
   "extends": [
+    "next",
     "next/core-web-vitals",
     "plugin:cypress/recommended"
-  ]
+  ],
+  "globals": {
+    "React": "readonly"
+  },
+  "rules": {
+    "no-unused-vars": "warn"
+  }
 }

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.nvmrc

@@ -0,0 +1 @@
+18.16.0

TODO

@@ -1,4 +1,8 @@
-improve hamburger menu - button and menu
+improve hamburger menu - button and menu <- menu hidden off page to the right and eases in, button needs animation
+
+create readme
+
+consider moving themetoggle css out of global and into its own css file
 
 need a 'return to top' arrow button on smaller screens
 

app/globals.css

@@ -25,33 +25,3 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
-.toggle {
-  height: 2em;
-  width: 3em;
-  border-radius: 50px;
-  margin: auto;
-  background-image: linear-gradient(aqua, skyblue);
-  position: relative;
-  cursor: pointer;
-}
-.toggle-dark {
-  height: 2em;
-  width: 3em;
-  border-radius: 50px;
-  margin: auto;
-  background-image: linear-gradient(midnightblue, rebeccapurple);
-  position: relative;
-  cursor: pointer;
-}
-.theme-icon{
-  margin-left: 0.2em;
-  height: 2em;
-  width: 1.2em;
-  color: yellow;
-}
-
-.theme-icon-dark{
-  height: 2em;
-  width: 1.2em;
-  margin-left: auto;
-}

components/ThemeSwitcher.tsx

@@ -2,10 +2,8 @@
 
 import { MdBrightness2, MdCircle } from "react-icons/md";
 import useDarkMode from "@/hooks/useDarkMode";
-import { useEffect, useState} from 'react'
+import { useEffect, useState } from "react";
 
-// TODO write tests for light/mode
-// TODO fix TS error on setTheme
 const ThemeSwitcher = () => {
   const [mounted, setMounted] = useState(false);
   const [colorTheme, setTheme] = useDarkMode();
@@ -14,22 +12,26 @@ const ThemeSwitcher = () => {
     setMounted(true);
   }, []);
 
-  if(!mounted) {
+  if (!mounted) {
     return null;
   }
 
   return (
     <div>
       {colorTheme === "light" ? (
-        <div className="toggle-dark" onClick={() => setTheme("light")}>
+        <div
-          <MdBrightness2 className="theme-icon-dark"  />
+          className="relative cursor-pointer h-8 w-12 rounded-[50px] margin-auto bg-gradient-to-r from-blue-900 to-purple-900"
+          onClick={() => setTheme("light")}
+        >
+          <MdBrightness2 className="ml-auto h-8 w-5" />
         </div>
-        
       ) : (
-        <div className="toggle" onClick={() => setTheme("dark")}>
+        <div
-          <MdCircle className="theme-icon"  />
+          className="relative cursor-pointer h-8 w-12 rounded-[50px] margin-auto bg-gradient-to-r from-teal-300 to-sky-500"
+          onClick={() => setTheme("dark")}
+        >
+          <MdCircle className="ml-1 h-8 w-5 text-yellow-300" />
         </div>
-        
       )}
     </div>
   );

cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

cypress/fixtures/tournamentData.json

@@ -1,32 +0,0 @@
-[
-  {
-    "_id": "1",
-    "town": "Testville",
-    "department": "55",
-    "tournament": "Test Tournament 1",
-    "url": "https://www.google.com",
-    "time_control": "Cadence Lente",
-    "date": "01/01/29",
-    "coordinates": [55, 1]
-  },
-  {
-    "_id": "2",
-    "town": "Testville 2",
-    "department": "55",
-    "tournament": "Test Tournament 2",
-    "url": "https://www.google.com",
-    "time_control": "Rapide",
-    "date": "01/01/29",
-    "coordinates": [55, 0.5]
-  },
-  {
-    "_id": "3",
-    "town": "Testville 3",
-    "department": "55",
-    "tournament": "Test Tournament 3",
-    "url": "https://www.google.com",
-    "time_control": "BLitz",
-    "date": "01/01/28",
-    "coordinates": [55.5, 0.5]
-  }
-]

package.json

@@ -2,6 +2,10 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": ">=18.16.0",
+    "npm": "please-use-npm"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",