update home design

appsbytom · Jul 27, 2023 · 15995a2 · 15995a2 · vercel · Jul 27, 2023
1 parent c4b6aac
commit 15995a2
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 78 deletions.
diff --git a/components/AccordionChevronTrigger.tsx b/components/AccordionChevronTrigger.tsx
@@ -1,5 +1,5 @@
-import * as Accordion from '@radix-ui/react-accordion'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import * as Accordion from '@radix-ui/react-accordion'
 import classNames from 'classnames'
 import { ReactNode } from 'react'
 
@@ -10,8 +10,8 @@ type Props = {
 
 const AccordionChevronTrigger = ({ children, className }: Props) => (
   <Accordion.Header asChild>
-    <Accordion.Trigger className={classNames('flex items-center space-x-2 group', className)}>
-      <ChevronDownIcon className="w-5 h-5 group-radix-state-open:rotate-180" />
+    <Accordion.Trigger className={classNames('flex gap-2 items-center group w-full py-2 px-3', className)}>
+      <ChevronDownIcon className="w-6 h-6 group-radix-state-open:rotate-180" />
       {children}
     </Accordion.Trigger>
   </Accordion.Header>

diff --git a/components/Activity.tsx b/components/Activity.tsx
@@ -1,18 +1,39 @@
 import SERIES_CONFIG, { Series } from '@/series/config'
-import { ReactNode } from 'react'
 
 type Props = {
+  date: string
+  dateUnits?: string
+  name: string
   series: Series
-  children: ReactNode
+  eventName?: string
 }
 
-const Activity = ({ series, children }: Props) => (
-  <li className="border-b last:border-b-0 flex">
-    <div className={`w-3 ${SERIES_CONFIG[series].colours}`} />
-    <div className="py-2 px-4 flex flex-1 items-center space-x-2">
-      {children}
-    </div>
-  </li>
-)
+const Activity = ({ date, dateUnits, series, eventName, name }: Props) => {
+  const { name: seriesName, colours } = SERIES_CONFIG[series];
+
+  return (
+    <li className="py-2 px-3 flex gap-3 items-center">
+      <div className="flex flex-col items-center font-bold w-12">
+        <p className="text-lg">{date}</p>
+        {dateUnits && <p className="text-sm -mt-1.5">{dateUnits}</p>}
+      </div>
+      <div>
+        <h2>{name}</h2>
+        <div className="flex items-center gap-2 mt-1">
+          <div className="flex items-center gap-2">
+            <div className={`${colours} h-2 w-2 rounded-full `} />
+            <p className="font-bold text-sm">{seriesName}</p>
+          </div>
+          {eventName && (
+            <>
+              <span className="text-gray-600">·</span>
+              <p className="text-gray-600 text-sm">{eventName}</p>
+            </>
+          )}
+        </div>
+      </div>
+    </li>
+  )
+}
 
 export default Activity
diff --git a/components/EditPreferences.tsx b/components/EditPreferences.tsx
@@ -61,7 +61,7 @@ const EditPreferences = () => {
                 <AccordionChevronTrigger className="w-full">
                   <h2 className="text-black">{seriesName}</h2>
                 </AccordionChevronTrigger>
-                <Accordion.Content className="flex items-center space-x-4 mt-1">
+                <Accordion.Content className="flex items-center space-x-4 mt-1 px-3">
                   {sessions.map(({ value: sessionValue, name: sessionName }) => {
                     const id = `${seriesValue}-${sessionValue}`
                     return (
@@ -82,7 +82,7 @@ const EditPreferences = () => {
             )
           })}
         </Accordion.Root>
-        <div className="grid gap-3 sm:grid-cols-2">
+        <div className="grid gap-3 px-3 sm:grid-cols-2">
           <div>
             <label htmlFor="timezoneSelect" className="block mb-2">Timezone</label>
             <TimezoneSelect
@@ -111,7 +111,7 @@ const EditPreferences = () => {
           </div>
         </div>
       </div>
-      <div className="flex sm:justify-end">
+      <div className="flex px-3 sm:justify-end">
         <button
           className="flex items-center justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-emerald-600 font-medium text-white sm:w-auto hover:enabled:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-75"
           onClick={save}

diff --git a/components/MigratePreferences.tsx b/components/MigratePreferences.tsx
@@ -82,7 +82,7 @@ const MigratePreferences = () => {
   }
 
   return (
-    <>
+    <div className="px-3">
       <MigratePreferencesModal isOpen={isOpen} setIsOpen={setIsOpen} />
       <div className="rounded-md border border-red-800 p-4 mt-5 flex flex-col gap-3 sm:flex-row sm:justify-between sm:items-center">
         <div>
@@ -106,7 +106,7 @@ const MigratePreferences = () => {
           </button>
         )}
       </div>
-    </>
+    </div>
   )
 }
 

diff --git a/components/ProvisionalEventActivity.tsx b/components/ProvisionalEventActivity.tsx
diff --git a/components/SessionActivity.tsx b/components/SessionActivity.tsx
@@ -7,16 +7,19 @@ type Props = {
   session: GroupedSession
 }
 
-const SessionActivity = ({ session }: Props) => {
+const SessionActivity = ({ session: { series, eventName, startTime, name, unconfirmed } }: Props) => {
   const { timezone, use24HourFormat } = usePreferences()
 
+  const date = dayjs(startTime).tz(timezone)
+
   return (
-    <Activity series={session.series}>
-      <h2>{session.eventName}: {session.name}</h2>
-      <small>
-        {dayjs(session.startTime).tz(timezone).format(use24HourFormat ? 'HH:mm' : 'h:mm A')} {session.unconfirmed && <span className="font-semibold">(TBC)</span>}
-      </small>
-    </Activity>
+    <Activity
+      date={date.format(use24HourFormat ? 'HH:mm' : 'h:mm')}
+      dateUnits={!use24HourFormat && date.format('A')}
+      name={`${unconfirmed ? '(TBC)' : ''} ${name}`}
+      series={series}
+      eventName={eventName}
+    />
   )
 }
 

diff --git a/components/SkeletonWeekList.tsx b/components/SkeletonWeekList.tsx
@@ -1,14 +1,14 @@
 const SkeletonWeekList = ({ activityCounts }: { activityCounts: number[] }) => (
-  <ul className="animate-pulse flex flex-col gap-4">
+  <ul className="animate-pulse flex flex-col gap-3">
     {activityCounts.map((numOfActivities, i) => (
       <li key={`skeleton-${i}`} className="flex-1">
-        <div className="h-3 mb-1 rounded-full bg-gray-300" />
-        <div className="border border-gray-200">
+        <div className="h-9 mb-1 bg-gray-300" />
+        <div className="divide-y">
           {Array.from({ length: numOfActivities }).map((_, i) => (
-            <div key={`skeleton-activity-${i}`} className="border-b last:border-b-0 flex">
-              <div className="w-3 rounded-none bg-gray-200" />
-              <div className="py-2 px-4 flex-1">
-                <div className="h-6 rounded-full bg-gray-200" />
+            <div key={`skeleton-activity-${i}`} className="flex">
+              <div className="py-2 px-3 flex-1 flex gap-3">
+                <div className="w-9 h-9 rounded-none bg-gray-200" />
+                <div className="flex-1 rounded-full bg-gray-200" />
               </div>
             </div>
           ))}

diff --git a/components/WeekList.tsx b/components/WeekList.tsx
@@ -1,14 +1,14 @@
+import AccordionChevronTrigger from '@/components/AccordionChevronTrigger'
 import Week from '@/types/week'
 import { getSeriesNames } from '@/utils/series'
+import * as Accordion from '@radix-ui/react-accordion'
 import dayjs from 'dayjs'
+import { useEffect, useState } from 'react'
+import Activity from './Activity'
 import { usePreferences } from './PreferencesContext/PreferencesContext'
-import ProvisionalEventActivity from './ProvisionalEventActivity'
 import SessionActivity from './SessionActivity'
-import { useEffect, useState } from 'react'
-import * as Accordion from '@radix-ui/react-accordion'
-import AccordionChevronTrigger from '@/components/AccordionChevronTrigger';
 
-const format = (date: dayjs.Dayjs) => date.format('D MMMM')
+const format = (date: dayjs.Dayjs) => date.format('D MMM')
 
 type Props = {
   weeks: Week[]
@@ -24,10 +24,11 @@ const WeekList = ({ weeks }: Props) => {
 
   return (
     <Accordion.Root type="multiple" value={expanded} onValueChange={setExpanded} asChild>
-      <ol className="space-y-4">
+      <ol>
         {weeks.map(({ date, weekNumber, days }) => {
           const { 0: { date: firstDayDate }, [days.length - 1]: { date: lastDayDate }} = days
-          const firstDayFormatted = format(dayjs(firstDayDate).tz(timezone))
+          const firstDay = dayjs(firstDayDate).tz(timezone)
+          const lastDay = dayjs(lastDayDate).tz(timezone)
 
           const includedSeries = days.flatMap(day => [...day.sessions.map(session => session.series), ...day.provisionalEvents.map(event => event.series)])
 
@@ -38,24 +39,26 @@ const WeekList = ({ weeks }: Props) => {
                   {weekNumber === dayjs().tz(timezone).isoWeek() ? (
                     <div className="bg-gray-100 flex items-center px-2.5 py-0.5 rounded gap-2">
                       <div className="relative h-2 w-2">
-                        <div className="animate-ping absolute h-full w-full rounded-full bg-black" />
-                        <div className="relative rounded-full h-full bg-black" />
+                        <div className="animate-ping absolute h-full w-full rounded-full bg-gray-900" />
+                        <div className="relative rounded-full h-full bg-gray-900" />
                       </div>
-                      <h1 className="text-sm font-medium">It's race week!</h1>
+                      <h1 className="font-medium">It's race week!</h1>
                     </div>
                   ) : (
-                    <h1>{days.length > 1 ? `${firstDayFormatted} - ${format(dayjs(lastDayDate).tz(timezone))}` : firstDayFormatted}</h1>
+                    <h1 className="text-lg">
+                      {days.length > 1 ? `${firstDay.month() === lastDay.month() ? firstDay.format('D') : format(firstDay)} - ${format(lastDay)}` : format(firstDay)}
+                    </h1>
                   )}
-                  <small className="font-bold">{getSeriesNames(series => includedSeries.includes(series.value))}</small>
+                  <p className="text-sm font-bold group-radix-state-open:hidden bg-">{getSeriesNames(series => includedSeries.includes(series.value))}</p>
                 </AccordionChevronTrigger>
                 <Accordion.Content asChild>
-                  <ol className="space-y-2 mt-1">
+                  <ol>
                     {days.map(({ date, sessions, provisionalEvents }) => (
                       <li key={date}>
-                        <h2 className="mb-1">{dayjs(date).format('dddd')}</h2>
-                        <ol className="border border-gray-200">
+                        <h2 className="bg-gray-50 border-b py-2 px-3 font-semibold">{dayjs(date).format('dddd')}</h2>
+                        <ol className="divide-y">
                           {sessions.map(session => <SessionActivity key={session.id} session={session} />)}
-                          {provisionalEvents.map(event => <ProvisionalEventActivity key={event.id} event={event} />)}
+                          {provisionalEvents.map(event => <Activity key={event.id} date="TBC" series={event.series} name={event.name} />)}
                         </ol>
                       </li>
                     ))}

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,4 @@
-import Nav from '@/components/Nav';
+import Nav from '@/components/Nav'
 import PreferencesProvider from '@/components/PreferencesContext/PreferencesContext'
 import { Analytics } from '@vercel/analytics/react'
 import dayjs from 'dayjs'
@@ -26,7 +26,7 @@ const MyApp = ({ Component, pageProps: { session, ...pageProps } }: AppProps) =>
     <SessionProvider session={session}>
       <PreferencesProvider>
         <Nav />
-        <div className="max-w-2xl w-full mx-auto px-4 py-5">
+        <div className="max-w-2xl w-full mx-auto py-3">
           <Component {...pageProps} />
           <Analytics />
         </div>

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -3,7 +3,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 const Document = () => (
   <Html lang="en">
     <Head />
-    <body>
+    <body className="text-gray-900">
       <Main />
       <NextScript />
     </body>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -51,18 +51,24 @@ const Home = ({ sessions, provisionalEvents, skeletonActivityCounts }: Props) =>
 
   if (!isFollowingSessions) {
     return (
-      <Message title="No series' followed" description="Get started by selecting the series’ you are interested in and setup your account">
-        <Link href="/preferences" className="inline-block w-full shrink-0 px-4 py-2 border border-gray-300 rounded-md font-medium mt-3 hover:bg-gray-50 sm:w-auto">
-          Set your preferences
-        </Link>
-      </Message>
+      <div className="px-3">
+        <Message title="No series' followed" description="Get started by selecting the series’ you are interested in and setup your account">
+          <Link href="/preferences" className="inline-block w-full shrink-0 px-4 py-2 border border-gray-300 rounded-md font-medium mt-3 hover:bg-gray-50 sm:w-auto">
+            Set your preferences
+          </Link>
+        </Message>
+      </div>
     )
   }
 
   const weeks = getWeeks(sessions, provisionalEvents, followedSessions, timezone)
 
   if (weeks.length <= 0) {
-    return <Message title="Season finished" description="All the series' you follow have finished, check back next year" />
+    return (
+      <div className="px-3">
+        <Message title="Season finished" description="All the series' you follow have finished, check back next year" />
+      </div>
+    )
   }
 
   return <WeekList weeks={weeks} />

diff --git a/pages/preferences.tsx b/pages/preferences.tsx
@@ -1,15 +1,15 @@
-import EditPreferences from '@/components/EditPreferences';
-import MigratePreferences from '@/components/MigratePreferences';
-import { usePreferences } from '@/components/PreferencesContext/PreferencesContext';
-import { useSession } from 'next-auth/react';
+import EditPreferences from '@/components/EditPreferences'
+import MigratePreferences from '@/components/MigratePreferences'
+import { usePreferences } from '@/components/PreferencesContext/PreferencesContext'
+import { useSession } from 'next-auth/react'
 
 const Preferences = () => {
   const { status } = useSession()
   const { isLoading } = usePreferences()
 
   if (status === 'loading' || isLoading) {
     return (
-      <div className="animate-pulse">
+      <div className="animate-pulse px-3">
         <div className="h-96 mb-3 rounded-md bg-gray-300 sm:h-80" />
         <div className="rounded-md border border-gray-300 px-3 py-4 mt-3 flex flex-col gap-3 sm:flex-row sm:justify-between sm:items-center">
           <div className="flex-1">
@@ -25,7 +25,7 @@ const Preferences = () => {
   return (
     <>
       <EditPreferences/>
-      <MigratePreferences/>
+      <MigratePreferences />
     </>
   );
 }