WIP

app/(prowler)/providers/(set-up-provider)/connect-account/page.tsx

@@ -3,16 +3,10 @@
 import React from "react";
 
 import { ConnectAccountForm } from "@/components/providers/workflow/forms";
-import { NavigationHeader } from "@/components/ui";
 
 export default function ConnectAccountPage() {
   return (
     <>
-      <NavigationHeader
-        title="Connect your cloud account"
-        icon="icon-park-outline:close-small"
-        href="/providers"
-      />
       <ConnectAccountForm />
     </>
   );

app/(prowler)/providers/(set-up-provider)/layout.tsx

@@ -1,8 +1,10 @@
 import "@/styles/globals.css";
 
+import { Spacer } from "@nextui-org/react";
 import React from "react";
 
 import { Workflow } from "@/components/providers/workflow";
+import { NavigationHeader } from "@/components/ui";
 
 interface ProviderLayoutProps {
   children: React.ReactNode;
@@ -11,6 +13,12 @@ interface ProviderLayoutProps {
 export default function ProviderLayout({ children }: ProviderLayoutProps) {
   return (
     <>
+      <NavigationHeader
+        title="Connect your cloud account"
+        icon="icon-park-outline:close-small"
+        href="/providers"
+      />
+      <Spacer y={16} />
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
         <div className="order-1 my-auto hidden h-full lg:col-span-4 lg:block">
           <Workflow />

components/providers/radio-group-provider.tsx

@@ -75,7 +75,6 @@ export const RadioGroupProvider: React.FC<RadioGroupProviderProps> = ({
         <>
           <RadioGroup
             className="flex flex-wrap"
-            label="Select one provider"
             isInvalid={isInvalid}
             {...field}
           >

components/providers/workflow/forms/connect-account-form.tsx

@@ -49,6 +49,7 @@ export const ConnectAccountForm = () => {
             });
             break;
           case "/data/attributes/uid":
+          case "/data/attributes/__all__":
             form.setError("providerId", {
               type: "server",
               message: errorMessage,
@@ -85,9 +86,9 @@ export const ConnectAccountForm = () => {
           control={form.control}
           name="providerId"
           type="text"
-          label="Provider ID"
+          label="Provider UID"
           labelPlacement="inside"
-          placeholder={"Enter the provider ID"}
+          placeholder={"Enter the provider UID"}
           variant="bordered"
           isRequired
           isInvalid={!!form.formState.errors.providerId}

components/providers/workflow/workflow.tsx

@@ -9,7 +9,8 @@ import { VerticalSteps } from "./vertical-steps";
 const steps = [
   {
     title: "Add your cloud account",
-    description: "Please add your cloud account to get started.",
+    description:
+      "Select the cloud provider of the account you want to connect.",
     href: "/providers/connect-account",
   },
   {
@@ -41,7 +42,7 @@ export const Workflow = () => {
   return (
     <section className="max-w-sm">
       <h1 className="mb-2 text-xl font-medium" id="getting-started">
-        Getting started
+        Add a cloud account
       </h1>
       <p className="mb-5 text-small text-default-500">
         Follow the steps to configure your cloud account. This allows you to

tailwind.config.js

@@ -23,7 +23,7 @@ module.exports = {
           theme: {
             midnight: "#030921",
             pale: "#f3fcff",
-            green: "#6af400",
+            green: "#8ce112",
             purple: "#5001d0",
             coral: "#ff5356",
             orange: "#f69000",