fix: add warning to whatsapp theming (#138)

* fix: add warning to whatsapp theming

* fix: typo

3 files changed, 57 insertions, 2 deletions

diff --git a/recipes/whatsapp/package.json b/recipes/whatsapp/package.json
index f476599..e2573dd 100644
--- a/recipes/whatsapp/package.json
+++ b/recipes/whatsapp/package.json
@@ -1,7 +1,7 @@
 {
   "id": "whatsapp",
   "name": "WhatsApp",
-  "version": "3.4.4",
+  "version": "3.4.5",
   "license": "MIT",
   "config": {
     "serviceURL": "https://web.whatsapp.com",
diff --git a/recipes/whatsapp/service.css b/recipes/whatsapp/service.css
index 0d4d5fc..667f618 100644
--- a/recipes/whatsapp/service.css
+++ b/recipes/whatsapp/service.css
@@ -15,4 +15,19 @@
 /* fix for blank spaces regarding view width on screens larger than 1080p */
 .app-wrapper-web ._1XkO3 {
   max-width: none !important;
-}
\ No newline at end of file
+}
+
+/* Warning for trying to change theme on whatsapp */
+.ferdium-theme-message {
+  padding-top: 15px;
+  color: red;
+  line-height: 20px;
+}
+
+.ferdium-theme-title {
+  padding-top: 15px;
+  color: red;
+  line-height: 20px;
+  font-weight: bold;
+  text-align: center;
+}
diff --git a/recipes/whatsapp/webview.js b/recipes/whatsapp/webview.js
index 77c4ebb..d0b0cd8 100644
--- a/recipes/whatsapp/webview.js
+++ b/recipes/whatsapp/webview.js
@@ -4,6 +4,45 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 
+function createElement(messageBody, idString) {
+  const messageText = document.createTextNode(messageBody);
+  const message = document.createElement("p");
+  message?.setAttribute("id", idString);
+  message?.setAttribute("class", idString);
+  message?.appendChild(messageText);
+
+  return message;
+}
+
+function addThemeMessage() {
+  const idString = 'ferdium-theme-message';
+  const idStringTitle = 'ferdium-theme-title';
+  const elementExists = document.querySelectorAll(`.${idString}`)[0] || document.querySelectorAll(`.${idStringTitle}`)[0] ? true : false;
+
+  if (!elementExists) {
+    const themePopupDiv = document.querySelectorAll("._2Nr6U")[0];
+
+    // Create Ferdium Warning title element
+    const messageTitleString = 'FERDIUM WARNING!';
+    const messageTitleElement = createElement(messageTitleString, idStringTitle);
+
+    // Create Ferdium Warning message element
+    const messageBody1 = 'To change your Whatsapp Theme, please use the native settings on Ferdium.';
+    const messageBody2 = 'For that, right-click on the Whatsapp Service and click on Enable/Disable Dark mode.';
+    const message1 = createElement(messageBody1, idString);
+    const message2 = createElement(messageBody2, idString);
+
+    // Add messages to Whatsapp Window
+    themePopupDiv?.prepend(message2)
+    themePopupDiv?.prepend(message1)
+    themePopupDiv?.prepend(messageTitleElement)
+
+    // Hide OK Button.
+    document.querySelectorAll("._20C5O")[1]?.setAttribute('style', 'display: none;');
+    document.querySelectorAll("._2Nr6U > form")[0]?.setAttribute('style', 'display: none;');
+  }
+}
+
 module.exports = Ferdium => {
   const getMessages = () => {
     let count = 0;
@@ -48,6 +87,7 @@ module.exports = Ferdium => {
   const loopFunc = () => {
     getMessages();
     getActiveDialogTitle();
+    addThemeMessage();
   };
 
   window.addEventListener('beforeunload', async () => {