using shadToggle to node too

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -25,6 +25,7 @@ import React from "react";
 import { nodeColors } from "../../../../utils";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import { PopUpContext } from "../../../../contexts/popUpContext";
+import ToggleShadComponent from "../../../../components/toggleShadComponent";
 
 export default function ParameterComponent({
   left,
@@ -193,7 +194,7 @@ export default function ParameterComponent({
           </div>
         ) : left === true && type === "bool" ? (
           <div className="mt-2">
-            <ToggleComponent
+            <ToggleShadComponent
               disabled={disabled}
               enabled={enabled}
               setEnabled={(t) => {
@@ -201,6 +202,7 @@ export default function ParameterComponent({
                 setEnabled(t);
 
               }}
+              size="large"
             />
           </div>
         ) : left === true && type === "float" ? (

src/frontend/src/components/toggleShadComponent/index.tsx

@@ -1,4 +1,3 @@
-import { classNames } from "../../utils";
 import { useEffect } from "react";
 import { ToggleComponentType } from "../../types/components";
 import { Switch } from "../ui/switch";
@@ -7,17 +6,36 @@ export default function ToggleShadComponent({
   enabled,
   setEnabled,
   disabled,
+  size
 }: ToggleComponentType) {
   useEffect(() => {
     if (disabled) {
       setEnabled(false);
     }
   }, [disabled, setEnabled]);
+  let scaleX, scaleY;
+  switch(size){
+    case "small":
+      scaleX = 0.6;
+      scaleY = 0.6;
+      break;
+    case "medium":
+      scaleX = 0.8;
+      scaleY = 0.8;
+      break;
+    case "large":
+      scaleX = 1;
+      scaleY = 1;
+      break;
+    default:
+      scaleX = 1;
+      scaleY = 1;
+  }
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
       <Switch
         style={{
-          transform: "scaleX(0.6) scaleY(0.6)",
+          transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
         }}
         className="data-[state=unchecked]:bg-slate-500"
         checked={enabled}

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -198,6 +198,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     setEnabled(e);
                                     save();
                                   }}
+                                  size="small"
                                   disabled={false}
                                 />
                               </div>
@@ -296,6 +297,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   changeAdvanced(data.node.template[n])
                                 }
                                 disabled={false}
+                                size="small"
                               />
                             </div>
                           </TableCell>

src/frontend/src/types/components/index.ts

@@ -20,6 +20,7 @@ export type ToggleComponentType = {
   enabled: boolean;
   setEnabled: (state: boolean) => void;
   disabled: boolean;
+  size: "small" | "medium" | "large";
 };
 export type DropDownComponentType = {
   value: string;