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/BoardColumnEditTitleMenu.tsx

@@ -1,13 +1,18 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
+import { IconTrash } from '@/ui/icon';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { MenuItemSelectColor } from '@/ui/menu-item/components/MenuItemSelectColor';
 import { ThemeColor } from '@/ui/theme/constants/colors';
 import { textInputStyle } from '@/ui/theme/constants/effects';
 import { debounce } from '~/utils/debounce';
 
+import { boardColumnsState } from '../states/boardColumnsState';
+
 const StyledEditTitleContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(1)};
 
@@ -22,18 +27,26 @@ const StyledEditTitleContainer = styled.div`
 `;
 
 const StyledEditModeInput = styled.input`
-  font-size: ${({ theme }) => theme.font.size.sm};
-
   ${textInputStyle}
 
+  background: ${({ theme }) => theme.background.transparent.lighter};
+  border-color: ${({ theme }) => theme.color.blue};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0px 0px 0px 3px rgba(25, 97, 237, 0.1);
+  font-size: ${({ theme }) => theme.font.size.sm};
+  height: 100%;
   width: 100%;
 `;
 
 export type BoardColumnEditTitleMenuProps = {
   onClose: () => void;
+  onDelete?: (id: string) => void;
   title: string;
   onTitleEdit: (title: string, color: string) => void;
   color: ThemeColor;
+  stageId: string;
 };
 
 type ColumnColorOption = {
@@ -56,6 +69,8 @@ export const COLUMN_COLOR_OPTIONS: ColumnColorOption[] = [
 
 export const BoardColumnEditTitleMenu = ({
   onClose,
+  onDelete,
+  stageId,
   onTitleEdit,
   title,
   color,
@@ -69,6 +84,16 @@ export const BoardColumnEditTitleMenu = ({
     setInternalValue(event.target.value);
     debouncedOnUpdateTitle(event.target.value);
   };
+  const [, setBoardColumns] = useRecoilState(boardColumnsState);
+
+  const handleDelete = useCallback(() => {
+    setBoardColumns((previousBoardColumns) =>
+      previousBoardColumns.filter((column) => column.id !== stageId),
+    );
+    onDelete?.(stageId);
+    onClose();
+  }, [onClose, onDelete, setBoardColumns, stageId]);
+
   return (
     <StyledDropdownMenuItemsContainer>
       <StyledEditTitleContainer>
@@ -92,6 +117,13 @@ export const BoardColumnEditTitleMenu = ({
           text={colorOption.name}
         />
       ))}
+      <StyledDropdownMenuSeparator />
+      <MenuItem
+        onClick={handleDelete}
+        LeftIcon={IconTrash}
+        text="Delete"
+        accent="danger"
+      />
     </StyledDropdownMenuItemsContainer>
   );
 };

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' && (