Advanced filter UI fast follow-ups (#11272)

This PR fixes the issue about the easy fast follow-up part on advanced
filter.

Fixes https://github.com/twentyhq/core-team-issues/issues/675

Changes : 
- Changed horizontal gap to spacing(1) for AdvancedFilterDropdownRow
- Created a DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET for all
sub-dropdowns in advanced filter dropdown with a y-offset of 2px.
- Created a DropdownOffset type
- Used a padding-left of spacing(2.25) in
AdvancedFilterLogicalOperatorCell to allign the disabled text with the
text in the Select component
- Added IconTrash and accent danger on
AdvancedFilterRecordFilterGroupOptionsDropdown and
AdvancedFilterRecordFilterOptionsDropdown
- Removed unnecessary CSS properties on
AdvancedFilterRootRecordFilterGroup
- Set dropdownMenuWith to 280 for AdvancedFilterValueInputDropdownButton
- Fixed Dropdown generic clickable component container that was
expanding
- Set IconFilter instead of IconFilterCog in AdvancedFilterChip
- Set AdvancedFilterDropdownButton dropdown content width to 650 instead
of 800
- Refactored generic IconButton component so that it disambiguates
secondary and tertiary variant for the color CSS props

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -3,6 +3,7 @@ import { DropdownOnToggleEffect } from '@/ui/layout/dropdown/components/Dropdown
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponeInstanceContext';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
+import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import styled from '@emotion/styled';
@@ -18,9 +19,9 @@ import { MouseEvent, ReactNode } from 'react';
 import { flushSync } from 'react-dom';
 import { Keys } from 'react-hotkeys-hook';
 import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
 import { sleep } from '~/utils/sleep';
 import { useDropdown } from '../hooks/useDropdown';
-import { isDefined } from 'twenty-shared/utils';
 
 const StyledDropdownFallbackAnchor = styled.div`
   left: 0;
@@ -28,6 +29,10 @@ const StyledDropdownFallbackAnchor = styled.div`
   top: 0;
 `;
 
+const StyledClickableComponent = styled.div`
+  height: fit-content;
+`;
+
 export type DropdownProps = {
   className?: string;
   clickableComponent?: ReactNode;
@@ -40,7 +45,7 @@ export type DropdownProps = {
   dropdownId: string;
   dropdownPlacement?: Placement;
   dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number;
-  dropdownOffset?: { x?: number; y?: number };
+  dropdownOffset?: DropdownOffset;
   dropdownStrategy?: 'fixed' | 'absolute';
   onClickOutside?: () => void;
   onClose?: () => void;
@@ -125,7 +130,7 @@ export const Dropdown = ({
       <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
         <>
           {isDefined(clickableComponent) ? (
-            <div
+            <StyledClickableComponent
               ref={refs.setReference}
               onClick={handleClickableComponentClick}
               aria-controls={`${dropdownId}-options`}
@@ -134,7 +139,7 @@ export const Dropdown = ({
               role="button"
             >
               {clickableComponent}
-            </div>
+            </StyledClickableComponent>
           ) : (
             <StyledDropdownFallbackAnchor ref={refs.setReference} />
           )}

packages/twenty-front/src/modules/ui/layout/dropdown/types/DropdownOffset.ts

@@ -0,0 +1,4 @@
+export type DropdownOffset = {
+  x?: number;
+  y?: number;
+};