From 9a2a0131863c8a345834c2724ed7769fdfbb4c50 Mon Sep 17 00:00:00 2001 From: Ben Goldberg Date: Thu, 14 Dec 2023 10:10:47 -0800 Subject: [PATCH 1/4] rm abbreviations --- src/screens/points/content/PointsContent.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/screens/points/content/PointsContent.tsx b/src/screens/points/content/PointsContent.tsx index 4cd654ccb88..3546341b18c 100644 --- a/src/screens/points/content/PointsContent.tsx +++ b/src/screens/points/content/PointsContent.tsx @@ -33,10 +33,7 @@ import { useRecoilState } from 'recoil'; import * as i18n from '@/languages'; import { usePoints } from '@/resources/points'; import { isNil } from 'lodash'; -import { - abbreviateNumber, - getFormattedTimeQuantity, -} from '@/helpers/utilities'; +import { getFormattedTimeQuantity } from '@/helpers/utilities'; import { address as formatAddress } from '@/utils/abbreviations'; import { delay } from '@/utils/delay'; import { Toast, ToastPositionContainer } from '@/components/toasts'; @@ -244,17 +241,10 @@ export default function PointsContent() { {}} title={i18n.t(i18n.l.points.points.your_rank)} - mainText={`#${ - rank >= 1_000_000 - ? abbreviateNumber(rank, 2) - : rank.toLocaleString('en-US') - }`} + mainText={`#${rank.toLocaleString('en-US')}`} icon="􀉬" subtitle={i18n.t(i18n.l.points.points.out_of_x, { - totalUsers: - totalUsers >= 1_000_000 - ? abbreviateNumber(totalUsers, 2) - : totalUsers.toLocaleString('en-US'), + totalUsers: totalUsers.toLocaleString('en-US'), })} accentColor={green} /> From 3ca3041d150f5589272459532e84a384ebe2c806 Mon Sep 17 00:00:00 2001 From: Ben Goldberg Date: Thu, 14 Dec 2023 10:36:55 -0800 Subject: [PATCH 2/4] dynamic font sizing for InfoCard mainText --- src/screens/points/components/InfoCard.tsx | 84 +++++++++++++--------- 1 file changed, 49 insertions(+), 35 deletions(-) diff --git a/src/screens/points/components/InfoCard.tsx b/src/screens/points/components/InfoCard.tsx index 5cf8da68af5..9d1630d8519 100644 --- a/src/screens/points/components/InfoCard.tsx +++ b/src/screens/points/components/InfoCard.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Box, Inline, Stack, Text } from '@/design-system'; +import { TextSize } from '@/design-system/components/Text/Text'; export const InfoCard = ({ // onPress, @@ -15,41 +16,54 @@ export const InfoCard = ({ mainText: string; icon: string; accentColor: string; -}) => ( - // - - - {/* */} - - {title} - - {/* +}) => { + let mainTextFontSize: TextSize; + if (mainText.length > 10) { + mainTextFontSize = '17pt'; + } else if (mainText.length > 9) { + mainTextFontSize = '20pt'; + } else { + mainTextFontSize = '22pt'; + } + + return ( + // + + + {/* */} + + {title} + + {/* 􀅵 */} - - {mainText} - - - - {icon} - - - {subtitle} - - - - - // -); + + + {mainText} + + + + + {icon} + + + {subtitle} + + + + + // + ); +}; From b417ff681423b000546cce7884d220e1c59502f8 Mon Sep 17 00:00:00 2001 From: Ben Goldberg Date: Thu, 14 Dec 2023 10:37:30 -0800 Subject: [PATCH 3/4] out of -> of --- src/languages/en_US.json | 2 +- src/screens/points/content/PointsContent.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/en_US.json b/src/languages/en_US.json index 3df17d634b5..d1c735978ba 100644 --- a/src/languages/en_US.json +++ b/src/languages/en_US.json @@ -1253,7 +1253,7 @@ "share_link": "Share Link", "next_drop": "Next Drop", "your_rank": "Your Rank", - "out_of_x": "Out of %{totalUsers}", + "of_x": "Of %{totalUsers}", "referrals": "Referrals", "streak": "Streak", "longest_yet": "Longest yet", diff --git a/src/screens/points/content/PointsContent.tsx b/src/screens/points/content/PointsContent.tsx index 3546341b18c..a36b79daff8 100644 --- a/src/screens/points/content/PointsContent.tsx +++ b/src/screens/points/content/PointsContent.tsx @@ -243,7 +243,7 @@ export default function PointsContent() { title={i18n.t(i18n.l.points.points.your_rank)} mainText={`#${rank.toLocaleString('en-US')}`} icon="􀉬" - subtitle={i18n.t(i18n.l.points.points.out_of_x, { + subtitle={i18n.t(i18n.l.points.points.of_x, { totalUsers: totalUsers.toLocaleString('en-US'), })} accentColor={green} From 9b5f7913ebb71caed13f3c3835dce8bb0c13838e Mon Sep 17 00:00:00 2001 From: Ben Goldberg Date: Thu, 14 Dec 2023 10:58:30 -0800 Subject: [PATCH 4/4] remove icon from rank card if total users >= 10m and is small phone --- src/screens/points/components/InfoCard.tsx | 20 +++++++++++--------- src/screens/points/content/PointsContent.tsx | 8 ++++++-- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/screens/points/components/InfoCard.tsx b/src/screens/points/components/InfoCard.tsx index 9d1630d8519..31a2e913a9c 100644 --- a/src/screens/points/components/InfoCard.tsx +++ b/src/screens/points/components/InfoCard.tsx @@ -14,7 +14,7 @@ export const InfoCard = ({ title: string; subtitle: string; mainText: string; - icon: string; + icon?: string; accentColor: string; }) => { let mainTextFontSize: TextSize; @@ -50,14 +50,16 @@ export const InfoCard = ({ - - {icon} - + {icon && ( + + {icon} + + )} {subtitle} diff --git a/src/screens/points/content/PointsContent.tsx b/src/screens/points/content/PointsContent.tsx index a36b79daff8..9e17f03f1d9 100644 --- a/src/screens/points/content/PointsContent.tsx +++ b/src/screens/points/content/PointsContent.tsx @@ -25,7 +25,7 @@ import MaskedView from '@react-native-masked-view/masked-view'; import BlurredRainbow from '@/assets/blurredRainbow.png'; import Planet from '@/assets/planet.png'; import LinearGradient from 'react-native-linear-gradient'; -import { safeAreaInsetValues } from '@/utils'; +import { deviceUtils, safeAreaInsetValues } from '@/utils'; import { ButtonPressAnimation } from '@/components/animations'; import { getHeaderHeight } from '@/navigation/SwipeNavigator'; import { addressCopiedToastAtom } from '@/recoil/addressCopiedToastAtom'; @@ -242,7 +242,11 @@ export default function PointsContent() { // onPress={() => {}} title={i18n.t(i18n.l.points.points.your_rank)} mainText={`#${rank.toLocaleString('en-US')}`} - icon="􀉬" + icon={ + totalUsers >= 10_000_000 && deviceUtils.isSmallPhone + ? undefined + : '􀉬' + } subtitle={i18n.t(i18n.l.points.points.of_x, { totalUsers: totalUsers.toLocaleString('en-US'), })}