Customize and style Cypress `log` command (#32623)

* Customize and style Cypress `log` command

This PR will add a background color to the Cypress log command, in order to make it stand out. This should help with reviewing Cypress recorded runs and with the general E2E tests debugging experience.

* Remove acii art prefix

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Update the background color

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Apply Kamil's suggetion

* Improve performance and readability

* Extract id for the custom style element

---------

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

e2e/support/commands/overwrites/log.js

-Cypress.Commands.overwrite("log", (originalFn, message) => {
-  Cypress.log({
-    displayName: `--- ${window.logCalls}. ${message} ---`,
-    name: `--- ${window.logCalls}. ${message} ---`,
+Cypress.Commands.overwrite("log", (originalFn, text) => {
+  const logConfig = {
+    displayName: `${window.logCalls}. ${text}`,
+    name: "log",
     message: "",
-  });
+  };
 
+  appendStyleIfNotExists(logConfig);
+  Cypress.log(logConfig);
   window.logCalls++;
 });
 
@@ -12,3 +14,27 @@ Cypress.Commands.overwrite("log", (originalFn, message) => {
 beforeEach(() => {
   window.logCalls = 1;
 });
+
+function appendStyleIfNotExists(logConfig) {
+  const doc = window.top.document;
+  const headHTML = doc.head;
+  const styleId = "customLogStyle";
+  const customStyle = doc.getElementById(styleId);
+  const bgColor = "#7f43c9";
+
+  if (!customStyle) {
+    const style = document.createElement("style");
+
+    style.textContent = `
+    .command-name-${logConfig.name} .command-pin-target{
+      color: #ffffff !important;
+      background-color: ${bgColor} !important;
+      font-weight: bold !important;
+    }
+    `;
+    style.type = "text/css";
+    style.id = styleId;
+
+    headHTML.append(style);
+  }
+}