Skip to content

Commit

Permalink
feat(earn-info): keep token icon and name on the same line (#6222)
Browse files Browse the repository at this point in the history
### Description

Slight layout adjustment to keep the token icon and name on the same
line.

| iOS | Android |
| ----- | ----- | 
|
![](https://github.com/user-attachments/assets/9c481c67-18b5-4eb2-9ce2-8a19b71e2366
"iOS") |
![](https://github.com/user-attachments/assets/39eacd18-69cc-461f-be69-bc5b5086d96e
"Android") |

### Test plan

- [x] Tested locally on iOS
- [x] Tested locally on Android

### Related issues

- Fixes ACT-1442

### Backwards compatibility

Yes
### Network scalability

N/A
  • Loading branch information
MuckT authored Nov 13, 2024
1 parent 053c81f commit ab5e17a
Showing 1 changed file with 17 additions and 6 deletions.
23 changes: 17 additions & 6 deletions src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,13 @@ function TitleSection({
}) {
return (
<View testID="TitleSection" onLayout={onLayout} style={styles.titleContainer}>
<TokenIcons tokensInfo={tokensInfo} />
<Text style={styles.title}>{title}</Text>
<View style={styles.titleTokenContainer}>
{/* View wrapper is needed to prevent TokenIcons from taking up the whole line */}
<View>
<TokenIcons tokensInfo={tokensInfo} />
</View>
<Text style={styles.title}>{title}</Text>
</View>
<View style={styles.subtitleContainer}>
<Text style={styles.subtitleLabel}>
<Trans i18nKey="earnFlow.poolInfoScreen.chainName" values={{ networkName }}>
Expand Down Expand Up @@ -212,7 +217,6 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) {
}, [allPositionsWithBalance])

const onPressWithdraw = () => {
// TODO(tomm): once act-1385 is merge use the bottom sheet button presses
AppAnalytics.track(EarnEvents.earn_pool_info_tap_withdraw, {
poolId: positionId,
providerId: appId,
Expand Down Expand Up @@ -266,8 +270,9 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) {
navigation,
title: <HeaderTitleSection earnPosition={pool} tokensInfo={tokensInfo} />,
scrollPosition,
startFadeInPosition: titleHeight - titleHeight * 0.33,
animationDistance: titleHeight * 0.33,
// Numbers selected through trial and error
startFadeInPosition: titleHeight * 0.1,
animationDistance: titleHeight * 0.66,
})

return (
Expand Down Expand Up @@ -522,7 +527,7 @@ const styles = StyleSheet.create({
flex: 1,
},
scrollContainer: {
padding: Spacing.Thick24,
paddingHorizontal: Spacing.Thick24,
...(Platform.OS === 'android' && {
minHeight: variables.height,
}),
Expand All @@ -542,6 +547,12 @@ const styles = StyleSheet.create({
titleContainer: {
gap: Spacing.Smallest8,
},
titleTokenContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
gap: Spacing.Smallest8,
},
subtitleContainer: {
flex: 1,
flexDirection: 'row',
Expand Down

0 comments on commit ab5e17a

Please sign in to comment.