Refactor component styles and icons

src/frontend/src/components/chatComponent/index.tsx

@@ -87,13 +87,13 @@ export default function FlowToolbar(): JSX.Element {
           }
         >
           <div className="flex">
-            <div className="flex h-full w-full  gap-1 rounded-sm text-medium-indigo transition-all">
+            <div className="flex h-full w-full  gap-1 rounded-sm transition-all">
               {hasIO ? (
                 <IOModal open={open} setOpen={setOpen} disable={!hasIO}>
-                  <div className="relative inline-flex w-full items-center justify-center   gap-1 px-5 py-3 text-sm font-semibold text-medium-indigo transition-all transition-all duration-500 ease-in-out ease-in-out hover:bg-hover">
+                  <div className="relative inline-flex w-full items-center justify-center   gap-1 px-5 py-3 text-sm font-semibold transition-all duration-500 ease-in-out hover:bg-hover">
                     <ForwardedIconComponent
-                      name="Zap"
-                      className={"message-button-icon h-5 w-5 transition-all"}
+                      name="MonitorPlay"
+                      className={" h-5 w-5 transition-all"}
                     />
                     Playground
                   </div>

src/frontend/src/utils/styleUtils.ts

@@ -136,6 +136,7 @@ import {
   X,
   XCircle,
   Zap,
+  MonitorPlay
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -504,6 +505,7 @@ export const nodeIconsLucide: iconsType = {
   Bot,
   Delete,
   Command,
+  MonitorPlay,
   ArrowBigUp,
   Dot,
 };