feat: use panel

anoma · Oct 7, 2024 · e7b746a · e7b746a
1 parent f6c1163
commit e7b746a
Showing 1 changed file with 50 additions and 48 deletions.
diff --git a/apps/namadillo/src/App/Sidebars/MainnetRoadmap.tsx b/apps/namadillo/src/App/Sidebars/MainnetRoadmap.tsx
@@ -1,4 +1,4 @@
-import { ActionButton, Image } from "@namada/components";
+import { ActionButton, Image, Panel } from "@namada/components";
 import { applicationFeaturesAtom } from "atoms/settings";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
@@ -33,53 +33,55 @@ const MainnetRoadmap = (): JSX.Element => {
   };
 
   return (
-    <div className="bg-black rounded-sm flex flex-col items-center w-[240px] py-10 px-6 mx-auto">
-      <Image styleOverrides={{ width: "50px" }} imageName="LogoMinimal" />
-      <h2 className="text-yellow text-center uppercase text-xl leading-6 font-medium mt-2.5">
-        Namada Mainnet Roadmap
-      </h2>
-      <ul>
-        {renderPhase(
-          "1",
-          <>
-            Proof of Stake
-            <br />
-            Governance
-          </>,
-          "opacity-100",
-          true
-        )}
-        {renderPhase(
-          "2",
-          <>Staking Rewards</>,
-          claimRewardsEnabled ? "opacity-100" : "opacity-25",
-          claimRewardsEnabled
-        )}
-        {renderPhase("2", <></>, "opacity-25")}
-        {renderPhase(
-          "3",
-          <>
-            IBC Transfers
-            <br />
-            MASP Enabled
-          </>,
-          "opacity-25"
-        )}
-        {renderPhase("4", "Shielding Rewards", "opacity-25")}
-        {renderPhase("5", "NAM Transfers enabled", "opacity-25")}
-      </ul>
-      <ActionButton
-        className="max-w-40 mt-6"
-        href="https://namada.net/mainnet-launch"
-        target="_blank"
-        backgroundColor="transparent"
-        backgroundHoverColor="yellow"
-        outlineColor="yellow"
-        size="sm"
-      >
-        Learn about Mainnet phases
-      </ActionButton>
-    </div>
+    <Panel>
+      <div className="flex flex-col items-center max-w-[240px] py-5 mx-auto">
+        <Image styleOverrides={{ width: "50px" }} imageName="LogoMinimal" />
+        <h2 className="text-yellow text-center uppercase text-xl leading-6 font-medium mt-2.5">
+          Namada Mainnet Roadmap
+        </h2>
+        <ul>
+          {renderPhase(
+            "1",
+            <>
+              Proof of Stake
+              <br />
+              Governance
+            </>,
+            "opacity-100",
+            true
+          )}
+          {renderPhase(
+            "2",
+            <>Staking Rewards</>,
+            claimRewardsEnabled ? "opacity-100" : "opacity-25",
+            claimRewardsEnabled
+          )}
+          {renderPhase("2", <></>, "opacity-25")}
+          {renderPhase(
+            "3",
+            <>
+              IBC Transfers
+              <br />
+              MASP Enabled
+            </>,
+            "opacity-25"
+          )}
+          {renderPhase("4", "Shielding Rewards", "opacity-25")}
+          {renderPhase("5", "NAM Transfers enabled", "opacity-25")}
+        </ul>
+        <ActionButton
+          className="max-w-40 mt-6"
+          href="https://namada.net/mainnet-launch"
+          target="_blank"
+          backgroundColor="transparent"
+          backgroundHoverColor="yellow"
+          outlineColor="yellow"
+          size="sm"
+        >
+          Learn about Mainnet phases
+        </ActionButton>
+      </div>
+    </Panel>
   );
 };