Merge pull request #303 from TaloDev/develop

Release 0.38.0

cypress/e2e/pages/ResetPassword.spec.cy.js

@@ -17,7 +17,7 @@ describe('ResetPassword', () => {
 
     cy.findByText('Success! Your password has been reset').should('exist')
     cy.findByText('Go to Login').click()
-    cy.findByText('Welcome back').should('exist')
+    cy.findByText('Talo Game Services').should('exist')
   })
 
   it('should let users login with valid credentials', () => {

package.json

@@ -32,7 +32,7 @@
     "react-hook-form": "^7.43.8",
     "react-router-dom": "^6.23.1",
     "react-select": "^5.8.0",
-    "recharts": "^2.1.15",
+    "recharts": "^2.13.0",
     "recoil": "^0.7.6",
     "swr": "^2.0.0",
     "use-debounce": "^9.0.0",
@@ -78,7 +78,7 @@
   "lint-staged": {
     "*.{ts,js,tsx,jsx}": "eslint --fix"
   },
-  "version": "0.37.0",
+  "version": "0.38.0",
   "engines": {
     "node": "20.x"
   },

src/Router.tsx

@@ -8,6 +8,7 @@ import canViewPage from './utils/canViewPage'
 import IntendedRouteHandler from './components/IntendedRouteHandler'
 import userState from './state/userState'
 import activeGameState from './state/activeGameState'
+import Footer from './components/Footer'
 
 const Login = lazy(() => import(/* webpackChunkName: 'login' */ './pages/Login'))
 const Dashboard = lazy(() => import(/* webpackChunkName: 'dashboard' */ './pages/Dashboard'))
@@ -57,26 +58,29 @@ function Router({
   return (
     <>
       {!AuthService.getToken() &&
-        <main className='bg-gray-800 w-full'>
-          <Routes>
-            <Route path={routes.login} element={<Login />} />
-            <Route path={routes.register} element={<Register />} />
-            <Route path={routes.demo} element={<Demo />} />
-            <Route path={routes.verify2FA} element={<Verify2FA />} />
-            <Route path={routes.recover} element={<RecoverAccount />} />
-            <Route path={routes.acceptInvite} element={<AcceptInvite />} />
-            <Route path={routes.forgotPassword} element={<ForgotPassword />} />
-            <Route path={routes.resetPassword} element={<ResetPassword />} />
+        <div className='w-full flex flex-col'>
+          <main className='bg-gray-800 w-full md:py-16 lg:py-32'>
+            <Routes>
+              <Route path={routes.login} element={<Login />} />
+              <Route path={routes.register} element={<Register />} />
+              <Route path={routes.demo} element={<Demo />} />
+              <Route path={routes.verify2FA} element={<Verify2FA />} />
+              <Route path={routes.recover} element={<RecoverAccount />} />
+              <Route path={routes.acceptInvite} element={<AcceptInvite />} />
+              <Route path={routes.forgotPassword} element={<ForgotPassword />} />
+              <Route path={routes.resetPassword} element={<ResetPassword />} />
 
-            <Route path='*' element={<IntendedRouteHandler intendedRoute={intendedRoute} />} />
-          </Routes>
-        </main>
+              <Route path='*' element={<IntendedRouteHandler intendedRoute={intendedRoute} />} />
+            </Routes>
+          </main>
+          <Footer />
+        </div>
       }
 
       {AuthService.getToken() &&
         <div className='w-full flex flex-col'>
           <NavBar />
-          <main className='bg-gray-800 p-4 md:p-8 text-white'>
+          <main className='bg-gray-800 p-4 md:p-8 md:pb-16 lg:pb-32 text-white'>
             <Routes>
               <Route path={routes.dashboard} element={<Dashboard />} />
               <Route path={routes.account} element={<Account />} />
@@ -112,6 +116,7 @@ function Router({
               <Route path='*' element={<NotFound />} />
             </Routes>
           </main>
+          <Footer />
         </div>
       }
     </>

src/api/usePinnedGroups.ts

@@ -5,7 +5,7 @@ import makeValidatedGetRequest from './makeValidatedGetRequest'
 import { playerGroupSchema } from '../entities/playerGroup'
 import { z } from 'zod'
 
-export default function usePinnedGroups(activeGame: Game | null) {
+export default function usePinnedGroups(activeGame: Game | null, includeDevData?: boolean) {
   const fetcher = async ([url]: [string]) => {
     const res = await makeValidatedGetRequest(url, z.object({
       groups: z.array(playerGroupSchema)
@@ -15,7 +15,7 @@ export default function usePinnedGroups(activeGame: Game | null) {
   }
 
   const { data, error, mutate } = useSWR(
-    activeGame ? [`games/${activeGame.id}/player-groups/pinned`] : null,
+    activeGame ? [`games/${activeGame.id}/player-groups/pinned`, includeDevData] : null,
     fetcher
   )
 

src/components/CheckboxButton.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react'
+import clsx from 'clsx'
+import { IconCheck } from '@tabler/icons-react'
+import { hiddenInputStyle, labelFocusStyle } from '../styles/theme'
+
+type CheckboxButtonProps = {
+  id: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label: string
+}
+
+export default function CheckboxButton({ id, checked, label, onChange }: CheckboxButtonProps) {
+  const [focus, setFocus] = useState(false)
+
+  return (
+    <>
+      <input
+        id={id}
+        type='checkbox'
+        className={hiddenInputStyle}
+        onFocus={() => setFocus(true)}
+        onBlur={() => setFocus(false)}
+        onChange={() => onChange(!checked)}
+      />
+
+      <label
+        htmlFor={id}
+        className={clsx('p-1 rounded hover:bg-gray-200 flex items-center space-x-2 cursor-pointer transition-all', { [labelFocusStyle]: focus })}
+      >
+        <span className='inline-block rounded w-6 h-6 bg-white border border-black/30 align-text-bottom text-black active:bg-gray-200 transition-colors'>
+          {checked &&
+            <span className='flex items-center justify-center h-full'>
+              <IconCheck size={16} stroke={3} />
+            </span>
+          }
+        </span>
+        <span>{label}</span>
+      </label>
+    </>
+  )
+}