diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx index c65335131248..1563b7c70420 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx @@ -3,12 +3,17 @@ import styled from '@emotion/styled'; type StyledDropdownButtonProps = { isUnfolded: boolean; isActive?: boolean; + transparentBackground?: boolean; }; export const StyledDropdownButtonContainer = styled.div` align-items: center; - background: ${({ theme, isUnfolded }) => - isUnfolded ? theme.background.transparent.light : theme.background.primary}; + background: ${({ theme, isUnfolded, transparentBackground }) => + transparentBackground + ? 'none' + : isUnfolded + ? theme.background.transparent.light + : theme.background.primary}; border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${({ isActive, theme }) => isActive ? theme.color.blue : theme.font.color.secondary}; @@ -22,9 +27,11 @@ export const StyledDropdownButtonContainer = styled.div - isUnfolded - ? theme.background.transparent.medium - : theme.background.transparent.light}; + background: ${({ theme, isUnfolded, transparentBackground }) => + transparentBackground + ? 'transparent' + : isUnfolded + ? theme.background.transparent.medium + : theme.background.transparent.light}; } `; diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx index ee6b48745c9f..f8e4fa86e227 100644 --- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx +++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx @@ -11,15 +11,17 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { Editor } from '@tiptap/react'; import { useState } from 'react'; -import { IconVariable } from 'twenty-ui'; +import { IconVariablePlus } from 'twenty-ui'; const StyledDropdownVariableButtonContainer = styled( StyledDropdownButtonContainer, -)` - background-color: ${({ theme }) => theme.background.transparent.lighter}; +)<{ transparentBackground?: boolean }>` + background-color: ${({ theme, transparentBackground }) => + transparentBackground + ? 'transparent' + : theme.background.transparent.lighter}; color: ${({ theme }) => theme.font.color.tertiary}; - padding: ${({ theme }) => theme.spacing(0)}; - margin: ${({ theme }) => theme.spacing(2)}; + padding: ${({ theme }) => theme.spacing(2)}; `; const SearchVariablesDropdown = ({ @@ -65,8 +67,11 @@ const SearchVariablesDropdown = ({ scope: dropdownId, }} clickableComponent={ - - + + } dropdownComponents={ diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts index 49e07cc7ad24..ebc056ee249b 100644 --- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts +++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts @@ -231,7 +231,7 @@ export { IconUser, IconUserCircle, IconUsers, - IconVariable, + IconVariablePlus, IconVideo, IconWand, IconWorld,