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 (