feat: Icon updates, Lucide icon alignment

app/[locale]/developers/tutorials/_components/tutorials.tsx

@@ -8,6 +8,7 @@ import React, {
   useMemo,
   useState,
 } from "react"
+import { ExternalLink } from "lucide-react"
 import { useLocale } from "next-intl"
 
 import { ITutorial, Lang } from "@/lib/types"
@@ -198,13 +199,11 @@ const TutorialsList = ({ internalTutorials }: TutorialsListProps) => {
               href={tutorial.href ?? undefined}
             >
               <Flex className="mb-8 flex-col items-start justify-between gap-y-4 md:-mb-4 md:flex-row">
-                <Text
-                  className={cn(
-                    "relative me-0 text-2xl font-semibold text-body after:ml-2 after:inline-block after:italic after:transition-all after:duration-100 after:ease-in-out after:content-['↗'] md:me-24",
-                    tutorial.isExternal ? "after:inline-block" : "after:hidden"
-                  )}
-                >
+                <Text className="relative me-0 text-2xl font-semibold text-body md:me-24">
                   {tutorial.title}
+                  {tutorial.isExternal && (
+                    <ExternalLink className="mb-[0.25em] ms-[0.25em] inline-block size-[0.875em]" />
+                  )}
                 </Text>
                 <Tag variant="outline">
                   <Translation id={getSkillTranslationId(tutorial.skill!)} />

app/[locale]/stablecoins/page.tsx

@@ -1,5 +1,5 @@
 import { pick } from "lodash"
-import { HelpCircle } from "lucide-react"
+import { Info } from "lucide-react"
 import {
   getMessages,
   getTranslations,
@@ -94,6 +94,7 @@ const loadData = dataLoader<[CoinGeckoCoinMarketResponse]>(
 async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: "page-stablecoins" })
+  const tCommon = await getTranslations({ locale, namespace: "common" })
 
   setRequestLocale(locale)
 
@@ -248,7 +249,7 @@ async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
 
   const tooltipContent = (
     <div>
-      {t("common:data-provided-by")}{" "}
+      {tCommon("data-provided-by")}{" "}
       <InlineLink href="https://www.coingecko.com/en/api">
         coingecko.com
       </InlineLink>
@@ -555,9 +556,9 @@ async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
             </div>
 
             <h3 id="stablecoin-markets" className="mb-8 mt-12">
-              {t("page-stablecoins-top-coins")}
+              {t("page-stablecoins-top-coins")}&nbsp;
               <Tooltip content={tooltipContent}>
-                <HelpCircle className="ms-2 fill-body text-md" />
+                <Info className="size-4" />
               </Tooltip>
             </h3>
 

app/[locale]/staking/deposit-contract/_components/deposit-contract.tsx

@@ -1,7 +1,7 @@
 "use client"
-
 import { useEffect, useState } from "react"
 import makeBlockie from "ethereum-blockies-base64"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 
 import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
 
@@ -375,16 +375,13 @@ const DepositContractPage = () => {
                         <CopyButton>
                           {!isCopied ? (
                             <>
-                              <Emoji text=":clipboard:" className="text-md" />
                               {t("page-staking-deposit-contract-copy")}
+                              <Clipboard className="ms-1" />
                             </>
                           ) : (
                             <>
-                              <Emoji
-                                text=":white_check_mark:"
-                                className="text-md"
-                              />
                               {t("page-staking-deposit-contract-copied")}
+                              <ClipboardCheck className="ms-1" />
                             </>
                           )}
                         </CopyButton>

public/content/translations/fa/zero-knowledge-proofs/index.md

@@ -108,7 +108,7 @@ lang: fa
 
 استفاده از MACI نیازمند اعتماد به هماهنگ‌کننده مبنی بر تبانی نکردن با رشوه‌دهندگان یا تلاش برای رشوه دادن رای‌دهندگان از سوی او است. هماهنگ‌کننده می‌تواند پیام‌های کاربران را رمزگشایی کند (برای ایجاد اثبات لازم است)، بنابراین آن‌ها می‌توانند نحوۀ رای دادن هر فرد را به‌ طور دقیق تایید کنند.
 
-اما در مواردی که هماهنگ‌کننده صادق است، MACI ابزاری قدرتمند برای تضمین سلامت رای‌گیری آنچین است. این امر بیان‌کنندۀ دلیل محبوبیت آن در میان برنامه‌های تامین مالی ثانویه (مانند [↗clr.fund](https://clr.fund/#/about/maci)) است که به‌شدت بر صحت آرای تک‌تک افراد متکی است.
+اما در مواردی که هماهنگ‌کننده صادق است، MACI ابزاری قدرتمند برای تضمین سلامت رای‌گیری آنچین است. این امر بیان‌کنندۀ دلیل محبوبیت آن در میان برنامه‌های تامین مالی ثانویه (مانند [clr.fund](https://clr.fund/#/about/maci)) است که به‌شدت بر صحت آرای تک‌تک افراد متکی است.
 
 [درباره MACI بیشتر بدانید](https://privacy-scaling-explorations.github.io/maci/).
 

src/components/BigNumber/index.tsx

@@ -50,26 +50,29 @@ const BigNumber = async ({
           <div className="text-sm">
             {children}
             {sourceName && sourceUrl && (
-              <Tooltip
-                content={
-                  <>
-                    <p>
-                      {t("data-provided-by")}{" "}
-                      <Link href={sourceUrl}>{sourceName}</Link>
-                    </p>
-                    {lastUpdated && (
-                      <p className="mt-2">
-                        {t("last-updated")}: {lastUpdatedDisplay}
+              <>
+                &nbsp;
+                <Tooltip
+                  content={
+                    <>
+                      <p>
+                        {t("data-provided-by")}{" "}
+                        <Link href={sourceUrl}>{sourceName}</Link>
                       </p>
-                    )}
-                  </>
-                }
-              >
-                <Info
-                  className="mb-0.5 ms-2 inline size-3.5 align-text-bottom"
-                  aria-label={t("data-provided-by")}
-                />
-              </Tooltip>
+                      {lastUpdated && (
+                        <p className="mt-2">
+                          {t("last-updated")}: {lastUpdatedDisplay}
+                        </p>
+                      )}
+                    </>
+                  }
+                >
+                  <Info
+                    className="mb-0.5 inline size-3.5 align-text-bottom"
+                    aria-label={t("data-provided-by")}
+                  />
+                </Tooltip>
+              </>
             )}
           </div>
         </>

src/components/CardList.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { ExternalLink } from "lucide-react"
 import TwImage, { type ImageProps } from "next/image"
 import type { ReactNode } from "react"
 
@@ -72,7 +73,9 @@ const Card = ({
           <div className="mb-0 text-sm opacity-60">{caption}</div>
         </div>
       )}
-      {isExternal && <span className={twFlipForRtl}>↗</span>}
+      {isExternal && (
+        <ExternalLink className={cn("size-[1em]", twFlipForRtl)} />
+      )}
     </div>
   )
 }

src/components/CodeModal.tsx

@@ -1,5 +1,5 @@
 import { Children, type ReactElement } from "react"
-import { Check, Copy } from "lucide-react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 
 import { Button } from "./ui/buttons/Button"
 import {
@@ -43,11 +43,13 @@ const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
         >
           {hasCopied ? (
             <>
-              <Check /> {t("copied")}
+              {t("copied")}
+              <ClipboardCheck className="ms-1" />
             </>
           ) : (
             <>
-              <Copy /> {t("copy")}
+              {t("copy")}
+              <Clipboard className="ms-1" />
             </>
           )}
         </Button>

src/components/Codeblock.tsx

@@ -1,6 +1,6 @@
 "use client"
-
 import React, { useState } from "react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 import Highlight, {
   defaultProps,
   Language,
@@ -10,7 +10,6 @@ import Prism from "prism-react-renderer/prism"
 
 // https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
 import CopyToClipboard from "@/components/CopyToClipboard"
-import Emoji from "@/components/Emoji"
 import { Flex } from "@/components/ui/flex"
 
 import { cn } from "@/lib/utils/cn"
@@ -304,16 +303,13 @@ const Codeblock = ({
                         <TopBarItem>
                           {!isCopied ? (
                             <>
-                              <Emoji text=":clipboard:" className="text-md" />{" "}
                               {t("copy")}
+                              <Clipboard className="mb-1 ms-1 inline-block size-[1em]" />
                             </>
                           ) : (
                             <>
-                              <Emoji
-                                text=":white_check_mark:"
-                                className="text-md"
-                              />{" "}
                               {t("copied")}
+                              <ClipboardCheck className="mb-1 ms-1 inline-block size-[1em]" />
                             </>
                           )}
                         </TopBarItem>

src/components/CopyToClipboard.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { CheckCircle, Copy } from "lucide-react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 
 import { cn } from "@/lib/utils/cn"
 
@@ -42,9 +42,9 @@ export const CopyButton = ({ message, ...props }: CopyButtonProps) => {
   return (
     <Button variant="ghost" onClick={() => onCopy(message)} {...props}>
       {hasCopied ? (
-        <CheckCircle className="size-5" />
+        <ClipboardCheck className="size-5" />
       ) : (
-        <Copy className="size-5" />
+        <Clipboard className="size-5" />
       )}
     </Button>
   )

src/components/EthPriceCard.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { Info } from "lucide-react"
+import { ArrowUpRight, Info } from "lucide-react"
 import { useLocale } from "next-intl"
 
 import type { LoadingState } from "@/lib/types"
@@ -37,7 +37,7 @@ const EthPriceCard = ({
   const [state, setState] = useState<LoadingState<EthPriceState>>({
     loading: true,
   })
-  const { isRtl } = useRtlFlip()
+  const { twFlipForRtl } = useRtlFlip()
 
   useEffect(() => {
     const fetchData = async () => {
@@ -117,9 +117,9 @@ const EthPriceCard = ({
       {...props}
     >
       <h4 className="m-0 flex items-center text-sm font-medium uppercase leading-xs tracking-wider">
-        {t("eth-current-price")}
+        {t("eth-current-price")}&nbsp;
         <Tooltip content={tooltipContent}>
-          <Info className="ms-2 size-[0.875em] text-sm" />
+          <Info className="size-[0.875em] text-sm" />
         </Tooltip>
       </h4>
 
@@ -140,18 +140,12 @@ const EthPriceCard = ({
             isNegativeChange ? "text-error" : "text-success"
           )}
         >
-          <span
-            className={cn(
-              isNegativeChange
-                ? "after:content-['↘']"
-                : "after:content-['↗']",
-              "after:inline-block",
-              /* Cannot string-interpolate 'after:', using isRtl instead */
-              isRtl ? "after:-scale-x-100" : ""
-            )}
-          >
-            {change}
-          </span>
+          {change}
+          {isNegativeChange ? (
+            <ArrowUpRight className={cn(twFlipForRtl, "inline-block")} />
+          ) : (
+            <ArrowUpRight className={cn(twFlipForRtl, "inline-block")} />
+          )}
         </div>
         <div className="text-sm uppercase leading-xs tracking-wider text-body-medium">
           ({t("last-24-hrs")})

src/components/Homepage/CodeExamples.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Suspense, useState } from "react"
-import { Check, Copy } from "lucide-react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 import { useLocale } from "next-intl"
 
 import type { CodeExample } from "@/lib/interfaces"
@@ -93,9 +93,11 @@ const CodeExamples = ({ title, codeExamples }: CodeExamplesProps) => {
                     </Codeblock>
                     <CopyToClipboard
                       text={code}
-                      className="absolute end-4 top-4"
+                      className="absolute end-2 top-2 rounded p-2 hover:bg-primary/10 hover:text-primary"
                     >
-                      {(hasCopied) => (hasCopied ? <Check /> : <Copy />)}
+                      {(hasCopied) =>
+                        hasCopied ? <ClipboardCheck /> : <Clipboard />
+                      }
                     </CopyToClipboard>
                   </div>
                 </Suspense>

src/components/Layer2NetworksTable/NetworksSubComponent.tsx

@@ -38,7 +38,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
             <div className="flex-1">
               <div>
                 <p className="text-xs font-bold text-body-medium">
-                  {t("page-layer-2-networks-age")}{" "}
+                  {t("page-layer-2-networks-age")}&nbsp;
                   <Tooltip
                     content={
                       <div className="flex flex-col gap-2">
@@ -84,7 +84,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
             <div className="flex-1">
               <div>
                 <p className="text-xs font-bold text-body-medium">
-                  {t("page-layer-2-networks-wallet-support")}{" "}
+                  {t("page-layer-2-networks-wallet-support")}&nbsp;
                   <Tooltip
                     content={
                       <div className="flex flex-col gap-2">
@@ -119,7 +119,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
             <div className="flex-1">
               <div>
                 <p className="text-xs font-bold text-body-medium">
-                  {t("page-layer-2-networks-active-address")}{" "}
+                  {t("page-layer-2-networks-active-address")}&nbsp;
                   <Tooltip
                     content={
                       <div className="flex flex-col gap-2">
@@ -157,7 +157,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
             <div className="flex-1">
               <div>
                 <p className="text-xs font-bold text-body-medium">
-                  {t("page-layer-2-networks-fee-token")}{" "}
+                  {t("page-layer-2-networks-fee-token")}&nbsp;
                   <Tooltip
                     content={
                       <div className="flex flex-col gap-2">
@@ -182,7 +182,7 @@ const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
         <div className="flex-1 gap-2">
           <div>
             <p className="text-xs font-bold text-body-medium">
-              {t("page-layer-2-networks-network-usage")}{" "}
+              {t("page-layer-2-networks-network-usage")}&nbsp;
               <Tooltip
                 content={
                   <div className="flex flex-col gap-2">

src/components/Leaderboard.tsx

@@ -1,7 +1,10 @@
+import { ExternalLink } from "lucide-react"
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
 
 import Emoji from "@/components/Emoji"
 
+import { cn } from "@/lib/utils/cn"
+
 import { GITHUB_URL } from "@/lib/constants"
 
 import { Avatar } from "./ui/avatar"
@@ -83,9 +86,7 @@ const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
                   </div>
                 </Flex>
                 {emoji && <Emoji className="me-8 text-2xl" text={emoji} />}
-                <span
-                  className={`after:me-1.5 after:ms-0.5 after:content-['↗'] after:${twFlipForRtl} after:inline-block`}
-                />
+                <ExternalLink className={cn("size-[1em]", twFlipForRtl)} />
               </LinkBox>
             </ListItem>
           )