terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(home): align popular rank row and recommended card with figma

Browse Source 
- 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
This commit is contained in:
TerryM
2026-06-03 08:08:28 +08:00
parent 49380dc5ed
commit a2f6c4fc35
2 changed files with 60 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/RecommendedCard.tsx
View File

@@ -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>