JDX-291

packages/web/src/components/WarningBar/WarningBar.component.tsx

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
+
+function WarningBar(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={`flex items-center rounded-sm bg-[#03A9F4]/10 py-2.5 px-4 gap-2.5 border-[#03A9F4]/50 border-[1px] w-full ${props.className}`}
+    >
+      <ExclamationCircleIcon className="h-6 w-6 stroke-[#03A9F4]" />
+      <p className="text-3.5 font-medium leading-3.5 tracking-normal">
+        {props.children}
+      </p>
+    </div>
+  );
+}
+
+export default WarningBar;

packages/web/src/components/WarningBar/index.tsx

@@ -0,0 +1,3 @@
+import WarningBar from "./WarningBar.component";
+
+export default WarningBar;

packages/web/src/components/shared/top-card.tsx

@@ -12,7 +12,7 @@ type Props = {
   renderAsset?: JSX.Element;
   content?: JSX.Element;
   jumpLogo?: boolean;
-  py?: boolean;
+  transparent?: boolean;
   children?: ReactNode;
   onClick?: () => void;
   stepItems?: TutorialItemInterface[];
@@ -27,35 +27,60 @@ export const TopCard = ({
   maxW = "",
   children,
   stepItems,
+  transparent,
 }: Props) => {
   return (
     <div className={twMerge("launchpad top-card flex", maxW)}>
       <div
-        className="overflow-hidden
+        className={`overflow-hidden
                       flex
                       flex-wrap
                       align-middle
                       justify-between
                       w-full
                       color-white
                       font-extrabold
-                      py-7
-                      px-6
-                      pb-16
+                      ${
+                        transparent
+                          ? "pt-8 pb-3.5"
+                          : "bg-white-600 px-6 py-7 pb-16"
+                      }
                       h-full
                       rounded-lg
-                      bg-white-600
                       gap-1.5
-                      relative"
+                      relative`}
       >
-        {!isEmpty(stepItems) && <Tutorial items={stepItems || []} />}
+        {!isEmpty(stepItems) && (
+          <Tutorial
+            items={stepItems || []}
+            className={transparent ? "top-2.5 right-0" : undefined}
+          />
+        )}
 
-        <div className="flex flex-col relative flex-grow z-20 gap-y-4">
-          <p className="text-base tracking leading-4 mb-0.5">{gradientText}</p>
-          <h1 className="text-2xl tracking-tighter font-bolder leading-6">
+        <div
+          className={`flex flex-col relative flex-grow z-20 ${
+            transparent ? "gap-y-4" : "gap-y-4"
+          }`}
+        >
+          <p
+            className={`text-base leading-4 mb-0.5 ${
+              transparent ? "tracking-normal" : "tracking"
+            }`}
+          >
+            {gradientText}
+          </p>
+          <h1
+            className={`text-2xl font-bolder leading-6 ${
+              transparent ? "mt-2 tracking-normal" : "tracking-tighter"
+            }`}
+          >
             {bigText}
           </h1>
-          <p className="font-semibold text-3.5 max-w-3xl tracking leading-4.5">
+          <p
+            className={`font-semibold text-3.5 max-w-3xl leading-4.5 ${
+              transparent ? "mt-[-.2rem] tracking-normal" : "tracking"
+            }`}
+          >
             {bottomDescription}
           </p>
           {children}

packages/web/src/components/shared/tutorial.tsx

@@ -11,15 +11,17 @@ export interface TutorialItemInterface {
 export const Tutorial = ({
   items,
   options,
+  className,
 }: {
   items: TutorialItemInterface[];
   options?: any;
+  className?: string;
 }) => {
   const [show, setShow] = useState(false);
 
   return (
     <>
-      <div className="absolute right-4 top-4 z-20">
+      <div className={`absolute right-4 top-4 z-20 ${className}`}>
         <IconButton onClick={() => setShow(!show)} />
       </div>
 

packages/web/src/pages/nft-staking/index.tsx

@@ -174,7 +174,6 @@ export const NFTStaking = () => {
         bottomDescription={`
           Welcome to Jump NFT Staking; the portal between NFT technology and decentralized finance on NEAR Protocol!
         `}
-        py
         jumpLogo
         stepItems={stepItems}
       />