diff --git a/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx b/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx index a81fc0d57..07f7f22b8 100644 --- a/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx +++ b/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx @@ -61,7 +61,9 @@ export const AccountOverview = (): JSX.Element => { {showSidebar && (maspEnabled ? - + : )} diff --git a/apps/namadillo/src/App/Assets/ShieldedParty.svg b/apps/namadillo/src/App/Assets/ShieldedParty.svg new file mode 100644 index 000000000..cec1470c6 --- /dev/null +++ b/apps/namadillo/src/App/Assets/ShieldedParty.svg @@ -0,0 +1,290 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx b/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx index c26d0e96b..3d228cbd8 100644 --- a/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx +++ b/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx @@ -1,8 +1,13 @@ import { ActionButton } from "@namada/components"; +import svgImg from "App/Assets/ShieldedParty.svg"; import TransferRoutes from "App/Transfer/routes"; +import { useState } from "react"; +import { Link } from "react-router-dom"; import { twMerge } from "tailwind-merge"; export const ShieldAllBanner = (): JSX.Element => { + const [isAnimating, setIsAnimating] = useState(false); + return (
{ "p-3" )} > -
img
- + // https://developer.mozilla.org/en-US/docs/Web/CSS/:target + // https://gist.github.com/LeaVerou/5198257 + src={`${svgImg}${isAnimating ? "#hover " : ""}`} + /> + setIsAnimating(true)} + onMouseLeave={() => setIsAnimating(false)} > - Shield All Assets - + + Shield All Assets + +
); };