Webhook follow up (#10124)

- fix webhook creation
- fix pointer

packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx

@@ -4,12 +4,25 @@ import styled from '@emotion/styled';
 const StyledInputErrorHelper = styled.div`
   color: ${({ theme }) => theme.color.red};
   font-size: ${({ theme }) => theme.font.size.xs};
+  position: absolute;
+`;
+
+const StyledErrorContainer = styled.div`
+  margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
 export const InputErrorHelper = ({
   children,
+  isVisible = true,
 }: {
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  isVisible?: boolean;
 }) => (
-  <StyledInputErrorHelper aria-live="polite">{children}</StyledInputErrorHelper>
+  <StyledErrorContainer>
+    {children && isVisible && (
+      <StyledInputErrorHelper aria-live="polite">
+        {children}
+      </StyledInputErrorHelper>
+    )}
+  </StyledErrorContainer>
 );

packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx

@@ -76,18 +76,14 @@ const StyledInput = styled.input<
   }
 
   &:focus {
-    ${({ theme }) => {
+    ${({ theme, error }) => {
       return `
-      border-color: ${theme.color.blue};
+      border-color: ${error ? theme.border.color.danger : theme.color.blue};
       `;
     }};
   }
 `;
 
-const StyledErrorHelper = styled(InputErrorHelper)`
-  padding: ${({ theme }) => theme.spacing(1)};
-`;
-
 const StyledLeftIconContainer = styled.div<{ sizeVariant: TextInputV2Size }>`
   align-items: center;
   display: flex;
@@ -270,9 +266,7 @@ const TextInputV2Component = (
           )}
         </StyledTrailingIconContainer>
       </StyledInputContainer>
-      {error && !noErrorHelper && (
-        <StyledErrorHelper>{error}</StyledErrorHelper>
-      )}
+      <InputErrorHelper isVisible={!noErrorHelper}>{error}</InputErrorHelper>
     </StyledContainer>
   );
 };