diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
index 11967a0389..4dfdc09106 100644
--- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
import { useLocation } from 'react-router-dom';
import { useRecoilState, useRecoilValue } from 'recoil';
import {
@@ -26,15 +25,19 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import styled from '@emotion/styled';
import { DragStart, DropResult, ResponderProvided } from '@hello-pangea/dnd';
import { useState } from 'react';
+const StyledOrphanFavoritesContainer = styled.div`
+ margin-bottom: ${({ theme }) => theme.betweenSiblingsGap};
+`;
+
export const CurrentWorkspaceMemberFavoritesFolders = () => {
const [isDragging, setIsDragging] = useState(false);
const currentPath = useLocation().pathname;
const currentViewPath = useLocation().pathname + useLocation().search;
- const theme = useTheme();
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { sortedFavorites: favorites } = useFavorites();
const { deleteFavorite } = useDeleteFavorite();
@@ -98,12 +101,13 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
onClick={toggleNavigationSection}
rightIcon={
isFavoriteFolderEnabled ? (
-
+
) : undefined
}
- onRightIconClick={
- isFavoriteFolderEnabled ? toggleNewFolder : undefined
- }
/>
@@ -126,26 +130,28 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
index={index}
isInsideScrollableContainer={true}
itemComponent={
- }
- active={isLocationMatchingFavorite(
- currentPath,
- currentViewPath,
- favorite,
- )}
- to={favorite.link}
- rightOptions={
- deleteFavorite(favorite.id)}
- accent="tertiary"
- />
- }
- isDragging={isDragging}
- />
+
+ }
+ active={isLocationMatchingFavorite(
+ currentPath,
+ currentViewPath,
+ favorite,
+ )}
+ to={favorite.link}
+ rightOptions={
+ deleteFavorite(favorite.id)}
+ accent="tertiary"
+ />
+ }
+ isDragging={isDragging}
+ />
+
}
/>
))}
diff --git a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx b/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx
index 87a3dfdaf5..bcbbfa9711 100644
--- a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx
@@ -1,10 +1,14 @@
import { FavoriteFolderHotkeyScope } from '@/favorites/constants/FavoriteFolderRightIconDropdownHotkeyScope';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { IconDotsVertical, IconPencil, IconTrash, MenuItem } from 'twenty-ui';
+import {
+ IconDotsVertical,
+ IconPencil,
+ IconTrash,
+ LightIconButton,
+ MenuItem,
+} from 'twenty-ui';
type FavoriteFolderNavigationDrawerItemDropdownProps = {
folderId: string;
@@ -13,24 +17,12 @@ type FavoriteFolderNavigationDrawerItemDropdownProps = {
closeDropdown: () => void;
};
-const StyledIconContainer = styled.div`
- align-items: center;
- background: transparent;
- height: 24px;
- width: 24px;
- justify-content: center;
- transition: background 0.1s ease;
- display: flex;
-`;
-
export const FavoriteFolderNavigationDrawerItemDropdown = ({
folderId,
onRename,
onDelete,
closeDropdown,
}: FavoriteFolderNavigationDrawerItemDropdownProps) => {
- const theme = useTheme();
-
const handleRename = () => {
onRename();
closeDropdown();
@@ -49,15 +41,9 @@ export const FavoriteFolderNavigationDrawerItemDropdown = ({
}}
data-select-disable
clickableComponent={
-
-
-
+
}
- dropdownPlacement="right"
- dropdownOffset={{ y: -15 }}
+ dropdownPlacement="bottom-start"
dropdownComponents={