github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Styling of Account dropdown now consistent w/MegaMenu. (#1370)

Browse Source 
* Styling of Account dropdown now consistent w/MegaMenu.
- mobile has a flat bg to match the footer

* Create new MenuArrow icon for open menus.
This commit is contained in:
luxumbra
2022-10-08 01:17:51 +01:00
committed by GitHub
parent 9af9a3eea5
commit 2b72e71db5
4 changed files with 135 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/design-system/src/icons/MenuArrow.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { createIcon } from '@chakra-ui/icons';
import * as React from 'react';
export const MenuArrow = createIcon({
displayName: 'MenuArrow',
path: (
<g>
<path
d="M12 0L24 12C14.6274 12 9.37258 12 0 12L12 0Z"
fill="currentColor"
/>
</g>
),
viewBox: '0 0 24 24',
});

1
packages/design-system/src/icons/index.ts
View File

@@ -7,6 +7,7 @@ export { GnosisIcon } from './GnosisIcon';
export { Icon3box } from './Icon3box';
export { LogOut } from './LogOut';
export { MeetWithWalletIcon } from './MeetWithWalletIcon';
export { MenuArrow } from './MenuArrow';
export { MetaMaskIcon } from './MetaMaskIcon';
export { PolygonIcon } from './PolygonIcon';
export { Profile } from './Profile';

77
packages/web/components/MegaMenu/DesktopPlayerStats.tsx
View File

@@ -1,8 +1,10 @@
import {
Dashboard,
Flex,
Icon,
LogOut,
Menu,
MenuArrow,
MenuButton,
MenuItem,
MenuList,
@@ -26,6 +28,7 @@ export const DesktopPlayerStats: React.FC<PlayerStatsProps> = ({ player }) => {
return (
<Flex align="center" justifyContent="flex-end">
<XPSeedsBalance totalXP={player.totalXP} />
<Menu>
<MenuButton
bg="transparent"
@@ -41,37 +44,91 @@ export const DesktopPlayerStats: React.FC<PlayerStatsProps> = ({ player }) => {
_hover={{ transform: 'scale(0.9)' }}
/>
</MenuButton>
<MenuList mt="8px" color="black">
<MenuList
mt="8px"
color="white"
boxShadow="2xl"
bg="linear-gradient(180deg, rgba(42, 31, 71, 0.9) 6.18%, rgba(17, 3, 32, 0.86) 140%)"
borderRadius="md"
border={0}
px={2}
position="relative"
>
<Icon
as={MenuArrow}
color="rgba(42, 31, 71, 0.9)"
position="absolute"
left="calc(92% - 1.25rem)"
top={-3}
w={6}
h="auto"
opacity={1}
transition="opacity 0.2s"
zIndex={2}
/>
<MetaLink
color="black"
color="white"
href={getPlayerURL(player) ?? '/'}
_hover={{ textDecoration: 'none' }}
>
<MenuItem>
<MenuItem
sx={{
'&:hover, &:active, &:focus': {
bg: 'rgba(0,0,0,0.56)',
color: 'white',
borderRadius: 'md',
},
}}
>
<Profile w={4} h={4} mr={4} /> View Profile
</MenuItem>
</MetaLink>
<MetaLink
color="black"
color="white"
href={'/profile/setup'}
_hover={{ textDecoration: 'none' }}
>
<MenuItem>
<MenuItem
sx={{
'&:hover, &:active, &:focus': {
bg: 'rgba(0,0,0,0.56)',
color: 'white',
borderRadius: 'md',
},
}}
>
<Profile w={4} h={4} mr={4} /> Profile Wizard
</MenuItem>
</MetaLink>
<MetaLink
color="black"
color="white"
href={'/dashboard'}
_hover={{ textDecoration: 'none' }}
>
<MenuItem>
<Dashboard w={4} h={4} mr={4} color="red.500" />
<MenuItem
sx={{
'&:hover, &:active, &:focus': {
bg: 'rgba(0,0,0,0.56)',
color: 'white',
borderRadius: 'md',
},
}}
>
<Dashboard w={4} h={4} mr={4} fill="white" />
Dashboard
</MenuItem>
</MetaLink>
<MenuItem onClick={disconnect}>
<LogOut w={4} h={4} mr={4} />
<MenuItem
onClick={disconnect}
sx={{
'&:hover, &:active, &:focus': {
bg: 'rgba(0,0,0,0.56)',
color: 'white',
borderRadius: 'md',
},
}}
>
<LogOut w={4} h={4} mr={4} fill="white" />
Disconnect
</MenuItem>
</MenuList>

62
packages/web/components/MegaMenu/MegaMenuFooter.tsx
View File

@@ -77,37 +77,79 @@ export const MegaMenuFooter = () => {
</Stack>
</Flex>
</MenuButton>
<MenuList color="black">
<MenuList
color="white"
boxShadow="2xl"
bg="rgba(0, 0, 0, 0.75)"
borderRadius="md"
border={0}
px={2}
position="relative"
transform="translateY(-7px)!important"
>
<MetaLink
color="black"
color="white"
href={getPlayerURL(user) ?? '/'}
_hover={{ textDecoration: 'none' }}
>
<MenuItem>
<MenuItem
sx={{
'&:hover, &:active, &:focus': {
bg: 'rgba(0,0,0,0.56)',
color: 'white',
borderRadius: 'md',
},
}}
>
<Profile w={4} h={4} mr={4} /> View Profile
</MenuItem>
</MetaLink>
<MetaLink
color="black"
color="white"
href={'/profile/setup'}
_hover={{ textDecoration: 'none' }}
>
<MenuItem>
<MenuItem
sx={{
'&:hover, &:active, &:focus': {
bg: 'rgba(0,0,0,0.56)',
color: 'white',
borderRadius: 'md',
},
}}
>
<Profile w={4} h={4} mr={4} /> Profile Wizard
</MenuItem>
</MetaLink>
<MetaLink
color="black"
color="white"
href={'/dashboard'}
_hover={{ textDecoration: 'none' }}
>
<MenuItem>
<Dashboard w={4} h={4} mr={4} color="red.500" />
<MenuItem
sx={{
'&:hover, &:active, &:focus': {
bg: 'rgba(0,0,0,0.56)',
color: 'white',
borderRadius: 'md',
},
}}
>
<Dashboard w={4} h={4} mr={4} fill="white" color="red.500" />
Dashboard
</MenuItem>
</MetaLink>
<MenuItem onClick={disconnect}>
<LogOut w={4} h={4} mr={4} />
<MenuItem
onClick={disconnect}
sx={{
'&:hover, &:active, &:focus': {
bg: 'rgba(0,0,0,0.56)',
color: 'white',
borderRadius: 'md',
},
}}
>
<LogOut w={4} h={4} mr={4} fill="white" />
Disconnect
</MenuItem>
</MenuList>