Enable opportunity card deletion (#490)

* Add checkbox

* Add state management for selected opportunities

* Use recoil for selected items state, show action bar

* Deduplicate code

* Add delete action

* Enable delete

* Add color for selected cards

* update board state on delete

* Add stories

* Enable empty board

* Fix story

* Handle dark mdoe

* Nits

* Rename module

* Better naming

* Fix naming confusion process<>progress

front/src/modules/ui/components/action-bar/ActionBar.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
+import { PositionType } from '@/ui/types/PositionType';
+
+type OwnProps = {
+  children: React.ReactNode | React.ReactNode[];
+  selectedIds: string[];
+};
+
+type StyledContainerProps = {
+  position: PositionType;
+};
+
+const StyledContainer = styled.div<StyledContainerProps>`
+  align-items: center;
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: 8px;
+  bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  display: flex;
+  height: 48px;
+
+  left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+  position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
+  top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
+
+  transform: translateX(-50%);
+  z-index: 1;
+`;
+
+export function ActionBar({ children, selectedIds }: OwnProps) {
+  const position = useRecoilValue(contextMenuPositionState);
+  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (!(event.target as HTMLElement).closest('.action-bar')) {
+        setContextMenuPosition({ x: null, y: null });
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    // Cleanup the event listener when the component unmounts
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setContextMenuPosition]);
+
+  if (selectedIds.length === 0) {
+    return null;
+  }
+
+  return (
+    <StyledContainer className="action-bar" position={position}>
+      {children}
+    </StyledContainer>
+  );
+}

front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx

@@ -1,66 +1,15 @@
-import React, { useEffect } from 'react';
-import styled from '@emotion/styled';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import React from 'react';
+import { useRecoilValue } from 'recoil';
 
-import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
+import { ActionBar } from '@/ui/components/action-bar/ActionBar';
 import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
-import { PositionType } from '@/ui/types/PositionType';
 
 type OwnProps = {
   children: React.ReactNode | React.ReactNode[];
 };
 
-type StyledContainerProps = {
-  position: PositionType;
-};
-
-const StyledContainer = styled.div<StyledContainerProps>`
-  align-items: center;
-  background: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
-  bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
-  display: flex;
-  height: 48px;
-
-  left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
-  padding-left: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-  position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
-  top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
-
-  transform: translateX(-50%);
-  z-index: 1;
-`;
-
 export function EntityTableActionBar({ children }: OwnProps) {
   const selectedRowIds = useRecoilValue(selectedRowIdsState);
-  const position = useRecoilValue(contextMenuPositionState);
-  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
 
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (!(event.target as HTMLElement).closest('.action-bar')) {
-        setContextMenuPosition({ x: null, y: null });
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-
-    // Cleanup the event listener when the component unmounts
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [setContextMenuPosition]);
-
-  if (selectedRowIds.length === 0) {
-    return null;
-  }
-
-  return (
-    <StyledContainer className="action-bar" position={position}>
-      {children}
-    </StyledContainer>
-  );
+  return <ActionBar selectedIds={selectedRowIds}>{children}</ActionBar>;
 }

front/src/modules/ui/themes/themes.ts

@@ -29,6 +29,8 @@ export const lightTheme = {
     background: backgroundLight,
     border: borderLight,
     boxShadow: boxShadowLight,
+    selectedCardHover: color.blue20,
+    selectedCard: color.blue10,
     font: fontLight,
   },
 };
@@ -40,6 +42,8 @@ export const darkTheme: ThemeType = {
     background: backgroundDark,
     border: borderDark,
     boxShadow: boxShadowDark,
+    selectedCardHover: color.blue70,
+    selectedCard: color.blue80,
     font: fontDark,
   },
 };