From dda3cf1dfef0d487e24cdd69f07a9ec3865084c3 Mon Sep 17 00:00:00 2001
From: Pavel <14926950+prichodko@users.noreply.github.com>
Date: Fri, 31 Mar 2023 13:14:35 +0200
Subject: [PATCH] Update dropdown menu styles (#364)

* update dropdown menu styles

* fix menu item label
---
 .../src/dropdown-menu/dropdown-menu.tsx       | 107 +++++++++---------
 packages/components/src/topbar/topbar.tsx     |   2 +-
 2 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/packages/components/src/dropdown-menu/dropdown-menu.tsx b/packages/components/src/dropdown-menu/dropdown-menu.tsx
index fda0ee99..d07032ec 100644
--- a/packages/components/src/dropdown-menu/dropdown-menu.tsx
+++ b/packages/components/src/dropdown-menu/dropdown-menu.tsx
@@ -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 }
diff --git a/packages/components/src/topbar/topbar.tsx b/packages/components/src/topbar/topbar.tsx
index d37afeb2..9e657081 100644
--- a/packages/components/src/topbar/topbar.tsx
+++ b/packages/components/src/topbar/topbar.tsx
@@ -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