1259/add compact view in opportunities (#2182)

* icons added

* recoil family state added for checking compact view in each card

* recoil state added for toggle button. Wether compact view show or not

* menu item modifed for right side content

* compact view toggle added in dropdown options

* dropdown width increased because compact view text was  overflowing

* compact view added in boardcard

* new animation added for in and out

* compact view enabled state added

* old state deleted

* sizes added in toggle component

* removed extra added code form navigation

* toggle size added in menuitem toggle

* MenuItemToggle added instead of MenuItemNavigate

* Compact view improved

front/src/modules/ui/layout/board/components/BoardOptionsDropdown.tsx

@@ -35,6 +35,7 @@ export const BoardOptionsDropdown = ({
         }
         dropdownHotkeyScope={customHotkeyScope}
         onClickOutside={resetViewEditMode}
+        dropdownMenuWidth={170}
       />
     </DropdownScope>
   );

front/src/modules/ui/layout/board/components/BoardOptionsDropdownContent.tsx

@@ -15,6 +15,7 @@ import { currentViewScopedSelector } from '@/ui/data/view-bar/states/selectors/c
 import { viewsByIdScopedSelector } from '@/ui/data/view-bar/states/selectors/viewsByIdScopedSelector';
 import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
 import {
+  IconBaselineDensitySmall,
   IconChevronLeft,
   IconLayoutKanban,
   IconPlus,
@@ -28,6 +29,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
+import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
 import { ThemeColor } from '@/ui/theme/constants/colors';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -37,6 +39,7 @@ import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilSco
 import { useBoardCardFields } from '../hooks/useBoardCardFields';
 import { boardCardFieldsScopedState } from '../states/boardCardFieldsScopedState';
 import { boardColumnsState } from '../states/boardColumnsState';
+import { isCompactViewEnabledState } from '../states/isCompactViewEnabledState';
 import { savedBoardCardFieldsFamilyState } from '../states/savedBoardCardFieldsFamilyState';
 import { hiddenBoardCardFieldsScopedSelector } from '../states/selectors/hiddenBoardCardFieldsScopedSelector';
 import { visibleBoardCardFieldsScopedSelector } from '../states/selectors/visibleBoardCardFieldsScopedSelector';
@@ -72,6 +75,9 @@ export const BoardOptionsDropdownContent = ({
   >();
 
   const [boardColumns, setBoardColumns] = useRecoilState(boardColumnsState);
+  const [isCompactViewEnabled, setIsCompactViewEnabled] = useRecoilState(
+    isCompactViewEnabledState,
+  );
 
   const hiddenBoardCardFields = useRecoilScopedValue(
     hiddenBoardCardFieldsScopedSelector,
@@ -194,6 +200,16 @@ export const BoardOptionsDropdownContent = ({
               text="Stages"
             />
           </DropdownMenuItemsContainer>
+          <DropdownMenuSeparator />
+          <DropdownMenuItemsContainer>
+            <MenuItemToggle
+              LeftIcon={IconBaselineDensitySmall}
+              onToggleChange={setIsCompactViewEnabled}
+              toggled={isCompactViewEnabled}
+              text="Compact view"
+              toggleSize="small"
+            />
+          </DropdownMenuItemsContainer>
         </>
       )}
       {currentMenu === 'stages' && (

front/src/modules/ui/layout/board/states/isCardInCompactViewState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isCardInCompactViewState = atomFamily<boolean, string>({
+  key: 'isCardInCompactViewState',
+  default: true,
+});

front/src/modules/ui/layout/board/states/isCompactViewEnabledState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isCompactViewEnabledState = atom<boolean>({
+  key: 'isCompactViewEnabledState',
+  default: false,
+});