add the changes for custom alert

apps/browser/src/phishing-detection/content/phishing-detection-browser.service.ts

@@ -1,44 +1,81 @@
 export class PhishingDetectionBrowserService {
   static notifyUser(url: string) {
     const phishingDivId = "phishing-notification-bar";
-    const message = `${url} is a known phishing site`;
+    const message = `${url} is a known phishing site `;
 
+    // Remove existing notification to prevent duplicates
+    const existingAlert = document.getElementById(phishingDivId);
+    if (existingAlert) {
+      existingAlert.remove();
+    }
+
+    // Create notification wrapper
     const wrapper = document.createElement("div");
     wrapper.id = phishingDivId;
-    wrapper.classList.add("inner-wrapper");
+    wrapper.classList.add(
+      "tw-fixed",
+      "tw-top-4",
+      "tw-right-4", // **Position at the top-right corner**
+      "tw-p-4",
+      "tw-rounded-xl",
+      "tw-shadow-2xl",
+      "tw-flex",
+      "tw-items-center",
+      "tw-gap-3",
+      "tw-bg-danger",
+      "tw-text-white",
+    );
 
-    wrapper.style.position = "fixed";
-    wrapper.style.top = "20px";
-    wrapper.style.right = "20px";
+    // Styling
+    wrapper.style.maxWidth = "400px";
     wrapper.style.zIndex = "10000";
-    wrapper.style.backgroundColor = "#fff";
-    wrapper.style.padding = "15px";
-    wrapper.style.border = "1px solid #ccc";
-    wrapper.style.borderRadius = "5px";
-    wrapper.style.boxShadow = "0 2px 10px rgba(0,0,0,0.2)";
+    wrapper.style.display = "flex";
+    wrapper.style.alignItems = "center";
+    wrapper.style.borderRadius = "12px";
+    wrapper.style.padding = "16px 20px";
+    wrapper.style.backgroundColor = "#b00020"; // Bitwarden danger red
+    wrapper.style.color = "#ffffff";
+    wrapper.style.boxShadow = "0 6px 12px rgba(0, 0, 0, 0.3)";
 
-    const messageElement = document.createElement("div");
-    messageElement.id = "change-text";
-    messageElement.classList.add("notification-body");
+    // Warning icon
+    const icon = document.createElement("i");
+    icon.classList.add("bwi", "bwi-fw", "bwi-warning");
+    icon.setAttribute("aria-hidden", "true");
+    icon.style.fontSize = "24px";
+
+    // Alert message
+    const messageElement = document.createElement("span");
+    messageElement.classList.add("tw-text-xl", "tw-font-semibold", "tw-grow");
     messageElement.textContent = message;
 
+    // "Exit the page" button
     const exitButton = document.createElement("button");
     exitButton.type = "button";
-    exitButton.id = "change-exit";
-    exitButton.classList.add("primary");
-    exitButton.textContent = "Exit the page";
-    exitButton.onclick = () => {
-      const barEl = document.getElementById(phishingDivId);
-      if (barEl != null) {
-        barEl.parentElement.removeChild(barEl);
-      }
-    };
+    exitButton.classList.add(
+      "tw-bg-white",
+      "tw-text-danger",
+      "tw-font-semibold",
+      "tw-text-lg",
+      "tw-px-4",
+      "tw-py-2",
+      "tw-rounded-lg",
+      "tw-ml-4",
+    ); // Added tw-ml-4 for spacing
+    exitButton.style.border = "none";
+    exitButton.style.cursor = "pointer";
+    exitButton.textContent = "Exit Page";
+    exitButton.addEventListener("click", () => {
+      window.open("about:blank", "_self"); // Open a blank page in the same tab
+      window.close(); // Try to close it
+    });
 
+    // Assemble the notification
+    wrapper.appendChild(icon);
     wrapper.appendChild(messageElement);
     wrapper.appendChild(exitButton);
-
     document.body.appendChild(wrapper);
 
+    // Auto-remove after 10 seconds
     setTimeout(() => {
       if (document.body.contains(wrapper)) {
         document.body.removeChild(wrapper);