Merge pull request NomicFoundation#6495 from NomicFoundation/hh3-alpha-banner

alcuadrado · web-flow · commit dfcba6f79ef9 · 2025-03-24T11:56:22.000-03:00
Polish alpha 3 banner copy
diff --git a/docs/src/components/ui/AlphaBanner.tsx b/docs/src/components/ui/AlphaBanner.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import Link from "next/link";
 import { styled } from "linaria/react";
-import { media } from "../../themes";
+import { breakpoints, media } from "../../themes";
+import useWindowSize from "../../hooks/useWindowSize";
 
 // We don't use the theme here as this is a quickfix, and it doesn't change
 // depending on dark/light mode.
 const alphaBannerBackground = "#4F00A3" as const;
 const alphaBannerText = "#F2F2F2" as const;
-const alphaBannerCTA = "#C4C4C4" as const;
 const alphaBannerBraket = "#EDCF00" as const;
 
 const AlphaBannerContainer = styled.section`
@@ -19,7 +19,6 @@ const AlphaBannerContainer = styled.section`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  padding-bottom: 15px;
 
   align-items: center;
   background-color: ${alphaBannerBackground};
@@ -33,10 +32,7 @@ const AlphaBannerContainer = styled.section`
   vertical-align: middle;
   text-align: center;
 
-  font-size: 14px;
-  a.CTA {
-    font-size: 13px;
-  }
+  font-size: 15px;
 
   span {
     height: 27px;
@@ -55,43 +51,33 @@ const AlphaBannerContainer = styled.section`
     line-height: 27px;
   }
 
-  a.CTA {
-    color: ${alphaBannerCTA};
-    position: absolute;
-    width: 100%;
-    left: 0;
-    bottom: -15px;
-  }
-
   ${media.smd} {
     font-size: 18px;
     padding-bottom: unset;
 
-    a.CTA {
-      position: relative;
-      font-size: 18px;
-      width: unset;
-      left: unset;
-      bottom: unset;
-      padding-left: 8px;
-    }
-
     span.bannerContent {
       padding-top: 3px;
     }
   }
 `;
 
 const AlphaBanner = () => {
+  const windowSize = useWindowSize();
+  const isDesktop = breakpoints.smd <= windowSize.width;
+
   return (
     <Link href="/hardhat3-alpha" passHref>
       <AlphaBannerContainer>
         <span className="braket">[</span>
         <span className="bannerContent">
-          <b>Hardhat 3 alpha</b> has been released.
-          {/* We don't pass href because the Link already does it */}
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a className="CTA">Check it out</a>
+          {isDesktop ? (
+            <>
+              <b>Hardhat 3 alpha</b>: Rust rewrite, Solidity tests, multi-chain,
+              and more
+            </>
+          ) : (
+            <>Try the Hardhat 3 alpha release</>
+          )}
         </span>
 
         <span className="braket">]</span>
