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>
   );
 };