diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx
index 5bfc09163..5fb2b1e4e 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
const StyledRow = styled.div`
display: flex;
width: 100%;
- gap: ${({ theme }) => theme.spacing(2)};
+ gap: ${({ theme }) => theme.spacing(1)};
`;
export const AdvancedFilterDropdownRow = StyledRow;
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton.tsx
index 647634ed9..bdb8fac66 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton.tsx
@@ -1,4 +1,5 @@
import { AdvancedFilterFieldSelectDropdownContent } from '@/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownContent';
+import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
import { useAdvancedFilterFieldSelectDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterFieldSelectDropdown';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
@@ -49,7 +50,7 @@ export const AdvancedFilterFieldSelectDropdownButton = ({
/>
}
dropdownHotkeyScope={{ scope: advancedFilterFieldSelectDropdownId }}
- dropdownOffset={{ y: 8, x: 0 }}
+ dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET}
dropdownPlacement="bottom-start"
/>
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx
index 7e452d34f..8470671a3 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx
@@ -8,6 +8,8 @@ const StyledText = styled.div`
height: ${({ theme }) => theme.spacing(8)};
display: flex;
align-items: center;
+
+ padding-left: ${({ theme }) => theme.spacing(2.25)};
`;
const StyledContainer = styled.div`
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx
index e566b4446..54112cc12 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx
@@ -1,4 +1,5 @@
import { ADVANCED_FILTER_LOGICAL_OPERATOR_OPTIONS } from '@/object-record/advanced-filter/constants/AdvancedFilterLogicalOperatorOptions';
+import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
import { useUpsertRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator';
@@ -30,6 +31,7 @@ export const AdvancedFilterLogicalOperatorDropdown = ({
value={recordFilterGroup.logicalOperator}
onChange={handleChange}
options={ADVANCED_FILTER_LOGICAL_OPERATOR_OPTIONS}
+ dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET}
/>
);
};
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx
index 36b15a8c7..530b8bcef 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx
@@ -6,7 +6,7 @@ import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRe
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { IconButton, IconDotsVertical, MenuItem } from 'twenty-ui';
+import { IconButton, IconDotsVertical, IconTrash, MenuItem } from 'twenty-ui';
type AdvancedFilterRecordFilterGroupOptionsDropdownProps = {
recordFilterGroupId: string;
@@ -52,11 +52,16 @@ export const AdvancedFilterRecordFilterGroupOptionsDropdown = ({
}
dropdownComponents={
-
+
}
dropdownHotkeyScope={{ scope: dropdownId }}
- dropdownOffset={{ y: 8, x: 0 }}
+ dropdownOffset={{ y: 2, x: 0 }}
dropdownPlacement="bottom-start"
/>
);
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx
index 17a7074ca..1cba49729 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx
@@ -1,5 +1,6 @@
import { useGetFieldMetadataItemById } from '@/object-metadata/hooks/useGetFieldMetadataItemById';
import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
+import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
import { getOperandLabel } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
@@ -17,7 +18,7 @@ import { isDefined } from 'twenty-shared/utils';
import { MenuItem } from 'twenty-ui';
const StyledContainer = styled.div`
- flex: 1;
+ width: 100px;
`;
type AdvancedFilterRecordFilterOperandSelectProps = {
@@ -126,7 +127,7 @@ export const AdvancedFilterRecordFilterOperandSelect = ({
}
dropdownHotkeyScope={{ scope: dropdownId }}
- dropdownOffset={{ y: 8, x: 0 }}
+ dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET}
dropdownPlacement="bottom-start"
/>
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx
index 3de5c3bba..e20932d47 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx
@@ -5,12 +5,13 @@ import { useRemoveRootRecordFilterGroupIfEmpty } from '@/object-record/record-fi
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { IconButton, IconDotsVertical, MenuItem } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
+import { IconButton, IconDotsVertical, IconTrash, MenuItem } from 'twenty-ui';
type AdvancedFilterRecordFilterOptionsDropdownProps = {
recordFilterId: string;
@@ -71,11 +72,16 @@ export const AdvancedFilterRecordFilterOptionsDropdown = ({
}
dropdownComponents={
-
+
}
dropdownHotkeyScope={{ scope: dropdownId }}
- dropdownOffset={{ y: 8, x: 0 }}
+ dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET}
dropdownPlacement="bottom-start"
/>
);
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx
index b04eef915..7918834ab 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx
@@ -11,10 +11,6 @@ import { isDefined } from 'twenty-shared/utils';
const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
align-items: start;
- background-color: ${({ theme, isGrayBackground }) =>
- isGrayBackground ? theme.background.transparent.lighter : 'transparent'};
- border: ${({ theme }) => `1px solid ${theme.border.color.medium}`};
- border-radius: ${({ theme }) => theme.border.radius.md};
display: flex;
flex: 1;
flex-direction: column;
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButton.tsx
index 2d21233fb..bdce7d9e3 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButton.tsx
@@ -1,3 +1,4 @@
+import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
@@ -81,9 +82,9 @@ export const AdvancedFilterValueInputDropdownButton = ({
}
dropdownHotkeyScope={{ scope: dropdownId }}
- dropdownOffset={{ y: 8, x: 0 }}
+ dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET}
dropdownPlacement="bottom-start"
- dropdownMenuWidth={200}
+ dropdownMenuWidth={280}
/>
)}
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset.ts b/packages/twenty-front/src/modules/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset.ts
new file mode 100644
index 000000000..55f30ec9f
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset.ts
@@ -0,0 +1,6 @@
+import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
+
+export const DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET: DropdownOffset = {
+ y: 2,
+ x: 0,
+};
diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
index 1ba6270f4..b06bdfc8e 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@@ -14,6 +14,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { SelectControl } from '@/ui/input/components/SelectControl';
+import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
import { isDefined } from 'twenty-shared/utils';
import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
@@ -44,6 +45,7 @@ export type SelectProps = {
withSearchInput?: boolean;
needIconCheck?: boolean;
callToActionButton?: CallToActionButton;
+ dropdownOffset?: DropdownOffset;
};
const StyledContainer = styled.div<{ fullWidth?: boolean }>`
@@ -75,6 +77,7 @@ export const Select = ({
withSearchInput,
needIconCheck,
callToActionButton,
+ dropdownOffset,
}: SelectProps) => {
const selectContainerRef = useRef(null);
@@ -127,6 +130,7 @@ export const Select = ({
dropdownId={dropdownId}
dropdownMenuWidth={dropDownMenuWidth}
dropdownPlacement="bottom-start"
+ dropdownOffset={dropdownOffset}
clickableComponent={
void;
onClose?: () => void;
@@ -125,7 +130,7 @@ export const Dropdown = ({
<>
{isDefined(clickableComponent) ? (
-
{clickableComponent}
-
+
) : (
)}
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/types/DropdownOffset.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/types/DropdownOffset.ts
new file mode 100644
index 000000000..9a604c4a2
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/types/DropdownOffset.ts
@@ -0,0 +1,4 @@
+export type DropdownOffset = {
+ x?: number;
+ y?: number;
+};
diff --git a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx b/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
index 886c17276..6d27c0aff 100644
--- a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
@@ -1,4 +1,4 @@
-import { IconFilterCog } from 'twenty-ui';
+import { IconFilter } from 'twenty-ui';
import { useRemoveRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup';
import { useRemoveRootRecordFilterGroupIfEmpty } from '@/object-record/record-filter-group/hooks/useRemoveRootRecordFilterGroupIfEmpty';
@@ -61,7 +61,7 @@ export const AdvancedFilterChip = () => {
testId={ADVANCED_FILTER_DROPDOWN_ID}
labelKey={chipLabel}
labelValue=""
- Icon={IconFilterCog}
+ Icon={IconFilter}
onRemove={handleRemoveClick}
/>
);
diff --git a/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx
index e823c327c..983f1d017 100644
--- a/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx
@@ -24,7 +24,7 @@ export const AdvancedFilterDropdownButton = () => {
dropdownHotkeyScope={{ scope: ADVANCED_FILTER_DROPDOWN_ID }}
dropdownOffset={{ y: 8, x: 0 }}
dropdownPlacement="bottom-start"
- dropdownMenuWidth={800}
+ dropdownMenuWidth={650}
/>
);
};
diff --git a/packages/twenty-ui/src/input/button/components/IconButton.tsx b/packages/twenty-ui/src/input/button/components/IconButton.tsx
index 1501bc410..6f4425d54 100644
--- a/packages/twenty-ui/src/input/button/components/IconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/IconButton.tsx
@@ -125,9 +125,11 @@ const StyledButton = styled.button<
box-shadow: ${!disabled && focus
? `0 0 0 3px ${theme.accent.tertiary}`
: 'none'};
- color: ${!disabled
- ? theme.font.color.secondary
- : theme.font.color.extraLight};
+ color: ${disabled
+ ? theme.font.color.extraLight
+ : variant === 'secondary'
+ ? theme.font.color.secondary
+ : theme.font.color.tertiary};
&:hover {
background: ${!disabled
? theme.background.transparent.light