Improve the UI of session page

hasparus · hasparus · commit d4ec48d289d8 · 2025-05-29T11:55:20.000+02:00
diff --git a/src/app/conf/2025/components/cta-card-section/index.tsx b/src/app/conf/2025/components/cta-card-section/index.tsx
@@ -2,8 +2,9 @@ import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 
 import logoMask from "./logo-mask.webp"
 
-export interface CtaCardSectionProps extends React.HTMLAttributes<HTMLElement> {
-  title: string
+export interface CtaCardSectionProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  title: React.ReactNode
   description: string
   children: React.ReactNode
 }
diff --git a/src/app/conf/2025/components/speaker-card.tsx b/src/app/conf/2025/components/speaker-card.tsx
@@ -29,7 +29,7 @@ export function SpeakerCard({
   return (
     <article
       className={clsx(
-        "relative flex flex-col overflow-hidden border border-neu-200 [container-type:inline-size] dark:border-neu-100",
+        "group relative flex flex-col overflow-hidden border border-neu-200 bg-neu-0 [container-type:inline-size] dark:border-neu-100",
         className,
       )}
       {...props}
@@ -55,7 +55,12 @@ export function SpeakerCard({
           <div className="flex flex-col gap-1">
             <h3 className="typography-body-lg">{speaker.name}</h3>
             <p className="typography-body-sm text-neu-800">
-              {[speaker.position, speaker.company].filter(Boolean).join(", ")}
+              {[
+                speaker.position,
+                speaker.company === "-" ? "" : speaker.company,
+              ]
+                .filter(Boolean)
+                .join(", ")}
             </p>
           </div>
           {speaker.about && (
@@ -77,8 +82,8 @@ export function SpeakerCard({
       </div>
       <Anchor
         href={`/conf/${year}/speakers/${speaker.username}`}
-        className="absolute inset-0 z-[1] ring-inset ring-neu-400 hover:ring-1 dark:ring-neu-100"
-        title={`See ${speaker.name.split(" ")[0]}'s sessions`}
+        className="absolute inset-0 z-[1] ring-inset ring-neu-400 hover:bg-sec-base/[.035] hover:ring-1 dark:ring-neu-100"
+        aria-label={`See ${speaker.name.split(" ")[0]}'s sessions`}
       />
     </article>
   )
diff --git a/src/app/conf/2025/schedule/[id]/page.tsx b/src/app/conf/2025/schedule/[id]/page.tsx
@@ -71,10 +71,10 @@ export default function SessionPage({ params }: SessionProps) {
       <NavbarPlaceholder className="top-0 bg-neu-50 before:bg-white/40 dark:bg-neu-0 dark:before:bg-blk/30" />
 
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
-        <div className="gql-conf-container">
-          <div className="gql-conf-section !pt-0">
-            <div className="border-x border-neu-200 pt-8 dark:border-neu-100 2xl:pt-16">
-              <section className="mx-auto min-h-[80vh] flex-col justify-center px-2 sm:px-0 lg:justify-between">
+        <div className="bg-neu-50 dark:bg-neu-0">
+          <div className="gql-conf-container">
+            <div className="gql-conf-section !py-0">
+              <div className="border-x border-neu-200 pt-8 dark:border-neu-100 2xl:pt-16">
                 <SessionHeader
                   event={event}
                   eventTitle={eventTitle}
@@ -90,7 +90,7 @@ export default function SessionPage({ params }: SessionProps) {
                   <Hr className="mt-10 2xl:mt-16" />
                 )}
 
-                <div className="mt-8 flex gap-4 px-2 max-lg:flex-col sm:px-3 lg:mt-16 lg:gap-8 xl:pb-16">
+                <div className="mt-8 flex gap-4 px-2 pb-8 max-lg:flex-col sm:px-3 lg:mt-16 lg:gap-8 xl:pb-16">
                   <h3 className="typography-h2 min-w-[320px]">
                     Session description
                   </h3>
@@ -102,23 +102,28 @@ export default function SessionPage({ params }: SessionProps) {
                 <h3 className="typography-h2 my-8 max-w-[408px] px-2 sm:px-3 lg:my-16">
                   Session speakers
                 </h3>
-                <SessionSpeakers event={event} className="-mx-px" />
+                <SessionSpeakers event={event} className="-mx-px -mb-px" />
+
+                <Hr />
 
-                <div className="py-8 xl:mt-16">
+                <h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
+                  Session resources
+                </h3>
+                <section>
                   {event.files?.map(({ path }) => (
                     <iframe
                       key={path}
                       src={path}
                       className="aspect-video size-full"
                     />
                   ))}
-                </div>
-              </section>
+                </section>
+              </div>
             </div>
           </div>
         </div>
 
-        <div className="bg-neu-0 py-8 xl:py-16">
+        <div className="border-t border-neu-200 bg-neu-0 py-8 dark:border-neu-100 xl:py-16">
           <div className="gql-conf-container">
             <CtaCardSection
               title="Get your ticket"
@@ -230,7 +235,12 @@ function SessionSpeakers({
   className?: string
 }) {
   return (
-    <div className={clsx("grid gap-5 lg:grid-cols-2", className)}>
+    <div
+      className={clsx(
+        "grid max-lg:*:border-y-0 lg:grid-cols-2 lg:gap-5",
+        className,
+      )}
+    >
       {event.speakers?.map(speaker => (
         <SpeakerCard key={speaker.username} speaker={speaker} year="2025" />
       ))}
diff --git a/src/app/conf/2025/schedule/_components/schedule-session-card.tsx b/src/app/conf/2025/schedule/_components/schedule-session-card.tsx
@@ -49,7 +49,7 @@ export function ScheduleSessionCard({
       {eventTitle}
     </div>
   ) : (
-    <div className="group relative size-full bg-neu-0 p-4 font-normal no-underline ring-neu-400 hover:bg-neu-0/90 hover:ring-1 focus-visible:z-[1] dark:ring-neu-100 dark:hover:bg-neu-0/80">
+    <div className="group relative size-full bg-neu-0 p-4 font-normal no-underline ring-neu-400 focus-visible:z-[1] dark:ring-neu-100 dark:hover:bg-neu-0/80 [&:has(>a:hover)]:bg-neu-0/90 [&:has(>a:hover)]:ring-1">
       <Anchor
         id={`session-${session.id}`}
         href={`/conf/${year}/schedule/${session.id}?name=${session.name}`}
@@ -67,13 +67,13 @@ export function ScheduleSessionCard({
           <span className="typography-body-md">{eventTitle}</span>
           <span className="flex flex-col">
             {(speakers?.length || 0) > 0 && (
-              <span className="typography-body-sm z-[2]">
+              <span className="typography-body-sm">
                 {speakers.map((s, i) => (
                   <React.Fragment key={s.username || s.name}>
                     {s.username ? (
                       <Anchor
                         href={`/conf/${year}/speakers/${s.username}`}
-                        className="decoration-neu-500 hover:underline dark:decoration-neu-100"
+                        className="relative z-[2] decoration-neu-600 hover:underline dark:decoration-neu-200"
                       >
                         {s.name}
                       </Anchor>
