From 9d2fa1071b95457235b95e36b78a35a3130ec9b3 Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Thu, 15 Jun 2023 22:41:13 +0200
Subject: [PATCH] css styles changed to tailwind

---
 .eslintrc.json                       |  9 +++++++-
 .npmrc                               |  1 +
 .nvmrc                               |  1 +
 TODO                                 |  6 +++++-
 app/globals.css                      | 30 --------------------------
 components/ThemeSwitcher.tsx         | 22 ++++++++++---------
 cypress/fixtures/example.json        |  5 -----
 cypress/fixtures/tournamentData.json | 32 ----------------------------
 package.json                         |  4 ++++
 9 files changed, 31 insertions(+), 79 deletions(-)
 create mode 100644 .npmrc
 create mode 100644 .nvmrc
 delete mode 100644 cypress/fixtures/example.json
 delete mode 100644 cypress/fixtures/tournamentData.json

diff --git a/.eslintrc.json b/.eslintrc.json
index 93f7788..4e419a9 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,13 @@
 {
   "extends": [
+    "next",
     "next/core-web-vitals",
     "plugin:cypress/recommended"
-  ]
+  ],
+  "globals": {
+    "React": "readonly"
+  },
+  "rules": {
+    "no-unused-vars": "warn"
+  }
 }
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..b6f27f1
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..6d80269
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+18.16.0
diff --git a/TODO b/TODO
index 3bfc305..9d95675 100644
--- a/TODO
+++ b/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
 
diff --git a/app/globals.css b/app/globals.css
index d29b10b..ce7a2fc 100644
--- a/app/globals.css
+++ b/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;
-}
\ No newline at end of file
diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
index 6314afa..69cee1c 100644
--- a/components/ThemeSwitcher.tsx
+++ b/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")}>
-          <MdBrightness2 className="theme-icon-dark"  />
+        <div
+          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")}>
-          <MdCircle className="theme-icon"  />
+        <div
+          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>
   );
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
deleted file mode 100644
index 02e4254..0000000
--- a/cypress/fixtures/example.json
+++ /dev/null
@@ -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"
-}
diff --git a/cypress/fixtures/tournamentData.json b/cypress/fixtures/tournamentData.json
deleted file mode 100644
index c715f2f..0000000
--- a/cypress/fixtures/tournamentData.json
+++ /dev/null
@@ -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]
-  }
-]
diff --git a/package.json b/package.json
index 08d93ef..3e29ac2 100644
--- a/package.json
+++ b/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",