From c7d72f9c65955ea81bd8e176198e10570e67240b Mon Sep 17 00:00:00 2001 From: Connor Prussin Date: Thu, 12 Sep 2024 16:28:06 -0700 Subject: [PATCH] feat(staking) implement new landing page designs --- .../src/components/AccountSummary/index.tsx | 8 +- apps/staking/src/components/Button/index.tsx | 4 +- apps/staking/src/components/Footer/index.tsx | 16 +- apps/staking/src/components/Home/index.tsx | 27 +- .../components/NoWalletHome/governance.png | Bin 0 -> 781894 bytes .../src/components/NoWalletHome/index.tsx | 280 ++++++++++++++++++ .../src/components/NoWalletHome/info.svg | 6 + .../src/components/NoWalletHome/ois.png | Bin 0 -> 549933 bytes .../src/components/NoWalletHome/safebox.svg | 34 +++ .../components/NoWalletHome/secure-pyth.svg | 18 ++ .../NoWalletHome/select-publishers.svg | 20 ++ .../components/NoWalletHome/token-warmup.svg | 14 + apps/staking/src/hooks/use-api.tsx | 2 +- apps/staking/tailwind.config.ts | 2 +- 14 files changed, 392 insertions(+), 39 deletions(-) create mode 100644 apps/staking/src/components/NoWalletHome/governance.png create mode 100644 apps/staking/src/components/NoWalletHome/index.tsx create mode 100644 apps/staking/src/components/NoWalletHome/info.svg create mode 100644 apps/staking/src/components/NoWalletHome/ois.png create mode 100644 apps/staking/src/components/NoWalletHome/safebox.svg create mode 100644 apps/staking/src/components/NoWalletHome/secure-pyth.svg create mode 100644 apps/staking/src/components/NoWalletHome/select-publishers.svg create mode 100644 apps/staking/src/components/NoWalletHome/token-warmup.svg diff --git a/apps/staking/src/components/AccountSummary/index.tsx b/apps/staking/src/components/AccountSummary/index.tsx index 737970e1bd..b37391e608 100644 --- a/apps/staking/src/components/AccountSummary/index.tsx +++ b/apps/staking/src/components/AccountSummary/index.tsx @@ -49,13 +49,13 @@ export const AccountSummary = ({ availableRewards, expiringRewards, }: Props) => ( -
+
-
+
Total Balance @@ -121,7 +121,7 @@ export const AccountSummary = ({ />
-
+
( -
+
{name} diff --git a/apps/staking/src/components/Button/index.tsx b/apps/staking/src/components/Button/index.tsx index a687b03ed2..c25c3d92c3 100644 --- a/apps/staking/src/components/Button/index.tsx +++ b/apps/staking/src/components/Button/index.tsx @@ -53,7 +53,7 @@ export const LinkButton = ({ const baseClassName = (props: VariantProps) => clsx( - "border border-pythpurple-600 hover:bg-pythpurple-600/60 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400", + "border border-pythpurple-600 transition duration-100 hover:bg-pythpurple-600/60 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400", variantClassName(props.variant), sizeClassName(props.size), ); @@ -75,7 +75,7 @@ const sizeClassName = (size: VariantProps["size"]) => { return "text-sm px-2 sm:px-3 py-1"; } case "nopad": { - return "px-0 py-0"; + return ""; } case "noshrink": { return "px-8 py-2"; diff --git a/apps/staking/src/components/Footer/index.tsx b/apps/staking/src/components/Footer/index.tsx index 0c173f2c29..784abc6ce2 100644 --- a/apps/staking/src/components/Footer/index.tsx +++ b/apps/staking/src/components/Footer/index.tsx @@ -7,6 +7,7 @@ import LinkedIn from "./linkedin.svg"; import Telegram from "./telegram.svg"; import X from "./x.svg"; import Youtube from "./youtube.svg"; +import Logo from "../Header/logo.svg"; import { Link } from "../Link"; import { MaxWidth } from "../MaxWidth"; @@ -37,21 +38,26 @@ export const Footer = ({ }: Omit, "children">) => (