Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(earn-cards): handle large font sizes #6308

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

fix(earn-cards): handle large font sizes #6308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
44eff03
feat: set default number of lines to undefined in label with info
MuckT Dec 5, 2024
3190c94
fix(earn-cards): handle large font sizes
MuckT Dec 5, 2024
6641bbe
fix(earn-cards): give title more space
MuckT Dec 5, 2024
0aa4ffa
fix(earn-cards): remove unused styles
MuckT Dec 5, 2024
3b2fca2
fix(earn-cards): use flex to space columns
MuckT Dec 5, 2024
a9c1b76
Merge branch 'main' into tomm/earn-layout-large-fonts
MuckT Dec 6, 2024
2aaf470
Merge branch 'main' into tomm/earn-layout-large-fonts
MuckT Dec 9, 2024
fd54594
style(earn-cards): pr feedback
MuckT Dec 9, 2024
97010ed
Merge branch 'main' into tomm/earn-layout-large-fonts
MuckT Dec 9, 2024
d695764
Merge branch 'main' into tomm/earn-layout-large-fonts
MuckT Dec 11, 2024
3a367bf
Merge branch 'main' into tomm/earn-layout-large-fonts
MuckT Dec 13, 2024
e4f7b69
Merge branch 'main' into tomm/earn-layout-large-fonts
MuckT Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/LabelWithInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ export function LabelWithInfo({
iconSize = 16,
testID,
style,
numberOfLines,
}: {
label: string
onPress?: () => void
labelStyle?: StyleProp<TextStyle>
iconSize?: number
numberOfLines?: number | undefined
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if it's better to have 1 or undefined as the default

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I tried to set the default to 1 I ran into an issue where setting it to undefined wasn't overriding the default value. I can try setting the default to undefined and see how that works.

testID?: string
style?: StyleProp<ViewStyle>
}) {
Expand All @@ -30,7 +32,7 @@ export function LabelWithInfo({
disabled={!onPress}
>
<>
<Text style={[styles.labelText, labelStyle]} numberOfLines={1}>
<Text style={[styles.labelText, labelStyle]} numberOfLines={numberOfLines}>
{label}
</Text>
{onPress && <InfoIcon size={iconSize} color={Colors.gray3} />}
Expand Down
5 changes: 4 additions & 1 deletion src/earn/EarnEnterAmount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -574,6 +574,7 @@ function TransactionWithdrawDetails({
feeDetailsBottomSheetRef?.current?.snapToIndex(0)
}}
testID="LabelWithInfo/FeeLabel"
numberOfLines={1}
/>
<View style={styles.txDetailsValue}>
<TokenDisplay
Expand Down Expand Up @@ -629,6 +630,7 @@ function TransactionDepositDetails({
swapDetailsBottomSheetRef?.current?.snapToIndex(0)
}}
testID="LabelWithInfo/SwapLabel"
numberOfLines={1}
/>
<View style={styles.txDetailsValue}>
<TokenDisplay
Expand All @@ -650,7 +652,7 @@ function TransactionDepositDetails({
</View>
)}
<View style={styles.txDetailsLineItem}>
<LabelWithInfo label={t('earnFlow.enterAmount.deposit')} />
<LabelWithInfo label={t('earnFlow.enterAmount.deposit')} numberOfLines={1} />
<View style={styles.txDetailsValue}>
<TokenDisplay
tokenId={pool.dataProps.depositTokenId}
Expand Down Expand Up @@ -678,6 +680,7 @@ function TransactionDepositDetails({
feeDetailsBottomSheetRef?.current?.snapToIndex(0)
}}
testID="LabelWithInfo/FeeLabel"
numberOfLines={1}
/>
<View style={styles.txDetailsValue}>
<TokenDisplay
Expand Down
99 changes: 55 additions & 44 deletions src/earn/poolInfoScreen/Cards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,21 +32,19 @@ function EarningItemLineItem({ earnItem }: { earnItem: EarningItem }) {

return (
<View testID="EarningItemLineItem" style={styles.cardLineContainer}>
<View style={styles.cardLineLabel}>
<View style={styles.flexLabel}>
<Text numberOfLines={1} style={styles.depositAndEarningsCardLabelText}>
{earnItem.label}
</Text>
</View>
<View style={styles.flexShrink}>
<Text style={styles.depositAndEarningsCardValueText}>
{t('earnFlow.poolInfoScreen.lineItemAmountDisplay', {
localCurrencySymbol,
localCurrencyAmount: formatValueToDisplay(amountInLocalCurrency),
cryptoAmount: formatValueToDisplay(new BigNumber(earnItem.amount)),
cryptoSymbol: tokenInfo?.symbol,
})}
</Text>
</View>
<Text style={styles.depositAndEarningsCardValueText}>
{t('earnFlow.poolInfoScreen.lineItemAmountDisplay', {
localCurrencySymbol,
localCurrencyAmount: formatValueToDisplay(amountInLocalCurrency),
cryptoAmount: formatValueToDisplay(new BigNumber(earnItem.amount)),
cryptoSymbol: tokenInfo?.symbol,
})}
</Text>
</View>
)
}
Expand Down Expand Up @@ -126,6 +124,7 @@ export function DepositAndEarningsCard({
label={t('earnFlow.poolInfoScreen.totalDepositAndEarnings')}
labelStyle={styles.cardTitleText}
testID={'DepositInfoIcon'}
numberOfLines={1}
/>
<View>
<Text style={styles.depositAndEarningCardTitleText}>
Expand All @@ -139,7 +138,7 @@ export function DepositAndEarningsCard({

<View style={styles.depositAndEarningCardSubtitleContainer}>
<View style={styles.cardLineContainer}>
<View style={styles.cardLineLabel}>
<View style={styles.flexLabel}>
{cantSeparateCompoundedInterest ? (
<Text style={styles.depositAndEarningsCardLabelText}>
{t('earnFlow.poolInfoScreen.depositAndEarnings')}
Expand All @@ -150,16 +149,14 @@ export function DepositAndEarningsCard({
</Text>
)}
</View>
<View style={styles.flexShrink}>
<Text style={styles.depositAndEarningsCardValueText}>
{t('earnFlow.poolInfoScreen.lineItemAmountDisplay', {
localCurrencySymbol,
localCurrencyAmount: formatValueToDisplay(totalDepositBalanceInLocalCurrency),
cryptoAmount: formatValueToDisplay(totalDepositBalanceInCrypto),
cryptoSymbol: depositTokenInfo?.symbol,
})}
</Text>
</View>
<Text style={styles.depositAndEarningsCardValueText}>
{t('earnFlow.poolInfoScreen.lineItemAmountDisplay', {
localCurrencySymbol,
localCurrencyAmount: formatValueToDisplay(totalDepositBalanceInLocalCurrency),
cryptoAmount: formatValueToDisplay(totalDepositBalanceInCrypto),
cryptoSymbol: depositTokenInfo?.symbol,
})}
</Text>
</View>
{earningItems.map((item, index) => (
<EarningItemLineItem key={index} earnItem={item} />
Expand All @@ -186,15 +183,15 @@ export function YieldCard({
return (
<View style={styles.card} testID="YieldCard">
<View style={styles.cardLineContainer}>
<View style={styles.cardLineLabel}>
<View style={styles.flexLabel}>
<LabelWithInfo
onPress={onInfoIconPress}
label={t('earnFlow.poolInfoScreen.yieldRate')}
labelStyle={styles.cardTitleText}
labelStyle={styles.lineLabel}
testID="YieldRateInfoIcon"
/>
</View>
<Text style={styles.cardTitleText}>
<Text style={styles.lineValue}>
{yieldRateSum > 0.00005
? t('earnFlow.poolInfoScreen.ratePercent', { rate: yieldRateSum.toFixed(2) })
: '--'}
Expand All @@ -206,19 +203,17 @@ export function YieldCard({
const tokenInfo = tokensInfo.filter((token) => token.tokenId === rate.tokenId)
return (
<View style={styles.cardLineContainer} key={index}>
<View style={styles.cardLineLabel}>
<View style={styles.flexLabel}>
<View style={styles.yieldRateLabelContainer}>
<Text numberOfLines={1} style={styles.cardLabelText}>
{rate.label}
</Text>
<Text style={styles.cardLabelText}>{rate.label}</Text>
<TokenIcons
tokensInfo={tokenInfo}
size={IconSize.XXSMALL}
showNetworkIcon={false}
/>
</View>
</View>
<Text style={styles.cardLabelText}>
<Text style={styles.cardValueText}>
{t('earnFlow.poolInfoScreen.ratePercent', { rate: rate.percentage.toFixed(2) })}
</Text>
</View>
Expand All @@ -240,15 +235,15 @@ export function DailyYieldRateCard({
return (
<View style={styles.card} testID="DailyYieldRateCard">
<View style={styles.cardLineContainer}>
<View style={styles.cardLineLabel}>
<View style={styles.flexLabel}>
<LabelWithInfo
onPress={onInfoIconPress}
label={t('earnFlow.poolInfoScreen.dailyYieldRate')}
labelStyle={styles.cardTitleText}
labelStyle={styles.lineLabel}
testID="DailyYieldRateInfoIcon"
/>
</View>
<Text style={styles.cardTitleText}>
<Text style={styles.lineValue}>
{t('earnFlow.poolInfoScreen.ratePercent', { rate: dailyYieldRate.toFixed(4) })}
</Text>
</View>
Expand All @@ -274,15 +269,15 @@ export function TvlCard({
return (
<View style={styles.card} testID="TvlCard">
<View style={styles.cardLineContainer}>
<View style={styles.cardLineLabel}>
<View style={styles.flexLabel}>
<LabelWithInfo
onPress={onInfoIconPress}
label={t('earnFlow.poolInfoScreen.tvl')}
labelStyle={styles.cardTitleText}
labelStyle={styles.lineLabel}
testID="TvlInfoIcon"
/>
</View>
<Text style={styles.cardTitleText}>{tvlString}</Text>
<Text style={styles.lineValue}>{tvlString}</Text>
</View>
</View>
)
Expand All @@ -304,23 +299,23 @@ export function AgeCard({
return (
<View style={styles.card} testID="AgeCard">
<View style={styles.cardLineContainer}>
<View style={styles.cardLineLabel}>
<View style={styles.flexLabel}>
<LabelWithInfo
onPress={onInfoIconPress}
label={t('earnFlow.poolInfoScreen.ageOfPool')}
labelStyle={styles.cardTitleText}
labelStyle={styles.lineLabel}
testID="AgeInfoIcon"
/>
</View>
<Text style={styles.cardTitleText}>{formattedDuration(dateInterval)}</Text>
<Text style={styles.lineValue}>{formattedDuration(dateInterval)}</Text>
</View>
</View>
)
}

export const styles = StyleSheet.create({
flexShrink: {
flexShrink: 1,
flexLabel: {
flex: 1.2,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the non-standard flex value here? Is this to make up for the lack of the paddingRight that we used to have?

Copy link
Collaborator Author

@MuckT MuckT Dec 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just for spacing, as having the columns of flex 1 and 1 values appear a bit cramped and gives a bit too much room to the labels; it is the same as flex: 6 to 5, with an 11 column 11-column layout.

},
card: {
padding: Spacing.Regular16,
Expand All @@ -334,20 +329,35 @@ export const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'space-between',
},
cardLineLabel: {
paddingRight: 20, // Prevents Icon from being cut off on long labels
},
yieldRateLabelContainer: {
flexDirection: 'row',
gap: Spacing.Tiny4,
},
lineLabel: {
...typeScale.labelSemiBoldMedium,
color: Colors.black,
textAlign: 'left',
},
lineValue: {
...typeScale.labelSemiBoldMedium,
color: Colors.black,
textAlign: 'right',
flex: 1,
},
cardTitleText: {
...typeScale.labelSemiBoldMedium,
color: Colors.black,
},
cardLabelText: {
...typeScale.bodyMedium,
color: Colors.gray3,
textAlign: 'left',
},
cardValueText: {
...typeScale.bodyMedium,
color: Colors.black,
textAlign: 'right',
flex: 1,
},
depositAndEarningCard: {
backgroundColor: Colors.gray1,
Expand Down Expand Up @@ -381,5 +391,6 @@ export const styles = StyleSheet.create({
color: Colors.black,
flexWrap: 'wrap',
textAlign: 'right',
flex: 1,
},
})
7 changes: 4 additions & 3 deletions src/earn/poolInfoScreen/SafetyCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,17 @@ export function SafetyCard({
const [expanded, setExpanded] = React.useState(false)
return (
<View style={cardStyles.card} testID="SafetyCard">
<View style={cardStyles.cardLineContainer}>
<View style={cardStyles.cardLineLabel}>
<View style={[cardStyles.cardLineContainer, { alignItems: 'center' }]}>
<View style={{ flex: 4 }}>
<LabelWithInfo
onPress={onInfoIconPress}
label={t('earnFlow.poolInfoScreen.safetyScore')}
labelStyle={cardStyles.cardTitleText}
testID="SafetyCardInfoIcon"
numberOfLines={1}
/>
</View>
<View style={styles.tripleBarContainer}>
<View style={[styles.tripleBarContainer, { flex: 1 }]}>
{BAR_HEIGHTS.map((height, index) => (
<View
testID="SafetyCard/Bar"
Expand Down
1 change: 1 addition & 0 deletions src/send/EnterAmount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,7 @@ export default function EnterAmount({
labelStyle={{ color: Colors.gray3 }}
testID="SendEnterAmount/FeeLabel"
style={styles.feeLabelContainer}
numberOfLines={1}
/>
<View testID="SendEnterAmount/FeeInCrypto" style={styles.feeInCryptoContainer}>
<TokenDisplay
Expand Down
Loading