Fixes after running UI consistency

This commit is contained in:
sean-eskerium
2025-10-23 09:38:21 -04:00
parent ef8f725da7
commit 5b98adc1e4
3 changed files with 17 additions and 13 deletions

View File

@@ -127,7 +127,11 @@ export const AgentWorkOrderExample = () => {
className="text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/10"
aria-label={showDetails ? "Hide details" : "Show details"}
>
{showDetails ? <ChevronUp className="w-4 h-4 mr-1" /> : <ChevronDown className="w-4 h-4 mr-1" />}
{showDetails ? (
<ChevronUp className="w-4 h-4 mr-1" aria-hidden="true" />
) : (
<ChevronDown className="w-4 h-4 mr-1" aria-hidden="true" />
)}
Details
</Button>
</div>
@@ -177,7 +181,7 @@ export const AgentWorkOrderExample = () => {
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-orange-500 hover:bg-orange-600 rounded-full p-1.5 shadow-lg shadow-orange-500/50 border-2 border-orange-400 transition-colors cursor-pointer"
aria-label="Remove Human-in-Loop checkpoint"
>
<User className="w-3.5 h-3.5 text-white" />
<User className="w-3.5 h-3.5 text-white" aria-hidden="true" />
</button>
</TooltipTrigger>
<TooltipContent>Click to remove</TooltipContent>
@@ -196,7 +200,7 @@ export const AgentWorkOrderExample = () => {
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-orange-500 hover:bg-orange-600 transition-colors shadow-lg shadow-orange-500/50 flex items-center justify-center text-white"
aria-label="Add Human-in-Loop step"
>
<Plus className="w-4 h-4" />
<Plus className="w-4 h-4" aria-hidden="true" />
</button>
</TooltipTrigger>
<TooltipContent>Add Human-in-Loop</TooltipContent>
@@ -237,7 +241,7 @@ export const AgentWorkOrderExample = () => {
duration: 0.2,
ease: "easeOut",
}}
className="grid grid-cols-2 gap-6 pt-6 border-t border-gray-200/50 dark:border-gray-700/30"
className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 border-t border-gray-200/50 dark:border-gray-700/30"
>
{/* Left Column */}
<div className="space-y-4">
@@ -263,7 +267,7 @@ export const AgentWorkOrderExample = () => {
className="text-sm font-medium text-cyan-600 dark:text-cyan-400 hover:underline inline-flex items-center gap-1 mt-0.5"
>
https://github.com/Wirasm/dylan
<ExternalLink className="w-3 h-3" />
<ExternalLink className="w-3 h-3" aria-hidden="true" />
</a>
</div>
<div>

View File

@@ -66,7 +66,7 @@ export const StepHistoryCard = ({ step, isExpanded, onToggle, document }: StepHi
<h4 className="font-semibold text-gray-900 dark:text-white">{step.stepName}</h4>
{step.isHumanInLoop && (
<span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20">
<AlertCircle className="w-3 h-3" />
<AlertCircle className="w-3 h-3" aria-hidden="true" />
Human-in-Loop
</span>
)}
@@ -249,7 +249,7 @@ export const StepHistoryCard = ({ step, isExpanded, onToggle, document }: StepHi
"shadow-lg shadow-green-500/20",
)}
>
<CheckCircle2 className="w-4 h-4 mr-2" />
<CheckCircle2 className="w-4 h-4 mr-2" aria-hidden="true" />
Approve and Move to Next Step
</Button>
</div>

View File

@@ -14,7 +14,7 @@ interface WorkflowStepButtonProps {
const getColorValue = (color: string) => {
const colorValues = {
purple: "rgb(168,85,247)",
green: "rgb(16,185,129)",
green: "rgb(34,197,94)",
blue: "rgb(59,130,246)",
cyan: "rgb(34,211,238)",
};
@@ -38,11 +38,11 @@ export const WorkflowStepButton: React.FC<WorkflowStepButtonProps> = ({
innerGlow: "shadow-[inset_0_0_10px_rgba(168,85,247,0.8)]",
},
green: {
border: "border-emerald-400",
glow: "shadow-[0_0_15px_rgba(16,185,129,0.8)]",
glowHover: "hover:shadow-[0_0_25px_rgba(16,185,129,1)]",
fill: "bg-emerald-400",
innerGlow: "shadow-[inset_0_0_10px_rgba(16,185,129,0.8)]",
border: "border-green-400",
glow: "shadow-[0_0_15px_rgba(34,197,94,0.8)]",
glowHover: "hover:shadow-[0_0_25px_rgba(34,197,94,1)]",
fill: "bg-green-400",
innerGlow: "shadow-[inset_0_0_10px_rgba(34,197,94,0.8)]",
},
blue: {
border: "border-blue-400",