update: upper-right/external arrows

Author: wackerow

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/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/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 () => {
@@ -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/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>
           )

src/components/StablecoinsTable.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Suspense, useState } from "react"
-import { Filter } from "lucide-react"
+import { ExternalLink, Filter } from "lucide-react"
 
 import type { StablecoinType } from "@/lib/types"
 
@@ -188,7 +188,7 @@ const StablecoinsTable = ({ content, hasError }: StablecoinsTableProps) => {
             ({activeTypeCount})
           </span>
         )}
-        <Filter className="text-xl" />
+        <Filter className="size-[1em]" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         {typeFilters.map((filter) => (
@@ -240,7 +240,7 @@ const StablecoinsTable = ({ content, hasError }: StablecoinsTableProps) => {
         {activePegCount !== totalPegCount && (
           <span className="text-xs text-body-medium">({activePegCount})</span>
         )}
-        <Filter className="text-xl" />
+        <Filter className="size-[1em]" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         {pegFilters.map((filter) => (
@@ -298,8 +298,10 @@ const StablecoinsTable = ({ content, hasError }: StablecoinsTableProps) => {
                 <TableHead key={idx}>{column}</TableHead>
               ))}
               {content && content[0]?.url && (
-                <TableHead className="text-right font-normal">
-                  <span className={cn("inline-block", twFlipForRtl)}>↗</span>
+                <TableHead className="text-end font-normal">
+                  <ExternalLink
+                    className={cn("inline-block size-[1.125em]", twFlipForRtl)}
+                  />
                 </TableHead>
               )}
             </TableRow>