Skip to content

Commit d0c7dfd

Browse files
aforalekaaforaleka
committed
design nits
1 parent bfeeb55 commit d0c7dfd

File tree

2 files changed

+52
-59
lines changed

2 files changed

+52
-59
lines changed

‎src/components/NavigationMenu.tsx

Lines changed: 14 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,6 @@ const NavItem = forwardRef(
101101
}
102102
);
103103

104-
type TriggerRef = HTMLAnchorElement | HTMLDivElement | HTMLButtonElement | null;
105-
106104
export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue extends string>({
107105
onSelectItem,
108106
onSelectGroup,
@@ -113,33 +111,6 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
113111
dir = 'ltr',
114112
className,
115113
}: ElementProps<MenuItemValue, MenuGroupValue> & StyleProps) => {
116-
// Disable click (close) in the first 500ms after hover (open)
117-
// https://github.com/radix-ui/primitives/issues/1630#issuecomment-1545995075
118-
const [clickIsDisabled, setClickIsDisabled] = useState(false);
119-
const triggerRefs = useRef({} as { [value: string]: TriggerRef });
120-
121-
useEffect(() => {
122-
const observer = new MutationObserver((mutationsList) => {
123-
for (const mutation of mutationsList) {
124-
if (
125-
mutation.type === 'attributes' &&
126-
mutation.attributeName === 'data-state' &&
127-
(mutation.target as unknown as HTMLOrSVGElement).dataset.state === 'open' &&
128-
mutation.target !== document.activeElement
129-
) {
130-
setClickIsDisabled(true);
131-
setTimeout(() => setClickIsDisabled(false), 500);
132-
}
133-
}
134-
});
135-
136-
for (const element of Object.values(triggerRefs.current).filter(isTruthy)) {
137-
observer.observe(element, { attributes: true });
138-
}
139-
140-
return () => observer.disconnect();
141-
}, []);
142-
143114
const renderSubitems = ({
144115
item,
145116
depth = 0,
@@ -149,18 +120,18 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
149120
}) => (
150121
<>
151122
<Styled.SubMenuTrigger
152-
asChild={depth > 0}
153-
ref={(ref: TriggerRef) => (triggerRefs.current[item.value] = ref)}
154-
onClick={(e: MouseEvent) => {
155-
if (clickIsDisabled) {
156-
e.preventDefault();
157-
}
158-
}}
123+
asChild
124+
onPointerMove={(e: MouseEvent) => e.preventDefault()}
125+
onPointerLeave={(e: MouseEvent) => e.preventDefault()}
159126
>
160127
<Styled.NavItem onSelect={onSelectGroup} orientation={itemOrientation} {...item} />
161128
</Styled.SubMenuTrigger>
162129

163-
<Styled.Content data-placement={submenuPlacement}>
130+
<Styled.Content
131+
onPointerEnter={(e: MouseEvent) => e.preventDefault()}
132+
onPointerLeave={(e: MouseEvent) => e.preventDefault()}
133+
data-placement={submenuPlacement}
134+
>
164135
<Styled.Sub data-placement={submenuPlacement}>
165136
<Styled.List
166137
data-orientation={depth > 0 ? 'menu' : orientation === 'vertical' ? 'vertical' : 'menu'}
@@ -417,11 +388,6 @@ Styled.SubMenuTrigger = styled(Trigger)`
417388
outline-offset: -2px;
418389
419390
&[data-state='open'] {
420-
div {
421-
background-color: var(--navigationMenu-item-checked-backgroundColor);
422-
color: var(--navigationMenu-item-checked-textColor);
423-
}
424-
425391
svg {
426392
rotate: 0.5turn;
427393
}
@@ -433,11 +399,10 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
433399
subitems?.length
434400
? css`
435401
${popoverMixins.trigger}
436-
--trigger-backgroundColor: transparent;
437-
--trigger-open-backgroundColor: var(--color-layer-3);
402+
--trigger-open-backgroundColor: var(--navigationMenu-item-checked-backgroundColor);
438403
`
439404
: css`
440-
&:hover:not(.active) {
405+
&:hover:not(:active) {
441406
background-color: var(--navigationMenu-item-highlighted-backgroundColor);
442407
color: var(--navigationMenu-item-highlighted-textColor);
443408
}
@@ -451,8 +416,6 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
451416
--item-radius: var(--navigationMenu-item-radius);
452417
--item-padding: var(--navigationMenu-item-padding);
453418
454-
/* ${popoverMixins.backdropOverlay} */
455-
456419
${layoutMixins.scrollSnapItem}
457420
458421
min-height: var(--navigationMenu-item-height);
@@ -467,7 +430,7 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
467430
justify-items: center;
468431
align-content: center;
469432
`,
470-
})[orientation]}
433+
}[orientation])}
471434
gap: 0.7rem 0.5rem;
472435
473436
> span {
@@ -506,6 +469,9 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
506469
`;
507470

508471
Styled.Icon = styled(Icon)`
472+
font-size: 0.375em;
473+
transition: rotate 0.3s var(--ease-out-expo);
474+
509475
${Styled.List}[data-orientation="menu"] & {
510476
rotate: -0.25turn;
511477
}

‎src/views/menus/AccountMenu.tsx

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { OnboardingState } from '@/constants/account';
66
import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
77

88
import { DialogTypes } from '@/constants/dialogs';
9-
import { STRING_KEYS } from '@/constants/localization';
10-
import { wallets, WalletType } from '@/constants/wallets';
9+
import { STRING_KEYS, TOOLTIP_STRING_KEYS } from '@/constants/localization';
10+
import { wallets } from '@/constants/wallets';
1111

1212
import { layoutMixins } from '@/styles/layoutMixins';
1313
import { headerMixins } from '@/styles/headerMixins';
@@ -29,6 +29,7 @@ import { getOnboardingState } from '@/state/accountSelectors';
2929

3030
import { isTruthy } from '@/lib/isTruthy';
3131
import { truncateAddress } from '@/lib/wallet';
32+
import { WithTooltip } from '@/components/WithTooltip';
3233

3334
export const AccountMenu = () => {
3435
const stringGetter = useStringGetter();
@@ -53,13 +54,29 @@ export const AccountMenu = () => {
5354
<Styled.AddressRow>
5455
<AssetIcon symbol="DYDX" />
5556
<Styled.Column>
56-
<Styled.Label>{stringGetter({ key: STRING_KEYS.DYDX_CHAIN_ADDRESS })}</Styled.Label>
57+
<WithTooltip
58+
slotTooltip={
59+
<dl>
60+
<dt>
61+
{stringGetter({
62+
key: TOOLTIP_STRING_KEYS.DYDX_ADDRESS_BODY,
63+
params: {
64+
DYDX_ADDRESS: <strong>{truncateAddress(dydxAddress)}</strong>,
65+
EVM_ADDRESS: truncateAddress(evmAddress, '0x'),
66+
},
67+
})}
68+
</dt>
69+
</dl>
70+
}
71+
>
72+
<Styled.Label>
73+
{stringGetter({ key: STRING_KEYS.DYDX_CHAIN_ADDRESS })}
74+
</Styled.Label>
75+
</WithTooltip>
5776
<Styled.Address>{truncateAddress(dydxAddress)}</Styled.Address>
5877
</Styled.Column>
59-
60-
<CopyButton buttonType="icon" value={dydxAddress} shape={ButtonShape.Square} />
61-
62-
<IconButton
78+
<Styled.CopyButton buttonType="icon" value={dydxAddress} shape={ButtonShape.Square} />
79+
<Styled.IconButton
6380
action={ButtonAction.Base}
6481
href={`${import.meta.env.VITE_MINTSCAN_URL}/account/${dydxAddress}`}
6582
iconName={IconName.LinkOut}
@@ -71,17 +88,17 @@ export const AccountMenu = () => {
7188
{walletType && (
7289
<Styled.SourceIcon>
7390
<Styled.ConnectorIcon iconName={IconName.AddressConnector} />
74-
<Icon iconComponent={wallets[walletType as WalletType].icon} />
91+
<Icon iconComponent={wallets[walletType].icon} />
7592
</Styled.SourceIcon>
7693
)}
7794
<Styled.Column>
7895
<Styled.Label>{stringGetter({ key: STRING_KEYS.SOURCE_ADDRESS })}</Styled.Label>
7996
<Styled.Address>{truncateAddress(evmAddress, '0x')}</Styled.Address>
8097
</Styled.Column>
8198

82-
<CopyButton buttonType="icon" value={evmAddress} shape={ButtonShape.Square} />
99+
<Styled.CopyButton buttonType="icon" value={evmAddress} shape={ButtonShape.Square} />
83100

84-
<IconButton
101+
<Styled.IconButton
85102
action={ButtonAction.Base}
86103
href={`${import.meta.env.VITE_ETHERSCAN_URL}/address/${evmAddress}`}
87104
iconName={IconName.LinkOut}
@@ -135,7 +152,7 @@ export const AccountMenu = () => {
135152
{onboardingState === OnboardingState.WalletConnected ? (
136153
<Styled.WarningIcon iconName={IconName.Warning} />
137154
) : onboardingState === OnboardingState.AccountConnected ? (
138-
walletType && <Icon iconComponent={wallets[walletType as WalletType].icon} />
155+
walletType && <Icon iconComponent={wallets[walletType].icon} />
139156
) : null}
140157
{!isTablet && <Styled.Address>{truncateAddress(dydxAddress)}</Styled.Address>}
141158
</Styled.DropdownMenu>
@@ -241,3 +258,13 @@ Styled.Balance = styled.div`
241258
Styled.BalanceOutput = styled(Output)`
242259
font-size: var(--fontSize-medium);
243260
`;
261+
262+
Styled.IconButton = styled(IconButton)`
263+
--button-padding: 0 0.25rem;
264+
--button-border: solid var(--border-width) var(--color-layer-6);
265+
`;
266+
267+
Styled.CopyButton = styled(CopyButton)`
268+
--button-padding: 0 0.25rem;
269+
--button-border: solid var(--border-width) var(--color-layer-6);
270+
`;

0 commit comments

Comments
 (0)