More tsx and components

NIAEFEUP · Nov 7, 2024 · 5caa9a7 · 5caa9a7
1 parent 4c6a667
commit 5caa9a7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/content-scripts/modules/icons/index.ts → content-scripts/modules/icons/index.tsx b/content-scripts/modules/icons/index.ts → content-scripts/modules/icons/index.tsx
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import jsx from "texsaur";
+
 import {
     BANNER_ICON_MAP,
     BG_IMAGE_ICON_MAP,
@@ -160,13 +163,12 @@ const replaceBgImages = (): void => {
         document.querySelectorAll(selector).forEach((i) => {
             if (icon === "") return i.classList.add("se-hidden-icon");
 
-            const span = document.createElement("span");
-            span.classList.add("se-icon");
-            span.classList.add(`ri-${icon}-line`);
+            const span = <span className={`se-icon ri-${icon}-line`} />;
 
             i.classList.add("se-remove-icon");
 
-            if (i.tagName === "img") replaceWithAttrs(i as HTMLElement, span);
+            if (i.tagName === "img")
+                replaceWithAttrs(i as HTMLElement, span as HTMLElement);
             else i.insertBefore(span, i.firstChild);
         });
     });
@@ -178,13 +180,15 @@ const replaceBgImages = (): void => {
 const replaceBanners = (): void => {
     Object.entries(BANNER_ICON_MAP).forEach(([k, v]) => {
         document.querySelectorAll(`.${k}`).forEach((i) => {
-            const span = document.createElement("span");
-            span.innerHTML = i.innerHTML;
-
-            const icon = document.createElement("span");
-            icon.classList.add("se-icon", `ri-${v}-fill`);
-            icon.style.fontSize = "1.5em";
-
+            const span = <span>{i.innerHTML}</span>;
+
+            // TODO (thePeras): Use <Icon />, but you need to expand the Icon component to support fill and style
+            const icon = (
+                <span
+                    className={`se-icon ri-${v}-fill`}
+                    style={{ fontSize: "1.5em" }}
+                />
+            );
             i.replaceChildren(icon, span);
         });
     });

diff --git a/content-scripts/modules/options/addStyle.ts → content-scripts/modules/options/addStyle.tsx b/content-scripts/modules/options/addStyle.ts → content-scripts/modules/options/addStyle.tsx
@@ -1,15 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import jsx from "texsaur";
+
 import removeElement from "../utilities/removeElement";
 
 // Utility function to inject CSS into the page
 export default function addStyles(id: string, css: string): void {
     // If the element already exists, remove it
     removeElement(id);
 
+    const style = <style id={id}>{css}</style>;
     const head = document.querySelector("head");
-    if (head) {
-        const style = document.createElement("style");
-        style.id = id;
-        style.textContent = css;
-        head.appendChild(style);
-    }
+    if (head) head.appendChild(style);
 }
diff --git a/content-scripts/modules/options/options.ts b/content-scripts/modules/options/options.ts
@@ -1,6 +1,7 @@
 import addStyles from "./addStyle";
 import removeElement from "../utilities/removeElement";
 
+// TODO(thePeras & toni): These functions can be extracted singles files
 export const hideShortcuts = async (shortcuts: string): Promise<void> => {
     switch (shortcuts) {
         case "on":