diff --git a/package.json b/package.json index 5b1b211a2..fb6997bbc 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "react-countdown": "^2.3.2", "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", + "react-fast-marquee": "^1.6.5", "react-ga4": "^2.1.0", "react-mailchimp-subscribe": "^2.1.3", "react-markdown": "^8.0.3", diff --git a/src/components/Header/announcement.tsx b/src/components/Header/announcement.tsx index 5649b5459..f8deaa906 100644 --- a/src/components/Header/announcement.tsx +++ b/src/components/Header/announcement.tsx @@ -1,36 +1,24 @@ import { usePathname } from "next/navigation" import { useMemo } from "react" +import Marquee from "react-fast-marquee" -import { Stack } from "@mui/material" -import { styled } from "@mui/system" +import { Box } from "@mui/material" import { isMainnet } from "@/utils" -const AnnouncementStack = styled(Stack, { shouldForwardProp: prop => prop !== "production" })(({ theme, production }) => ({ - lineHeight: "2.6rem", - background: production ? "rgb(181, 245, 236)" : theme.palette.primary.main, - textAlign: "center", - color: production ? theme.palette.text.primary : theme.palette.primary.contrastText, - fontSize: "1.6rem", - padding: "1.2rem", - display: "inline-block", - width: "100%", - [theme.breakpoints.down("sm")]: { - lineHeight: "2rem", - }, -})) - const Announcement = () => { - const displayAnnouncement = false + const displayAnnouncement = true const pathname = usePathname() - const isHome = pathname === "/" const announcementContent = useMemo(() => { if (isMainnet && isHome) { return ( <> - 🔥 Applications for the Level Up Grants Program are open until August 25. Apply now! + Join Scroll Open: Build the Future of the Open Economy{" "} +
+ Jan 27 - March 17 +
) } @@ -39,14 +27,32 @@ const Announcement = () => { const rightHref = useMemo(() => { if (isMainnet && isHome) { - return "https://tally.so/r/mYdQP5" + return "https://open.scroll.io" } return "" }, [isMainnet, isHome]) return displayAnnouncement && announcementContent ? ( - - {announcementContent} + + (isMainnet ? theme.palette.common.white : theme.palette.primary.main), + color: theme => (isMainnet ? theme.palette.text.primary : theme.palette.primary.contrastText), + fontSize: "1.6rem", + lineHeight: { + xs: "2rem", + sm: "2.6rem", + }, + padding: "1.6rem", + width: "100%", + borderBottom: "1px solid #101010", + fontWeight: "500", + }} + > + + {announcementContent} + + ) : null } diff --git a/yarn.lock b/yarn.lock index 14b1dd53a..e3c757b09 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3039,17 +3039,17 @@ "@swc/counter" "^0.1.3" tslib "^2.4.0" -"@tanstack/query-core@5.55.3": - version "5.55.3" - resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.55.3.tgz#fee3c2ffd65cd6cf195820eccab662508ff84ad1" - integrity sha512-JpRWbOiTBaddMg/oYNBeBle3m0wFTZnfLc2dtZgjdr3NZaqSGzIkPDFf6gjTWKq5zxWJTZNtsKSihVKQ7wL3VQ== +"@tanstack/query-core@5.62.16": + version "5.62.16" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.62.16.tgz#f7efc92b1562a054748bc00c7f8d9d833407503b" + integrity sha512-9Sgft7Qavcd+sN0V25xVyo0nfmcZXBuODy3FVG7BMWTg1HMLm8wwG5tNlLlmSic1u7l1v786oavn+STiFaPH2g== -"@tanstack/react-query@5.55.3": - version "5.55.3" - resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.55.3.tgz#8acaba9fd3cdf250bd3c6ee8d4ae00c951da3642" - integrity sha512-DzVFYNKMZPaEj+RNmG1lUjmR3CVFf1GoPvE03/0IN+5C8/VYiIMUhi4YgLQPnksrUarIzPPw1N2MPRvuRysLwQ== +"@tanstack/react-query@^5.55.3": + version "5.63.0" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.63.0.tgz#18e00e24a485f707cfd41f4b30679f70e6ca6016" + integrity sha512-QWizLzSiog8xqIRYmuJRok9VELlXVBAwtINgVCgW1SNvamQwWDO5R0XFSkjoBEj53x9Of1KAthLRBUC5xmtVLQ== dependencies: - "@tanstack/query-core" "5.55.3" + "@tanstack/query-core" "5.62.16" "@trivago/prettier-plugin-sort-imports@^4.0.0": version "4.3.0" @@ -8694,6 +8694,11 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-fast-marquee@^1.6.5: + version "1.6.5" + resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz#98929ae93eef087a607a71e9d45ab76bba97dc16" + integrity sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg== + react-ga4@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"