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/pages/opportunities/opportunities-filters.tsx

@@ -7,7 +7,6 @@ import {
   IconCurrencyDollar,
   IconUser,
 } from '@/ui/icon/index';
-import { icon } from '@/ui/theme/constants/icon';
 import { PipelineProgress } from '~/generated/graphql';
 
 import { FilterDropdownPeopleSearchSelect } from '../../modules/people/components/FilterDropdownPeopleSearchSelect';
@@ -17,21 +16,19 @@ export const opportunitiesFilters: FilterDefinitionByEntity<PipelineProgress>[]
     {
       key: 'amount',
       label: 'Amount',
-      icon: <IconCurrencyDollar size={icon.size.md} stroke={icon.stroke.sm} />,
+      Icon: IconCurrencyDollar,
       type: 'number',
     },
     {
       key: 'closeDate',
       label: 'Close date',
-      icon: <IconCalendarEvent size={icon.size.md} stroke={icon.stroke.sm} />,
+      Icon: IconCalendarEvent,
       type: 'date',
     },
     {
       key: 'companyId',
       label: 'Company',
-      icon: (
-        <IconBuildingSkyscraper size={icon.size.md} stroke={icon.stroke.sm} />
-      ),
+      Icon: IconBuildingSkyscraper,
       type: 'entity',
       entitySelectComponent: (
         <FilterDropdownCompanySearchSelect
@@ -42,7 +39,7 @@ export const opportunitiesFilters: FilterDefinitionByEntity<PipelineProgress>[]
     {
       key: 'pointOfContactId',
       label: 'Point of contact',
-      icon: <IconUser size={icon.size.md} stroke={icon.stroke.sm} />,
+      Icon: IconUser,
       type: 'entity',
       entitySelectComponent: (
         <FilterDropdownPeopleSearchSelect

front/src/pages/opportunities/opportunities-sorts.tsx

@@ -6,16 +6,16 @@ export const opportunitiesSorts = [
   {
     key: 'createdAt',
     label: 'Creation',
-    icon: <IconCalendarEvent size={16} />,
+    Icon: IconCalendarEvent,
   },
   {
     key: 'amount',
     label: 'Amount',
-    icon: <IconCurrencyDollar size={16} />,
+    Icon: IconCurrencyDollar,
   },
   {
     key: 'closeDate',
     label: 'Expected close date',
-    icon: <IconCalendarEvent size={16} />,
+    Icon: IconCalendarEvent,
   },
 ] satisfies Array<SortType<PipelineProgresses_Order_By>>;