Merge branch 'dev' into shadcn-nav

Author: pettinarip

.eslintrc.json

@@ -42,7 +42,7 @@
           // Other relative imports. Put same-folder imports and `.` last.
           ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
           // Style imports.
-          ["^.+s?css$"],
+          ["^.+\\.s?css$"],
           // Side effect imports.
           ["^\\u0000"]
         ]

public/content/contributing/translation-program/translatathon/details/index.md

@@ -123,6 +123,9 @@ EthStaker
 - https://crowdin.com/project/ethstaker-website
 - https://crowdin.com/project/ethstaker-knowledge-base
 
+Solidity Language Docs
+- https://crowdin.com/project/solidity-language-docs
+
 ### Evaluation process
 
 All translations will be subject to QA and feedback, where professional linguists will evaluate submissions based on quality and accuracy.

src/components/AdoptionChart.tsx

@@ -1,56 +1,45 @@
 import { useTranslation } from "next-i18next"
 import { useTheme } from "next-themes"
-import { Box, type BoxProps, Flex } from "@chakra-ui/react"
 
 import type { ChildOnlyProp } from "@/lib/types"
 
+import { cn } from "@/lib/utils/cn"
+
+import { Flex } from "./ui/flex"
+
+type CellProps = ChildOnlyProp & {
+  color?: string
+  className?: string
+}
+
 const Column = ({ children }: ChildOnlyProp) => (
-  <Flex
-    flexDirection="column-reverse"
-    ms={{ base: 2, md: 4 }}
-    _first={{ ms: 0 }}
-  >
-    {children}
-  </Flex>
+  <Flex className="ms-2 flex-col-reverse first:ms-0 md:ms-4">{children}</Flex>
 )
 
-const Cell = ({ children, color, ...props }: BoxProps) => (
-  <Box
-    border="1px solid"
-    borderColor={color || "text"}
-    color={color || "text"}
-    py="0.8rem"
-    px={{ base: 2, md: "1.2rem" }}
-    fontSize="0.9rem"
-    fontWeight="bold"
-    lineHeight="none"
-    textAlign="center"
-    _last={{
-      borderTopStartRadius: "2xl",
-      borderTopEndRadius: "2xl",
-    }}
-    sx={{
-      "&:nth-child(-n + 2)": {
-        borderBottomStartRadius: "2xl",
-        borderBottomEndRadius: "2xl",
-      },
+const Cell = ({ children, color, className, ...props }: CellProps) => (
+  <div
+    className={cn(
+      "border border-solid px-2 py-[0.8rem] text-center text-[0.9rem] font-bold leading-none last:rounded-t-2xl md:px-[1.2rem] [&:nth-child(-n+2)]:rounded-bl-2xl [&:nth-child(-n+2)]:rounded-br-2xl",
+      className
+    )}
+    style={{
+      borderColor: color || "currentcolor",
+      color: color || "currentcolor",
     }}
     {...props}
   >
     {children}
-  </Box>
+  </div>
 )
 
 const ColumnName = ({ children }: ChildOnlyProp) => (
-  <Cell border="none" pt={6}>
-    {children}
-  </Cell>
+  <Cell className="border-none pt-6">{children}</Cell>
 )
 
 const AdoptionChart = () => {
   const { t } = useTranslation("page-what-is-ethereum")
-  const { theme } = useTheme()
-  const isDark = theme === "dark"
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
 
   return (
     <Flex>

src/components/EnergyConsumptionChart/index.tsx

@@ -12,19 +12,16 @@ import ChartDataLabels from "chartjs-plugin-datalabels"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { Bar } from "react-chartjs-2"
-import {
-  Box,
-  Center,
-  Text,
-  useBreakpointValue,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { useBreakpointValue } from "@chakra-ui/react"
 
 import type { Lang } from "@/lib/types"
 
+import { Center } from "@/components/ui/flex"
+
 import { wrapLabel } from "@/lib/utils/charts"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
 import { useIsClient } from "@/hooks/useIsClient"
 
 // ChartDataLabels required to display y-labels on top of bars
@@ -237,26 +234,19 @@ const EnergyConsumptionChart = () => {
   } satisfies ChartData
 
   return (
-    <Box my={16}>
-      <Center w="full" mb={{ base: 4, md: 6 }}>
-        <Box
-          position="relative"
-          maxW="500px"
-          m="auto"
-          w="80vw"
-          h={{ base: "300px", md: "400px" }}
-          mb={{ base: 4, md: 0 }}
-        >
+    <div className="my-16">
+      <Center className="mb-4 w-full md:mb-6">
+        <div className="relative m-auto mb-4 h-[300px] w-[80vw] max-w-[500px] md:mb-0 md:h-[400px]">
           {isClient && (
             <Bar options={chartOptions} data={chartData} updateMode="none" />
           )}
-        </Box>
+        </div>
       </Center>
 
-      <Text fontWeight="semibold" textAlign="center">
+      <p className="text-center font-semibold">
         {t("page-what-is-ethereum-energy-consumption-chart-legend")}
-      </Text>
-    </Box>
+      </p>
+    </div>
   )
 }
 

src/components/LanguagePicker/index.tsx

@@ -44,7 +44,7 @@ const LanguagePicker = ({
    * @param {string} event - The keydown event.
    */
   useEventListener("keydown", (e) => {
-    if (e.key !== "\\") return
+    if (e.key !== "\\" || e.metaKey || e.ctrlKey) return
     e.preventDefault()
     onOpen()
   })

src/components/Nav/Menu/useNavMenu.ts

@@ -16,7 +16,7 @@ export const useNavMenu = (sections: NavSections) => {
 
   // Focus corresponding nav section when number keys pressed
   useEventListener("keydown", (event) => {
-    if (!document || !event.key.match(/[1-9]/) || isModified(event)) return
+    if (!document || !event.key.match(/^[1-9]$/) || isModified(event)) return
     if (event.target instanceof HTMLInputElement) return
     if (event.target instanceof HTMLTextAreaElement) return
     if (event.target instanceof HTMLSelectElement) return

src/components/Nav/useNav.ts

@@ -30,7 +30,7 @@ import useColorModeValue from "@/hooks/useColorModeValue"
 
 export const useNav = () => {
   const { t } = useTranslation("common")
-  const { theme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme()
   const { setColorMode } = useColorMode()
 
   const colorToggleEvent = useColorModeValue("dark mode", "light mode") // This will be inverted as the state is changing
@@ -466,8 +466,8 @@ export const useNav = () => {
   }
 
   const toggleColorMode = () => {
-    setTheme(theme === "dark" ? "light" : "dark")
-    setColorMode(theme === "dark" ? "light" : "dark")
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+    setColorMode(resolvedTheme === "dark" ? "light" : "dark")
     trackCustomEvent({
       eventCategory: "nav bar",
       eventAction: "click",

src/components/Quiz/QuizWidget/useQuizWidget.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react"
+import isChromatic from "chromatic"
 import shuffle from "lodash/shuffle"
 import { useTranslation } from "next-i18next"
 
@@ -51,7 +52,9 @@ export const useQuizWidget = ({
       const rawQuestion: RawQuestion = questionBank[id]
       return { id, ...rawQuestion }
     })
-    const shuffledQuestions = shuffle(questions)
+
+    // ! Do not shuffle questions in Chromatic to keep the modal story snapshot stable
+    const shuffledQuestions = isChromatic() ? questions : shuffle(questions)
     const quiz: Quiz = {
       title: t(rawQuiz.title),
       questions: shuffledQuestions,