From 7538a1e37a2bf30e1e13f2a02e1f7bbb55145fab Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 14 Jun 2023 18:17:35 -0300
Subject: [PATCH] using shadToggle to node too

---
 .../components/parameterComponent/index.tsx   |  4 +++-
 .../components/toggleShadComponent/index.tsx  | 22 +++++++++++++++++--
 .../src/modals/EditNodeModal/index.tsx        |  2 ++
 src/frontend/src/types/components/index.ts    |  1 +
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index ae2c144a0..b3ecd04f6 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/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" ? (
diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
index 632ee1bad..94d3b0f59 100644
--- a/src/frontend/src/components/toggleShadComponent/index.tsx
+++ b/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}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 79c5ad1e3..cb603b35f 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/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>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 060bd6d05..907d47f3f 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/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;