Feat/add learn more about staking btn (#3821)

* feat: adds learn more btn in the staking banner

* chore: staking-btn minor improvements

Author: nijoe1

packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBannerAndModal.tsx

@@ -6,6 +6,8 @@ import { useIsStakable } from "./hooks/useIsStakable";
 import { useDonationPeriod } from "./hooks/useDonationPeriod";
 import { StakingButton } from "./StakingButton";
 import { StakingCountDownLabel } from "./StakingCountDownLabel";
+import { Button } from "../../../../collections/CollectionDetails";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
 
 const STAKING_APP_URL = process.env.REACT_APP_STAKING_APP;
 
@@ -109,7 +111,26 @@ export const StakingBannerAndModal = ({
     return (
       <div className="mt-2 mb-6">
         <StakingBanner isRoundView={isRoundView}>
-          <StakingButton onClick={handleOpenModal} isRoundView={isRoundView} />
+          <div className="flex items-center gap-2">
+            <StakingButton
+              onClick={handleOpenModal}
+              isRoundView={isRoundView}
+            />
+            {isRoundView && (
+              <Button
+                onClick={() => {
+                  window.open(
+                    "https://dashboard.boost.explorer.gitcoin.co/about-explorer-boost",
+                    "_blank"
+                  );
+                }}
+                className="text-black text-sm font-mono font-medium px-4 py-2 leading-normal rounded-lg inline-flex justify-center items-center gap-2 bg-transparent hover:bg-transparent"
+              >
+                Learn more
+                <ArrowTopRightOnSquareIcon className="w-4 h-4" />
+              </Button>
+            )}
+          </div>
         </StakingBanner>
         <StakingModal
           isOpen={isOpen}

packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingButton.tsx

@@ -14,7 +14,7 @@ export const StakingButton = ({
 }) => {
   return (
     <Button
-      className={`text-white max-h-[40px] font-mono whitespace-nowrap text-[14px]/[24px] ${isClaimPeriod ? "bg-[#5C35CC]" : "bg-[#22635A]"}`}
+      className={`text-white text-sm font-medium px-4 py-2 leading-normal rounded-lg inline-flex justify-center items-center gap-2 font-mono ${isClaimPeriod ? "bg-[#5C35CC]" : "bg-[#22635A]"}`}
       onClick={onClick}
     >
       {isClaimPeriod