migrate components to new emoji api

pettinarip · pettinarip · commit aef2f26d3a75 · 2024-08-09T22:26:18.000+02:00
diff --git a/src/components/AssetDownload/AssetDownloadArtist.tsx b/src/components/AssetDownload/AssetDownloadArtist.tsx
@@ -26,7 +26,7 @@ const AssetDownloadArtist = ({
       borderRadius="0 0 4px 4px"
     >
       <Flex me="2" fontSize="md" textColor="text300">
-        <Emoji text=":artist_palette:" me="2" fontSize="2xl" />
+        <Emoji text=":artist_palette:" className="me-2 text-2xl" />
         {t("page-assets-download-artist")}
       </Flex>
       {artistUrl && <Link href={artistUrl}>{artistName}</Link>}
diff --git a/src/components/Banners/UpgradeBannerNotification.tsx b/src/components/Banners/UpgradeBannerNotification.tsx
@@ -7,7 +7,7 @@ import BannerNotification from "./BannerNotification"
 
 const UpgradeBannerNotification = () => (
   <BannerNotification shouldShow>
-    <Emoji text=":megaphone:" me={4} fontSize="2xl" flexShrink="0" />
+    <Emoji text=":megaphone:" className="me-4 flex-shrink-0 text-2xl" />
     <Box>
       <b>
         We&apos;ve deprecated our use of &apos;Eth1&apos; and &apos;Eth2&apos;
diff --git a/src/components/BoxGrid.tsx b/src/components/BoxGrid.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { Box, Flex, GridItem, SimpleGrid } from "@chakra-ui/react"
 
+import { cn } from "@/lib/utils/cn"
 import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 
 import Emoji from "./Emoji"
@@ -90,18 +91,13 @@ const BoxGrid = ({ items }: BoxGridProps) => {
             key={idx}
           >
             <Emoji
-              m={2}
+              className={cn(
+                "m-2 text-8xl",
+                isOpen
+                  ? "mb-8"
+                  : "self-center hover:rotate-12 hover:duration-500"
+              )}
               text={item.emoji}
-              fontSize="8xl"
-              {...(isOpen
-                ? { mb: 8 }
-                : {
-                    alignSelf: "center",
-                    _hover: {
-                      transition: "transform 50s",
-                      transform: "rotate(10turn)",
-                    },
-                  })}
             />
             <Box>
               <OldHeading
diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx
@@ -55,7 +55,7 @@ const Callout = ({
       )}
       <Flex direction="column" justify="space-between" h="full">
         <div>
-          {emoji && <Emoji text={emoji} fontSize="5xl" />}
+          {emoji && <Emoji text={emoji} className="text-5xl" />}
           <OldHeading as="h3" fontSize="2xl" lineHeight={1.4}>
             {t(titleKey)}
           </OldHeading>
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -23,7 +23,7 @@ const Card = ({ emoji, title, description, children, ...props }: CardProps) => (
     {...props}
   >
     <Stack spacing="4">
-      {emoji && <Emoji fontSize="5xl" lineHeight={0} text={emoji} />}
+      {emoji && <Emoji className="text-5xl leading-none" text={emoji} />}
       <Stack spacing="8">
         {title && (
           <Heading as="h3" fontSize="2xl">
diff --git a/src/components/CentralizedExchanges/index.tsx b/src/components/CentralizedExchanges/index.tsx
@@ -52,7 +52,7 @@ const EmptyStateText = (props: ChildOnlyProp) => (
 
 const NoResults = ({ children }) => (
   <EmptyStateContainer>
-    <Emoji text=":crying_face:" fontSize="80px" />
+    <Emoji text=":crying_face:" className="text-[80px]" />
     <EmptyStateText>
       {/* TODO: Fix `children` structure to include email link within i18n string */}
       {children}{" "}
@@ -68,7 +68,7 @@ const NoResultsSingle = ({ children }) => (
       {children}{" "}
       <InlineLink href={`mailto:${WEBSITE_EMAIL}`}>{WEBSITE_EMAIL}</InlineLink>.
     </Text>
-    <Emoji text=":crying_face:" fontSize="80px" />
+    <Emoji text=":crying_face:" className="text-[80px]" />
   </Center>
 )
 
@@ -115,7 +115,7 @@ const CentralizedExchanges = ({
       </Box>
       {!hasSelectedCountry && (
         <EmptyStateContainer>
-          <Emoji text=":world_map:" fontSize="80px" />
+          <Emoji text=":world_map:" className="text-[80px]" />
           <EmptyStateText>
             {t("page-get-eth-exchanges-empty-state-text")}
           </EmptyStateText>
diff --git a/src/components/Codeblock.tsx b/src/components/Codeblock.tsx
@@ -331,12 +331,15 @@ const Codeblock = ({
                         <TopBarItem>
                           {!isCopied ? (
                             <>
-                              <Emoji text=":clipboard:" fontSize="md" />{" "}
+                              <Emoji text=":clipboard:" className="text-md" />{" "}
                               {t("copy")}
                             </>
                           ) : (
                             <>
-                              <Emoji text=":white_check_mark:" fontSize="md" />{" "}
+                              <Emoji
+                                text=":white_check_mark:"
+                                className="text-md"
+                              />{" "}
                               {t("copied")}
                             </>
                           )}
diff --git a/src/components/DocLink.tsx b/src/components/DocLink.tsx
@@ -47,7 +47,7 @@ const DocLink = ({ href, children, isExternal = false }: DocLinkProps) => {
         data-group
       >
         <Flex align="center">
-          <Emoji fontSize="md" me={4} text=":page_with_curl:" />
+          <Emoji className="me-4 text-md" text=":page_with_curl:" />
         </Flex>
         <Box flex={1} flexDirection="column">
           <LinkOverlay
diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
@@ -16,6 +16,7 @@ import Emoji from "@/components/Emoji"
 import { BaseLink } from "@/components/Link"
 import Text from "@/components/OldText"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import docLinks from "@/data/developer-docs-links.yaml"
@@ -50,7 +51,7 @@ type CardLinkProps = {
 
 const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
   const { t } = useTranslation("page-developers-docs")
-  const { flipForRtl } = useRtlFlip()
+  const { isRtl } = useRtlFlip()
 
   const xPadding = isPrev ? { ps: "0" } : { pe: 0 }
 
@@ -70,8 +71,10 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
       <Box textDecoration="none" p={4} h="100%" order={isPrev ? 0 : 1}>
         <Emoji
           text={isPrev ? ":point_left:" : ":point_right:"}
-          fontSize="5xl"
-          transform={contentNotTranslated ? undefined : flipForRtl}
+          className={cn(
+            "text-5xl",
+            !contentNotTranslated && isRtl ? "-scale-x-100" : ""
+          )}
         />
       </Box>
       <TextDiv {...xPadding} {...(!isPrev && { textAlign: "end" })}>
diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
@@ -82,13 +82,13 @@ const EventCard = ({
     >
       <Text color="primary.base" marginBottom={0} textAlign="end">
         {date}
-        <Emoji text=":spiral_calendar:" fontSize="md" ms={2} />
+        <Emoji text=":spiral_calendar:" className="ms-2 text-md" />
       </Text>
       <Text marginBottom={0} textAlign="end">
         <Text as="span" opacity={0.6}>
           {location}
         </Text>
-        <Emoji text=":round_pushpin:" fontSize="md" ms={2} />
+        <Emoji text=":round_pushpin:" className="ms-2 text-md" />
       </Text>
       <Heading as="h3" marginTop={0} fontWeight="semibold" lineHeight={1.4}>
         {title}
diff --git a/src/components/History/NetworkUpgradeSummary.tsx b/src/components/History/NetworkUpgradeSummary.tsx
@@ -49,7 +49,7 @@ const NetworkUpgradeSummary = ({ name }: NetworkUpgradeSummaryProps) => {
   const blockTypeTranslation = (translationKey, explorerUrl, number) => {
     return (
       <Flex whiteSpace="pre-wrap">
-        <Emoji fontSize="sm" me={2} text=":bricks:" />
+        <Emoji className="me-2 text-sm" text=":bricks:" />
         {t(translationKey)}:{" "}
         <InlineLink href={`${explorerUrl}${number}`}>
           {new Intl.NumberFormat(localeForStatsBoxNumbers).format(number)}
@@ -62,7 +62,7 @@ const NetworkUpgradeSummary = ({ name }: NetworkUpgradeSummaryProps) => {
     <Stack>
       {dateTimeAsString && (
         <Flex>
-          <Emoji fontSize="sm" me={2} text=":calendar:" />
+          <Emoji className="me-2 text-sm" text=":calendar:" />
           <Text fontFamily="monospace">{formattedUTC}</Text>
         </Flex>
       )}
@@ -86,7 +86,7 @@ const NetworkUpgradeSummary = ({ name }: NetworkUpgradeSummaryProps) => {
         )}
       {ethPriceInUSD && (
         <Flex>
-          <Emoji fontSize="sm" me={2} text=":money_bag:" />
+          <Emoji className="me-2 text-sm" text=":money_bag:" />
           {t("page-history:page-history-eth-price")}:{" "}
           {new Intl.NumberFormat(localeForStatsBoxNumbers, {
             style: "currency",
@@ -96,7 +96,7 @@ const NetworkUpgradeSummary = ({ name }: NetworkUpgradeSummaryProps) => {
       )}
       {waybackLink && (
         <Flex>
-          <Emoji fontSize="sm" me={2} text=":desktop_computer:" />
+          <Emoji className="me-2 text-sm" text=":desktop_computer:" />
           <InlineLink href={waybackLink}>
             {t("page-history:page-history-ethereum-org-wayback")}
           </InlineLink>
diff --git a/src/components/HorizontalCard.tsx b/src/components/HorizontalCard.tsx
@@ -8,19 +8,17 @@ export type HorizontalCardProps = Omit<FlexProps, "title"> & {
   emoji: string
   title?: ReactNode
   description: ReactNode
-  emojiSize?: number
 }
 
 const HorizontalCard = ({
   emoji,
   title,
   description,
   children,
-  emojiSize,
   ...rest
 }: HorizontalCardProps) => (
   <Flex borderRadius="base" {...rest}>
-    <Emoji fontSize={`${emojiSize}rem`} text={emoji} />
+    <Emoji className="text-5xl" text={emoji} />
     <Box flexGrow="0" flexShrink="1" flexBasis="75%" ms="8">
       <Text fontSize="lg">{title}</Text>
       <Text mt="-4" mb="2">
diff --git a/src/components/InfoBanner.tsx b/src/components/InfoBanner.tsx
@@ -40,13 +40,8 @@ const InfoBanner = ({
       >
         {emoji && (
           <Emoji
-            flexGrow="0"
-            flexShrink="0"
-            me={{ base: 0, sm: 6 }}
-            mb={{ base: 2, sm: 0 }}
-            alignSelf={{ base: "flex-start", sm: "auto" }}
+            className="mb-2 me-0 flex-shrink-0 flex-grow-0 self-start text-4xl sm:mb-0 sm:me-6 sm:self-auto"
             text={emoji}
-            fontSize="4xl"
           />
         )}
         <Flex
diff --git a/src/components/Leaderboard.tsx b/src/components/Leaderboard.tsx
@@ -121,7 +121,7 @@ const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
                     {score} {t("page-upgrades-bug-bounty-leaderboard-points")}
                   </Box>
                 </Flex>
-                {emoji && <Emoji me={8} fontSize="2xl" text={emoji} />}
+                {emoji && <Emoji className="me-8 text-2xl" text={emoji} />}
                 <Box
                   as="span"
                   _after={{
diff --git a/src/components/MeetupList.tsx b/src/components/MeetupList.tsx
@@ -125,9 +125,7 @@ const MeetupList = () => {
             >
               <Emoji
                 text={meetup.emoji}
-                boxSize={4}
-                me={2}
-                lineHeight="unset"
+                className="me-2 text-md leading-none"
               />
               <Text mb={0} opacity={"0.6"}>
                 {meetup.location}
diff --git a/src/components/StablecoinAccordion/AccordionCustomItem.tsx b/src/components/StablecoinAccordion/AccordionCustomItem.tsx
@@ -73,9 +73,7 @@ export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
             >
               <Emoji
                 text={contentObj.emoji}
-                me={6}
-                mb={{ base: 2, md: 0 }}
-                fontSize={{ base: "3rem", md: "4rem" }}
+                className="mb-2 me-6 text-[3rem] md:mb-0 md:text-[4rem]"
               />
               <Box>
                 <Flex alignItems="center" mb={2}>
diff --git a/src/components/StablecoinBoxGrid.tsx b/src/components/StablecoinBoxGrid.tsx
@@ -107,15 +107,8 @@ const Body = ({ children }: ChildOnlyProp) => {
 const StyledEmoji = ({ emoji }: { emoji: string }) => {
   return (
     <Emoji
-      fontSize="8xl"
+      className="order-2 m-2 self-center text-8xl hover:rotate-12 hover:duration-500"
       text={emoji}
-      margin={2}
-      alignSelf="center"
-      order="2"
-      _hover={{
-        transition: "transform 50s",
-        transform: "rotate(10turn)",
-      }}
     />
   )
 }
@@ -187,7 +180,7 @@ const GridItem = ({
       }}
     >
       {isOpen ? (
-        <Emoji mb={8} text={emoji} fontSize="8xl" />
+        <Emoji className="mb-8 text-8xl" text={emoji} />
       ) : (
         <>
           <StyledEmoji emoji={emoji} />
diff --git a/src/components/Staking/WithdrawalCredentials.tsx b/src/components/Staking/WithdrawalCredentials.tsx
@@ -104,13 +104,13 @@ const WithdrawalCredentials: FC = () => {
                   </Text>
                   {isCopied ? (
                     <>
-                      <Emoji text="✅" fontSize="lg" mx={2} />
+                      <Emoji text="✅" className="mx-2 text-lg" />
                       <Text as="span" title={longAddress}>
                         {t("copied")}
                       </Text>
                     </>
                   ) : (
-                    <Emoji text="📋" fontSize="lg" mx={2} />
+                    <Emoji text="📋" className="mx-2 text-lg" />
                   )}
                 </>
               )}
diff --git a/src/components/Translatathon/LocalCommunitiesList.tsx b/src/components/Translatathon/LocalCommunitiesList.tsx
@@ -93,7 +93,7 @@ export const LocalCommunitiesList = () => {
             </Flex>
           </Flex>
           <Flex minW="90">
-            <Emoji fontSize={90} text={community.emojiString} />
+            <Emoji className="text-[90px]" text={community.emojiString} />
           </Flex>
         </Flex>
       ))}
diff --git a/src/components/Translatathon/TranslatathonPrizes.tsx b/src/components/Translatathon/TranslatathonPrizes.tsx
@@ -7,7 +7,7 @@ const TranslatathonPrizes = () => {
         <div className="flex flex-row gap-4">
           <div className="flex h-32 w-32 items-center justify-center rounded-lg p-1 shadow-md">
             <div className="h-16 w-16 items-center justify-center">
-              <Emoji text="🥇" fontSize={64} />
+              <Emoji text="🥇" className="text-[64px]" />
             </div>
           </div>
           <div className="flex flex-col items-center justify-center">
@@ -22,9 +22,7 @@ const TranslatathonPrizes = () => {
             <div className="h-11 w-11">
               <Emoji
                 text="🥈"
-                fontSize={44}
-                alignContent="center"
-                justifyItems="center"
+                className="content-center items-center text-[44px]"
               />
             </div>
           </div>
@@ -36,7 +34,7 @@ const TranslatathonPrizes = () => {
         <div className="justify-left flex flex-1 items-center gap-4 sm:justify-center">
           <div className="flex h-24 w-24 items-center justify-center rounded-lg p-1 shadow-md">
             <div className="h-11 w-11">
-              <Emoji text="🥉" fontSize={44} />
+              <Emoji text="🥉" className="text-[44px]" />
             </div>
           </div>
           <div className="flex flex-col items-center justify-center">
@@ -49,7 +47,7 @@ const TranslatathonPrizes = () => {
         <div className="justify-left flex flex-1 items-center gap-4 sm:justify-center">
           <div className="flex h-16 w-16 items-center justify-center rounded-lg p-1 shadow-md">
             <div className="h-9 w-9">
-              <Emoji text="🌟" fontSize={36} />
+              <Emoji text="🌟" className="text-[36px]" />
             </div>
           </div>
           <div className="flex flex-col items-center justify-center">
@@ -60,7 +58,7 @@ const TranslatathonPrizes = () => {
         <div className="justify-left flex flex-1 items-center gap-4 sm:justify-center">
           <div className="flex h-16 w-16 items-center justify-center rounded-lg p-1 shadow-md">
             <div className="h-9 w-9">
-              <Emoji text=":scroll:" fontSize={36} />
+              <Emoji text=":scroll:" className="text-[36px]" />
             </div>
           </div>
           <div className="flex flex-col items-center justify-center">
diff --git a/src/components/TranslationBanner.tsx b/src/components/TranslationBanner.tsx
@@ -79,9 +79,7 @@ const TranslationBanner = ({
             </Heading>
             <Emoji
               text=":globe_showing_asia_australia:"
-              fontSize="2xl"
-              ms={2}
-              mb={{ base: 4, sm: "auto" }}
+              className="mb-4 ms-2 text-2xl sm:mb-auto"
             />
           </Flex>
           <p>{t(bodyTextId)}</p>
diff --git a/src/components/TranslationBannerLegal.tsx b/src/components/TranslationBannerLegal.tsx
@@ -74,10 +74,7 @@ const TranslationBannerLegal = ({
               <Translation id="translation-banner-no-bugs-title" />
               <Emoji
                 text=":bug:"
-                fontSize="3xl"
-                pt={2}
-                ms={2}
-                mb={{ base: 4, sm: "auto" }}
+                className="mb-4 ms-2 pt-2 text-3xl sm:mb-auto"
               />
             </Heading>
           </Flex>
diff --git a/src/components/TranslationLeaderboard.tsx b/src/components/TranslationLeaderboard.tsx
diff --git a/src/components/TutorialMetadata.tsx b/src/components/TutorialMetadata.tsx
diff --git a/src/data/WalletSimulatorData.tsx b/src/data/WalletSimulatorData.tsx
diff --git a/src/layouts/UseCases.tsx b/src/layouts/UseCases.tsx
diff --git a/src/pages/bug-bounty.tsx b/src/pages/bug-bounty.tsx
diff --git a/src/pages/dapps.tsx b/src/pages/dapps.tsx
diff --git a/src/pages/developers/tutorials.tsx b/src/pages/developers/tutorials.tsx
diff --git a/src/pages/gas.tsx b/src/pages/gas.tsx
diff --git a/src/pages/run-a-node.tsx b/src/pages/run-a-node.tsx
diff --git a/src/pages/stablecoins.tsx b/src/pages/stablecoins.tsx
diff --git a/src/pages/staking/deposit-contract.tsx b/src/pages/staking/deposit-contract.tsx

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ const AssetDownloadArtist = ({`
`26`	`26`	`borderRadius="0 0 4px 4px"`
`27`	`27`	`>`
`28`	`28`	`<Flex me="2" fontSize="md" textColor="text300">`
`29`		`- <Emoji text=":artist_palette:" me="2" fontSize="2xl" />`
	`29`	`+ <Emoji text=":artist_palette:" className="me-2 text-2xl" />`
`30`	`30`	`{t("page-assets-download-artist")}`
`31`	`31`	`</Flex>`
`32`	`32`	`{artistUrl && <Link href={artistUrl}>{artistName}</Link>}`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ const Card = ({ emoji, title, description, children, ...props }: CardProps) => (`
`23`	`23`	`{...props}`
`24`	`24`	`>`
`25`	`25`	`<Stack spacing="4">`
`26`		`- {emoji && <Emoji fontSize="5xl" lineHeight={0} text={emoji} />}`
	`26`	`+ {emoji && <Emoji className="text-5xl leading-none" text={emoji} />}`
`27`	`27`	`<Stack spacing="8">`
`28`	`28`	`{title && (`
`29`	`29`	`<Heading as="h3" fontSize="2xl">`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ const DocLink = ({ href, children, isExternal = false }: DocLinkProps) => {`
`47`	`47`	`data-group`
`48`	`48`	`>`
`49`	`49`	`<Flex align="center">`
`50`		`- <Emoji fontSize="md" me={4} text=":page_with_curl:" />`
	`50`	`+ <Emoji className="me-4 text-md" text=":page_with_curl:" />`
`51`	`51`	`</Flex>`
`52`	`52`	`<Box flex={1} flexDirection="column">`
`53`	`53`	`<LinkOverlay`