Integrations: design fixes and remove feature flag (#4003)

* Integrations: design fixes and remove feature flag

* Fix

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx

@@ -1,12 +1,12 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { SoonPill } from 'tsup.ui.index';
 
 import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
+import { SoonPill } from '@/ui/display/pill/components/SoonPill';
+import { Button } from '@/ui/input/button/components/Button';
+import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
 
-import { Integration, IntegrationType } from './constants/IntegrationTypes';
 interface SettingsIntegrationComponentProps {
-  integration: Integration;
+  integration: SettingsIntegration;
 }
 
 const StyledContainer = styled.div`
@@ -36,20 +36,6 @@ const StyledIntegrationLogo = styled.div`
   color: ${({ theme }) => theme.border.color.strong};
 `;
 
-const StyledButton = styled.button`
-  align-items: center;
-  background: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.font.color.secondary};
-  display: flex;
-  flex-direction: row;
-  font-size: ${({ theme }) => theme.font.size.md};
-  gap: ${({ theme }) => theme.spacing(1)};
-  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
-  cursor: pointer;
-`;
-
 const StyledSoonPill = styled(SoonPill)`
   padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
 `;
@@ -62,7 +48,6 @@ const StyledLogo = styled.img`
 export const SettingsIntegrationComponent = ({
   integration,
 }: SettingsIntegrationComponentProps) => {
-  const theme = useTheme();
   const openLinkInTab = (link: string) => {
     window.open(link);
   };
@@ -83,21 +68,15 @@ export const SettingsIntegrationComponent = ({
         </StyledIntegrationLogo>
         {integration.text}
       </StyledSection>
-      {integration.type === IntegrationType.Soon ? (
+      {integration.type === 'Soon' ? (
         <StyledSoonPill />
       ) : (
-        <StyledButton onClick={() => openLinkInTab(integration.link)}>
-          {integration.type === IntegrationType.Use ? (
-            <IconBolt size={theme.icon.size.md} />
-          ) : (
-            <IconArrowUpRight size={theme.icon.size.md} />
-          )}
-          {integration.type === IntegrationType.Goto ? (
-            <div>{integration.linkText}</div>
-          ) : (
-            <div>Use</div>
-          )}
-        </StyledButton>
+        <Button
+          onClick={() => openLinkInTab(integration.link)}
+          Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
+          title={integration.type === 'Goto' ? integration.linkText : 'Use'}
+          size="small"
+        />
       )}
     </StyledContainer>
   );