client(badges): the badge name and the label gets uri encoded on generate

Author: 0l1v3rr

client/src/components/input/LineInput.tsx

@@ -33,10 +33,7 @@ const LineInput: FC<InputProps> = (props) => {
 
   return (
     <div className={`${props.className} w-full flex flex-col gap-1 text-sm`}>
-      <BlurOverlay
-        isActive={isPopupOpen}
-        closePopup={() => setIsPopupOpen(false)}
-      />
+      <BlurOverlay isActive={isPopupOpen} />
 
       <LinePopup
         addBadge={addBadge}
@@ -127,7 +124,9 @@ const LineInput: FC<InputProps> = (props) => {
                       (e.target as HTMLImageElement).style.display = "none";
                     }}
                     className="w-4 h-4"
-                    src={`https://cdn.simpleicons.org/${badge.iconName}/${
+                    src={`https://cdn.simpleicons.org/${encodeURI(
+                      badge.iconName
+                    )}/${
                       badge.color === "auto" ? "" : badge.color.replace("#", "")
                     }`}
                     alt=""

client/src/components/popups/BlurOverlay.tsx

@@ -1,20 +1,18 @@
-import { FC, useEffect } from "react";
+import { FC } from "react";
 
 interface OverlayProps {
   isActive: boolean;
-  closePopup?: () => void;
 }
 
 const BlurOverlay: FC<OverlayProps> = (props) => {
-  useEffect(() => {
-    document.body.style.overflow = props.isActive ? "hidden" : "auto";
-  }, [props.isActive]);
-
   return (
     <div
       className={`w-screen h-screen fixed top-0 left-0 transition-all duration-300 
-      z-20 ${props.isActive ? "backdrop-blur-sm" : "pointer-events-none"}`}
-      onClick={props.closePopup}
+      z-20 ${
+        props.isActive
+          ? "backdrop-blur-sm bg-black/[.5]"
+          : "pointer-events-none"
+      }`}
     />
   );
 };

client/src/components/popups/LinePopup.tsx

@@ -39,7 +39,7 @@ const LinePopup: FC<LinePopupProps> = (props) => {
   };
 
   const activeClasses = "opacity-100 pointer-events-auto scale-100";
-  const inactiveClasses = "opacity-0 pointer-events-none scale-0";
+  const inactiveClasses = "opacity-0 pointer-events-none scale-50";
 
   return (
     <div

client/src/utils/generate.ts

@@ -183,7 +183,7 @@ export const generateLink = ({
     let line = `&line${l.lineNumber}=`;
     for (const b of l.badges) {
       const color = b.color.replace("#", "");
-      line += `${b.iconName},${b.label},${color};`;
+      line += `${encodeURI(b.iconName)},${encodeURI(b.label)},${color};`;
     }
 
     res += line;