diff --git a/ui/components/providers/organizations/org-wizard-stepper.tsx b/ui/components/providers/organizations/org-wizard-stepper.tsx
index aaba81eefa..a1007d31b8 100644
--- a/ui/components/providers/organizations/org-wizard-stepper.tsx
+++ b/ui/components/providers/organizations/org-wizard-stepper.tsx
@@ -1,6 +1,12 @@
"use client";
-import { AlertCircle, FolderGit2, KeyRound, Shield } from "lucide-react";
+import {
+ AlertCircle,
+ CircleCheckBig,
+ FolderGit2,
+ KeyRound,
+ Rocket,
+} from "lucide-react";
import { ProwlerShort } from "@/components/icons/prowler/ProwlerIcons";
import { cn } from "@/lib/utils";
@@ -34,7 +40,7 @@ const STEPS: StepConfig[] = [
label: "Validate Connection",
description:
"Review provider resources and test the connection to Prowler.",
- icon: Shield,
+ icon: Rocket,
},
{
label: "Launch Scan",
@@ -75,14 +81,8 @@ export function OrgWizardStepper({
isError={isErrorStep}
icon={step.icon}
/>
- {/* Connector line */}
{index < STEPS.length - 1 && (
-
+
)}
@@ -131,19 +131,42 @@ function StepCircle({
);
}
- const borderColor =
- isComplete || isActive ? "border-primary" : "border-[#202020]";
- const iconColor = isComplete || isActive ? "text-primary" : "text-[#525252]";
+ if (isComplete) {
+ return (
+
+
+
+ );
+ }
+
+ if (isActive) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
+function StepConnector({ isComplete }: { isComplete: boolean }) {
+ if (isComplete) {
+ return ;
+ }
return (
-
-
+ className="h-14 w-px"
+ style={{
+ backgroundImage:
+ "repeating-linear-gradient(to bottom, var(--color-bg-data-muted) 0px, var(--color-bg-data-muted) 4px, transparent 4px, transparent 8px)",
+ }}
+ />
);
}
diff --git a/ui/components/providers/workflow/workflow-add-provider.tsx b/ui/components/providers/workflow/workflow-add-provider.tsx
index 46ca13e9bb..e0bb8149c9 100644
--- a/ui/components/providers/workflow/workflow-add-provider.tsx
+++ b/ui/components/providers/workflow/workflow-add-provider.tsx
@@ -1,6 +1,11 @@
"use client";
-import { FolderGit2, KeyRound, Shield } from "lucide-react";
+import {
+ CircleCheckBig,
+ FolderGit2,
+ KeyRound,
+ Rocket,
+} from "lucide-react";
import { usePathname } from "next/navigation";
import { ProwlerShort } from "@/components/icons/prowler/ProwlerIcons";
@@ -30,7 +35,7 @@ const STEPS: StepConfig[] = [
label: "Validate Connection",
description:
"Review provider resources and test the connection to Prowler.",
- icon: Shield,
+ icon: Rocket,
},
{
label: "Launch Scan",
@@ -66,14 +71,8 @@ export const WorkflowAddProvider = () => {
isActive={isActive}
icon={step.icon}
/>
- {/* Connector line */}
{index < STEPS.length - 1 && (
-
+
)}
@@ -107,19 +106,45 @@ interface StepCircleProps {
}
function StepCircle({ isComplete, isActive, icon: Icon }: StepCircleProps) {
- const borderColor =
- isComplete || isActive ? "border-primary" : "border-[#202020]";
- const iconColor = isComplete || isActive ? "text-primary" : "text-[#525252]";
+ if (isComplete) {
+ return (
+
+
+
+ );
+ }
+
+ if (isActive) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
+function StepConnector({ isComplete }: { isComplete: boolean }) {
+ if (isComplete) {
+ return ;
+ }
return (
-
-
+ className="h-14 w-px"
+ style={{
+ backgroundImage:
+ "repeating-linear-gradient(to bottom, var(--color-bg-data-muted) 0px, var(--color-bg-data-muted) 4px, transparent 4px, transparent 8px)",
+ }}
+ />
);
}