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)", + }} + /> ); }