Refactor/new menu item (#1448)

* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests

front/src/modules/people/components/PeopleCard.tsx

@@ -1,15 +1,14 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getOperationName } from '@apollo/client/utilities';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 
 import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
-import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { IconDotsVertical, IconLinkOff, IconTrash } from '@/ui/icon';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { Avatar } from '@/users/components/Avatar';
 import {
@@ -72,10 +71,6 @@ const StyledJobTitle = styled.div`
   }
 `;
 
-const StyledRemoveOption = styled.div`
-  color: ${({ theme }) => theme.color.red};
-`;
-
 export function PeopleCard({
   person,
   hasBottomBorder = true,
@@ -93,8 +88,6 @@ export function PeopleCard({
     placement: 'right-start',
   });
 
-  const theme = useTheme();
-
   useListenClickOutside({
     refs: [refs.floating],
     callback: () => {
@@ -175,14 +168,17 @@ export function PeopleCard({
               <StyledDropdownMenuItemsContainer
                 onClick={(e) => e.stopPropagation()}
               >
-                <DropdownMenuSelectableItem onClick={handleDetachPerson}>
-                  <IconLinkOff size={14} />
-                  Detach relation
-                </DropdownMenuSelectableItem>
-                <DropdownMenuSelectableItem onClick={handleDeletePerson}>
-                  <IconTrash size={14} color={theme.font.color.danger} />
-                  <StyledRemoveOption>Delete person</StyledRemoveOption>
-                </DropdownMenuSelectableItem>
+                <MenuItem
+                  onClick={handleDetachPerson}
+                  LeftIcon={IconLinkOff}
+                  text="Detach relation"
+                />
+                <MenuItem
+                  onClick={handleDeletePerson}
+                  LeftIcon={IconTrash}
+                  text="Delete person"
+                  accent="danger"
+                />
               </StyledDropdownMenuItemsContainer>
             </StyledDropdownMenu>
           )}