Skip to content

Commit 31cc7c2

Browse files
hasparushasparus
committed
Bring styles closer to the design
1 parent 509573c commit 31cc7c2

File tree

2 files changed

+40
-48
lines changed

2 files changed

+40
-48
lines changed

‎src/app/conf/2025/schedule/_components/filters.tsx

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function Filters({
2020
{Object.values(filterState).flat().length > 0 && (
2121
<button
2222
onClick={onReset}
23-
className="flex cursor-pointer items-center gap-x-2 rounded-md bg-gray-200 px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300 hover:text-gray-900"
23+
className="flex cursor-pointer items-center gap-x-2 bg-neu-100 px-2 py-1 text-neu-700 hover:bg-neu-200/80 hover:text-neu-900"
2424
>
2525
Reset filters <X className="inline-block size-4" />
2626
</button>
@@ -38,15 +38,7 @@ export function Filters({
3838
<div className="py-1">
3939
{categories.map(option => (
4040
<Menu.Item key={option.name}>
41-
<span
42-
className={clsx(
43-
filterState[option.name].length > 0
44-
? "font-medium text-gray-900"
45-
: "text-gray-500",
46-
)}
47-
>
48-
{option.name}
49-
</span>
41+
<span>{option.name}</span>
5042
</Menu.Item>
5143
))}
5244
</div>
@@ -61,20 +53,20 @@ export function Filters({
6153
id={`desktop-menu-${sectionIdx}`}
6254
className="relative inline-block text-left"
6355
>
64-
<Popover.Button className="group inline-flex cursor-pointer items-center justify-center bg-inherit p-1 px-2 text-sm font-medium text-gray-700 hover:text-gray-900">
56+
<Popover.Button className="group inline-flex cursor-pointer items-center justify-center bg-inherit p-1 px-2 text-neu-700 hover:text-neu-900">
6557
<span>{section.name}</span>
6658
{filterState[section.name].length ? (
67-
<span className="ml-1.5 rounded bg-gray-200 px-1.5 py-0.5 text-xs font-semibold tabular-nums text-gray-700">
59+
<span className="ml-1.5 bg-neu-200 px-1.5 py-0.5 tabular-nums text-neu-700">
6860
{filterState[section.name].length}
6961
</span>
7062
) : null}
7163
<ChevronDown
72-
className="-mr-1 ml-1 size-5 shrink-0 text-gray-400 group-hover:text-gray-500"
64+
className="-mr-1 ml-1 size-5 shrink-0 text-neu-400 group-hover:text-neu-500"
7365
aria-hidden="true"
7466
/>
7567
</Popover.Button>
7668

77-
<Popover.Panel className="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white p-4 shadow-lg focus:outline-none">
69+
<Popover.Panel className="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-neu-0 p-4 shadow-lg focus:outline-none">
7870
<form className="space-y-4">
7971
{section.options.map((option, optionIdx) => (
8072
<div key={option} className="flex items-center gap-3">
@@ -88,11 +80,11 @@ export function Filters({
8880
}}
8981
checked={filterState[section.name].includes(option)}
9082
type="checkbox"
91-
className="size-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
83+
className="size-4 cursor-pointer rounded border-neu-300 text-indigo-600 focus:ring-indigo-500"
9284
/>
9385
<label
9486
htmlFor={`filter-${section.name}-${optionIdx}`}
95-
className="cursor-pointer whitespace-nowrap pr-6 text-sm font-medium text-gray-900"
87+
className="cursor-pointer whitespace-nowrap pr-6 text-neu-900"
9688
>
9789
{option}
9890
</label>

‎src/app/conf/2025/schedule/_components/schedule-list.tsx

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ interface Props {
7979
showFilter?: boolean
8080
scheduleData: ScheduleSession[]
8181
filterSchedule?: (sessions: ScheduleSession[]) => ScheduleSession[]
82-
year: "2025"
82+
year: "2025" | "2024"
8383
eventsColors: Record<string, string>
8484
filterCategories: {
8585
name: CategoryName
@@ -117,7 +117,6 @@ export function ScheduleList({
117117

118118
return (
119119
<>
120-
<div className="my-6 h-0.5 bg-gray-200" />
121120
{showFilter && (
122121
<Filters
123122
categories={filterCategories}
@@ -142,7 +141,7 @@ export function ScheduleList({
142141
/>
143142
)}
144143
{Object.entries(sessionsState).length === 0 ? (
145-
<div className="text-sm text-gray-800">
144+
<div className="typography-body-sm">
146145
<h3 className="mb-5">No sessions found</h3>
147146
</div>
148147
) : (
@@ -155,31 +154,34 @@ export function ScheduleList({
155154
<a
156155
href={`#day-${(year === "2024" ? 1 : 0) + index + 1}`}
157156
key={date}
158-
className={"text-xs text-gray-800 hover:underline"}
157+
className={"typography-link"}
159158
>
160159
Day {index + 1}
161160
</a>
162161
))}
163162
</div>
164163
{Object.entries(sessionsState).map(
165164
([date, concurrentSessionsGroup], index) => (
166-
<div key={date} className="text-sm text-gray-800">
167-
<h3 className="mb-5" id={`day-${index + 1}`}>
165+
<div
166+
key={date}
167+
className="bg-neu-200 typography-body-sm dark:bg-neu-50"
168+
>
169+
<h3
170+
className="bg-neu-50 py-4 dark:bg-neu-0"
171+
id={`day-${index + 1}`}
172+
>
168173
{format(parseISO(date), "EEEE, MMMM d")}
169174
</h3>
170175
{Object.entries(concurrentSessionsGroup).map(
171176
([sessionDate, sessions]) => (
172177
<div key={`concurrent sessions on ${sessionDate}`}>
173-
<div className="mb-4 flex flex-col lg:flex-row">
174-
<div className="relative">
175-
<span className="mb-5 mt-3 inline-block w-20 whitespace-nowrap text-gray-500 lg:mr-7 lg:mt-0 lg:w-28">
178+
<div className="mb-px flex flex-col lg:mr-px lg:flex-row">
179+
<div className="relative bg-neu-50 dark:border-neu-50 dark:bg-neu-0 lg:border-r">
180+
<span className="inline-block w-20 whitespace-nowrap pb-4 typography-body-sm lg:mr-6 lg:mt-3 lg:w-28">
176181
{format(parseISO(sessionDate), "hh:mmaaaa 'PDT'")}
177182
</span>
178-
<div className="absolute right-3 top-0 hidden h-full w-0.5 bg-gray-200 lg:block" />
179183
</div>
180-
<div className="relative flex w-full flex-col items-end gap-5 pl-[28px] lg:flex-row lg:items-start lg:pl-0">
181-
<div className="absolute left-3 top-0 block h-full w-0.5 bg-gray-200 lg:hidden" />
182-
184+
<div className="relative flex w-full flex-col items-end gap-px pl-[28px] lg:flex-row lg:items-start lg:pl-0">
183185
{sessions.map(session => {
184186
const eventType = session.event_type.endsWith("s")
185187
? session.event_type.slice(0, -1)
@@ -195,17 +197,12 @@ export function ScheduleList({
195197
formattedSpeakers,
196198
)
197199

198-
const borderColor = eventsColors[session.event_type]
200+
const eventColor = eventsColors[session.event_type]
199201

200202
return session.event_type === "Breaks" ? (
201203
<div
202204
key={session.id}
203-
style={{
204-
borderLeft: `10px solid ${borderColor}`,
205-
borderRadius: "5px",
206-
backgroundColor: "white",
207-
}}
208-
className="flex size-full items-center rounded-md px-4 py-2 font-normal text-black shadow-[-5px_10px_30px_20px_#d0d3da33]"
205+
className="flex size-full items-center bg-neu-0 px-4 py-2 font-normal"
209206
>
210207
{showEventType ? eventType + " / " : ""}
211208
{eventTitle}
@@ -216,22 +213,25 @@ export function ScheduleList({
216213
data-tooltip-id="my-tooltip"
217214
href={`/conf/${year}/schedule/${session.id}?name=${session.name}`}
218215
key={session.id}
219-
style={{
220-
borderLeft: `10px solid ${borderColor}`,
221-
borderRadius: "5px",
222-
backgroundColor: "white",
223-
}}
224-
className="group relative size-full rounded-md px-4 py-2 font-normal text-black no-underline shadow-[-5px_10px_30px_20px_#d0d3da33] hover:no-underline"
216+
className="group relative size-full bg-neu-0 px-4 py-2 font-normal no-underline [&:hover_*]:!no-underline"
225217
>
226-
<div className="flex h-full flex-col justify-start gap-y-2 py-3">
227-
{borderColor && (
218+
<span className="flex h-full flex-col justify-start gap-y-2 py-3">
219+
{eventColor && (
228220
<span
229-
className="mb-3 flex items-center justify-center self-start rounded-3xl border px-3 py-1 text-white group-hover:no-underline"
221+
className="relative mb-3 flex items-center justify-center self-start border px-2 py-1 font-mono text-xs/none uppercase"
230222
style={{
231-
backgroundColor: borderColor,
223+
borderColor: eventColor,
232224
}}
233225
>
234-
{eventType}
226+
<span
227+
className="absolute inset-0 opacity-20"
228+
style={{
229+
backgroundColor: eventColor,
230+
}}
231+
/>
232+
<span className="relative">
233+
{eventType}
234+
</span>
235235
</span>
236236
)}
237237
<div className="flex h-full flex-col justify-between gap-y-2 group-hover:underline">
@@ -260,7 +260,7 @@ export function ScheduleList({
260260
</span>
261261
</div>
262262
</div>
263-
</div>
263+
</span>
264264
</a>
265265
)
266266
})}

0 commit comments

Comments
 (0)