Merge branch 'dev' into code-accordion

Author: wackerow

public/content/contributing/index.md

@@ -68,7 +68,7 @@ Before contributing, make sure you're familiar with:
 - our [style guide](/contributing/style-guide/)
 - our [code of conduct](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## How decisions about the site are made {#how-decisions-about-the-site-are-made}
 

public/content/desci/index.md

@@ -127,6 +127,7 @@ We welcome suggestions for new projects to list - please look at our [listing po
 - [DeSci: The Future of Research by Samuel Akinosho](https://lucidsamuel.medium.com/desci-the-future-of-research-b76cfc88c8ec)
 - [Science Funding (Epilogue: DeSci and new crypto primitives) by Nadia](https://nadia.xyz/science-funding)
 - [Decentralisation is Disrupting Drug Development](https://medium.com/id-theory/decentralisation-is-disrupting-drug-development-28b5ba5d447f)
+- [What Is DeSci – Decentralized Science?](​https://usadailytimes.com/2022/09/12/what-is-desci-decentralized-science/)
 
 ### Videos {#videos}
 
@@ -135,3 +136,4 @@ We welcome suggestions for new projects to list - please look at our [listing po
 - [Scientific Publishing Is Broken. Can Web3 Fix It?](https://www.youtube.com/watch?v=WkvzYgCvWj8)
 - [Juan Benet - DeSci, Independent Labs, & Large Scale Data Science](https://www.youtube.com/watch?v=zkXM9H90g_E)
 - [Sebastian Brunemeier - How DeSci Can Transform Biomedical Research & Venture Capital](https://www.youtube.com/watch?v=qB4Tc3FcVbM)
+- [Paige Donner - Tooling Open Science with Web3 & The Blockchain](https://www.youtube.com/watch?v=nC-2QWQ-lgw&t=17s)

public/content/translations/it/contributing/index.md

@@ -68,7 +68,7 @@ Prima di contribuire, assicurati di avere familiarità con:
 - la nostra [guida di stile](/contributing/style-guide/)
 - il nostro [codice di condotta](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## Come vengono prese le decisioni sul sito {#how-decisions-about-the-site-are-made}
 

public/content/translations/ja/contributing/index.md

@@ -68,7 +68,7 @@ ethereum.orgは、オープンソースで運営されているプロジェク
 - [スタイルガイド](/contributing/style-guide/)
 - [行動規範](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## サイトに関する決定 {#how-decisions-about-the-site-are-made}
 

public/content/translations/zh-tw/contributing/index.md

@@ -68,7 +68,7 @@ Ethereum.org 是一個開源專案，擁有超過 **12000 名**貢獻者，幫
 - 我們的[風格指南](/contributing/style-guide/)
 - 我們的[行為準則](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## 如何做出有關網站的決定 {#how-decisions-about-the-site-are-made}
 

src/components/Banners/ContributorsQuizBanner.tsx

@@ -1,19 +1,21 @@
-import { Box, Flex, FlexProps, Heading, Text } from "@chakra-ui/react"
+import { Box, Flex, Heading, Text } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"
 
+import { cn } from "@/lib/utils/cn"
+
 import { ButtonLink } from "../Buttons"
 
 import PeopleLearning from "@/public/images/people-learning.png"
 
 // TODO: refactor to use CalloutBanner component
-function ContributorsQuizBanner(props: FlexProps) {
+function ContributorsQuizBanner(props: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <Flex
-      as="aside"
-      flexDir={{ base: "column", md: "row-reverse" }}
-      bg="layer2Gradient"
-      borderRadius="base"
+    <aside
+      className={cn(
+        "flex flex-col rounded md:flex-row",
+        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20"
+      )}
       {...props}
     >
       <Flex
@@ -57,7 +59,7 @@ function ContributorsQuizBanner(props: FlexProps) {
           </ButtonLink>
         </Box>
       </Flex>
-    </Flex>
+    </aside>
   )
 }
 

src/components/CalloutBanner.tsx

@@ -1,14 +1,12 @@
 import { useTranslation } from "next-i18next"
-import { Flex, type FlexProps } from "@chakra-ui/react"
 
 import type { TranslationKey } from "@/lib/types"
 
-import { Image, type ImageProps } from "@/components/Image"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
+import { type ImageProps, TwImage } from "@/components/Image"
 
-export type CalloutBannerProps = FlexProps & {
-  children?: React.ReactNode
+import { cn } from "@/lib/utils/cn"
+
+export type CalloutBannerProps = React.HTMLAttributes<HTMLDivElement> & {
   image: ImageProps["src"]
   imageWidth?: number
   titleKey: TranslationKey
@@ -23,57 +21,39 @@ const CalloutBanner = ({
   descriptionKey,
   alt,
   children,
+  className,
   ...props
 }: CalloutBannerProps) => {
   const { t } = useTranslation("page-staking")
 
   return (
-    <Flex
-      as="aside"
-      direction={{ base: "column", lg: "row-reverse" }}
-      bg="layer2Gradient"
-      p={{ base: 8, sm: 12 }}
-      borderRadius="base"
+    <aside
+      className={cn(
+        "flex flex-col rounded p-8 sm:p-12 lg:flex-row-reverse",
+        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20",
+        className
+      )}
       {...props}
     >
-      {image && (
-        <Flex>
-          <Image
-            src={image}
-            alt={alt}
-            width={imageWidth}
-            style={{
-              objectFit: "contain",
-            }}
-            mx="auto"
-            mt={-24}
-            mb={{ base: 0, lg: -24 }}
-          />
-        </Flex>
-      )}
-      <Flex
-        flexGrow={1}
-        flexShrink={0}
-        flexBasis="50%"
-        direction="column"
-        justifyContent="center"
-        ps={{ base: 0, sm: 4, lg: 8 }}
-        w={{ base: "full", lg: "inherit" }}
-      >
-        <OldHeading
-          as="h2"
-          mt={0}
-          fontSize={{ base: "2xl", sm: "2rem" }}
-          lineHeight="1.4"
-        >
+      <div className="flex">
+        <TwImage
+          src={image}
+          alt={alt}
+          width={imageWidth}
+          className="-my-24 mx-auto object-contain max-lg:mb-0"
+        />
+      </div>
+
+      <div className="flex w-full flex-shrink-0 flex-grow basis-1/2 flex-col justify-center sm:ps-4 lg:w-[inherit] lg:ps-8">
+        <h2 className="mb-8 text-2xl leading-xs sm:text-[2rem]">
           {t(titleKey)}
-        </OldHeading>
-        <Text fontSize="xl" w="90%" lineHeight="140%" mb={8} color="text200">
+        </h2>
+        <p className="mb-8 w-[90%] text-xl text-body-medium">
           {t(descriptionKey)}
-        </Text>
+        </p>
         {children}
-      </Flex>
-    </Flex>
+      </div>
+    </aside>
   )
 }
 

src/components/Glossary/GlossaryDefinition/index.tsx

@@ -1,10 +1,11 @@
 import { ComponentProps } from "react"
-import { type HeadingProps, Text, VStack } from "@chakra-ui/react"
 
-import Heading from "@/components/Heading"
 import IdAnchor from "@/components/IdAnchor"
-import InlineLink from "@/components/Link"
 import Translation from "@/components/Translation"
+import { Stack } from "@/components/ui/flex"
+import InlineLink from "@/components/ui/Link"
+
+import { cn } from "@/lib/utils/cn"
 
 import { DEFAULT_GLOSSARY_NS } from "@/lib/constants"
 
@@ -25,42 +26,30 @@ const GlossaryDefinition = ({
   size = "md",
   options = { ns: DEFAULT_GLOSSARY_NS },
 }: GlossaryDefinitionProps) => {
-  const textStyles = size === "sm" ? { mb: 0 } : {}
-
-  const headingPropsForAnchor = (id?: string): HeadingProps => {
-    if (!id) return {}
-    return {
-      scrollMarginTop: 28,
-      id,
-      "data-group": true,
-      position: "relative",
-    } as HeadingProps
-  }
+  const textClasses = size === "sm" ? "mb-0" : ""
 
   return (
-    <VStack spacing={4} align="stretch" textAlign="start" mb={8}>
-      <Heading size="md" {...headingPropsForAnchor(term)}>
+    <Stack className="mb-8 items-stretch gap-4 text-start">
+      <h4
+        className={term ? "relative scroll-mt-28" : ""}
+        {...(term ? { "data-group": true, id: term } : {})}
+      >
         <IdAnchor id={term} />
         <Translation
           id={term + "-term"}
           options={options}
           transform={components}
         />
-      </Heading>
-      {/**
-       * `as="span"` prevents hydration warnings for strings that contain
-       * elements that cannot be nested inside `p` tags, like `ul` tags
-       * (found in some Glossary definition).
-       * TODO: Develop a better solution to handle this case.
-       */}
-      <Text as="span" {...textStyles}>
+      </h4>
+
+      <div className={cn("inline-block", textClasses)}>
         <Translation
           id={term + "-definition"}
           options={options}
           transform={components}
         />
-      </Text>
-    </VStack>
+      </div>
+    </Stack>
   )
 }
 

src/components/Homepage/useBentoBox.ts

@@ -11,6 +11,13 @@ import MergeImage from "@/public/images/upgrades/merge.png"
 type Breakpoint = "mobile" | "lg" | "xl"
 type Direction = "down" | "up" | "right" | "left"
 type Color = "primary" | "accent-a" | "accent-b" | "accent-c"
+type Category = "stablecoins" | "defi" | "dapps" | "networks" | "assets"
+type CopyDetails = {
+  title: string
+  children: string
+  action: string
+  href: string
+}
 
 const gradientStops = "from-20% to-60%"
 
@@ -88,47 +95,39 @@ const getPosition = (position: number): string =>
 export const useBentoBox = () => {
   const { t } = useTranslation("page-index")
 
+  const getCopy = (category: Category, href: string): CopyDetails => ({
+    title: t(`page-index:page-index-bento-${category}-title`),
+    children: t(`page-index:page-index-bento-${category}-content`),
+    action: t(`page-index:page-index-bento-${category}-action`),
+    href,
+  })
+
   return [
     {
-      title: t("page-index-bento-stablecoins-title"),
-      children: t("page-index:page-index-bento-stablecoins-content"),
-      action: t("page-index:page-index-bento-stablecoins-action"),
-      href: "/stablecoins/",
-      imgSrc: ImpactImage,
-      imgWidth: 400,
+      ...getCopy("stablecoins", "/stablecoins/"),
+      imgSrc: ManAndDogImage,
       className: cn(colorOptions["primary"], getPosition(0)),
     },
     {
-      title: t("page-index:page-index-bento-defi-title"),
-      children: t("page-index:page-index-bento-defi-content"),
-      action: t("page-index:page-index-bento-defi-action"),
-      href: "/defi/",
-      imgSrc: ManAndDogImage,
+      ...getCopy("defi", "/defi/"),
+      imgSrc: ImpactImage,
+      imgWidth: 400,
       className: cn(colorOptions["accent-c"], getPosition(1)),
     },
     {
-      title: t("page-index:page-index-bento-dapps-title"),
-      children: t("page-index:page-index-bento-dapps-content"),
-      action: t("page-index:page-index-bento-dapps-action"),
-      href: "/dapps/",
+      ...getCopy("networks", "/layer-2/"),
       imgSrc: MergeImage,
       imgWidth: 320,
       className: cn(colorOptions["accent-b"], getPosition(2)),
     },
     {
-      title: t("page-index:page-index-bento-networks-title"),
-      children: t("page-index:page-index-bento-networks-content"),
-      action: t("page-index:page-index-bento-networks-action"),
-      href: "/layer-2/",
+      ...getCopy("dapps", "/dapps/"),
       imgSrc: ManBabyWomanImage,
       imgWidth: 324,
       className: cn(colorOptions["accent-a"], getPosition(3)),
     },
     {
-      title: t("page-index:page-index-bento-assets-title"),
-      children: t("page-index:page-index-bento-assets-content"),
-      action: t("page-index:page-index-bento-assets-action"),
-      href: "/nft/",
+      ...getCopy("assets", "/nft/"),
       imgSrc: RobotBarImage,
       imgWidth: 324,
       className: cn(colorOptions["primary"], getPosition(4)),

src/components/Layer2/Layer2Onboard.tsx

@@ -13,6 +13,7 @@ import type { ChildOnlyProp } from "@/lib/types"
 
 import { Image } from "@/components/Image"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
 // Data
@@ -213,7 +214,12 @@ const Layer2Onboard = ({
   }
 
   return (
-    <Box bg="layer2Gradient" borderRadius="sm" p={10}>
+    <div
+      className={cn(
+        "rounded-sm p-10",
+        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20"
+      )}
+    >
       <Box textAlign="center" maxW="75ch" m="auto">
         <OldHeading
           fontSize={{ base: "2xl", md: "2rem" }}
@@ -347,7 +353,7 @@ const Layer2Onboard = ({
           />
         </Box>
       </SimpleGrid>
-    </Box>
+    </div>
   )
 }