diff --git a/packages/app/features/account/__snapshots__/screen.test.tsx.snap b/packages/app/features/account/__snapshots__/screen.test.tsx.snap index 0de56944a..fdfd467a9 100644 --- a/packages/app/features/account/__snapshots__/screen.test.tsx.snap +++ b/packages/app/features/account/__snapshots__/screen.test.tsx.snap @@ -5,118 +5,140 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = ` style={ { "alignItems": "center", + "bottom": 0, + "flex": 1, "flexDirection": "column", "gap": 24, - "paddingBottom": 24, - "paddingTop": 13, - "width": "100%", + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, } } > + - - - + suppressHighlighting={true} + > + Settings + - - - - - NO NAME - + + Share + + + + + + + + + + + @@ -269,172 +384,84 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = ` style={ { "flexDirection": "column", + "position": "relative", } } > - - Send ID: - - - - - + + - / - test - - - - - - - - Settings - + + + + + NO NAME + + + + + - Share + Send ID: - - + + + - - - + } + suppressHighlighting={true} + > + / + test + - - @@ -695,232 +736,138 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 16, + "justifyContent": "space-between", } } > - - - - - - - + + + + mask="a" + > + + - - - - Sendtags - - - - - + - - - - - - - + suppressHighlighting={true} + > + Sendtags + + - - Rewards - - - - - - - - @@ -1090,336 +950,200 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 16, + "justifyContent": "space-between", } } > - - - + - - - + + + + - Leaderboard - - - - + Rewards + + + - - - - - - - - - Referrals - - - 10 - + strokeWidth="2" + > + + + + - - Referral Code - - - SEND.APP/ - - + + Leaderboard + + + + + + + + + + + + + Referrals + + + 10 + + + + + Referral Code + + + + + SEND.APP/ + + + + + + + + diff --git a/packages/app/features/account/screen.tsx b/packages/app/features/account/screen.tsx index 948bcb386..38a423dbe 100644 --- a/packages/app/features/account/screen.tsx +++ b/packages/app/features/account/screen.tsx @@ -11,6 +11,9 @@ import { Heading, LinkableButton, LinearGradient, + Stack, + Card, + Square, } from '@my/ui' import { IconAccount, @@ -114,79 +117,25 @@ export function AccountScreen() { ] return ( - - - - - - - - - - - - - - {name ? name.toUpperCase() : '---'} - - - - - - - - Send ID: - - {send_id} - - - {tags?.map((tag) => ( - {tag.name} - ))} - - - - + + + + {/* Add this Stack for flex */} + + + - + - - - - - - - - {links.map((linkProps) => ( - - ))} - - - - - Referrals - - + - - Referral Code - - {'Copy'}}> - - + {tags?.map((tag) => ( + {tag.name} + ))} + + + + + + + {links.map((linkProps) => ( + + ))} + + + + Referrals + + + {referralsCount ?? 0} + + + Referral Code + + {'Copy'}}> + + + + - + ) }