From 32e5b6fe491c77c552197b05e6c116171d9cb4bf Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 17 Jun 2024 17:35:56 -0300
Subject: [PATCH] Fixed styling of button on List Component

---
 .../components/inputListComponent/index.tsx   | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 7b5f87274..5144facb9 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -2,8 +2,9 @@ import { useEffect } from "react";
 import { InputListComponentType } from "../../types/components";
 
 import _ from "lodash";
-import { classNames } from "../../utils/utils";
+import { classNames, cn } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
+import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 
 export default function InputListComponent({
@@ -54,7 +55,13 @@ export default function InputListComponent({
               }
             />
             {idx === 0 ? (
-              <button
+              <Button
+                unstyled
+                className={cn(
+                  disabled || playgroundDisabled
+                    ? "cursor-not-allowed text-muted-foreground"
+                    : "text-primary hover:text-accent-foreground",
+                )}
                 onClick={(e) => {
                   let newInputList = _.cloneDeep(value);
                   newInputList.push("");
@@ -68,13 +75,16 @@ export default function InputListComponent({
                 }
                 disabled={disabled || playgroundDisabled}
               >
-                <IconComponent
-                  name="Plus"
-                  className={"h-4 w-4 hover:text-accent-foreground"}
-                />
-              </button>
+                <IconComponent name="Plus" className="h-4 w-4" />
+              </Button>
             ) : (
-              <button
+              <Button
+                unstyled
+                className={cn(
+                  disabled || playgroundDisabled
+                    ? "cursor-not-allowed text-muted-foreground"
+                    : "text-primary hover:text-accent-foreground",
+                )}
                 data-testid={
                   `input-list-minus-btn${
                     editNode ? "-edit" : ""
@@ -88,15 +98,8 @@ export default function InputListComponent({
                 }}
                 disabled={disabled || playgroundDisabled}
               >
-                <IconComponent
-                  name="X"
-                  className={`h-4 w-4 ${
-                    disabled || playgroundDisabled
-                      ? ""
-                      : "hover:text-accent-foreground"
-                  }`}
-                />
-              </button>
+                <IconComponent name="X" className="h-4 w-4" />
+              </Button>
             )}
           </div>
         );