Fix Icon variable plus

twentyhq · Nov 13, 2024 · 4104713 · 4104713
1 parent ba79a1d
commit 4104713
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/.../twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx b/.../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<StyledDropdownButtonProps>`
   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<StyledDropdownButtonProp
   user-select: none;
 
   &:hover {
-    background: ${({ theme, isUnfolded }) =>
-      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/...twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx b/...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={
-        <StyledDropdownVariableButtonContainer isUnfolded={isDropdownOpen}>
-          <IconVariable size={theme.icon.size.sm} />
+        <StyledDropdownVariableButtonContainer
+          isUnfolded={isDropdownOpen}
+          transparentBackground
+        >
+          <IconVariablePlus size={theme.icon.size.sm} />
         </StyledDropdownVariableButtonContainer>
       }
       dropdownComponents={

diff --git 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,