fix: unify home download button sizing

This commit is contained in:
TerryM
2026-06-05 18:47:04 +08:00
parent 908f89ac24
commit 2d003c6fef
4 changed files with 10 additions and 10 deletions

View File

@@ -64,15 +64,15 @@ function LatestActions({
isDownloading ? t("downloading") : `Download ${attachment.filename}` isDownloading ? t("downloading") : `Download ${attachment.filename}`
} }
aria-busy={isDownloading} aria-busy={isDownloading}
className="relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] transition hover:bg-[#22232D] disabled:cursor-wait" className="relative z-20 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
> >
{isDownloading ? ( {isDownloading ? (
<LoaderCircle <LoaderCircle
className="h-5 w-5 animate-spin text-[#A8A9AE]" className="h-4 w-4 animate-spin text-[#A8A9AE]"
strokeWidth={2.3} strokeWidth={2.3}
/> />
) : ( ) : (
<DownloadCloudIcon /> <DownloadCloudIcon className="h-5 w-5" />
)} )}
</button> </button>
) : null} ) : null}

View File

@@ -193,7 +193,7 @@ export function RecommendedCard({
type="button" type="button"
className={ className={
useFigmaDesign 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 flex h-9 w-9 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" : "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")} title={isDownloading ? t("downloading") : t("download")}
@@ -208,11 +208,11 @@ export function RecommendedCard({
> >
{isDownloading ? ( {isDownloading ? (
<LoaderCircle <LoaderCircle
className="h-5 w-5 animate-spin" className="h-4 w-4 animate-spin"
strokeWidth={2.2} strokeWidth={2.2}
/> />
) : useFigmaDesign ? ( ) : useFigmaDesign ? (
<DownloadCloudIcon className="h-6 w-6" /> <DownloadCloudIcon className="h-5 w-5" />
) : ( ) : (
<Download className="h-5 w-5" strokeWidth={2.2} /> <Download className="h-5 w-5" strokeWidth={2.2} />
)} )}

View File

@@ -60,7 +60,7 @@ export function BubbleAttachmentDownloadButton({
{isDownloading ? ( {isDownloading ? (
<LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.2} /> <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.2} />
) : ( ) : (
<DownloadCloudIcon className="h-4 w-4" /> <DownloadCloudIcon className="h-5 w-5" />
)} )}
</button> </button>
); );

View File

@@ -167,7 +167,7 @@ function LatestFileCard({ post }: { post: Post }) {
type="button" type="button"
onClick={handleDownload} onClick={handleDownload}
disabled={isDownloading} disabled={isDownloading}
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] transition hover:bg-[#22232D] disabled:cursor-wait" className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] transition hover:bg-[#22232D] disabled:cursor-wait"
aria-label={ aria-label={
isDownloading ? t("downloading") : `Download ${att.filename}` isDownloading ? t("downloading") : `Download ${att.filename}`
} }
@@ -175,11 +175,11 @@ function LatestFileCard({ post }: { post: Post }) {
> >
{isDownloading ? ( {isDownloading ? (
<LoaderCircle <LoaderCircle
className="h-5 w-5 animate-spin text-[#A8A9AE]" className="h-4 w-4 animate-spin text-[#A8A9AE]"
strokeWidth={2.3} strokeWidth={2.3}
/> />
) : ( ) : (
<DownloadCloudIcon /> <DownloadCloudIcon className="h-5 w-5" />
)} )}
</button> </button>
</div> </div>