From 8742183d6e82913de293062cd1094c9596111301 Mon Sep 17 00:00:00 2001
From: Cy Okeke <cokeke@bitwarden.com>
Date: Thu, 20 Mar 2025 16:40:43 +0100
Subject: [PATCH] move the alert as dialog

---
 .../phishing-detection-browser.service.ts     | 99 ++++++++++---------
 1 file changed, 50 insertions(+), 49 deletions(-)

diff --git a/apps/browser/src/phishing-detection/content/phishing-detection-browser.service.ts b/apps/browser/src/phishing-detection/content/phishing-detection-browser.service.ts
index 03553124521..e1436cc6136 100644
--- a/apps/browser/src/phishing-detection/content/phishing-detection-browser.service.ts
+++ b/apps/browser/src/phishing-detection/content/phishing-detection-browser.service.ts
@@ -1,84 +1,85 @@
 export class PhishingDetectionBrowserService {
   static notifyUser(url: string) {
-    const phishingDivId = "phishing-notification-bar";
+    const phishingDivId = "phishing-notification-dialog";
     const message = `${url} is a known phishing site `;
 
     // Remove existing notification to prevent duplicates
-    const existingAlert = document.getElementById(phishingDivId);
-    if (existingAlert) {
-      existingAlert.remove();
+    const existingDialog = document.getElementById(phishingDivId);
+    if (existingDialog) {
+      existingDialog.remove();
     }
 
-    // Create notification wrapper
-    const wrapper = document.createElement("div");
-    wrapper.id = phishingDivId;
-    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",
-    );
+    // Create the backdrop (dark overlay)
+    const backdrop = document.createElement("div");
+    backdrop.id = "phishing-dialog-backdrop";
+    backdrop.style.position = "fixed";
+    backdrop.style.top = "0";
+    backdrop.style.left = "0";
+    backdrop.style.width = "100vw";
+    backdrop.style.height = "100vh";
+    backdrop.style.backgroundColor = "rgba(0, 0, 0, 0.6)"; // Semi-transparent dark background
+    backdrop.style.zIndex = "9999";
+    backdrop.style.display = "flex";
+    backdrop.style.justifyContent = "center";
+    backdrop.style.alignItems = "center";
 
-    // Styling
-    wrapper.style.maxWidth = "400px";
-    wrapper.style.zIndex = "10000";
-    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)";
+    // Create the dialog box
+    const dialog = document.createElement("div");
+    dialog.id = phishingDivId;
+    dialog.style.backgroundColor = "#b00020"; // Danger red
+    dialog.style.color = "#ffffff";
+    dialog.style.borderRadius = "12px";
+    dialog.style.padding = "20px 30px";
+    dialog.style.maxWidth = "450px";
+    dialog.style.textAlign = "center";
+    dialog.style.boxShadow = "0 6px 12px rgba(0, 0, 0, 0.3)";
+    dialog.style.display = "flex";
+    dialog.style.flexDirection = "column";
+    dialog.style.alignItems = "center";
 
     // Warning icon
     const icon = document.createElement("i");
     icon.classList.add("bwi", "bwi-fw", "bwi-warning");
     icon.setAttribute("aria-hidden", "true");
-    icon.style.fontSize = "24px";
+    icon.style.fontSize = "32px";
+    icon.style.marginBottom = "10px";
 
     // Alert message
     const messageElement = document.createElement("span");
-    messageElement.classList.add("tw-text-xl", "tw-font-semibold", "tw-grow");
+    messageElement.style.fontSize = "18px";
+    messageElement.style.fontWeight = "bold";
+    messageElement.style.marginBottom = "15px";
     messageElement.textContent = message;
 
     // "Exit the page" button
     const exitButton = document.createElement("button");
     exitButton.type = "button";
-    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.backgroundColor = "#ffffff";
+    exitButton.style.color = "#b00020";
+    exitButton.style.fontSize = "16px";
+    exitButton.style.fontWeight = "bold";
+    exitButton.style.padding = "10px 20px";
     exitButton.style.border = "none";
+    exitButton.style.borderRadius = "8px";
     exitButton.style.cursor = "pointer";
+    exitButton.style.marginTop = "10px";
     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);
+    // Append elements
+    dialog.appendChild(icon);
+    dialog.appendChild(messageElement);
+    dialog.appendChild(exitButton);
+    backdrop.appendChild(dialog);
+    document.body.appendChild(backdrop);
 
     // Auto-remove after 10 seconds
     setTimeout(() => {
-      if (document.body.contains(wrapper)) {
-        document.body.removeChild(wrapper);
+      if (document.body.contains(backdrop)) {
+        document.body.removeChild(backdrop);
       }
     }, 10000);
   }