From 7fa4e09874711082c7826e9e4eaf0dc6fda4717d Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Wed, 20 Sep 2023 23:09:03 +0530
Subject: [PATCH] feat: use alert component

---
 .../IntegrationsSection.tsx                   | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
index 044bb09d9..8a798f2cc 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -5,6 +5,8 @@ import { integrationSlugNameMapping } from "public/data/frequentConstants";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
+  Alert,
+  AlertDescription,
   DeleteActionModal,
   EmptyState,
   FormControl,
@@ -53,19 +55,16 @@ export const IntegrationsSection = ({
 
       {!bot?.isActive && (
         <div className="px-6 py-4">
-          <EmptyState
-            icon={faExclamationTriangle}
-            className="rounded-md border border-mineshaft-700 pt-8 pb-4"
-            title={
-              <>
-                No active integrations found. Enable End-to-End Encryption in{" "}
-                <Link href={`/project/${currentWorkspace?._id}/settings`} passHref>
-                  <a className="underline underline-offset-2">project settings </a>
-                </Link>
-                .{" "}
-              </>
-            }
-          />
+          <Alert variant="warning">
+            <FontAwesomeIcon icon={faExclamationTriangle} />
+            <AlertDescription>
+              All the active integrations will be disabled. Disable End-to-End Encryption in{" "}
+              <Link href={`/project/${currentWorkspace?._id}/settings`} passHref>
+                <a className="underline underline-offset-2">project settings </a>
+              </Link>
+              to re-enable it .
+            </AlertDescription>
+          </Alert>
         </div>
       )}