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 724515f4ed6..03553124521 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,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);