Merge branch 'staging' into dev

Author: corwintines

src/components/Banners/DismissableBanner.tsx

@@ -4,7 +4,6 @@ import { Center, CloseButton } from "@chakra-ui/react"
 
 // Components
 import BannerNotification from "../BannerNotification"
-import Emoji from "../Emoji"
 
 // Interface
 export interface IProps {
@@ -27,10 +26,7 @@ const DismissableBanner: React.FC<IProps> = ({ children, storageKey }) => {
 
   return (
     <BannerNotification shouldShow={show}>
-      <Center paddingEnd={8}>
-        <Emoji marginEnd={4} flexShrink={0} text=":tada:" />
-        {children}
-      </Center>
+      <Center paddingEnd={8}>{children}</Center>
       <CloseButton onClick={onClose} aria-label="Close Banner" />
     </BannerNotification>
   )

src/components/Banners/TranslatathonBanner.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { Text } from "@chakra-ui/react"
+
+import DismissableBanner from "./DismissableBanner"
+import Link from "../Link"
+
+export const TranslatathonBanner = () => {
+  return (
+    <DismissableBanner storageKey="translatathon">
+      <Text m={0}>
+        ✨ Join the first Ethereum.org Translatathon: help translate our website
+        and compete for prizes in a hackathon-style online event.{" "}
+        <Link to="/contributing/translation-program/translatathon">
+          Apply until August 15th
+        </Link>
+        .
+      </Text>
+    </DismissableBanner>
+  )
+}
+
+export default TranslatathonBanner

src/components/Layout.tsx

@@ -10,6 +10,7 @@ import TranslationBanner from "./TranslationBanner"
 import TranslationBannerLegal from "./TranslationBannerLegal"
 import FeedbackWidget from "./FeedbackWidget"
 import { SkipLink } from "./SkipLink"
+import TranslatathonBanner from "./Banners/TranslatathonBanner"
 
 import { lightTheme as oldTheme } from "../theme"
 
@@ -74,6 +75,12 @@ const Layout: React.FC<IProps> = ({
       (isPageContentEnglish && !isPageLanguageEnglish)) &&
     !isTranslationBannerIgnored
 
+  const strippedPathname = path.replace(/^\/[a-z]{2,3}(-[a-z]{2})?\//, "/")
+  const shouldShowTranslatathonBanner =
+    strippedPathname === "/community/get-involved/" ||
+    strippedPathname === "/" ||
+    strippedPathname === "/contributing/translation-program/"
+
   return (
     <ApolloProvider client={client}>
       <SkipLink hrefId="#main-content" />
@@ -100,6 +107,7 @@ const Layout: React.FC<IProps> = ({
       >
         <Nav path={path} />
         {shouldShowSideNav && <SideNavMobile path={path} />}
+        {shouldShowTranslatathonBanner && <TranslatathonBanner />}
         <Flex
           flexDirection={{ base: "column", lg: "row" }}
           id="main-content"