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={ theme.spacing(1)}; padding-left: ${({ theme }) => theme.spacing(1)}; - padding-right: ${({ theme }) => theme.spacing(1)}; + padding-right: ${({ theme }) => theme.spacing(0.5)}; padding-top: ${({ theme }) => theme.spacing(1)}; margin-top: ${({ indentationLevel }) => diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx index c78ca3324e..0711b54b87 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx @@ -17,7 +17,10 @@ const StyledTitle = styled.div` font-size: ${({ theme }) => theme.font.size.xs}; font-weight: ${({ theme }) => theme.font.weight.semiBold}; height: ${({ theme }) => theme.spacing(5)}; - padding: ${({ theme }) => theme.spacing(1)}; + padding-left: ${({ theme }) => theme.spacing(1)}; + padding-right: ${({ theme }) => theme.spacing(0.5)}; + padding-top: ${({ theme }) => theme.spacing(1)}; + padding-bottom: ${({ theme }) => theme.spacing(1)}; justify-content: space-between; &:hover { @@ -36,38 +39,21 @@ type StyledRightIconProps = { const StyledRightIcon = styled.div` cursor: pointer; - margin-left: ${({ theme }) => theme.spacing(2)}; - transition: opacity 150ms ease-in-out; opacity: ${({ isMobile }) => (isMobile ? 1 : 0)}; - display: flex; - align-items: center; - justify-content: center; - border-radius: ${({ theme }) => theme.border.radius.sm}; - width: ${({ theme }) => theme.spacing(5)}; - height: ${({ theme }) => theme.spacing(5)}; - :hover { - background: ${({ theme }) => theme.background.transparent.light}; - } .section-title-container:hover & { opacity: 1; } - - &:active { - cursor: pointer; - } `; type NavigationDrawerSectionTitleProps = { onClick?: () => void; - onRightIconClick?: () => void; label: string; rightIcon?: React.ReactNode; }; export const NavigationDrawerSectionTitle = ({ onClick, - onRightIconClick, label, rightIcon, }: NavigationDrawerSectionTitleProps) => { @@ -85,24 +71,15 @@ export const NavigationDrawerSectionTitle = ({ } }; - const handleRightIconClick = (e: React.MouseEvent) => { - e.stopPropagation(); - if (isDefined(onRightIconClick)) { - onRightIconClick(); - } - }; - if (loading && isDefined(currentUser)) { return ; } return ( - - {label} + + {label} {rightIcon && ( - - {rightIcon} - + {rightIcon} )} ); diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx index 0cbbc62b95..a80a7777c8 100644 --- a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx @@ -34,13 +34,20 @@ export const RecordShowPageBaseHeader = ({ {!isMobile && ( <> {isFavoriteFolderEnabled ? ( - + isFavorite ? ( + + ) : ( + + ) ) : (