Delete Opportunities column + Improving design of BoardColumnEditTitleMenu (#1737)

* Delete Opportunities column + Improving design of BoardColumnEditTitleMenu

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Remove unwanted changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

front/src/modules/ui/board/components/BoardColumnMenu.tsx

@@ -1,19 +1,12 @@
 import { useCallback, useContext, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { useCreateCompanyProgress } from '@/companies/hooks/useCreateCompanyProgress';
 import { useFilteredSearchCompanyQuery } from '@/companies/hooks/useFilteredSearchCompanyQuery';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
-import {
-  IconArrowLeft,
-  IconArrowRight,
-  IconPencil,
-  IconPlus,
-  IconTrash,
-} from '@/ui/icon';
+import { IconArrowLeft, IconArrowRight, IconPencil, IconPlus } from '@/ui/icon';
 import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
@@ -27,12 +20,13 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 
 import { BoardColumnContext } from '../contexts/BoardColumnContext';
 import { useBoardColumns } from '../hooks/useBoardColumns';
-import { boardColumnsState } from '../states/boardColumnsState';
 import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 
 import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
 const StyledMenuContainer = styled.div`
+  left: 26.5px;
   position: absolute;
+  top: ${({ theme }) => theme.spacing(10)};
   width: 200px;
   z-index: 1;
 `;
@@ -55,8 +49,6 @@ export const BoardColumnMenu = ({
   const [currentMenu, setCurrentMenu] = useState('actions');
   const column = useContext(BoardColumnContext);
 
-  const [, setBoardColumns] = useRecoilState(boardColumnsState);
-
   const boardColumnMenuRef = useRef(null);
 
   const { enqueueSnackBar } = useSnackBar();
@@ -94,14 +86,6 @@ export const BoardColumnMenu = ({
     onClose();
   }, [goBackToPreviousHotkeyScope, onClose]);
 
-  const handleDelete = useCallback(() => {
-    setBoardColumns((previousBoardColumns) =>
-      previousBoardColumns.filter((column) => column.id !== stageId),
-    );
-    onDelete?.(stageId);
-    closeMenu();
-  }, [closeMenu, onDelete, setBoardColumns, stageId]);
-
   const setMenu = (menu: Menu) => {
     if (menu === 'add') {
       setHotkeyScopeAndMemorizePreviousScope(
@@ -157,7 +141,7 @@ export const BoardColumnMenu = ({
             <MenuItem
               onClick={() => setMenu('title')}
               LeftIcon={IconPencil}
-              text="Rename"
+              text="Edit"
             />
             <MenuItem
               LeftIcon={IconArrowLeft}
@@ -169,11 +153,6 @@ export const BoardColumnMenu = ({
               onClick={handleColumnMoveRight}
               text="Move right"
             />
-            <MenuItem
-              onClick={handleDelete}
-              LeftIcon={IconTrash}
-              text="Delete"
-            />
             <MenuItem
               onClick={() => setMenu('add')}
               LeftIcon={IconPlus}
@@ -187,6 +166,8 @@ export const BoardColumnMenu = ({
             onClose={closeMenu}
             onTitleEdit={onTitleEdit}
             title={columnDefinition.title}
+            onDelete={onDelete}
+            stageId={stageId}
           />
         )}
         {currentMenu === 'add' && (