diff --git a/frontend/public/svgs/dotted-double-line.svg b/frontend/public/svgs/dotted-double-line.svg
deleted file mode 100644
index 7950fa118a..0000000000
--- a/frontend/public/svgs/dotted-double-line.svg
+++ /dev/null
@@ -1,312 +0,0 @@
-
diff --git a/frontend/src/container/Integrations/CloudIntegration/__tests__/RequestIntegration.test.tsx b/frontend/src/container/Integrations/CloudIntegration/__tests__/RequestIntegration.test.tsx
deleted file mode 100644
index 5b91b45a20..0000000000
--- a/frontend/src/container/Integrations/CloudIntegration/__tests__/RequestIntegration.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { I18nextProvider } from 'react-i18next';
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { RequestIntegrationBtn } from 'container/Integrations/RequestIntegrationBtn';
-import { IntegrationType } from 'container/Integrations/types';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import i18n from 'ReactI18';
-
-describe.skip('Request AWS integration', () => {
- it('should render the request integration button', async () => {
- let capturedPayload: any;
- server.use(
- rest.post('http://localhost/api/v1/event', async (req, res, ctx) => {
- capturedPayload = await req.json();
- return res(
- ctx.status(200),
- ctx.json({
- statusCode: 200,
- error: null,
- payload: 'Event Processed Successfully',
- }),
- );
- }),
- );
- act(() => {
- render(
-
- {' '}
- ,
- );
- });
-
- expect(
- screen.getByText(
- /can't find what you’re looking for\? request more integrations/i,
- ),
- ).toBeInTheDocument();
-
- await act(() => {
- fireEvent.change(screen.getByPlaceholderText(/Enter integration name/i), {
- target: { value: 's3 sync' },
- });
-
- const submitButton = screen.getByRole('button', { name: /submit/i });
-
- expect(submitButton).toBeEnabled();
-
- fireEvent.click(submitButton);
- });
-
- expect(capturedPayload.eventName).toBeDefined();
- expect(capturedPayload.attributes).toBeDefined();
-
- expect(capturedPayload.eventName).toBe('AWS service integration requested');
- expect(capturedPayload.attributes).toEqual({
- screen: 'AWS integration details',
- integration: 's3 sync',
- deployment_url: 'localhost',
- user_email: null,
- });
- });
-});
diff --git a/frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.styles.scss b/frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.styles.scss
index 65dee40d91..42d5e88645 100644
--- a/frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.styles.scss
+++ b/frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.styles.scss
@@ -50,6 +50,11 @@
display: flex;
flex-direction: column;
gap: 16px;
+
+ .request-integration-input {
+ width: 100%;
+ color: var(--l1-foreground);
+ }
}
.request-integration-form-title {
diff --git a/frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.tsx b/frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.tsx
index 7a7ff2e871..cb834be875 100644
--- a/frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.tsx
+++ b/frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.tsx
@@ -113,6 +113,7 @@ function IntegrationsHeader(props: IntegrationsHeaderProps): JSX.Element {
Which integration are you looking for?
{
diff --git a/frontend/src/container/Integrations/IntegrationsList/IntegrationsList.styles.scss b/frontend/src/container/Integrations/IntegrationsList/IntegrationsList.styles.scss
index 71a81d0185..883a7385f9 100644
--- a/frontend/src/container/Integrations/IntegrationsList/IntegrationsList.styles.scss
+++ b/frontend/src/container/Integrations/IntegrationsList/IntegrationsList.styles.scss
@@ -132,7 +132,6 @@
flex-direction: row;
gap: 10px;
padding: 8px 16px;
- border-radius: 3px;
color: var(--l1-foreground);
cursor: pointer;
@@ -142,23 +141,25 @@
flex-direction: row;
gap: 10px;
align-items: center;
+ padding: 4px;
+
+ border: 1px solid var(--l3-border);
+ background: var(--l3-background);
+ border-radius: 2px;
.integrations-list-item-name-image-container-image {
- height: 16px;
- width: 16px;
- border-radius: 2px;
- border: 1px solid var(--l3-border);
- background: var(--l2-background);
+ height: 12px;
+ width: 12px;
}
}
- &:hover {
- background: var(--l1-background);
- }
-
&:nth-child(even) {
background: var(--l2-background);
}
+
+ &:hover {
+ background: var(--l3-background-hover);
+ }
}
.integrations-list-item-column {
diff --git a/frontend/src/container/Integrations/IntegrationsList/IntegrationsList.tsx b/frontend/src/container/Integrations/IntegrationsList/IntegrationsList.tsx
index 838a56f0dd..af5b592359 100644
--- a/frontend/src/container/Integrations/IntegrationsList/IntegrationsList.tsx
+++ b/frontend/src/container/Integrations/IntegrationsList/IntegrationsList.tsx
@@ -152,9 +152,10 @@ function IntegrationsList(props: IntegrationsListProps): JSX.Element {
alt={integration.title}
className="integrations-list-item-name-image-container-image"
/>
-
- {integration.title}
-
+
+
+
+ {integration.title}