Skip to content

Commit d7e771b

Browse files
musidlomusidlo
authored
UI changes in menu on desktop (#1389)
1 parent 1b27e26 commit d7e771b

File tree

6 files changed

+73
-79
lines changed

6 files changed

+73
-79
lines changed

‎packages/app/components/BottomTabBar/BottomNavBar.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,16 +76,16 @@ export const BottomNavBar = () => {
7676
key={tab.href}
7777
href={tab.href}
7878
chromeless
79-
backgroundColor={isActiveRoute ? hoverStyles.background : 'transparent'}
79+
backgroundColor={isActiveRoute ? hoverStyles.backgroundColor : 'transparent'}
8080
hoverStyle={{
81-
backgroundColor: isActiveRoute ? hoverStyles.background : 'transparent',
81+
backgroundColor: isActiveRoute ? hoverStyles.backgroundColor : 'transparent',
8282
}}
8383
pressStyle={{
84-
backgroundColor: isActiveRoute ? hoverStyles.background : 'transparent',
84+
backgroundColor: isActiveRoute ? hoverStyles.backgroundColor : 'transparent',
8585
borderColor: 'transparent',
8686
}}
8787
focusStyle={{
88-
backgroundColor: isActiveRoute ? hoverStyles.background : 'transparent',
88+
backgroundColor: isActiveRoute ? hoverStyles.backgroundColor : 'transparent',
8989
}}
9090
p={'$2'}
9191
br={'$3'}

‎packages/app/components/FormFields/CoinField.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const CoinField = ({
7575
scaleSpace={0.5}
7676
scaleIcon={1.5}
7777
padding={'$2'}
78-
bc={hoverStyles.background}
78+
bc={hoverStyles.backgroundColor}
7979
focusStyle={{
8080
bc: 'transparent',
8181
}}

‎packages/app/components/sidebar/HomeSideBar.tsx

Lines changed: 31 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { NavSheet } from '../NavSheet'
3030
import { useHoverStyles } from 'app/utils/useHoverStyles'
3131
import { useUser } from 'app/utils/useUser'
3232
import { ReferralLink } from '../ReferralLink'
33+
import { usePathname } from 'app/utils/usePathname'
3334

3435
const links = [
3536
{
@@ -64,74 +65,60 @@ const links = [
6465
const HomeSideBar = ({ ...props }: YStackProps) => {
6566
return (
6667
<SideBar {...props} ai={'flex-start'} px="$7">
67-
<Link href={'/'}>
68-
<IconSendLogo color={'$color12'} size={'$2.5'} />
69-
</Link>
70-
71-
<YStack gap={'$7'} pb={'$15'} jc={'space-between'}>
72-
{links.map((link) => (
73-
<SideBarNavLink key={link.href} {...link} />
74-
))}
68+
<YStack width={'100%'}>
69+
<Link href={'/'}>
70+
<IconSendLogo color={'$color12'} size={'$2.5'} />
71+
</Link>
72+
<YStack gap={'$2.5'} pt={'$12'} width={'100%'}>
73+
{links.map((link) => (
74+
<SideBarNavLink key={link.href} {...link} />
75+
))}
76+
</YStack>
7577
</YStack>
7678
<DesktopAccountMenuEntry />
7779
</SideBar>
7880
)
7981
}
8082

8183
const DesktopAccountMenuEntry = () => {
82-
const { profile, tags, isLoadingProfile, isLoadingTags } = useUser()
84+
const { profile, isLoadingProfile } = useUser()
8385
const hoverStyles = useHoverStyles()
84-
const tagToShow = tags?.filter((tag) => tag.status === 'confirmed')[0]
86+
const location = usePathname()
87+
const parts = location.split('/').filter(Boolean)
88+
const isActiveRoute =
89+
location === 'account' || parts.includes('account') || 'account'.startsWith(`/${parts[0]}`)
8590

8691
return (
8792
<LinkableButton
8893
href={'/account'}
8994
width={'100%'}
9095
jc={'flex-start'}
91-
px={'$4'}
96+
px={'$3.5'}
9297
py={'$2.5'}
9398
h={'auto'}
94-
br={'$6'}
95-
height={82}
96-
bc={'$color0'}
97-
backgroundColor={'$color0'}
98-
opacity={isLoadingProfile || isLoadingTags ? 0 : 1}
99+
br={'$4'}
100+
bw={0}
101+
backgroundColor={isActiveRoute ? hoverStyles.backgroundColor : 'transparent'}
102+
opacity={isLoadingProfile ? 0 : 1}
99103
animateOnly={['opacity']}
100104
animation="200ms"
101-
pressStyle={{
102-
backgroundColor: '$color0',
103-
borderColor: 'transparent',
104-
}}
105-
hoverStyle={{ backgroundColor: hoverStyles.background, borderColor: 'transparent' }}
106-
focusStyle={{
107-
backgroundColor: '$color0',
108-
}}
105+
hoverStyle={hoverStyles}
106+
pressStyle={hoverStyles}
107+
focusStyle={hoverStyles}
109108
>
110-
<Avatar circular={true} size={'$4.5'}>
109+
<Avatar circular={true} size={'$3.5'}>
111110
<Avatar.Image src={profile?.avatar_url ?? ''} w="100%" h="100%" objectFit="cover" />
112111
<Avatar.Fallback jc={'center'} ai="center" theme="green_active" bc="$color2">
113112
<IconAccount size={'$2'} $theme-light={{ color: '$color12' }} />
114113
</Avatar.Fallback>
115114
</Avatar>
116-
<YStack jc={'center'} f={1} testID={'account-menu-entry'}>
117-
<Paragraph size={'$7'} numberOfLines={1} f={1} textOverflow={'ellipsis'}>
118-
{profile?.name ?? `#${profile?.send_id}`}
119-
</Paragraph>
120-
{tagToShow && (
121-
<Paragraph
122-
bc={'$color1'}
123-
size={'$2'}
124-
maxWidth={'100%'}
125-
numberOfLines={1}
126-
px={'$2'}
127-
py={'$1.5'}
128-
textOverflow={'ellipsis'}
129-
br={'$2'}
130-
>
131-
{`/${tagToShow.name}`}
132-
</Paragraph>
133-
)}
134-
</YStack>
115+
<Paragraph
116+
size={'$6'}
117+
color={isActiveRoute ? '$color12' : '$lightGrayTextField'}
118+
$theme-light={{ color: isActiveRoute ? '$color12' : '$darkGrayTextField' }}
119+
>
120+
Account
121+
</Paragraph>
135122
</LinkableButton>
136123
)
137124
}

‎packages/app/components/sidebar/SideBarNavLink.tsx

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,49 @@
1-
import { Link, Theme, type LinkProps } from '@my/ui'
2-
import { usePathname } from 'app/utils/usePathname'
1+
import { Link, type LinkProps } from '@my/ui'
32
import type { ReactElement } from 'react'
3+
import { cloneElement, isValidElement } from 'react'
4+
import { usePathname } from 'app/utils/usePathname'
5+
import { useHoverStyles } from 'app/utils/useHoverStyles'
6+
import type { IconProps } from '@tamagui/helpers-icon'
47

58
export function SideBarNavLink({
69
icon,
710
text,
811
...props
9-
}: { icon?: ReactElement; text: string } & Omit<LinkProps, 'children'>): ReactElement {
12+
}: { icon?: ReactElement<IconProps>; text: string } & Omit<LinkProps, 'children'>): ReactElement {
1013
const location = usePathname()
1114
const parts = location.split('/').filter(Boolean)
1215
const isActiveRoute =
1316
location === props.href.toString() ||
1417
parts.includes(props.href.toString()) ||
1518
props.href.toString().startsWith(`/${parts[0]}`)
19+
const hoverStyles = useHoverStyles()
20+
21+
const renderedIcon =
22+
icon && isValidElement(icon)
23+
? cloneElement(icon, {
24+
color: isActiveRoute ? '$color12' : '$lightGrayTextField',
25+
'$theme-light': { color: isActiveRoute ? '$color12' : '$darkGrayTextField' },
26+
})
27+
: null
1628

1729
return (
18-
<Theme name={isActiveRoute ? 'green' : null}>
19-
<Link
20-
$theme-dark={{ color: isActiveRoute ? '$color9' : '$color10' }}
21-
$theme-light={{ color: isActiveRoute ? '$color12' : '$color10' }}
22-
hoverStyle={{
23-
position: 'relative',
24-
left: '2%',
25-
scale: '105%',
26-
color: '$color12',
27-
}}
28-
fontSize={'$8'}
29-
f={1}
30-
fontWeight={isActiveRoute ? '400' : '300'}
31-
gap="$3"
32-
display="flex"
33-
alignItems="center"
34-
{...props}
35-
href={props.disabled ? '' : props.href}
36-
>
37-
{icon}
38-
{text}
39-
</Link>
40-
</Theme>
30+
<Link
31+
fontSize={'$7'}
32+
gap="$3.5"
33+
display="flex"
34+
alignItems="center"
35+
px={'$3.5'}
36+
py={'$4'}
37+
br={'$4'}
38+
bc={isActiveRoute ? hoverStyles.backgroundColor : 'transparent'}
39+
hoverStyle={hoverStyles}
40+
color={isActiveRoute ? '$color12' : '$lightGrayTextField'}
41+
$theme-light={{ color: isActiveRoute ? '$color12' : '$darkGrayTextField' }}
42+
{...props}
43+
href={props.disabled ? '' : props.href}
44+
>
45+
{renderedIcon}
46+
{text}
47+
</Link>
4148
)
4249
}

‎packages/app/features/swap/form/screen.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -741,7 +741,7 @@ export const Slippage = ({
741741
p={'$2'}
742742
width={'$6'}
743743
br={'$4'}
744-
bc={slippageOption === slippage ? hoverStyles.background : '$color1'}
744+
bc={slippageOption === slippage ? hoverStyles.backgroundColor : '$color1'}
745745
>
746746
<Button.Text>{slippageOption / 100}%</Button.Text>
747747
</Button>
@@ -751,7 +751,7 @@ export const Slippage = ({
751751
testID={'customSlippageInput'}
752752
inputMode={'decimal'}
753753
bw={0}
754-
bc={hoverStyles.background}
754+
bc={hoverStyles.backgroundColor}
755755
textAlign={'center'}
756756
focusStyle={{ outlineWidth: 0 }}
757757
w={100}

‎packages/app/utils/useHoverStyles.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useThemeSetting } from '@tamagui/next-theme'
22

33
export const useHoverStyles = (): {
4-
background: `rgba(${string})`
4+
backgroundColor: `rgba(${string})`
55
transition: string
66
cursor: string
77
} => {
@@ -12,7 +12,7 @@ export const useHoverStyles = (): {
1212
: 'rgba(0,0,0, 0.1)'
1313

1414
return {
15-
background: rowHoverBC,
15+
backgroundColor: rowHoverBC,
1616
transition: 'background 0.2s ease-in-out',
1717
cursor: 'pointer',
1818
}

0 commit comments

Comments
 (0)