From 20a63d291588046fb2961cd56536b5e7b2ad6ea2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 15 Oct 2023 13:08:15 -0500
Subject: [PATCH] Force use of latn numberingSystem throughout the UI Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1580

---
 src/components/animated-number.tsx            | 13 +++++++++++--
 src/features/admin/components/dashcounter.tsx |  1 +
 src/utils/numbers.tsx                         |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/animated-number.tsx b/src/components/animated-number.tsx
index e7dd82462..86a2603da 100644
--- a/src/components/animated-number.tsx
+++ b/src/components/animated-number.tsx
@@ -38,7 +38,9 @@ const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate }) => {
   const willLeave = () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) });
 
   if (reduceMotion) {
-    return obfuscate ? <>{obfuscatedCount(displayedValue)}</> : <FormattedNumber value={displayedValue} />;
+    return obfuscate
+      ? <>{obfuscatedCount(displayedValue)}</>
+      : <FormattedNumber value={displayedValue} numberingSystem='latn' />;
   }
 
   const styles = [{
@@ -52,7 +54,14 @@ const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate }) => {
       {items => (
         <span className='relative inline-flex flex-col items-stretch overflow-hidden'>
           {items.map(({ key, data, style }) => (
-            <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <FormattedNumber value={data} />}</span>
+            <span
+              key={key}
+              style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}
+            >
+              {obfuscate
+                ? obfuscatedCount(data)
+                : <FormattedNumber value={data} numberingSystem='latn' />}
+            </span>
           ))}
         </span>
       )}
diff --git a/src/features/admin/components/dashcounter.tsx b/src/features/admin/components/dashcounter.tsx
index 9e1385b91..4006e1d2d 100644
--- a/src/features/admin/components/dashcounter.tsx
+++ b/src/features/admin/components/dashcounter.tsx
@@ -29,6 +29,7 @@ const DashCounter: React.FC<IDashCounter> = ({ count, label, to = '#', percent =
           value={count}
           style={percent ? 'unit' : undefined}
           unit={percent ? 'percent' : undefined}
+          numberingSystem='latn'
         />
       </Text>
       <Text align='center'>
diff --git a/src/utils/numbers.tsx b/src/utils/numbers.tsx
index 004d25603..4e3f0f371 100644
--- a/src/utils/numbers.tsx
+++ b/src/utils/numbers.tsx
@@ -44,6 +44,7 @@ export const shortNumberFormat = (number: any, max?: number): React.ReactNode =>
         maximumFractionDigits={0}
         minimumFractionDigits={0}
         maximumSignificantDigits={3}
+        numberingSystem='latn'
         style='decimal'
       />
       {factor}