From d9ac6d2f892e6326fbaa068283ffdd62a00846de Mon Sep 17 00:00:00 2001
From: Nikhil-Doye <nikhil.doye@gmail.com>
Date: Sun, 19 Oct 2025 12:42:01 -0400
Subject: [PATCH] Refactor TestingPanel and WorkflowToolbar to use Button
 component

- Replaced standard button elements with a custom Button component in TestingPanel and WorkflowToolbar for consistent styling and improved UI.
- Updated button properties and classes to align with the new Button component's design, enhancing user experience across the application.
- Adjusted layout and spacing for better visual coherence and usability.
---
 src/components/TestingPanel.tsx    | 36 ++++++++-------
 src/components/WorkflowToolbar.tsx | 73 +++++++++++++++---------------
 2 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/src/components/TestingPanel.tsx b/src/components/TestingPanel.tsx
index 9f4bcd4..ddea157 100644
--- a/src/components/TestingPanel.tsx
+++ b/src/components/TestingPanel.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useWorkflowStore } from "../store/workflowStore";
 import { Play, FileText, Download, RotateCcw } from "lucide-react";
+import { Button } from "./ui/button";
 
 export const TestingPanel: React.FC = () => {
   const { currentWorkflow, executeWorkflow, isExecuting, executionResults } =
@@ -104,34 +105,35 @@ export const TestingPanel: React.FC = () => {
             </label>
             <div className="space-y-2">
               {sampleInputs.map((sample, index) => (
-                <button
+                <Button
                   key={index}
                   onClick={() => handleLoadSample(sample)}
-                  className="w-full text-left p-2 text-sm bg-gray-50 hover:bg-gray-100 rounded-md transition-colors"
+                  variant="ghost"
+                  className="w-full justify-start p-2 text-sm"
                 >
                   {sample.name}
-                </button>
+                </Button>
               ))}
             </div>
           </div>
 
           <div className="flex space-x-2">
-            <button
+            <Button
               onClick={handleTestExecution}
               disabled={isExecuting}
-              className="flex-1 flex items-center justify-center space-x-2 px-3 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="flex-1 bg-blue-600 hover:bg-blue-700"
             >
-              <Play className="w-4 h-4" />
-              <span>Run Test</span>
-            </button>
+              <Play className="w-4 h-4 mr-2" />
+              Run Test
+            </Button>
 
-            <button
+            <Button
               onClick={handleClearResults}
-              className="px-3 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors"
+              variant="secondary"
               title="Clear results"
             >
               <RotateCcw className="w-4 h-4" />
-            </button>
+            </Button>
           </div>
         </div>
       </div>
@@ -143,13 +145,15 @@ export const TestingPanel: React.FC = () => {
               <h4 className="text-sm font-medium text-gray-700">
                 Test Results
               </h4>
-              <button
+              <Button
                 onClick={handleExportResults}
-                className="flex items-center space-x-1 px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+                variant="secondary"
+                size="sm"
+                className="text-xs"
               >
-                <Download className="w-3 h-3" />
-                <span>Export</span>
-              </button>
+                <Download className="w-3 h-3 mr-1" />
+                Export
+              </Button>
             </div>
 
             <div className="space-y-3">
diff --git a/src/components/WorkflowToolbar.tsx b/src/components/WorkflowToolbar.tsx
index b90035c..d113b2e 100644
--- a/src/components/WorkflowToolbar.tsx
+++ b/src/components/WorkflowToolbar.tsx
@@ -15,6 +15,7 @@ import {
   loadWorkflowFromFile,
 } from "../utils/workflowSerialization";
 import { ApiKeysSettings } from "./ApiKeysSettings";
+import { Button } from "./ui/button";
 
 export const WorkflowToolbar: React.FC = () => {
   const {
@@ -88,79 +89,77 @@ export const WorkflowToolbar: React.FC = () => {
       </div>
 
       <div className="flex items-center space-x-2">
-        <button
+        <Button
           onClick={handleSave}
-          className={`flex items-center space-x-2 px-3 py-2 rounded-md transition-colors ${
-            showSaveSuccess
-              ? "bg-green-600 text-white hover:bg-green-700"
-              : "bg-gray-600 text-white hover:bg-gray-700"
-          }`}
+          variant={showSaveSuccess ? "default" : "default"}
+          className={showSaveSuccess ? "bg-green-600 hover:bg-green-700" : ""}
           title="Save workflow"
         >
           {showSaveSuccess ? (
-            <Check className="w-4 h-4" />
+            <Check className="w-4 h-4 mr-2" />
           ) : (
-            <Save className="w-4 h-4" />
+            <Save className="w-4 h-4 mr-2" />
           )}
-          <span>{showSaveSuccess ? "Saved!" : "Save"}</span>
-        </button>
+          {showSaveSuccess ? "Saved!" : "Save"}
+        </Button>
 
-        <button
+        <Button
           onClick={handleExport}
-          className="flex items-center space-x-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
+          variant="default"
           title="Export workflow"
         >
-          <Download className="w-4 h-4" />
-          <span>Export</span>
-        </button>
+          <Download className="w-4 h-4 mr-2" />
+          Export
+        </Button>
 
-        <button
+        <Button
           onClick={handleImport}
-          className="flex items-center space-x-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
+          variant="default"
           title="Import workflow"
         >
-          <Upload className="w-4 h-4" />
-          <span>Import</span>
-        </button>
+          <Upload className="w-4 h-4 mr-2" />
+          Import
+        </Button>
 
-        <button
+        <Button
           onClick={() => setShowApiKeysSettings(true)}
-          className="flex items-center space-x-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
+          variant="default"
           title="Configure API Keys"
         >
-          <Key className="w-4 h-4" />
-          <span>API Keys</span>
-        </button>
+          <Key className="w-4 h-4 mr-2" />
+          API Keys
+        </Button>
 
         <div className="w-px h-6 bg-gray-300" />
 
-        <button
+        <Button
           onClick={handleExecute}
           disabled={isExecuting}
-          className="flex items-center space-x-2 px-3 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          variant="default"
+          className="bg-blue-600 hover:bg-blue-700"
           title={isExecuting ? "Stop execution" : "Execute workflow"}
         >
           {isExecuting ? (
             <>
-              <Square className="w-4 h-4" />
-              <span>Stop</span>
+              <Square className="w-4 h-4 mr-2" />
+              Stop
             </>
           ) : (
             <>
-              <Play className="w-4 h-4" />
-              <span>Execute</span>
+              <Play className="w-4 h-4 mr-2" />
+              Execute
             </>
           )}
-        </button>
+        </Button>
 
-        <button
+        <Button
           onClick={handleClear}
-          className="flex items-center space-x-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
+          variant="default"
           title="Reset workflow (clear all nodes)"
         >
-          <RotateCcw className="w-4 h-4" />
-          <span>Reset</span>
-        </button>
+          <RotateCcw className="w-4 h-4 mr-2" />
+          Reset
+        </Button>
       </div>
 
       <input