Update dropdown menu styles (#364)

* update dropdown menu styles

* fix menu item label
This commit is contained in:
Pavel 2023-03-31 13:14:35 +02:00 committed by GitHub
parent b8faced665
commit dda3cf1dfe
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
2 changed files with 55 additions and 54 deletions

View File

@ -2,62 +2,16 @@ import { cloneElement } from 'react'
import {
DropdownMenuContent,
DropdownMenuItem as RadixDropdownMenuItem,
DropdownMenuItem,
DropdownMenuSeparator,
// Label,
Portal,
Root,
Trigger,
} from '@radix-ui/react-dropdown-menu'
import { Stack, styled } from 'tamagui'
import { styled } from '@tamagui/core'
import { Text } from '../text'
const Content = styled(DropdownMenuContent, {
name: 'DropdownMenuContent',
acceptsClassName: true,
width: 352,
padding: 8,
borderRadius: 16,
backgroundColor: '$white-100',
shadowRadius: 30,
shadowOffset: '0px 8px',
shadowColor: 'rgba(9, 16, 28, 0.12)',
})
const Item = styled(RadixDropdownMenuItem, {
name: 'DropdownMenuItem',
acceptsClassName: true,
display: 'flex',
alignItems: 'center',
padding: 8,
borderRadius: 12,
cursor: 'pointer',
userSelect: 'none',
hoverStyle: {
backgroundColor: '$neutral-5',
},
pressStyle: {
backgroundColor: '$neutral-10',
},
})
const Separator = styled(DropdownMenuSeparator, {
name: 'DropdownMenuSeparator',
acceptsClassName: true,
height: 1,
backgroundColor: '$neutral-10',
marginVertical: 8,
marginLeft: -8,
marginRight: -8,
})
interface Props {
children: [React.ReactElement, React.ReactElement]
modal?: false
@ -84,24 +38,71 @@ interface DropdownMenuItemProps {
danger?: boolean
}
const DropdownMenuItem = (props: DropdownMenuItemProps) => {
const MenuItem = (props: DropdownMenuItemProps) => {
const { icon, label, onSelect, danger } = props
const iconColor = danger ? '$danger-50' : '$neutral-50'
const textColor = danger ? '$danger-50' : '$neutral-100'
return (
<Item onSelect={onSelect}>
<Stack marginRight={12}>{cloneElement(icon, { color: iconColor })}</Stack>
<ItemBase onSelect={onSelect}>
{cloneElement(icon, { color: iconColor })}
<Text size={15} weight="medium" color={textColor}>
{label}
</Text>
</Item>
</ItemBase>
)
}
const Content = styled(DropdownMenuContent, {
name: 'DropdownMenuContent',
acceptsClassName: true,
width: 256,
padding: 4,
borderRadius: 12,
backgroundColor: '$white-100',
shadowRadius: 30,
shadowOffset: '0px 8px',
shadowColor: 'rgba(9, 16, 28, 0.12)',
})
const ItemBase = styled(DropdownMenuItem, {
name: 'DropdownMenuItem',
acceptsClassName: true,
display: 'flex',
alignItems: 'center',
height: 32,
paddingHorizontal: 8,
borderRadius: 10,
cursor: 'pointer',
userSelect: 'none',
gap: 8,
hoverStyle: {
backgroundColor: '$neutral-5',
},
pressStyle: {
backgroundColor: '$neutral-10',
},
})
const Separator = styled(DropdownMenuSeparator, {
name: 'DropdownMenuSeparator',
acceptsClassName: true,
height: 1,
backgroundColor: '$neutral-10',
marginVertical: 4,
marginLeft: -4,
marginRight: -4,
})
DropdownMenu.Content = Content
DropdownMenu.Item = DropdownMenuItem
DropdownMenu.Item = MenuItem
DropdownMenu.Separator = Separator
export { DropdownMenu }

View File

@ -129,7 +129,7 @@ const Topbar = (props: Props) => {
<DropdownMenu.Content align="end" sideOffset={4}>
<DropdownMenu.Item
icon={<CommunitiesIcon />}
label="View channel members and details"
label="View channel details"
onSelect={() => console.log('click')}
/>
<DropdownMenu.Item