wip

apps/website/components/leagues/LeagueHeader.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link';
 import Image from 'next/image';
 import MembershipStatus from '@/components/leagues/MembershipStatus';
 import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
-import { getLeagueCoverClasses } from '@/lib/leagueCovers';
 import {
   getDriverRepository,
   getDriverStats,
@@ -32,7 +31,6 @@ export default function LeagueHeader({
   ownerName,
 }: LeagueHeaderProps) {
   const imageService = getImageService();
-  const coverUrl = imageService.getLeagueCover(leagueId);
   const logoUrl = imageService.getLeagueLogo(leagueId);
 
   const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
@@ -100,35 +98,27 @@ export default function LeagueHeader({
 
   return (
     <div className="mb-8">
-      <div className="mb-4">
-        <div className={getLeagueCoverClasses(leagueId)} aria-hidden="true">
-          <div className="relative w-full h-full">
+      {/* League header with logo - no cover image */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <div className="h-16 w-16 rounded-xl overflow-hidden border-2 border-charcoal-outline bg-iron-gray shadow-lg">
             <Image
-              src={coverUrl}
-              alt="League cover placeholder"
-              fill
-              className="object-cover opacity-80"
-              sizes="100vw"
+              src={logoUrl}
+              alt={`${leagueName} logo`}
+              width={64}
+              height={64}
+              className="w-full h-full object-cover"
             />
-            <div className="absolute left-6 bottom-4 flex items-center">
-              <div className="h-16 w-16 rounded-full overflow-hidden border-2 border-charcoal-outline bg-deep-graphite/95 shadow-[0_0_18px_rgba(0,0,0,0.7)]">
-                <Image
-                  src={logoUrl}
-                  alt={`${leagueName} logo`}
-                  width={64}
-                  height={64}
-                  className="w-full h-full object-cover"
-                />
-              </div>
-            </div>
           </div>
-        </div>
-      </div>
-
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <h1 className="text-3xl font-bold text-white">{leagueName}</h1>
-          <MembershipStatus leagueId={leagueId} />
+          <div>
+            <div className="flex items-center gap-3 mb-1">
+              <h1 className="text-2xl font-bold text-white">{leagueName}</h1>
+              <MembershipStatus leagueId={leagueId} />
+            </div>
+            {description && (
+              <p className="text-gray-400 text-sm max-w-xl">{description}</p>
+            )}
+          </div>
         </div>
         <FeatureLimitationTooltip message="Multi-league memberships coming in production">
           <span className="px-2 py-1 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
@@ -137,30 +127,22 @@ export default function LeagueHeader({
         </FeatureLimitationTooltip>
       </div>
 
-      {description && (
-        <p className="text-gray-400 mb-2">{description}</p>
-      )}
-
-      <div className="mb-6 flex flex-col gap-2">
-        <span className="text-sm text-gray-400">Owner</span>
+      <div className="flex items-center gap-3">
+        <span className="text-sm text-gray-400">Owner:</span>
         {ownerSummary ? (
-          <div className="inline-flex items-center gap-3">
-            <DriverSummaryPill
-              driver={ownerSummary.driver}
-              rating={ownerSummary.rating}
-              rank={ownerSummary.rank}
-              href={`/drivers/${ownerSummary.driver.id}?from=league&leagueId=${leagueId}`}
-            />
-          </div>
+          <DriverSummaryPill
+            driver={ownerSummary.driver}
+            rating={ownerSummary.rating}
+            rank={ownerSummary.rank}
+            href={`/drivers/${ownerSummary.driver.id}?from=league&leagueId=${leagueId}`}
+          />
         ) : (
-          <div className="text-sm text-gray-500">
-            <Link
-              href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
-              className="text-primary-blue hover:underline"
-            >
-              {ownerName}
-            </Link>
-          </div>
+          <Link
+            href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
+            className="text-sm text-primary-blue hover:underline"
+          >
+            {ownerName}
+          </Link>
         )}
       </div>
     </div>