feat: Animate shield all banner

apps/namadillo/src/App/AccountOverview/AccountOverview.tsx

@@ -61,7 +61,9 @@ export const AccountOverview = (): JSX.Element => {
 
       {showSidebar &&
         (maspEnabled ?
-          <ShieldAllBanner />
+          <aside>
+            <ShieldAllBanner />
+          </aside>
         : <aside className="bg-black rounded-sm">
             <MainnetRoadmap />
           </aside>)}

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 (
     <div
       className={twMerge(
@@ -11,17 +16,29 @@ export const ShieldAllBanner = (): JSX.Element => {
         "p-3"
       )}
     >
-      <div className="w-[145px] h-[145px] bg-white">img</div>
-      <ActionButton
-        href={TransferRoutes.shieldAll().url}
-        className="max-w-[160px]"
-        size="sm"
-        backgroundColor="black"
-        textColor="yellow"
-        backgroundHoverColor="yellow"
+      <img
+        className="h-[145px] w-full"
+        // hover effect with :target for external loaded svg with <img>
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/:target
+        // https://gist.github.com/LeaVerou/5198257
+        src={`${svgImg}${isAnimating ? "#hover " : ""}`}
+      />
+      <Link
+        to={TransferRoutes.shieldAll().url}
+        onMouseEnter={() => setIsAnimating(true)}
+        onMouseLeave={() => setIsAnimating(false)}
       >
-        Shield All Assets
-      </ActionButton>
+        <ActionButton
+          as="div"
+          className="max-w-[160px]"
+          size="sm"
+          backgroundColor="black"
+          textColor="yellow"
+          backgroundHoverColor="yellow"
+        >
+          Shield All Assets
+        </ActionButton>
+      </Link>
     </div>
   );
 };