feat(home): align desktop cards with Figma actions
- Update desktop header actions to match Figma: remove the standalone desktop favorites button and style the wallet connect pill with the wallet icon while allowing localized labels to expand. - Replace favorite action with the Figma bookmark SVG and hover state; replace download cloud with the provided Figma SVG. - Align official recommendation cards with the Figma card structure, colors, and bottom action row. - Rework popular rows to the Figma desktop rhythm with 90px rows, wide thumbnails, rank area, and right-side action buttons. - Add a dedicated desktop LatestUpdateCard for Figma-style latest-update masonry cards with flexible text-driven heights instead of fixed card heights.
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Heart } from "lucide-react";
|
||||
import { Heart, Wallet } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useI18n } from "../i18n";
|
||||
@@ -107,11 +107,14 @@ export function WalletButton({
|
||||
wallet.openLoginModal();
|
||||
}}
|
||||
className={[
|
||||
"inline-flex h-10 items-center justify-center rounded-full border border-ark-gold/50 bg-ark-gold px-4 text-sm font-bold text-black outline-none transition hover:bg-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
|
||||
compact ? "w-full" : "",
|
||||
"inline-flex h-10 items-center justify-center gap-2 rounded-full border border-ark-gold bg-ark-gold px-4 text-sm font-bold text-black outline-none transition hover:bg-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
|
||||
compact ? "w-full" : "min-w-[124px] shrink-0 whitespace-nowrap",
|
||||
].join(" ")}
|
||||
>
|
||||
{wallet.status === "loading" ? t("loading") : t("walletConnect")}
|
||||
<Wallet className="h-4 w-4" strokeWidth={2.5} aria-hidden />
|
||||
<span>
|
||||
{wallet.status === "loading" ? t("loading") : t("walletConnect")}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user