Merge pull request #13 from junctor/sync/ui-ux-alignment

UI/UX alignment and polish across core views

Author: cak

package-lock.json

@@ -22,6 +22,7 @@
     "react-dom": "^19.1.1",
     "react-markdown": "^10.1.0",
     "react-router": "^7.8.2",
+    "react-virtuoso": "^4.18.6",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.1.12"
   },

package.json

@@ -4,7 +4,6 @@ import {
   XMarkIcon,
   HomeIcon,
   ArrowTopRightOnSquareIcon,
-  CodeBracketSquareIcon,
   BookmarkSquareIcon,
   CalendarDaysIcon,
   UserGroupIcon,
@@ -73,17 +72,10 @@ export function ConferenceHeader({ conference }: { conference: HTConference }) {
       },
       {
         key: "home",
-        label: "HackerTracker",
+        label: "Home",
         to: "/",
         icon: HomeIcon,
       },
-      {
-        key: "github",
-        label: "GitHub",
-        to: "https://github.com/junctor/hackertracker-web",
-        external: true,
-        icon: CodeBracketSquareIcon,
-      },
     ];
 
     if (conference.link) {
@@ -99,76 +91,82 @@ export function ConferenceHeader({ conference }: { conference: HTConference }) {
   }, [scheduleHref, isSchedule, bookmarksHref, isBookmarks, peopleHref, isPeople, conference.link]);
 
   const baseHeader =
-    "sticky top-0 h-14 z-50 border-b border-neutral-800 transition-colors backdrop-blur supports-[backdrop-filter]:backdrop-blur";
-  const bg = scrolled ? "bg-neutral-950/90" : "bg-neutral-950/70";
+    "sticky top-0 z-50 min-h-16 border-b border-white/10 text-white backdrop-blur-md transition-[background-color,border-color,box-shadow] duration-200 supports-[backdrop-filter]:backdrop-blur-md";
+  const bg = scrolled ? "bg-slate-950/92 shadow-[0_12px_32px_rgba(2,6,23,0.3)]" : "bg-slate-950/82";
 
   return (
     <header className={`${baseHeader} ${bg}`}>
-      <div className="flex h-14 w-full items-center justify-between px-4 sm:px-6 lg:px-10">
-        {/* Left: Conference name / brand */}
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-linear-to-r from-transparent via-[#017FA4]/35 to-transparent"
+      />
+
+      <div className="flex min-h-16 w-full items-center justify-between gap-3 px-4 py-2.5 sm:px-6 lg:px-10">
         <div className="min-w-0">
           <Link
             to={scheduleHref}
-            className="block truncate text-lg font-extrabold text-white hover:opacity-90 sm:text-xl"
+            className="ui-focus-ring block truncate rounded-xl px-2 py-1.5 text-lg font-bold tracking-tight text-slate-50 transition-colors hover:bg-white/4 hover:text-white focus-visible:outline-none sm:text-xl"
             aria-label={`${conference.name} — view schedule`}
           >
             {conference.name}
           </Link>
         </div>
 
-        {/* Desktop nav */}
         <nav className="hidden items-center gap-2 sm:flex">
-          {items.map(({ key, label, to, external, icon: Icon, ariaCurrent }) =>
-            external ? (
+          {items.map(({ key, label, to, external, icon: Icon, ariaCurrent }) => {
+            const common =
+              "ui-btn-base ui-focus-ring group min-h-10 gap-2 rounded-xl border-white/10 bg-white/4 px-3 text-sm text-slate-300 shadow-[0_10px_28px_rgba(2,6,23,0.16)] hover:-translate-y-0.5 hover:shadow-[0_16px_34px_rgba(2,6,23,0.24)] focus-visible:-translate-y-0.5 focus-visible:outline-none focus-visible:shadow-[0_16px_34px_rgba(2,6,23,0.24)]";
+            const classes = ariaCurrent
+              ? `${common} border-[#017FA4]/35 bg-[#017FA4]/12 text-white`
+              : `${common} hover:border-[#017FA4]/28 hover:bg-[#017FA4]/8 hover:text-slate-50`;
+            const iconClassName = ariaCurrent
+              ? "text-[#6CCDBB]"
+              : "text-slate-400 transition-colors group-hover:text-[#6CCDBB] group-focus-visible:text-[#6CCDBB]";
+
+            return external ? (
               <a
                 key={key}
                 href={to}
                 target="_blank"
                 rel="noreferrer"
-                className="inline-flex items-center gap-2 rounded-lg border border-neutral-800 bg-neutral-900/60 px-3 py-2 text-sm text-neutral-300 transition-colors hover:bg-neutral-900 hover:text-white"
+                className={classes}
                 aria-label={label}
                 title={label}
               >
-                <Icon className="h-5 w-5" />
+                <Icon className={`h-5 w-5 ${iconClassName}`} />
                 <span className="hidden md:inline">{label}</span>
               </a>
             ) : (
               <Link
                 key={key}
                 to={to}
-                className={[
-                  "inline-flex items-center gap-2 rounded-lg border border-neutral-800 px-3 py-2 text-sm transition-colors",
-                  ariaCurrent
-                    ? "bg-neutral-900 text-white"
-                    : "bg-neutral-900/60 text-neutral-300 hover:bg-neutral-900 hover:text-white",
-                ].join(" ")}
-                aria-label={label}
-                title={label}
+                className={classes}
+                aria-label={key === "home" ? "Hacker Tracker home" : label}
+                title={key === "home" ? "Hacker Tracker home" : label}
                 aria-current={ariaCurrent ? "page" : undefined}
               >
-                <Icon className="h-5 w-5" />
-                <span className="hidden md:inline">{label}</span>
+                <Icon className={`h-5 w-5 ${iconClassName}`} />
+                {key === "home" ? null : <span className="hidden md:inline">{label}</span>}
               </Link>
-            ),
-          )}
+            );
+          })}
         </nav>
 
-        {/* Mobile: Popover menu */}
         <div className="flex items-center gap-2 sm:hidden">
           <Popover className="relative">
             {({ open }) => (
               <>
                 <PopoverButton
                   aria-label={open ? "Close menu" : "Open menu"}
                   className={[
-                    "inline-flex h-9 w-9 items-center justify-center rounded-md border border-neutral-700 bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50",
-                    open ? "ring-1 ring-cyan-400/40" : "",
+                    "ui-icon-btn ui-focus-ring h-10 min-h-10 w-10 min-w-10 rounded-xl border-white/10 bg-white/4 text-slate-300 shadow-[0_10px_24px_rgba(2,6,23,0.16)] focus-visible:outline-none",
+                    open ? "border-[#017FA4]/35 bg-[#017FA4]/12 text-[#6CCDBB]" : "",
                   ].join(" ")}
                 >
                   {open ? (
-                    <XMarkIcon className="h-5 w-5 text-neutral-200" aria-hidden="true" />
+                    <XMarkIcon className="h-5 w-5" aria-hidden="true" />
                   ) : (
-                    <Bars3Icon className="h-5 w-5 text-neutral-200" aria-hidden="true" />
+                    <Bars3Icon className="h-5 w-5" aria-hidden="true" />
                   )}
                 </PopoverButton>
 
@@ -181,7 +179,11 @@ export function ConferenceHeader({ conference }: { conference: HTConference }) {
                   leaveFrom="opacity-100 translate-y-0"
                   leaveTo="opacity-0 -translate-y-1"
                 >
-                  <PopoverPanel className="absolute right-0 mt-2 w-56 origin-top-right rounded-lg border border-neutral-800 bg-neutral-950/95 p-2 shadow-lg backdrop-blur">
+                  <PopoverPanel className="absolute right-0 mt-2 w-60 origin-top-right rounded-[1.25rem] border border-white/12 bg-slate-950/98 p-2 shadow-[0_20px_48px_rgba(0,0,0,0.42)] backdrop-blur-md">
+                    <span
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-x-3 top-0 h-px bg-white/10"
+                    />
                     <div className="space-y-1 text-sm">
                       {items.map(({ key, label, to, external, icon: Icon, ariaCurrent }) =>
                         external ? (
@@ -191,9 +193,9 @@ export function ConferenceHeader({ conference }: { conference: HTConference }) {
                             href={to}
                             target="_blank"
                             rel="noreferrer"
-                            className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-neutral-300 transition-colors hover:bg-neutral-900 hover:text-white"
+                            className="ui-focus-ring group flex w-full items-center gap-2 rounded-xl border border-transparent px-3 py-2.5 text-left text-slate-300 transition-colors hover:border-white/10 hover:bg-[#017FA4]/8 hover:text-white focus-visible:outline-none"
                           >
-                            <Icon className="h-5 w-5" />
+                            <Icon className="h-5 w-5 text-slate-400 transition-colors group-hover:text-[#6CCDBB] group-focus-visible:text-[#6CCDBB]" />
                             {label}
                           </PopoverButton>
                         ) : (
@@ -202,14 +204,20 @@ export function ConferenceHeader({ conference }: { conference: HTConference }) {
                             as={Link}
                             to={to}
                             className={[
-                              "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left transition-colors",
+                              "ui-focus-ring group flex w-full items-center gap-2 rounded-xl border px-3 py-2.5 text-left transition-colors focus-visible:outline-none",
                               ariaCurrent
-                                ? "bg-neutral-900 text-white"
-                                : "text-neutral-300 hover:bg-neutral-900 hover:text-white",
+                                ? "border-[#017FA4]/35 bg-[#017FA4]/12 text-white"
+                                : "border-transparent text-slate-300 hover:border-white/10 hover:bg-[#017FA4]/8 hover:text-white",
                             ].join(" ")}
                             aria-current={ariaCurrent ? "page" : undefined}
                           >
-                            <Icon className="h-5 w-5" />
+                            <Icon
+                              className={`h-5 w-5 ${
+                                ariaCurrent
+                                  ? "text-[#6CCDBB]"
+                                  : "text-slate-400 transition-colors group-hover:text-[#6CCDBB] group-focus-visible:text-[#6CCDBB]"
+                              }`}
+                            />
                             {label}
                           </PopoverButton>
                         ),

src/components/ConferenceHeader.tsx

@@ -9,52 +9,34 @@ export default function ErrorPage({ msg }: { msg?: string }) {
       <HTHeader />
 
       <main id="main" className="flex flex-1 items-center justify-center px-6">
-        <div className="relative text-center">
-          {/* Glitchy title */}
-          <div className="isolation-isolate relative inline-block select-none">
-            <h1 className="relative text-4xl font-extrabold tracking-tight text-red-400 motion-safe:animate-[glitch_2s_steps(12,end)_infinite] md:text-6xl">
-              ERROR
-              <span
-                aria-hidden
-                className="absolute inset-0 text-cyan-300 opacity-95 mix-blend-screen motion-safe:animate-[rgb_2.4s_ease-in-out_infinite]"
-              >
-                ERROR
-              </span>
-              <span
-                aria-hidden
-                className="absolute inset-0 -translate-x-[2px] translate-y-[1px] text-fuchsia-400 opacity-95 mix-blend-screen motion-safe:animate-[rgb_2.4s_ease-in-out_infinite]"
-                style={{ animationDelay: "0.15s" }}
-              >
-                ERROR
-              </span>
-            </h1>
-          </div>
+        <div className="ui-card relative w-full max-w-2xl px-6 py-7 text-center sm:px-8 sm:py-9">
+          <h1 className="text-3xl font-semibold text-balance text-gray-100 sm:text-4xl">
+            We couldn&apos;t load this page
+          </h1>
 
-          {/* Message */}
           {msg ? (
             <pre
               role="alert"
-              className="mx-auto mt-6 max-w-xl overflow-x-auto rounded-lg border border-red-700/70 bg-red-950/30 p-4 text-left font-mono text-xs text-red-200 md:text-sm"
+              className="mx-auto mt-6 max-h-[40dvh] max-w-xl overflow-auto rounded-xl border border-red-400/20 bg-red-950/25 p-4 text-left font-mono text-xs leading-6 whitespace-pre-wrap text-red-100 md:text-sm"
             >
               {msg}
             </pre>
           ) : (
-            <p className="mt-6 text-base text-gray-300">
-              Something went sideways. Try again or head back home.
+            <p role="alert" className="mx-auto mt-3 max-w-xl text-sm leading-6 text-gray-300">
+              Try again in a moment, or head back home.
             </p>
           )}
 
-          {/* Actions */}
           <div className="mt-8 flex flex-wrap justify-center gap-3">
             <Link
               to="/"
-              className="rounded-md border border-gray-600/70 px-4 py-2 text-sm font-semibold text-gray-100 transition-colors hover:border-gray-500 hover:bg-gray-800/70 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+              className="ui-btn-base ui-btn-secondary ui-focus-ring focus-visible:outline-none"
             >
               Return Home
             </Link>
             <Link
               to="/support"
-              className="rounded-md border border-gray-600/70 px-4 py-2 text-sm font-semibold text-gray-100 transition-colors hover:border-gray-500 hover:bg-gray-800/70 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+              className="ui-btn-base ui-btn-secondary ui-focus-ring focus-visible:outline-none"
             >
               Contact Support
             </Link>

src/components/ErrorPage.tsx

@@ -1,43 +1,62 @@
+import { CodeBracketSquareIcon } from "@heroicons/react/16/solid";
+import { Link } from "react-router";
+
 export function HTFooter() {
   return (
-    <footer className="mt-auto border-t border-neutral-800 bg-neutral-950/95 backdrop-blur">
-      {/* glow bar */}
-      <div
-        aria-hidden
-        className="h-px w-full bg-gradient-to-r from-cyan-500/20 via-fuchsia-400/20 to-amber-400/20"
-      />
-      <div className="mx-auto max-w-7xl px-4 py-8">
-        <div className="grid items-start gap-6 text-sm sm:grid-cols-3">
-          <div className="text-neutral-300">
-            <p className="font-semibold">HackerTracker</p>
-            <p className="mt-1 text-neutral-400">
-              Community-built schedules for hackers, by hackers.
+    <footer className="mt-auto border-t border-white/10 bg-[linear-gradient(180deg,rgba(2,6,23,0.92),rgba(2,6,23,0.98))] text-slate-300">
+      <div className="mx-auto w-[min(72rem,calc(100%_-_2rem))] py-5 sm:w-[min(72rem,calc(100%_-_3rem))] sm:py-6">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="min-w-0 space-y-1.5">
+            <p className="text-[11px] font-semibold tracking-[0.16em] text-slate-500 uppercase">
+              Hacker Tracker
+            </p>
+            <p className="max-w-2xl text-sm leading-6 text-slate-400">
+              Community-built schedules, people, and conference information for Hacker Tracker.
             </p>
           </div>
 
-          <nav className="flex flex-wrap gap-x-6 gap-y-2 text-neutral-300">
-            <a href="/conferences" className="underline-offset-4 hover:text-white hover:underline">
+          <nav
+            aria-label="Footer"
+            className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-slate-300"
+          >
+            <Link
+              to="/conferences"
+              className="ui-focus-ring rounded px-1 py-0.5 underline-offset-4 transition-colors hover:text-white hover:underline focus-visible:outline-none"
+            >
               Conferences
-            </a>
-            <a href="/about" className="underline-offset-4 hover:text-white hover:underline">
+            </Link>
+            <Link
+              to="/about"
+              className="ui-focus-ring rounded px-1 py-0.5 underline-offset-4 transition-colors hover:text-white hover:underline focus-visible:outline-none"
+            >
               About
-            </a>
-            <a href="/support" className="underline-offset-4 hover:text-white hover:underline">
+            </Link>
+            <Link
+              to="/support"
+              className="ui-focus-ring rounded px-1 py-0.5 underline-offset-4 transition-colors hover:text-white hover:underline focus-visible:outline-none"
+            >
               Support
-            </a>
+            </Link>
             <a
               href="https://github.com/junctor/hackertracker-web"
               target="_blank"
               rel="noopener noreferrer"
-              className="underline-offset-4 hover:text-white hover:underline"
+              className="ui-focus-ring rounded px-1 py-0.5 underline-offset-4 transition-colors hover:text-white hover:underline focus-visible:outline-none"
             >
               GitHub
             </a>
           </nav>
 
-          <div className="text-neutral-400 sm:text-right">
-            Built with <span className="text-red-500">❤</span> by the HackerTracker team
-          </div>
+          <a
+            href="https://github.com/junctor/hackertracker-web"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="View source on GitHub"
+            className="ui-btn-base ui-btn-secondary ui-focus-ring w-fit gap-2 rounded-xl px-3.5 text-sm text-slate-200 shadow-[0_10px_24px_rgba(2,6,23,0.18)] focus-visible:outline-none"
+          >
+            <CodeBracketSquareIcon className="h-4 w-4 text-[#6CCDBB]" aria-hidden="true" />
+            <span>View Source</span>
+          </a>
         </div>
       </div>
     </footer>