feat(ui): migrate from HeroUI to shadcn/ui (#11532)

ui/components/providers/workflow/forms/base-credentials-form.tsx

@@ -5,8 +5,8 @@ import { useEffect } from "react";
 import { Control, UseFormSetValue } from "react-hook-form";
 
 import { Button } from "@/components/shadcn";
+import { Form } from "@/components/shadcn/form";
 import { Separator } from "@/components/shadcn/separator/separator";
-import { Form } from "@/components/ui/form";
 import { useCredentialsForm } from "@/hooks/use-credentials-form";
 import { getAWSCredentialsTemplateLinks } from "@/lib";
 import { ProviderCredentialFields } from "@/lib/provider-credentials/provider-credential-fields";

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

@@ -12,8 +12,8 @@ import { AwsMethodSelector } from "@/components/providers/organizations/aws-meth
 import { WizardInputField } from "@/components/providers/workflow/forms/fields";
 import { ProviderTitleDocs } from "@/components/providers/workflow/provider-title-docs";
 import { Button } from "@/components/shadcn";
-import { useToast } from "@/components/ui";
-import { Form } from "@/components/ui/form";
+import { useToast } from "@/components/shadcn";
+import { Form } from "@/components/shadcn/form";
 import { addProviderFormSchema, ApiError, ProviderType } from "@/types";
 
 import { RadioGroupProvider } from "../../radio-group-provider";

ui/components/providers/workflow/forms/fields/wizard-input-field.tsx

@@ -4,8 +4,8 @@ import { Icon } from "@iconify/react";
 import { InputHTMLAttributes, useState } from "react";
 import { Control, FieldPath, FieldValues } from "react-hook-form";
 
+import { FormControl, FormField, FormMessage } from "@/components/shadcn/form";
 import { Input } from "@/components/shadcn/input/input";
-import { FormControl, FormField, FormMessage } from "@/components/ui/form";
 import { cn } from "@/lib/utils";
 
 interface WizardInputFieldProps<T extends FieldValues> {
@@ -142,7 +142,7 @@ export const WizardInputField = <T extends FieldValues>({
                   <button
                     type="button"
                     onClick={toggleVisibility}
-                    className="text-default-400 hover:text-default-500 absolute top-1/2 right-3 -translate-y-1/2"
+                    className="text-text-neutral-tertiary hover:text-text-neutral-secondary absolute top-1/2 right-3 -translate-y-1/2"
                     aria-label={
                       inputType === "password"
                         ? "Show password"

ui/components/providers/workflow/forms/fields/wizard-radio-card.tsx

@@ -18,7 +18,7 @@ export const WizardRadioCard = ({
     <div
       className={cn(
         "group inline-flex w-full cursor-pointer items-center justify-between gap-4 rounded-lg border-2 p-4",
-        "border-default hover:border-button-primary",
+        "border-border-input-primary hover:border-button-primary",
         "has-[[data-state=checked]]:border-button-primary",
         isInvalid && "border-bg-fail",
       )}

ui/components/providers/workflow/forms/fields/wizard-textarea-field.tsx

@@ -2,8 +2,8 @@
 
 import { Control, FieldPath, FieldValues } from "react-hook-form";
 
+import { FormControl, FormField, FormMessage } from "@/components/shadcn/form";
 import { Textarea } from "@/components/shadcn/textarea/textarea";
-import { FormControl, FormField, FormMessage } from "@/components/ui/form";
 import { cn } from "@/lib/utils";
 
 interface WizardTextareaFieldProps<T extends FieldValues> {

ui/components/providers/workflow/forms/provider-connection-info.tsx

@@ -1,3 +1,4 @@
+import { getProviderLogo } from "@/components/shadcn/entities/get-provider-logo";
 import { ProviderType } from "@/types";
 
 import {
@@ -5,7 +6,6 @@ import {
   ConnectionPending,
   ConnectionTrue,
 } from "../../../icons";
-import { getProviderLogo } from "../../../ui/entities/get-provider-logo";
 
 interface ProviderConnectionInfoProps {
   connected: boolean | null;
@@ -24,19 +24,19 @@ export const ProviderConnectionInfo = ({
     switch (connected) {
       case true:
         return (
-          <div className="rounded-medium border-system-success bg-system-success-lighter flex items-center justify-center border-2 p-1">
-            <ConnectionTrue className="text-system-success" size={24} />
+          <div className="border-bg-pass bg-bg-pass-secondary flex items-center justify-center rounded-xl border-2 p-1">
+            <ConnectionTrue className="text-text-success-primary" size={24} />
           </div>
         );
       case false:
         return (
-          <div className="rounded-medium border-border-error flex items-center justify-center border-2 p-1">
+          <div className="border-border-error flex items-center justify-center rounded-xl border-2 p-1">
             <ConnectionFalse className="text-text-error-primary" size={24} />
           </div>
         );
       case null:
         return (
-          <div className="bg-info-lighter border-info-lighter rounded-medium flex items-center justify-center border p-1">
+          <div className="bg-info-lighter border-info-lighter flex items-center justify-center rounded-xl border p-1">
             <ConnectionPending className="text-info" size={24} />
           </div>
         );

ui/components/providers/workflow/forms/select-credentials-type/alibabacloud/credentials-type/alibabacloud-role-credentials-form.tsx

@@ -13,16 +13,16 @@ export const AlibabaCloudRoleCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect assuming RAM Role
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide the RAM Role ARN to assume, along with the Access Keys of a
           RAM user that has permission to assume the role.
         </div>
       </div>
 
-      <span className="text-default-500 text-xs font-bold">
+      <span className="text-text-neutral-tertiary text-xs font-bold">
         RAM Role to Assume
       </span>
 
@@ -39,7 +39,7 @@ export const AlibabaCloudRoleCredentialsForm = ({
 
       <Separator />
 
-      <span className="text-default-500 text-xs font-bold">
+      <span className="text-text-neutral-tertiary text-xs font-bold">
         Credentials for Role Assumption
       </span>
 
@@ -64,7 +64,9 @@ export const AlibabaCloudRoleCredentialsForm = ({
         isRequired
       />
 
-      <span className="text-default-500 text-xs">Optional fields</span>
+      <span className="text-text-neutral-tertiary text-xs">
+        Optional fields
+      </span>
 
       <WizardInputField
         control={control}
@@ -77,7 +79,7 @@ export const AlibabaCloudRoleCredentialsForm = ({
         isRequired={false}
       />
 
-      <div className="text-default-400 text-xs">
+      <div className="text-text-neutral-tertiary text-xs">
         Keys never leave your browser unencrypted and are stored as secrets in
         the backend. The role will be assumed using STS to obtain temporary
         credentials.

ui/components/providers/workflow/forms/select-credentials-type/alibabacloud/credentials-type/alibabacloud-static-credentials-form.tsx

@@ -12,10 +12,10 @@ export const AlibabaCloudStaticCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Access Keys
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide a RAM user Access Key ID and Access Key Secret with read
           access to the resources you want Prowler to assess.
         </div>
@@ -40,7 +40,7 @@ export const AlibabaCloudStaticCredentialsForm = ({
         variant="bordered"
         isRequired
       />
-      <div className="text-default-400 text-xs">
+      <div className="text-text-neutral-tertiary text-xs">
         Keys never leave your browser unencrypted and are stored as secrets in
         the backend. Rotate the key from Alibaba Cloud RAM console anytime if
         needed.

ui/components/providers/workflow/forms/select-credentials-type/alibabacloud/radio-group-alibabacloud-via-credentials-type-form.tsx

@@ -3,8 +3,8 @@
 import { Control, Controller, FieldValues, Path } from "react-hook-form";
 
 import { WizardRadioCard } from "@/components/providers/workflow/forms/fields";
+import { FormMessage } from "@/components/shadcn/form";
 import { RadioGroup } from "@/components/shadcn/radio-group/radio-group";
-import { FormMessage } from "@/components/ui/form";
 
 type RadioGroupAlibabaCloudViaCredentialsFormProps<T extends FieldValues> = {
   control: Control<T>;
@@ -38,11 +38,13 @@ export const RadioGroupAlibabaCloudViaCredentialsTypeForm = <
                 onChange?.(value);
               }}
             >
-              <span className="text-default-500 text-sm">Using RAM Role</span>
+              <span className="text-text-neutral-tertiary text-sm">
+                Using RAM Role
+              </span>
               <WizardRadioCard value="role" isInvalid={isInvalid}>
                 Connect assuming RAM Role
               </WizardRadioCard>
-              <span className="text-default-500 text-sm">
+              <span className="text-text-neutral-tertiary text-sm">
                 Using Credentials
               </span>
               <WizardRadioCard value="credentials" isInvalid={isInvalid}>

ui/components/providers/workflow/forms/select-credentials-type/alibabacloud/select-via-alibabacloud.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 
-import { Form } from "@/components/ui/form";
+import { Form } from "@/components/shadcn/form";
 
 import { RadioGroupAlibabaCloudViaCredentialsTypeForm } from "./radio-group-alibabacloud-via-credentials-type-form";
 

ui/components/providers/workflow/forms/select-credentials-type/aws/credentials-type/aws-role-credentials-form.tsx

@@ -73,13 +73,13 @@ export const AWSRoleCredentialsForm = ({
     <>
       <div className="flex flex-col">
         {type === "providers" && (
-          <div className="text-md text-default-foreground leading-9 font-bold">
+          <div className="text-md text-text-neutral-primary leading-9 font-bold">
             Connect assuming IAM Role
           </div>
         )}
       </div>
 
-      <span className="text-default-500 text-xs font-bold">
+      <span className="text-text-neutral-tertiary text-xs font-bold">
         Specify which AWS credentials to use
       </span>
 
@@ -157,10 +157,12 @@ export const AWSRoleCredentialsForm = ({
       <Separator />
 
       {type === "providers" ? (
-        <span className="text-default-500 text-xs font-bold">Assume Role</span>
+        <span className="text-text-neutral-tertiary text-xs font-bold">
+          Assume Role
+        </span>
       ) : (
         <div className="flex items-center justify-between">
-          <span className="text-default-500 text-xs font-bold">
+          <span className="text-text-neutral-tertiary text-xs font-bold">
             {isCloudEnv && credentialsType === "aws-sdk-default"
               ? "Adding a role is required"
               : "Optionally add a role"}
@@ -207,7 +209,9 @@ export const AWSRoleCredentialsForm = ({
             isRequired
           />
 
-          <span className="text-default-500 text-xs">Optional fields</span>
+          <span className="text-text-neutral-tertiary text-xs">
+            Optional fields
+          </span>
           <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
             <WizardInputField
               control={control}

ui/components/providers/workflow/forms/select-credentials-type/aws/credentials-type/aws-static-credentials-form.tsx

@@ -12,10 +12,10 @@ export const AWSStaticCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Credentials
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide the information for your AWS credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/aws/radio-group-aws-via-credentials-type-form.tsx

@@ -3,8 +3,8 @@
 import { Control, Controller } from "react-hook-form";
 
 import { WizardRadioCard } from "@/components/providers/workflow/forms/fields";
+import { FormMessage } from "@/components/shadcn/form";
 import { RadioGroup } from "@/components/shadcn/radio-group/radio-group";
-import { FormMessage } from "@/components/ui/form";
 
 type RadioGroupAWSViaCredentialsFormProps = {
   control: Control<any>;
@@ -33,11 +33,15 @@ export const RadioGroupAWSViaCredentialsTypeForm = ({
               onChange?.(value);
             }}
           >
-            <span className="text-default-500 text-sm">Using IAM Role</span>
+            <span className="text-text-neutral-tertiary text-sm">
+              Using IAM Role
+            </span>
             <WizardRadioCard value="role" isInvalid={isInvalid}>
               Connect assuming IAM Role
             </WizardRadioCard>
-            <span className="text-default-500 text-sm">Using Credentials</span>
+            <span className="text-text-neutral-tertiary text-sm">
+              Using Credentials
+            </span>
             <WizardRadioCard value="credentials" isInvalid={isInvalid}>
               Connect via Credentials
             </WizardRadioCard>

ui/components/providers/workflow/forms/select-credentials-type/aws/select-via-aws.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 
-import { Form } from "@/components/ui/form";
+import { Form } from "@/components/shadcn/form";
 
 import { RadioGroupAWSViaCredentialsTypeForm } from "./radio-group-aws-via-credentials-type-form";
 

ui/components/providers/workflow/forms/select-credentials-type/cloudflare/credentials-type/cloudflare-api-key-credentials-form.tsx

@@ -14,10 +14,10 @@ export const CloudflareApiKeyCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via API Key + Email
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide your Cloudflare Global API Key and the email address
           associated with your Cloudflare account.
         </div>
@@ -42,7 +42,7 @@ export const CloudflareApiKeyCredentialsForm = ({
         variant="bordered"
         isRequired
       />
-      <div className="text-default-400 text-xs">
+      <div className="text-text-neutral-tertiary text-xs">
         Credentials never leave your browser unencrypted and are stored as
         secrets in the backend. You can regenerate your API Key from the
         Cloudflare dashboard anytime if needed.

ui/components/providers/workflow/forms/select-credentials-type/cloudflare/credentials-type/cloudflare-api-token-credentials-form.tsx

@@ -14,10 +14,10 @@ export const CloudflareApiTokenCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via API Token
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide a Cloudflare API Token with read permissions to the resources
           you want Prowler to assess. This is the recommended authentication
           method.
@@ -33,7 +33,7 @@ export const CloudflareApiTokenCredentialsForm = ({
         variant="bordered"
         isRequired
       />
-      <div className="text-default-400 text-xs">
+      <div className="text-text-neutral-tertiary text-xs">
         Tokens never leave your browser unencrypted and are stored as secrets in
         the backend. You can revoke the token from the Cloudflare dashboard
         anytime if needed.

ui/components/providers/workflow/forms/select-credentials-type/cloudflare/radio-group-cloudflare-via-credentials-type-form.tsx

@@ -3,8 +3,8 @@
 import { Control, Controller } from "react-hook-form";
 
 import { WizardRadioCard } from "@/components/providers/workflow/forms/fields";
+import { FormMessage } from "@/components/shadcn/form";
 import { RadioGroup } from "@/components/shadcn/radio-group/radio-group";
-import { FormMessage } from "@/components/ui/form";
 
 type RadioGroupCloudflareViaCredentialsFormProps = {
   control: Control<any>;
@@ -33,7 +33,7 @@ export const RadioGroupCloudflareViaCredentialsTypeForm = ({
               onChange?.(value);
             }}
           >
-            <span className="text-default-500 text-sm">
+            <span className="text-text-neutral-tertiary text-sm">
               Select Authentication Method
             </span>
             <WizardRadioCard value="api_token" isInvalid={isInvalid}>

ui/components/providers/workflow/forms/select-credentials-type/cloudflare/select-via-cloudflare.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 
-import { Form } from "@/components/ui/form";
+import { Form } from "@/components/shadcn/form";
 
 import { RadioGroupCloudflareViaCredentialsTypeForm } from "./radio-group-cloudflare-via-credentials-type-form";
 

ui/components/providers/workflow/forms/select-credentials-type/gcp/credentials-type/gcp-default-credentials-form.tsx

@@ -11,10 +11,10 @@ export const GCPDefaultCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Credentials
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide the information for your GCP credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/gcp/credentials-type/gcp-service-account-key-form.tsx

@@ -11,10 +11,10 @@ export const GCPServiceAccountKeyForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Service Account Key
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide the service account key for your GCP credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/gcp/radio-group-gcp-via-credentials-type-form.tsx

@@ -3,8 +3,8 @@
 import { Control, Controller } from "react-hook-form";
 
 import { WizardRadioCard } from "@/components/providers/workflow/forms/fields";
+import { FormMessage } from "@/components/shadcn/form";
 import { RadioGroup } from "@/components/shadcn/radio-group/radio-group";
-import { FormMessage } from "@/components/ui/form";
 
 type RadioGroupGCPViaCredentialsFormProps = {
   control: Control<any>;
@@ -33,13 +33,13 @@ export const RadioGroupGCPViaCredentialsTypeForm = ({
               onChange?.(value);
             }}
           >
-            <span className="text-default-500 text-sm">
+            <span className="text-text-neutral-tertiary text-sm">
               Using Service Account
             </span>
             <WizardRadioCard value="service-account" isInvalid={isInvalid}>
               Connect via Service Account Key
             </WizardRadioCard>
-            <span className="text-default-500 text-sm">
+            <span className="text-text-neutral-tertiary text-sm">
               Using Application Default Credentials
             </span>
             <WizardRadioCard value="credentials" isInvalid={isInvalid}>

ui/components/providers/workflow/forms/select-credentials-type/gcp/select-via-gcp.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 
-import { Form } from "@/components/ui/form";
+import { Form } from "@/components/shadcn/form";
 
 import { RadioGroupGCPViaCredentialsTypeForm } from "./radio-group-gcp-via-credentials-type-form";
 

ui/components/providers/workflow/forms/select-credentials-type/github/credentials-type/github-app-form.tsx

@@ -12,10 +12,10 @@ export const GitHubAppForm = ({ control }: { control: Control<any> }) => {
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via GitHub App
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide your GitHub App ID and private key.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/github/credentials-type/github-oauth-app-form.tsx

@@ -9,10 +9,10 @@ export const GitHubOAuthAppForm = ({ control }: { control: Control<any> }) => {
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via OAuth App
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide your GitHub OAuth App token.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/github/credentials-type/github-personal-access-token-form.tsx

@@ -13,10 +13,10 @@ export const GitHubPersonalAccessTokenForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Personal Access Token
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide your GitHub personal access token.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/github/radio-group-github-via-credentials-type-form.tsx

@@ -3,8 +3,8 @@
 import { Control, Controller } from "react-hook-form";
 
 import { WizardRadioCard } from "@/components/providers/workflow/forms/fields";
+import { FormMessage } from "@/components/shadcn/form";
 import { RadioGroup } from "@/components/shadcn/radio-group/radio-group";
-import { FormMessage } from "@/components/ui/form";
 
 type RadioGroupGitHubViaCredentialsFormProps = {
   control: Control<any>;
@@ -33,7 +33,7 @@ export const RadioGroupGitHubViaCredentialsTypeForm = ({
               onChange?.(value);
             }}
           >
-            <span className="text-default-500 text-sm">
+            <span className="text-text-neutral-tertiary text-sm">
               Personal Access Token
             </span>
             <WizardRadioCard
@@ -43,12 +43,16 @@ export const RadioGroupGitHubViaCredentialsTypeForm = ({
               Personal Access Token
             </WizardRadioCard>
 
-            <span className="text-default-500 text-sm">OAuth App</span>
+            <span className="text-text-neutral-tertiary text-sm">
+              OAuth App
+            </span>
             <WizardRadioCard value="oauth_app" isInvalid={isInvalid}>
               OAuth App Token
             </WizardRadioCard>
 
-            <span className="text-default-500 text-sm">GitHub App</span>
+            <span className="text-text-neutral-tertiary text-sm">
+              GitHub App
+            </span>
             <WizardRadioCard value="github_app" isInvalid={isInvalid}>
               GitHub App
             </WizardRadioCard>

ui/components/providers/workflow/forms/select-credentials-type/github/select-via-github.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 
-import { Form } from "@/components/ui/form";
+import { Form } from "@/components/shadcn/form";
 
 import { RadioGroupGitHubViaCredentialsTypeForm } from "./radio-group-github-via-credentials-type-form";
 

ui/components/providers/workflow/forms/select-credentials-type/m365/credentials-type/m365-certificate-credentials-form.tsx

@@ -17,10 +17,10 @@ export const M365CertificateCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           App Certificate Credentials
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide your Microsoft 365 application credentials with
           certificate authentication.
         </div>
@@ -55,7 +55,7 @@ export const M365CertificateCredentialsForm = ({
         isRequired
         minRows={4}
       />
-      <p className="text-default-500 text-sm">
+      <p className="text-text-neutral-tertiary text-sm">
         The certificate content must be base64 encoded from an unsigned
         certificate. For detailed instructions on how to generate and encode
         your certificate, please refer to the{" "}

ui/components/providers/workflow/forms/select-credentials-type/m365/credentials-type/m365-client-secret-credentials-form.tsx

@@ -13,10 +13,10 @@ export const M365ClientSecretCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           App Client Secret Credentials
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide your Microsoft 365 application credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/m365/radio-group-m365-via-credentials-type-form.tsx

@@ -3,8 +3,8 @@
 import { Control, Controller } from "react-hook-form";
 
 import { WizardRadioCard } from "@/components/providers/workflow/forms/fields";
+import { FormMessage } from "@/components/shadcn/form";
 import { RadioGroup } from "@/components/shadcn/radio-group/radio-group";
-import { FormMessage } from "@/components/ui/form";
 
 type RadioGroupM365ViaCredentialsFormProps = {
   control: Control<any>;
@@ -33,7 +33,7 @@ export const RadioGroupM365ViaCredentialsTypeForm = ({
               onChange?.(value);
             }}
           >
-            <span className="text-default-500 text-sm">
+            <span className="text-text-neutral-tertiary text-sm">
               Select Authentication Method
             </span>
             <WizardRadioCard value="app_client_secret" isInvalid={isInvalid}>

ui/components/providers/workflow/forms/select-credentials-type/m365/select-via-m365.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 
-import { Form } from "@/components/ui/form";
+import { Form } from "@/components/shadcn/form";
 
 import { RadioGroupM365ViaCredentialsTypeForm } from "./radio-group-m365-via-credentials-type-form";
 

ui/components/providers/workflow/forms/test-connection-form.tsx

@@ -12,7 +12,7 @@ import { z } from "zod";
 import { deleteCredentials } from "@/actions/providers";
 import { CheckIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
-import { Form } from "@/components/ui/form";
+import { Form } from "@/components/shadcn/form";
 import { testProviderConnection } from "@/lib/provider-helpers";
 import { ProviderType } from "@/types";
 import { testConnectionFormSchema } from "@/types";
@@ -155,7 +155,7 @@ export const TestConnectionForm = ({
       >
         <div className="text-left">
           <div className="mb-2 text-xl font-medium">Check connection</div>
-          <p className="text-small text-default-500 py-2">
+          <p className="text-text-neutral-tertiary py-2 text-sm">
             {!isUpdated
               ? "After a successful connection, continue to the launch step to configure and start your scan."
               : "A successful connection will redirect you to the providers page."}
@@ -178,12 +178,12 @@ export const TestConnectionForm = ({
                 />
               </div>
               <div className="min-w-0 flex-1">
-                <p className="text-small text-text-error-primary break-words">
+                <p className="text-text-error-primary text-sm break-words">
                   {connectionStatus.error || "Unknown error"}
                 </p>
               </div>
             </div>
-            <p className="text-small text-text-error-primary">
+            <p className="text-text-error-primary text-sm">
               It seems there was an issue with your credentials. Please review
               your credentials and try again.
             </p>
@@ -198,7 +198,7 @@ export const TestConnectionForm = ({
         />
 
         {isUpdated && !connectionStatus?.error && (
-          <p className="text-small text-default-500 py-2">
+          <p className="text-text-neutral-tertiary py-2 text-sm">
             Check the new credentials and test the connection.
           </p>
         )}

ui/components/providers/workflow/forms/via-credentials/azure-credentials-form.tsx

@@ -11,10 +11,10 @@ export const AzureCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Credentials
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide the information for your Azure credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/via-credentials/googleworkspace-credentials-form.tsx

@@ -15,10 +15,10 @@ export const GoogleWorkspaceCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Service Account
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide your Service Account JSON and the admin email to impersonate.
         </div>
       </div>
@@ -48,7 +48,7 @@ export const GoogleWorkspaceCredentialsForm = ({
         variant="bordered"
         isRequired
       />
-      <div className="text-default-400 text-xs">
+      <div className="text-text-neutral-tertiary text-xs">
         Credentials never leave your browser unencrypted and are stored as
         secrets in the backend. You can revoke the Service Account from the
         Google Cloud Console anytime if needed.

ui/components/providers/workflow/forms/via-credentials/iac-credentials-form.tsx

@@ -11,10 +11,10 @@ export const IacCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Repository
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide an access token if the repository is private (optional).
         </div>
       </div>

ui/components/providers/workflow/forms/via-credentials/image-credentials-form.tsx

@@ -12,10 +12,10 @@ export const ImageCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Registry Credentials
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide registry credentials to authenticate with your container
           registry (all fields are optional).
         </div>
@@ -52,10 +52,10 @@ export const ImageCredentialsForm = ({
       />
 
       <div className="flex flex-col pt-2">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Scan Scope
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Limit which repositories and tags are scanned using regex patterns.
         </div>
       </div>

ui/components/providers/workflow/forms/via-credentials/k8s-credentials-form.tsx

@@ -26,10 +26,10 @@ export const KubernetesCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Credentials
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide the kubeconfig content for your Kubernetes credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/via-credentials/mongodbatlas-credentials-form.tsx

@@ -12,10 +12,10 @@ export const MongoDBAtlasCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via API Keys
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide an organization-level MongoDB Atlas API public and private key
           with read access to the resources you want Prowler to assess.
         </div>
@@ -40,7 +40,7 @@ export const MongoDBAtlasCredentialsForm = ({
         variant="bordered"
         isRequired
       />
-      <div className="text-default-400 text-xs">
+      <div className="text-text-neutral-tertiary text-xs">
         Keys never leave your browser unencrypted and are stored as secrets in
         the backend. Rotate the key from MongoDB Atlas anytime if needed.
       </div>

ui/components/providers/workflow/forms/via-credentials/okta-credentials-form.tsx

@@ -15,10 +15,10 @@ export const OktaCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via OAuth 2.0 Private Key JWT
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide the Client ID and PEM-encoded private key of an Okta API
           Services app whose matching public key (JWK) is registered on the
           service app.
@@ -43,7 +43,7 @@ export const OktaCredentialsForm = ({
         variant="bordered"
         isRequired
       />
-      <div className="text-default-400 text-xs">
+      <div className="text-text-neutral-tertiary text-xs">
         The private key is sent over TLS and stored as a secret in the backend.
         You can rotate or revoke the public key from the Okta admin console at
         any time.

ui/components/providers/workflow/forms/via-credentials/openstack-credentials-form.tsx

@@ -14,10 +14,10 @@ export const OpenStackCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via Clouds YAML
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide your OpenStack clouds.yaml content and the cloud name.
         </div>
       </div>

ui/components/providers/workflow/forms/via-credentials/oraclecloud-credentials-form.tsx

@@ -15,10 +15,10 @@ export const OracleCloudCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via API Key
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Please provide your Oracle Cloud Infrastructure API key credentials.
         </div>
       </div>
@@ -78,7 +78,7 @@ export const OracleCloudCredentialsForm = ({
         variant="bordered"
         isRequired={false}
       />
-      <div className="text-default-400 text-xs">
+      <div className="text-text-neutral-tertiary text-xs">
         Paste the raw content of your OCI private key file (PEM format). The key
         will be automatically encoded for secure transmission.
       </div>

ui/components/providers/workflow/forms/via-credentials/vercel-credentials-form.tsx

@@ -12,10 +12,10 @@ export const VercelCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md text-default-foreground leading-9 font-bold">
+        <div className="text-md text-text-neutral-primary leading-9 font-bold">
           Connect via API Token
         </div>
-        <div className="text-default-500 text-sm">
+        <div className="text-text-neutral-tertiary text-sm">
           Provide a Vercel API Token with read permissions to the resources you
           want Prowler to assess.
         </div>
@@ -30,7 +30,7 @@ export const VercelCredentialsForm = ({
         variant="bordered"
         isRequired
       />
-      <div className="text-default-400 text-xs">
+      <div className="text-text-neutral-tertiary text-xs">
         Tokens never leave your browser unencrypted and are stored as secrets in
         the backend. You can revoke the token from the Vercel dashboard anytime
         at vercel.com/account/tokens.