next-themes (#1004)

* next-themes wip * signup toast and game.tsx change * nuke newrelic frontend because possible memory issue on windows * update git ignore, add public/sounds/music * /campaign perf. From ~1.1s load to about 200ms * fix test * cleanup * reset leastMoves on unpublish * post level modal and tooltips (#1000) * post level modal and tooltips * wip * revert collection-by-id * updates * delete capitalized file * PR todos done * cleanup * fix build * useeffect for query params * tweaks * simplify --------- Co-authored-by: Spencer Spenst <spencerspenst@gmail.com> * ch4 preview (#1006) * collection-by-id aggregate (#1003) * wip * fix issue with collection ordering * fix test * improve getCollection across website * improving agg for edit levels * rename * improve profile collections loading by ~25% * fix some issues with getCollections * fix tests * fix bug found from broken test. * knock another 100ms off profile load * 👍 * forgot 1 file --------- Co-authored-by: Danny Miller <k2xl.com@gmail.com> * postgamemodal improvements * more intuitive campaign button * login link for some tips * [Snyk] Upgrade pureimage from 0.3.17 to 0.4.7 (#977) * fix: upgrade pureimage from 0.3.17 to 0.4.7 Snyk has created this PR to upgrade pureimage from 0.3.17 to 0.4.7. See this package in npm: https://www.npmjs.com/package/pureimage See this project in Snyk: https://app.snyk.io/org/k2xl/project/cf09253a-8e4c-4f7f-b75f-a1763e5c78eb?utm_source=github&utm_medium=referral&page=upgrade-pr * pureimage type declaration * fix --------- Co-authored-by: snyk-bot <snyk-bot@snyk.io> Co-authored-by: Spencer Spenst <spencerspenst@gmail.com> * add reviews and 'dont show this popup for 24h' checkbox * getRecommendedLevel dont show a level they have played recently * get rid of datetime filter * Tweak. Remove unnecessary colon * complete/incomplete filter button for chapters * indicators for marking ready * tooltip for checkpoint * cleanup * disable useswr unless popup is open * share icons on post modal * sharebar * curator edit/delete reviews (#1009) * curator edit/delete reviews * red ellipsis * test * fix flaky tests * merge * clear review rating button * curator level management ux * delete achievements on user delete * use level userId instead of req userId * move add to/edit level out of header dropdown * hotfix for deleted reviews on home page * achievement page (#1005) * i forgot i had made this page on a branch when we did achievements * tweak --------- Co-authored-by: Spencer Spenst <spencerspenst@gmail.com> * update calc_records on archive * Revert "update calc_records on archive" This reverts commit 06f89c8. * Try to get twitter images to show * change to twitter site for card... * apparently twitter now requires full url for og image * also do ogurl just in case * mobile buttons update (#1011) * mobile buttons update * optimizations * mobile tweaks --------- Co-authored-by: Spencer Spenst <spencerspenst@gmail.com> * integrityCheckRecords * more accurate preventKeyDownEvent * multiSelectLevel (from #1008) * handle app theme in theme modal * use dark class condition instead of checking theme --------- Co-authored-by: Danny Miller <k2xl.com@gmail.com> Co-authored-by: snyk-bot <snyk-bot@snyk.io>
sspenst · Oct 4, 2023 · 8a8955f · 8a8955f
1 parent 803c093
commit 8a8955f
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 47 deletions.
diff --git a/components/homepage/homeLoggedIn.tsx b/components/homepage/homeLoggedIn.tsx
@@ -7,7 +7,6 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useContext, useState } from 'react';
-import Theme from '../../constants/theme';
 import TimeRange from '../../constants/timeRange';
 import { AppContext } from '../../contexts/appContext';
 import { useTour } from '../../hooks/useTour';
@@ -43,15 +42,11 @@ export default function HomeLoggedIn({
  topLevelsThisMonth,
  user,
 }: HomeLoggedInProps) {
- const { multiplayerSocket, theme, userConfig } = useContext(AppContext);
+ const { multiplayerSocket, userConfig } = useContext(AppContext);
  const router = useRouter();
  const [search, setSearch] = useState('');
  const { connectedPlayersCount, matches, socket } = multiplayerSocket;
- const buttonClassNames = classNames('py-2.5 px-3.5 inline-flex justify-center items-center gap-2 rounded-md border font-medium align-middle focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all text-sm whitespace-nowrap',
- theme === Theme.Light ?
- 'bg-green-100 hover:bg-gray-50 border-gray-300 text-gray-700' :
- 'bg-gray-800 hover:bg-slate-600 border-gray-700 text-gray-300'
- );
+ const buttonClassNames = 'py-2.5 px-3.5 inline-flex justify-center items-center gap-2 rounded-md border font-medium align-middle focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all text-sm whitespace-nowrap bg-green-100 dark:bg-gray-800 hover:bg-gray-50 hover:dark:bg-slate-600 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300';
 
  const tour = useTour(PagePath.HOME);
 

diff --git a/components/level/reviews/commentThread.tsx b/components/level/reviews/commentThread.tsx
@@ -3,7 +3,6 @@ import { Types } from 'mongoose';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { KeyedMutator } from 'swr';
-import Theme from '../../../constants/theme';
 import { AppContext } from '../../../contexts/appContext';
 import { COMMENT_QUERY_LIMIT } from '../../../models/CommentEnums';
 import { EnrichedComment } from '../../../models/db/comment';
@@ -29,7 +28,7 @@ export default function CommentThread({ className, comment, mutateComments, onSe
  const [text, setText] = useState('');
  const [totalRows, setTotalRows] = useState(comment.totalReplies || 0);
  const [page, setPage] = useState(0);
- const { theme, user } = useContext(AppContext);
+ const { user } = useContext(AppContext);
 
  useEffect(() => {
  const urlParams = new URLSearchParams(window.location.search);
@@ -210,12 +209,7 @@ export default function CommentThread({ className, comment, mutateComments, onSe
  :
  <div className='flex flex-col gap-2'>
  <textarea
- className={classNames(
- 'block p-1 w-full rounded-lg border disabled:opacity-25',
- theme === Theme.Light ?
- 'bg-gray-100 focus:ring-blue-500 focus:border-blue-500 border-gray-300' :
- 'bg-gray-700 border-gray-600 placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500'
- )}
+ className='block p-1 w-full rounded-lg border disabled:opacity-25 focus:ring-blue-500 focus:border-blue-500 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600'
  disabled={isUpdating}
  onChange={(e) => setText(e.currentTarget.value)}
  placeholder='Reply...'

diff --git a/components/level/reviews/commentWall.tsx b/components/level/reviews/commentWall.tsx
@@ -1,8 +1,6 @@
-import classNames from 'classnames';
 import { Types } from 'mongoose';
 import React, { useContext, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
-import Theme from '../../../constants/theme';
 import { AppContext } from '../../../contexts/appContext';
 import useComments from '../../../hooks/useComments';
 import { COMMENT_QUERY_LIMIT } from '../../../models/CommentEnums';
@@ -20,8 +18,8 @@ export default function CommentWall({ userId }: CommentWallProps) {
  const [isUpdating, setIsUpdating] = useState(false);
  const [page, setPage] = useState(0);
  const [text, setText] = useState('');
- const { theme, user } = useContext(AppContext);
  const [totalRows, setTotalRows] = useState(0);
+ const { user } = useContext(AppContext);
 
  useEffect(() => {
  if (commentQuery) {
@@ -101,12 +99,7 @@ export default function CommentWall({ userId }: CommentWallProps) {
  {user &&
  <div className='flex flex-col gap-2'>
  <textarea
- className={classNames(
- 'block p-1 w-full rounded-lg border disabled:opacity-25',
- theme === Theme.Light ?
- 'bg-gray-100 focus:ring-blue-500 focus:border-blue-500 border-gray-300' :
- 'bg-gray-700 border-gray-600 placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500'
- )}
+ className='block p-1 w-full rounded-lg border disabled:opacity-25 focus:ring-blue-500 focus:border-blue-500 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600'
  disabled={isUpdating}
  onChange={(e) => setText(e.currentTarget.value)}
  placeholder='Add a comment...'

diff --git a/components/level/reviews/reviewForm.tsx b/components/level/reviews/reviewForm.tsx
@@ -1,9 +1,7 @@
-import classNames from 'classnames';
 import React, { useContext, useState } from 'react';
 import toast from 'react-hot-toast';
 import { Rating } from 'react-simple-star-rating';
 import TextareaAutosize from 'react-textarea-autosize';
-import Theme from '../../../constants/theme';
 import { AppContext } from '../../../contexts/appContext';
 import { LevelContext } from '../../../contexts/levelContext';
 import { PageContext } from '../../../contexts/pageContext';
@@ -24,7 +22,7 @@ export default function ReviewForm({ inModal, review }: ReviewFormProps) {
  const [rating, setRating] = useState(review?.score || 0);
  const [reviewBody, setReviewBody] = useState(review?.text || '');
  const { setPreventKeyDownEvent } = useContext(PageContext);
- const { theme, user: reqUser } = useContext(AppContext);
+ const { user: reqUser } = useContext(AppContext);
 
  function onUpdateReview() {
  setIsUpdating(true);
@@ -118,10 +116,7 @@ export default function ReviewForm({ inModal, review }: ReviewFormProps) {
  }
  </div>
  <TextareaAutosize
- className={classNames(
- 'bg-inherit block py-1 -mt-2 w-full border-b border-neutral-500 disabled:text-neutral-500 transition resize-none placeholder:text-neutral-500 focus:outline-0 rounded-none',
- theme === Theme.Light ? 'focus:border-black' : 'focus:border-white',
- )}
+ className='bg-inherit block py-1 -mt-2 w-full border-b border-neutral-500 disabled:text-neutral-500 transition resize-none placeholder:text-neutral-500 focus:outline-0 rounded-none focus:border-black focus:dark:border-white'
  disabled={isUpdating}
  onBlur={() => {
  // only prevent keydown when entering review from the sidebar

diff --git a/components/modal/themeModal.tsx b/components/modal/themeModal.tsx
@@ -1,5 +1,6 @@
 import RadioButton from '@root/components/page/radioButton';
 import TileType from '@root/constants/tileType';
+import { useTheme } from 'next-themes';
 import React, { useContext, useEffect } from 'react';
 import Theme, { getIconFromTheme } from '../../constants/theme';
 import { AppContext } from '../../contexts/appContext';
@@ -13,6 +14,7 @@ interface ThemeModalProps {
 
 export default function ThemeModal({ closeModal, isOpen }: ThemeModalProps) {
  const { mutateUser, setTheme, theme } = useContext(AppContext);
+ const { setTheme: setAppTheme } = useTheme();
 
  useEffect(() => {
  for (const className of document.body.classList.values()) {
@@ -24,6 +26,11 @@ export default function ThemeModal({ closeModal, isOpen }: ThemeModalProps) {
  }
  }, [isOpen, setTheme]);
 
+ // maintain accurate app theme for tailwind dark mode classes
+ useEffect(() => {
+ setAppTheme(theme === Theme.Light ? 'light' : 'dark');
+ }, [setAppTheme, theme]);
+
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
  const newTheme = e.currentTarget.value;
 

diff --git a/components/settings/settingsPro.tsx b/components/settings/settingsPro.tsx
@@ -5,7 +5,6 @@ import moment from 'moment';
 import Image from 'next/image';
 import Link from 'next/link';
 import React, { useContext, useEffect, useState } from 'react';
-import Theme from '../../constants/theme';
 import { AppContext } from '../../contexts/appContext';
 import useSWRHelper from '../../hooks/useSWRHelper';
 import { SubscriptionData } from '../../pages/api/subscription';
@@ -40,7 +39,7 @@ interface SettingsProProps {
 }
 
 export default function SettingsPro({ stripeCustomerPortalLink, stripePaymentLink, stripePaymentYearlyLink }: SettingsProProps) {
- const { mutateUser, theme, user, userLoading } = useContext(AppContext);
+ const { mutateUser, user, userLoading } = useContext(AppContext);
  const [plan, setPlan] = useState('year');
  const [shouldContinouslyFetch, setShouldContinouslyFetch] = useState(false);
  const { data: subscriptionData } = useSWRHelper<SubscriptionData>('/api/subscription');
@@ -69,12 +68,6 @@ export default function SettingsPro({ stripeCustomerPortalLink, stripePaymentLin
  );
  }
 
- const buttonClassNames = classNames('py-2.5 px-3.5 mt-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium align-middle focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all text-sm whitespace-nowrap',
- theme === Theme.Light ?
- 'bg-green-100 hover:bg-gray-50 border-gray-300 text-gray-700' :
- 'bg-gray-800 hover:bg-slate-600 border-gray-700 text-gray-300'
- );
-
  return (
  <div className='flex flex-col justify-center items-center gap-4'>
  <div className='flex gap-4'>
@@ -101,7 +94,7 @@ export default function SettingsPro({ stripeCustomerPortalLink, stripePaymentLin
  </span>
  :
  <a
- className={buttonClassNames}
+ className='py-2.5 px-3.5 mt-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium align-middle focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all text-sm whitespace-nowrap bg-green-100 dark:bg-gray-800 hover:bg-gray-50 hover:dark:bg-slate-600 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300'
  href={stripeCustomerPortalLink || ''}
  rel='noreferrer'
  target='_blank'

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
  "newrelic": "^11.1.0",
  "next": "^13.3.4",
  "next-seo": "^6.1.0",
+ "next-themes": "^0.2.1",
  "nextjs-google-analytics": "^2.3.3",
  "nodemailer": "^6.9.5",
  "nprogress": "^0.2.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -7,6 +7,7 @@ import { Rubik, Teko } from 'next/font/google';
 import Head from 'next/head';
 import Router, { useRouter } from 'next/router';
 import { DefaultSeo } from 'next-seo';
+import { ThemeProvider } from 'next-themes';
 import nProgress from 'nprogress';
 import React, { useEffect, useState } from 'react';
 import CookieConsent from 'react-cookie-consent';
@@ -305,13 +306,11 @@ export default function MyApp({ Component, pageProps }: AppProps) {
  const isEU = Intl.DateTimeFormat().resolvedOptions().timeZone.startsWith('Europe');
 
  return (
- <>
-
+ <ThemeProvider attribute='class'>
  <Head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
  <meta name='apple-itunes-app' content='app-id=1668925562, app-argument=pathology.gg' />
  </Head>
-
  <DefaultSeo
  defaultTitle='Pathology - Shortest Path Puzzle Game'
  description='The goal of the puzzle game Pathology is simple. Get to the exit in the least number of moves.'
@@ -366,6 +365,6 @@ export default function MyApp({ Component, pageProps }: AppProps) {
  </div>
  </AppContext.Provider>
  </GrowthBookProvider>
- </>
+ </ThemeProvider>
  );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,6 +3,10 @@ module.exports = {
  './components/**/*.{js,jsx,ts,tsx}',
  './pages/**/*.{js,jsx,ts,tsx}',
  ],
+ darkMode: 'class',
+ plugins: [
+ require('@headlessui/tailwindcss')
+ ],
  theme: {
  extend: {
  flexBasis: {
@@ -15,7 +19,4 @@ module.exports = {
  },
  },
  },
- plugins: [
- require('@headlessui/tailwindcss')
- ],
 };