chore: improve user experience on the scan page when there is no clou…

…d provider added

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

@@ -14,7 +14,7 @@ export default function ProviderLayout({ children }: ProviderLayoutProps) {
   return (
     <>
       <NavigationHeader
-        title="Connect your cloud account"
+        title="Connect your cloud provider"
         icon="icon-park-outline:close-small"
         href="/providers"
       />

ui/app/(prowler)/providers/page.tsx

@@ -22,7 +22,7 @@ export default async function Providers({
 
   return (
     <>
-      <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
+      <Header title="Cloud Providers" icon="fluent:cloud-sync-24-regular" />
 
       <Spacer y={4} />
       <FilterControls search />

ui/app/(prowler)/scans/page.tsx

@@ -51,8 +51,6 @@ export default async function Scans({
 
   return (
     <>
-      <Header title="Scans" icon="lucide:scan-search" />
-
       {thereIsNoProviders && (
         <>
           <Spacer y={4} />
@@ -70,12 +68,16 @@ export default async function Scans({
             </>
           ) : (
             <>
+              <Header title="Scans" icon="lucide:scan-search" />
+
               <LaunchScanWorkflow providers={providerInfo} />
               <Spacer y={4} />
               <ScanWarningBar />
               <Spacer y={8} />
             </>
           )}
+          <Header title="Scans" icon="lucide:scan-search" />
+
           <div className="grid grid-cols-12 items-start gap-4">
             <div className="col-span-12">
               <div className="flex flex-row items-center justify-between">

ui/components/providers/add-provider-button.tsx

@@ -7,13 +7,13 @@ export const AddProviderButton = () => {
   return (
     <CustomButton
       asLink="/providers/connect-account"
-      ariaLabel="Add Account"
+      ariaLabel="Add Cloud Provider"
       variant="solid"
       color="action"
       size="md"
       endContent={<AddIcon size={20} />}
     >
-      Add Account
+      Add Cloud Provider
     </CustomButton>
   );
 };

ui/components/providers/workflow/workflow-add-provider.tsx

@@ -8,21 +8,21 @@ import { VerticalSteps } from "./vertical-steps";
 
 const steps = [
   {
-    title: "Add your cloud account",
+    title: "Add your cloud provider",
     description:
       "Select the cloud provider for the account to connect and specify whether to use an IAM role or credentials for access.",
     href: "/providers/connect-account",
   },
   {
-    title: "Add credentials to your cloud account",
+    title: "Add credentials to your cloud provider",
     description:
-      "Provide the credentials required to connect to the cloud account.",
+      "Provide the credentials required to connect to the cloud provider.",
     href: "/providers/add-credentials",
   },
   {
     title: "Check connection and launch scan",
     description:
-      "Verify the connection to ensure that the provided credentials are valid for accessing the cloud account and initiating a scan.",
+      "Verify the connection to ensure that the provided credentials are valid for accessing the cloud provider and initiating a scan.",
     href: "/providers/test-connection",
   },
 ];
@@ -39,10 +39,10 @@ export const WorkflowAddProvider = () => {
   return (
     <section className="max-w-sm">
       <h1 className="mb-2 text-xl font-medium" id="getting-started">
-        Add a cloud account
+        Add a cloud provider
       </h1>
       <p className="mb-5 text-small text-default-500">
-        Complete the steps to configure the cloud account, enabling the launch
+        Complete the steps to configure the cloud provider, enabling the launch
         of the first scan once completed.
       </p>
       <Progress

ui/components/scans/no-providers-added.tsx

@@ -1,30 +1,44 @@
 "use client";
+
 import { Card, CardBody } from "@nextui-org/react";
 import React from "react";
 
+import { InfoIcon } from "../icons/Icons";
 import { CustomButton } from "../ui/custom";
 
 export const NoProvidersAdded = () => {
   return (
-    <div className="flex h-screen items-center justify-center">
-      <Card shadow="sm" className="w-full max-w-md dark:bg-prowler-blue-400">
-        <CardBody className="space-y-6 p-6 text-center">
-          <h2 className="text-xl font-bold">No Cloud Accounts Configured</h2>
-          <p className="text-md text-gray-600">
-            You don&apos;t have any cloud accounts configured yet. This is the
-            first step to get started.
-          </p>
-          <CustomButton
-            asLink="/providers/connect-account"
-            ariaLabel="Go to Add Cloud Account page"
-            variant="solid"
-            color="action"
-            size="lg"
-          >
-            Add Cloud Account
-          </CustomButton>
-        </CardBody>
-      </Card>
+    <div className="dark:bg-prowler-blue-900 flex min-h-screen items-center justify-center">
+      <div className="mx-auto w-full max-w-7xl px-4">
+        <Card className="mx-auto w-full max-w-3xl rounded-lg dark:bg-prowler-blue-400">
+          <CardBody className="flex flex-col items-center space-y-8 p-6 text-center sm:p-8">
+            <div className="flex flex-col items-center space-y-4">
+              <InfoIcon className="h-10 w-10 text-gray-800 dark:text-white" />
+              <h2 className="text-2xl font-bold text-gray-800 dark:text-white">
+                No Cloud Providers Configured
+              </h2>
+            </div>
+            <div className="flex flex-col items-center space-y-3">
+              <p className="text-md leading-relaxed text-gray-600 dark:text-gray-300">
+                You don&apos;t have any cloud providers configured yet.
+              </p>
+              <p className="text-md leading-relaxed text-gray-600 dark:text-gray-300">
+                Adding a cloud provider is the first step.
+              </p>
+            </div>
+            <CustomButton
+              asLink="/providers/connect-account"
+              ariaLabel="Go to Add Cloud Provider page"
+              className="w-full max-w-xs justify-center"
+              variant="solid"
+              color="action"
+              size="lg"
+            >
+              Get Started
+            </CustomButton>
+          </CardBody>
+        </Card>
+      </div>
     </div>
   );
 };

ui/components/scans/no-providers-connected.tsx

@@ -2,8 +2,8 @@
 
 import React from "react";
 
-import { CustomButton } from "../ui/custom";
 import { InfoIcon } from "../icons/Icons";
+import { CustomButton } from "../ui/custom";
 
 export const NoProvidersConnected = () => {
   return (

ui/components/scans/table/scan-detail.tsx

@@ -2,15 +2,15 @@
 
 import { Snippet } from "@nextui-org/react";
 
+import { ConnectionTrue } from "@/components/icons";
+import { ConnectionFalse } from "@/components/icons/Icons";
 import {
   DateWithTime,
   EntityInfoShort,
   InfoField,
 } from "@/components/ui/entities";
 import { StatusBadge } from "@/components/ui/table/status-badge";
 import { ProviderProps, ScanProps, TaskDetails } from "@/types";
-import { ConnectionFalse } from "@/components/icons/Icons";
-import { ConnectionTrue } from "@/components/icons";
 
 const renderValue = (value: string | null | undefined) => {
   return value && value.trim() !== "" ? value : "-";

ui/components/scans/table/scans/data-table-row-details.tsx

@@ -3,13 +3,13 @@
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import { getProvider } from "@/actions/providers";
 import { getScan } from "@/actions/scans";
 import { getTask } from "@/actions/task";
-import { ScanDetail, SkeletonTableScans } from "@/components/scans/table";
+import { ScanDetail } from "@/components/scans/table";
+import { Alert } from "@/components/ui/alert/Alert";
 import { checkTaskStatus } from "@/lib";
 import { ScanProps } from "@/types";
-import { Alert } from "@/components/ui/alert/Alert";
-import { getProvider } from "@/actions/providers";
 
 export const DataTableRowDetails = ({ entityId }: { entityId: string }) => {
   const router = useRouter();
@@ -78,7 +78,8 @@ export const DataTableRowDetails = ({ entityId }: { entityId: string }) => {
   if (isLoading) {
     return (
       <Alert className="text-center text-small font-bold text-gray-500">
-        No scan details available until the scan is completed.
+        Scan details are loading and will be available once the scan is
+        completed.
       </Alert>
     );
   }

ui/components/ui/custom/custom-alert-modal.tsx

@@ -32,7 +32,9 @@ export const CustomAlertModal: React.FC<CustomAlertModalProps> = ({
           <>
             <ModalHeader className="flex flex-col py-0">{title}</ModalHeader>
             <ModalBody>
-              {description}
+              <p className="text-small text-gray-600 dark:text-gray-300">
+                {description}
+              </p>
               {children}
             </ModalBody>
           </>