Fixes minor problems in the whatsapp web UI

fix-ui-whatsapp-web.js

// ==UserScript==
// @name         Maximize WhatsApp
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Fixes minor problems in the whatsapp UI
// @author       ruizlenato
// @match        https://web.whatsapp.com/*
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    const checkExist = setInterval(() => {
        const bodyApp = document.querySelector('#app > div > div:last-child > div:first-child');
        const loadingPage = document.documentElement.classList.contains("wf-loading");

        if (bodyApp && loadingPage) {
            bodyApp.id = 'maximize-wpp';
            clearInterval(checkExist);
        }
    }, 200);

    const applyStylesIfDarkTheme = () => {
        if (document.body.classList.contains('dark')) {
            const style = document.createElement("style");
            style.setAttribute("type", "text/css");
            style.innerHTML = `
                /* Maximize WhatsApp Web */
                #maximize-wpp {
                    max-width: initial !important;
                    width: 100% !important;
                    height: 100% !important;
                    margin: 0 !important;
                    position: unset !important;
                }
                /* Change the color of the icons to white if the dark theme is active */
                span[data-icon="menu"],
                span[data-icon="plus"],
                span[data-icon="search-alt"],
                span[data-icon="new-chat-outline"],
                span[data-icon="settings"],
                span[data-icon="settings-outline"],
                span[data-icon="community-tab"],
                span[data-icon="community-outline"],
                span[data-icon="newsletter-tab"],
                span[data-icon="newsletter-outline"],
                span[data-icon="status"],
                span[data-icon="status-outline"],
                span[data-icon="chats-filled"],
                span[data-icon="chats-outline"] {
                    color: #8696a0 !important;
                }
            `;
            document.head.appendChild(style);
        }
    };

    applyStylesIfDarkTheme();

    const observer = new MutationObserver(() => {
        applyStylesIfDarkTheme();
    });

    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });

})();