Меняем кнопки и цвета у блока BF905A в Тильде

example.html

<script>
const ucNewIcons = {
    "t898__icon-telegram_wrapper": {
        "iconPath": "none", // Нет новой иконки
        "tooltipText": null // Нет нового названия для тултипа
    },
    "t898__icon-whatsapp_wrapper": {
        "iconPath": "none",
        "tooltipText": null
    },
    "t898__icon-vkontakte_wrapper": {
        "iconPath": "none",
        "tooltipText": "ВКонтакте"
    },
    "t898__icon-skype_wrapper": {
        "iconPath": "none",
        "tooltipText": null
    },
    "t898__icon-phone_wrapper": {
        "iconPath": "https://static.tildacdn.com/tild6638-6464-4664-a364-376238326233/phone.svg",
        "tooltipText": "Телефон" // Пример нового текста для тултипа
    }
};

document.addEventListener('DOMContentLoaded', function() {
    Object.keys(ucNewIcons).forEach(className => {
        const iconWrappers = document.querySelectorAll(`.${className}`);
        iconWrappers.forEach(iconWrapper => {
            const { iconPath, tooltipText } = ucNewIcons[className];
            const tooltip = iconWrapper.querySelector('.t898__tooltip'); 

            // Если путь к иконке задан и отличен от "none"
            if (iconPath && iconPath !== "none") {
                // Очищаем содержимое, кроме тултипа
                Array.from(iconWrapper.childNodes).forEach(node => {
                    if (!node.classList || !node.classList.contains('t898__tooltip')) {
                        node.remove();
                    }
                });
                // Добавляем новую иконку
                const imgElement = document.createElement('img');
                imgElement.setAttribute('src', iconPath);
                imgElement.setAttribute('width', '50');
                imgElement.setAttribute('height', '50');
                imgElement.setAttribute('alt', 'Icon');
                iconWrapper.prepend(imgElement); // Добавляем изображение перед тултипом
            }
            
            // Обновляем текст тултипа, если это необходимо
            if (tooltipText && tooltip) {
                tooltip.textContent = tooltipText;
            }
        });
    });
});
</script>
<style>
/* Убираем тень у виджета с кнопками */
.t898__btn_label,
.t898__btn_label:hover,
.t898__icon_link,
.t898__icon_link:hover {
    box-shadow: none;
}

/* FIX: исправляем пробел у тултипа + меняем фон */
.t898__tooltip:after {
    right: -18px;
    border-left-color: #55514E;
}
.t898__tooltip {
    background: #55514E;
}

/* Цвет фона основной кнопки */
.t898__btn_label,
.t898__btn_input:checked+label {
    background: #55514E !important;
}

/* Цвет иконки у основной кнопки */
.t898__icon-write {
    stroke: #F4F2EF;
}

/* Цвет иконки «Close» */
.t898__icon-close g {
    fill: #F4F2EF;
}

/* Подсказка у основной кнопки */
.t898__hint {
    background: #55514E;
    opacity: 1;
}
.t898__hint:after {
    right: -18px;
    border-left-color: #55514E;
}
</style>