From a2f6c4fc35e06a564c8d5c2917a87612a29108e1 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Wed, 3 Jun 2026 08:08:28 +0800
Subject: [PATCH] style(home): align popular rank row and recommended card with
 figma

- PopularRankList: switch row to 90px Figma layout (246x90 cover, gap 24/12, pill px-3 py-1, meta color #9FA0A8, object-cover image)
- RecommendedCard: unify card and cover background to #272632
---
 src/components/PopularRankList.tsx | 22 ++++----
 src/components/RecommendedCard.tsx | 88 +++++++++++++++++-------------
 2 files changed, 60 insertions(+), 50 deletions(-)

diff --git a/src/components/PopularRankList.tsx b/src/components/PopularRankList.tsx
index b71ce1a..1867eaf 100644
--- a/src/components/PopularRankList.tsx
+++ b/src/components/PopularRankList.tsx
@@ -66,7 +66,7 @@ function RankBadge({ index }: { index: number }) {
   if (index < MEDALS.length) {
     return (
       <span
-        className="flex w-7 shrink-0 justify-center text-[22px] leading-none"
+        className="flex w-7 shrink-0 justify-center text-[22px] leading-none md:w-[76px] md:text-[28px]"
         aria-label={`No.${index + 1}`}
       >
         {MEDALS[index]}
@@ -75,7 +75,7 @@ function RankBadge({ index }: { index: number }) {
   }
   return (
     <span
-      className="flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87]"
+      className="flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87] md:w-[76px]"
       aria-label={`No.${index + 1}`}
     >
       {index + 1}
@@ -123,7 +123,7 @@ function PopularRankRow({
   };
 
   return (
-    <article className="relative flex items-center gap-3 rounded-2xl border border-[#27292E] bg-[#272632] p-3 transition hover:border-ark-gold/55 md:gap-4 md:p-4">
+    <article className="relative flex items-center gap-3 overflow-hidden rounded-2xl border border-[#27292E] bg-[#272632] p-3 transition hover:border-ark-gold/55 md:h-[90px] md:gap-0 md:p-0">
       <button
         type="button"
         onClick={() =>
@@ -138,8 +138,8 @@ function PopularRankRow({
       <RankBadge index={index} />
 
       <div
-        className={`relative z-10 flex h-[52px] w-[64px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-[58px] md:w-[72px] ${
-          isTop3 ? "ring-1 ring-ark-gold/45" : ""
+        className={`relative z-10 flex h-[52px] w-[64px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-[90px] md:w-[246px] md:rounded-none ${
+          isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : ""
         }`}
       >
         {cover ? (
@@ -148,7 +148,7 @@ function PopularRankRow({
             alt=""
             loading="lazy"
             decoding="async"
-            className="h-full w-full object-fill"
+            className="h-full w-full object-cover"
             onError={() => setCoverFailed(true)}
           />
         ) : (
@@ -156,12 +156,12 @@ function PopularRankRow({
         )}
       </div>
 
-      <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 flex-col gap-1">
-        <div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base">
+      <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 flex-col gap-1 md:gap-3 md:pl-6 md:pr-4">
+        <div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base md:font-semibold md:leading-[23px]">
           {r.title}
         </div>
-        <div className="flex items-center gap-2 text-xs text-[#9b9ca6]">
-          <span className="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3]">
+        <div className="flex items-center gap-2 text-xs text-[#9b9ca6] md:gap-3 md:text-[#9FA0A8]">
+          <span className="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1">
             {resourceTypeLabel(t, r.type)}
           </span>
           <span className="truncate">
@@ -174,7 +174,7 @@ function PopularRankRow({
         </div>
       </div>
 
-      <div className="relative z-10 flex shrink-0 items-center gap-1">
+      <div className="relative z-10 flex shrink-0 items-center gap-2 pr-4 md:pr-6">
         <FavoriteButton resourceId={r.id} />
         {r.isDownloadable ? (
           <button
diff --git a/src/components/RecommendedCard.tsx b/src/components/RecommendedCard.tsx
index ead247e..1f6d082 100644
--- a/src/components/RecommendedCard.tsx
+++ b/src/components/RecommendedCard.tsx
@@ -107,7 +107,7 @@ export function RecommendedCard({
         layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS
       } ${
         useFigmaDesign
-          ? "border-[#27292E]"
+          ? "border-[#27292E] bg-[#272632]"
           : "border-transparent md:border-ark-line md:bg-ark-panel"
       }`}
     >
@@ -116,7 +116,13 @@ export function RecommendedCard({
         aria-label={displayTitle}
         className="absolute inset-0 z-10 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
       />
-      <div className="relative block aspect-[208/108] overflow-hidden bg-[#111116]">
+      <div
+        className={
+          useFigmaDesign
+            ? "relative block h-[131px] overflow-hidden bg-[#272632]"
+            : "relative block aspect-[208/108] overflow-hidden bg-[#111116]"
+        }
+      >
         {cover ? (
           <img
             src={cover}
@@ -134,21 +140,22 @@ export function RecommendedCard({
             {r.badgeLabel}
           </span>
         ) : null}
-        <FavoriteButton
-          resourceId={r.id}
-          size="sm"
-          className="absolute right-3 top-3 z-20 shadow-lg shadow-black/30"
-        />
       </div>
       <div
         className={
           useFigmaDesign
-            ? "flex h-[131px] flex-col px-4 py-3"
+            ? "flex h-[143px] flex-col px-4 py-4"
             : "flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]"
         }
       >
         <div className="flex flex-col gap-1.5">
-          <h3 className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 transition-colors group-hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug">
+          <h3
+            className={
+              useFigmaDesign
+                ? "text-base font-semibold leading-[23px] text-white line-clamp-2 transition-colors group-hover:text-ark-gold2"
+                : "text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 transition-colors group-hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug"
+            }
+          >
             {displayTitle}
           </h3>
           {useFigmaDesign ? (
@@ -179,36 +186,39 @@ export function RecommendedCard({
             )}
             <time dateTime={dateTime}>{dateStr}</time>
           </div>
-          {dl ? (
-            <button
-              type="button"
-              className={
-                useFigmaDesign
-                  ? "relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
-                  : "relative z-20 shrink-0 rounded-lg p-1 text-white outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
-              }
-              title={isDownloading ? t("downloading") : t("download")}
-              aria-label={isDownloading ? t("downloading") : t("download")}
-              aria-busy={isDownloading}
-              disabled={isDownloading}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                void handleDownload();
-              }}
-            >
-              {isDownloading ? (
-                <LoaderCircle
-                  className="h-5 w-5 animate-spin"
-                  strokeWidth={2.2}
-                />
-              ) : useFigmaDesign ? (
-                <DownloadCloudIcon className="h-6 w-6" />
-              ) : (
-                <Download className="h-5 w-5" strokeWidth={2.2} />
-              )}
-            </button>
-          ) : null}
+          <div className="relative z-20 flex shrink-0 items-center gap-2">
+            <FavoriteButton resourceId={r.id} size="sm" />
+            {dl ? (
+              <button
+                type="button"
+                className={
+                  useFigmaDesign
+                    ? "relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
+                    : "relative z-20 shrink-0 rounded-lg p-1 text-white outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
+                }
+                title={isDownloading ? t("downloading") : t("download")}
+                aria-label={isDownloading ? t("downloading") : t("download")}
+                aria-busy={isDownloading}
+                disabled={isDownloading}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  void handleDownload();
+                }}
+              >
+                {isDownloading ? (
+                  <LoaderCircle
+                    className="h-5 w-5 animate-spin"
+                    strokeWidth={2.2}
+                  />
+                ) : useFigmaDesign ? (
+                  <DownloadCloudIcon className="h-6 w-6" />
+                ) : (
+                  <Download className="h-5 w-5" strokeWidth={2.2} />
+                )}
+              </button>
+            ) : null}
+          </div>
         </div>
       </div>
     </m.article>