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

fix: unify homepage card background with the browse page

Browse Source 
Match the official-recommendation and popular cards to the message bubble
surface color (#272632) used on the browse/all page and the latest section,
so homepage content cards and the browse page share one background. Also
align the popular card border with the official card (#27292E).

Categories tiles are intentionally left unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-31 02:48:18 +08:00
parent 00913a26a7
commit cf6bd7339e
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/PopularRankList.tsx
View File

@@ -116,7 +116,7 @@ function PopularRankRow({
}; };
return ( return (
<article className="relative flex items-center gap-3 rounded-2xl border border-ark-line bg-ark-panel p-3 transition hover:border-ark-gold/45 md:gap-4 md:p-4"> <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">
<button <button
type="button" type="button"
onClick={() => onClick={() =>
@@ -192,7 +192,7 @@ function ComingSoonRankRow({ index }: { index: number }) {
const label = lang === "zh-CN" ? "即将到来" : "Coming soon"; const label = lang === "zh-CN" ? "即将到来" : "Coming soon";
return ( return (
<article <article
className="flex items-center gap-3 rounded-2xl border border-ark-line bg-ark-panel p-3 opacity-70 md:gap-4 md:p-4" className="flex items-center gap-3 rounded-2xl border border-[#27292E] bg-[#272632] p-3 opacity-70 md:gap-4 md:p-4"
aria-hidden="true" aria-hidden="true"
> >
<RankBadge index={index} /> <RankBadge index={index} />

2
src/components/RecommendedCard.tsx
View File

@@ -19,7 +19,7 @@ function isPlaceholderAsset(path: string | undefined | null) {
} }
const CARD_BASE_CLASS = const CARD_BASE_CLASS =
"group flex shrink-0 flex-col overflow-hidden rounded-xl border bg-[#1D1E23] transition hover:border-ark-gold/55 hover:shadow-lg hover:shadow-black/30"; "group flex shrink-0 flex-col overflow-hidden rounded-xl border bg-[#272632] transition hover:border-ark-gold/55 hover:shadow-lg hover:shadow-black/30";
const CARD_HOVER_SPRING = { const CARD_HOVER_SPRING = {
type: "spring", type: "spring",