Skip to content

Commit 195c7fd

Browse files
Style sizing tweaks
1 parent 2fa216b commit 195c7fd

File tree

4 files changed

+25
-37
lines changed

4 files changed

+25
-37
lines changed

packages/app/components/TopNav.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export function TopNav({
105105
switch (true) {
106106
case media.gtLg && isSubRoute:
107107
return (
108-
<H2 fontWeight={'300'} col="$color10" lineHeight={32} als={'center'}>
108+
<H2 fontWeight={'500'} col="$color12" lineHeight={32} als={'center'}>
109109
{header}
110110
</H2>
111111
)
@@ -123,7 +123,7 @@ export function TopNav({
123123
/>
124124
</ButtonOg.Icon>
125125
</Button>
126-
<Paragraph size={'$8'} col={'$color10'}>
126+
<Paragraph size={'$8'} col={'$color12'} fontWeight={'500'}>
127127
{(() => {
128128
switch (queryParams.token) {
129129
case 'investments':
@@ -147,7 +147,7 @@ export function TopNav({
147147
</Link>
148148
</XStack>
149149
) : (
150-
<H2 fontWeight={'300'} col="$color10" lineHeight={32} als={'center'}>
150+
<H2 fontWeight={'500'} col="$color12" lineHeight={32} als={'center'}>
151151
{header}
152152
</H2>
153153
)}
@@ -197,7 +197,7 @@ export function TopNav({
197197
/>
198198
</ButtonOg.Icon>
199199
</Button>
200-
<Paragraph size={'$8'} col={'$color10'}>
200+
<Paragraph size={'$8'} col={'$color12'} fontWeight={'500'}>
201201
{header}
202202
</Paragraph>
203203
</XStack>
@@ -215,7 +215,7 @@ export function TopNav({
215215
py="$3"
216216
$gtSm={{ py: '$6' }}
217217
$gtLg={{ pl: '$1', pb: '$6', pt: '$0' }}
218-
col="$color10"
218+
col="$color12"
219219
>
220220
{subheader}
221221
</Paragraph>

packages/app/features/deposit/screen.tsx

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Paragraph, YStack } from '@my/ui'
1+
import { YStack } from '@my/ui'
22
import { DepositOptionButton } from './components/DepositOptionButton'
33
import { IconApple, IconDebitCard, IconWallet } from 'app/components/icons'
44

@@ -13,18 +13,6 @@ export function DepositScreen() {
1313
pb: '$3.5',
1414
}}
1515
>
16-
<YStack gap={'$2'}>
17-
<Paragraph size={'$9'} fontWeight={500}>
18-
Deposit Funds
19-
</Paragraph>
20-
<Paragraph
21-
fontSize={'$5'}
22-
color={'$lightGrayTextField'}
23-
$theme-light={{ color: '$darkGrayTextField' }}
24-
>
25-
Select a deposit method
26-
</Paragraph>
27-
</YStack>
2816
<YStack
2917
width="100%"
3018
gap="$3.5"

packages/app/features/home/StablesBalanceCard.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,9 @@ const StablesBalanceCardFooter = () => {
107107
)
108108
}
109109
})()}
110-
<XStack gap="$3" w="100%">
110+
<XStack gap="$2.5" w="100%">
111111
<LinkableButton
112112
href="/deposit"
113-
gap="$0.5"
114113
jc="center"
115114
ai="center"
116115
f={1}
@@ -119,16 +118,17 @@ const StablesBalanceCardFooter = () => {
119118
hoverStyle={hoverStyles}
120119
bc={isDarkTheme ? 'rgba(255, 255, 255, 0.10)' : 'rgba(0, 0, 0, 0.10)'}
121120
>
122-
<LinkableButton.Icon>
123-
<IconPlus size="$1" color={isDarkTheme ? '$primary' : '$color12'} />
124-
</LinkableButton.Icon>
125-
<LinkableButton.Text size={'$5'}>Add Money</LinkableButton.Text>
121+
<XStack gap="$1.5" ai="center">
122+
<LinkableButton.Icon>
123+
<IconPlus size="$1" color={isDarkTheme ? '$primary' : '$color12'} />
124+
</LinkableButton.Icon>
125+
<LinkableButton.Text size={'$5'}>Add Money</LinkableButton.Text>
126+
</XStack>
126127
<BlurStack fullscreen intensity={10} zIndex={-1} br={'$3'} />
127128
</LinkableButton>
128129
{shouldShowSendButton && (
129130
<LinkableButton
130131
href={`/send?sendToken=${queryParams.token ?? ''}`}
131-
gap="$0.5"
132132
jc="center"
133133
ai="center"
134134
f={1}
@@ -137,10 +137,12 @@ const StablesBalanceCardFooter = () => {
137137
hoverStyle={hoverStyles}
138138
bc={isDarkTheme ? 'rgba(255, 255, 255, 0.10)' : 'rgba(0, 0, 0, 0.10)'}
139139
>
140-
<LinkableButton.Icon>
141-
<IconArrowUp size={'$1'} color={isDarkTheme ? '$primary' : '$color12'} />
142-
</LinkableButton.Icon>
143-
<LinkableButton.Text size={'$5'}>Send</LinkableButton.Text>
140+
<XStack gap="$1.5" ai="center">
141+
<LinkableButton.Icon>
142+
<IconArrowUp size={'$1'} color={isDarkTheme ? '$primary' : '$color12'} />
143+
</LinkableButton.Icon>
144+
<LinkableButton.Text size={'$5'}>Send</LinkableButton.Text>
145+
</XStack>
144146
<BlurStack fullscreen intensity={10} zIndex={-1} br={'$3'} />
145147
</LinkableButton>
146148
)}

packages/app/features/send/components/SendTopNav.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
XStack,
1010
type ButtonProps,
1111
} from '@my/ui'
12-
import { IconArrowLeft } from 'app/components/icons'
12+
import { IconArrowLeft, IconSendLogo } from 'app/components/icons'
1313
import { useSendScreenParams } from 'app/routers/params'
1414
import { usePathname } from 'app/utils/usePathname'
1515
import { useRouter } from 'solito/router'
@@ -31,7 +31,7 @@ export function SendTopNav() {
3131
const isOnSelectRecipient = !(path.includes('/confirm') || sendParams.recipient)
3232

3333
return (
34-
<Header w="100%" $lg={{ py: '$3' }}>
34+
<Header w="100%" $lg={{ py: '$3.5' }}>
3535
<Container
3636
$gtLg={{ jc: 'flex-start', pb: '$2', ai: 'flex-start' }}
3737
ai="center"
@@ -51,15 +51,15 @@ export function SendTopNav() {
5151
</ButtonOg.Icon>
5252
</Button>
5353
)}
54-
<Paragraph size={isOnSelectRecipient ? '$9' : '$8'} col={'$color10'}>
54+
<Paragraph fontWeight={'500'} size={isOnSelectRecipient ? '$9' : '$8'} col={'$color12'}>
5555
{(() => {
5656
switch (true) {
5757
case path.includes('/confirm'):
5858
return 'Preview and Send'
5959
case Boolean(sendParams.recipient):
6060
return 'Enter Amount'
6161
default:
62-
return 'Send'
62+
return <IconSendLogo size={'$2.5'} color={'$color12'} />
6363
}
6464
})()}
6565
</Paragraph>
@@ -71,14 +71,12 @@ export function SendTopNav() {
7171
</XStack>
7272
<Stack $lg={{ display: 'none' }} jc="center">
7373
<H2
74-
fontWeight={'300'}
75-
$theme-light={{ col: '$gray10Light' }}
76-
$theme-dark={{ col: '$gray8Light' }}
74+
fontWeight={'500'}
75+
col="$color12"
7776
lineHeight={32}
7877
display={'flex'}
7978
$lg={{ als: 'flex-end' }}
8079
>
81-
{' '}
8280
{(() => {
8381
switch (true) {
8482
case path.includes('/confirm'):

0 commit comments

Comments
 (0)