Merge pull request #302 from TaloDev/talo-info-card-and-footer

Add Talo info card and footer

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', () => {

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/components/Footer.tsx

@@ -0,0 +1,61 @@
+import Link from './Link'
+
+export default function Footer() {
+  return (
+    <footer className='relative mt-auto bg-gray-900 px-4 py-8 md:py-12 w-full text-white md:flex justify-center md:space-x-12 lg:space-x-16 xl:space-x-[100px] space-y-4 md:space-y-0 border-t border-gray-700'>
+      <div className='space-y-4'>
+        <div>
+          <strong>&copy; Talo Platform Ltd {new Date().getFullYear()}</strong>
+          <p className='mt-2'>Self-funded and independent</p>
+          <Link to='https://trytalo.com/about?utm_source=dashboard&utm_medium=footer'>About us</Link>
+        </div>
+
+        <div>
+          <h3 className='font-semibold'>Contact us</h3>
+          <ul className='mt-2 space-y-1'>
+            <li><Link to='https://discord.gg/2RWwxXVY3v'>Discord</Link></li>
+            <li><Link to='mailto:hello@trytalo.com'>Email</Link></li>
+            <li><Link to='https://x.com/trytalo'>Twitter</Link></li>
+          </ul>
+        </div>
+      </div>
+
+      <div>
+        <h3 className='font-semibold'>Features</h3>
+        <ul className='mt-2 space-y-1'>
+          <li><Link to='https://trytalo.com/players?utm_source=dashboard&utm_medium=footer'>Player management</Link></li>
+          <li><Link to='https://trytalo.com/events?utm_source=dashboard&utm_medium=footer'>Event tracking</Link></li>
+          <li><Link to='https://trytalo.com/leaderboards?utm_source=dashboard&utm_medium=footer'>Leaderboards</Link></li>
+          <li><Link to='https://trytalo.com/saves?utm_source=dashboard&utm_medium=footer'>Game saves</Link></li>
+          <li><Link to='https://trytalo.com/stats?utm_source=dashboard&utm_medium=footer'>Game stats</Link></li>
+          <li><Link to='https://trytalo.com/feedback?utm_source=dashboard&utm_medium=footer'>Game feedback</Link></li>
+          <li><Link to='https://trytalo.com/live-config?utm_source=dashboard&utm_medium=footer'>Live config</Link></li>
+          <li><Link to='https://trytalo.com/open-source?utm_source=dashboard&utm_medium=footer'>Open source</Link></li>
+        </ul>
+      </div>
+
+      <div className='space-y-4 xl:space-y-0 xl:flex xl:space-x-[100px]'>
+        <div>
+          <h3 className='font-semibold'>Integrations</h3>
+          <ul className='mt-2 space-y-1'>
+            <li><Link to='https://trytalo.com/steamworks-integration?utm_source=dashboard&utm_medium=footer'>Steamworks integration</Link></li>
+            <li><Link to='https://trytalo.com/unity?utm_source=dashboard&utm_medium=footer'>Unity package</Link></li>
+            <li><Link to='https://trytalo.com/godot?utm_source=dashboard&utm_medium=footer'>Godot plugin</Link></li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className='font-semibold'>Links</h3>
+          <ul className='mt-2 space-y-1'>
+            <li><Link to='https://github.com/TaloDev'>GitHub</Link></li>
+            <li><Link to='https://docs.trytalo.com?utm_source=dashboard&utm_medium=footer'>Docs</Link></li>
+            <li><Link to='https://trytalo.com/blog?utm_source=dashboard&utm_medium=footer'>Blog</Link></li>
+            <li><Link to='https://trytalo.com/pricing?utm_source=dashboard&utm_medium=footer'>Pricing</Link></li>
+            <li><Link to='https://trytalo.com/privacy?utm_source=dashboard&utm_medium=footer'>Privacy</Link></li>
+            <li><Link to='https://trytalo.com/terms?utm_source=dashboard&utm_medium=footer'>Terms</Link></li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  )
+}

src/components/Link.tsx

@@ -10,7 +10,7 @@ type LinkProps = {
   children: ReactNode
 }
 
-function Link({
+export default function Link({
   to,
   state,
   className,
@@ -34,5 +34,3 @@ function Link({
     </RouterLink>
   )
 }
-
-export default Link

src/components/LinkButton.tsx

@@ -1,16 +1,18 @@
 import { MouseEvent, ReactNode } from 'react'
 import { linkStyle, focusStyle } from '../styles/theme'
+import clsx from 'clsx'
 
 type LinkButtonProps = {
   onClick: (e: MouseEvent<HTMLElement>) => void
+  className?: string
   children: ReactNode
 }
 
-export default function LinkButton({ onClick, children }: LinkButtonProps) {
+export default function LinkButton({ onClick, className, children }: LinkButtonProps) {
   return (
     <button
       type='button'
-      className={`${linkStyle} ${focusStyle}`}
+      className={clsx(linkStyle, focusStyle, className)}
       onClick={onClick}
     >
       {children}

src/components/TaloInfoCard.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import LinkButton from './LinkButton'
+import clsx from 'clsx'
+import { IconChevronDown } from '@tabler/icons-react'
+import Link from './Link'
+
+export default function TaloInfoCard() {
+  const [showInfo, setShowInfo] = useState(false)
+
+  return (
+    <>
+      <LinkButton className='flex space-x-2 items-center' onClick={() => setShowInfo(!showInfo)}>
+        <span>What is Talo?</span>
+        <IconChevronDown className={clsx('transition-transform', { 'rotate-180': showInfo })} />
+      </LinkButton>
+
+      {showInfo &&
+        <div className='flex space-x-4'>
+          <div className='w-1 bg-gray-700' />
+          <p className='text-sm md:text-base'>
+            Talo is an open-source game backend: it&apos;s the easiest way to integrate leaderboards, stats, player management and more.
+            {' '}<Link to='https://trytalo.com'>Learn more here</Link>.
+          </p>
+        </div>
+      }
+    </>
+  )
+}

src/modals/IntegrationDetails.tsx

@@ -177,7 +177,7 @@ export default function IntegrationDetails({
     >
       <form onSubmit={handleSubmit(onEnableClick)}>
         <div className='p-4 space-y-4'>
-          <span>To learn more about how the integration works, <Link to='https://docs.trytalo.com/docs/integrations/steamworks'>visit the docs</Link></span>
+          <span>To learn more about how the integration works, <Link to='https://docs.trytalo.com/docs/integrations/steamworks?utm_source=dashboard&utm_medium=integration-modal'>visit the docs</Link></span>
 
           <hr />
 

src/modals/groups/GroupDetails.tsx

@@ -226,7 +226,7 @@ export default function GroupDetails({
               <div className='flex justify-between items-start'>
                 <div>
                   <label htmlFor='members-visible' className='font-semibold'>Members visible</label>
-                  <p className='text-sm text-gray-500'>If enabled, player data will be returned in the <Link to='https://docs.trytalo.com/docs/http/player-group-api'>player group API</Link></p>
+                  <p className='text-sm text-gray-500'>If enabled, player data will be returned in the <Link to='https://docs.trytalo.com/docs/http/player-group-api?utm_source=dashboard&utm_medium=group-details-modal'>player group API</Link></p>
                 </div>
                 <div className='flex items-center space-x-4'>
                   <Toggle

src/pages/Integrations.tsx

@@ -167,7 +167,7 @@ export default function Integrations() {
                   loading={isSyncingSteamworksLeaderboards}
                   error={syncingSteamworksLeaderboardsError}
                   title='Sync your Talo and Steamworks leaderboards'
-                  docs='https://docs.trytalo.com/docs/integrations/steamworks#manually-syncing-leaderboards'
+                  docs='https://docs.trytalo.com/docs/integrations/steamworks#manually-syncing-leaderboards?utm_source=dashboard&utm_medium=integrations'
                   onClick={onSyncSteamworksLeaderboardsClick}
                   cta='Sync leaderboards'
                   successTitle='Leaderboards syncing'
@@ -180,7 +180,7 @@ export default function Integrations() {
                   loading={isSyncingSteamworksStats}
                   error={syncingSteamworksStatsError}
                   title='Sync your Talo and Steamworks global stats'
-                  docs='https://docs.trytalo.com/docs/integrations/steamworks#manually-syncing-stats'
+                  docs='https://docs.trytalo.com/docs/integrations/steamworks#manually-syncing-stats?utm_source=dashboard&utm_medium=integrations'
                   onClick={onSyncSteamworksStatsClick}
                   cta='Sync stats'
                   successTitle='Stats syncing'

src/pages/Login.tsx

@@ -14,6 +14,8 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import * as Sentry from '@sentry/react'
 import type { MouseEvent } from 'react'
 import userState from '../state/userState'
+import taloIcon from '../assets/talo-icon.svg'
+import TaloInfoCard from '../components/TaloInfoCard'
 
 export default function Login() {
   const [email, setEmail] = useState('')
@@ -62,7 +64,12 @@ export default function Login() {
     <div className='h-full p-8 flex flex-col md:items-center md:justify-center'>
       <form className={`text-white space-y-8 ${unauthedContainerStyle}`}>
         <div className='space-y-4'>
-          <h1 className='text-4xl font-bold'>Welcome back</h1>
+          <h1 className='text-4xl font-mono font-bold flex items-center space-x-4'>
+            <img src={taloIcon} alt='Talo' className='w-[32px] h-[32px]' />
+            <span>Talo Game Services</span>
+          </h1>
+
+          <TaloInfoCard />
 
           {wasLoggedOut &&
             <AlertBanner text='You were logged out' />
@@ -92,7 +99,7 @@ export default function Login() {
             value={password}
           />
 
-          <Link to={routes.forgotPassword} className='block mt-4'>Forgot your password?</Link>
+          <Link to={routes.forgotPassword} className='inline-block mt-4'>Forgot your password?</Link>
         </div>
 
         {error && <ErrorMessage error={error} />}

src/pages/Register.tsx

@@ -136,7 +136,7 @@ export default function Register() {
               inputRef={ref}
               checked={value}
               onChange={onChange}
-              labelContent={<>I agree to the <Link to='https://trytalo.com/terms'>Terms of Use</Link> and <Link to='https://trytalo.com/privacy'>Privacy Policy</Link></>}
+              labelContent={<>I agree to the <Link to='https://trytalo.com/terms'>terms of use</Link> and <Link to='https://trytalo.com/privacy'>privacy policy</Link></>}
             />
           )}
         />