replaced div with span in root components

Author: KovalchukDanil0

src/containers/ReferencesBanner/index.tsx

@@ -2,7 +2,9 @@ import React, { ReactElement } from "react";
 import { ReferencesConfig, touch } from "../../shared";
 import "./index.scss";
 
-type Props = ReferencesConfig & { regexDetermineBeta: RegExp };
+interface Props extends ReferencesConfig {
+  regexDetermineBeta: RegExp;
+}
 
 export default function ReferencesBanner({
   pages,

src/pages/Author/index.ts

@@ -111,7 +111,7 @@ async function checkReferences() {
   }
 
   const container = document.body.insertBefore(
-    document.createElement("div"),
+    document.createElement("span"),
     document.body.firstChild,
   );
 

src/pages/Jira/index.ts

@@ -24,7 +24,7 @@ function createWFButton() {
     throw new Error("buttonsContainer is undefined");
   }
 
-  const rootDiv = document.createElement("div");
+  const rootDiv = document.createElement("span");
   rootDiv.classList.add("aui-buttons");
 
   const butCreateWF = createElement(

src/pages/LivePerf/index.ts

@@ -120,27 +120,27 @@ async function checkMothersite(from: FromTypes) {
   const message = `MOTHERSITE LINKS ON THIS PAGE - ${mothersiteLinks}`;
 
   if (mothersiteLinks > 0 && from === "content") {
-    const rootDiv = document.createElement("div");
-    rootDiv.classList.add("alertBanner");
+    const rootDiv = document.createElement("span");
+
+    const root = createRoot(
+      document.body.insertBefore(rootDiv, document.body.firstChild),
+    );
 
     const alertBannerElm = createElement(
       "div",
-      {},
+      { className: "alertBanner" },
       createElement("h2", {}, message),
       createElement(
         "button",
         {
           onClick() {
-            document.querySelector(".alertBanner")?.remove();
+            root.unmount();
           },
         },
         "X",
       ),
     );
 
-    const root = createRoot(
-      document.body.insertBefore(rootDiv, document.body.firstChild),
-    );
     root.render(alertBannerElm);
   } else {
     Browser.runtime.sendMessage({
@@ -287,11 +287,11 @@ async function findShowroomCode() {
     data: showroomConfig.data,
   });
 
-  const div: HTMLElement = document.createElement("div");
+  const rootElm: HTMLElement = document.createElement("span");
 
   const showroom = await waitForElm("#acc-showroom");
 
-  const root = createRoot(showroom.appendChild(div));
+  const root = createRoot(showroom.appendChild(rootElm));
   root.render(showroomCodes);
 }
 

src/pages/WFPage/index.ts

@@ -112,7 +112,7 @@ async function usefulLinks() {
     );
 
     const root = createRoot(
-      container.appendChild(document.createElement("div")),
+      container.appendChild(document.createElement("span")),
     );
     root.render(wfFixedLinks);
   }
@@ -142,7 +142,7 @@ function openAllPagesButton() {
   );
 
   const root = createRoot(
-    buttonsContainer.appendChild(document.createElement("div")),
+    buttonsContainer.appendChild(document.createElement("span")),
   );
   root.render(buttonOpenAllPages);
 }