From fa11e98a5528429b34fa9fa97a4147561b9cb78d Mon Sep 17 00:00:00 2001
From: sumit_chaturvedi <chaturvedi.sumit@tftus.com>
Date: Tue, 8 Jul 2025 14:33:56 +0530
Subject: [PATCH] chore(ui): addressed PR comments

---
 .../compliance/no-scans-available.tsx         |  3 +-
 .../findings/table/delta-indicator.tsx        |  5 ++-
 .../invitations/invitation-details.tsx        |  3 +-
 .../invitations/send-invitation-button.tsx    |  3 +-
 .../manage-groups/manage-groups-button.tsx    |  4 +-
 .../link-to-findings/link-to-findings.tsx     |  3 +-
 .../provider-overview/provider-overview.tsx   |  3 +-
 .../providers/add-provider-button.tsx         |  3 +-
 ui/components/providers/link-to-scans.tsx     |  3 +-
 .../workflow/credentials-role-helper.tsx      | 12 +++---
 ui/components/roles/add-role-button.tsx       |  3 +-
 .../scans/link-to-findings-from-scan.tsx      |  5 ++-
 ui/components/scans/no-providers-added.tsx    |  3 +-
 .../scans/no-providers-connected.tsx          |  3 +-
 ui/components/ui/custom/custom-link.tsx       | 40 +++++++++++++------
 .../ui/headers/navigation-header.tsx          |  4 +-
 ui/components/ui/sidebar/menu.tsx             |  9 ++---
 ui/components/users/add-user-button.tsx       |  3 +-
 18 files changed, 70 insertions(+), 42 deletions(-)

diff --git a/ui/components/compliance/no-scans-available.tsx b/ui/components/compliance/no-scans-available.tsx
index f8a8f66a75..2ffb589310 100644
--- a/ui/components/compliance/no-scans-available.tsx
+++ b/ui/components/compliance/no-scans-available.tsx
@@ -25,11 +25,12 @@ export const NoScansAvailable = () => {
               </div>
             </div>
             <CustomLink
-              path="/scans"
+              href="/scans"
               className="flex-shrink-0"
               ariaLabel="Go to Scans page"
               variant="solid"
               color="action"
+              size="sm"
             >
               Go to Scans
             </CustomLink>
diff --git a/ui/components/findings/table/delta-indicator.tsx b/ui/components/findings/table/delta-indicator.tsx
index 4e1a023b99..50faa8720e 100644
--- a/ui/components/findings/table/delta-indicator.tsx
+++ b/ui/components/findings/table/delta-indicator.tsx
@@ -21,8 +21,9 @@ export const DeltaIndicator = ({ delta }: DeltaIndicatorProps) => {
           <CustomLink
             ariaLabel="Learn more about findings"
             color="transparent"
-            className="h-auto min-w-0 p-0 text-xs text-primary"
-            path="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-8-analyze-the-findings"
+            size="sm"
+            className="h-auto min-w-0 p-0 text-primary"
+            href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-8-analyze-the-findings"
             target="_blank"
           >
             Learn more
diff --git a/ui/components/invitations/invitation-details.tsx b/ui/components/invitations/invitation-details.tsx
index 38f68aafc3..ff6e983fa4 100644
--- a/ui/components/invitations/invitation-details.tsx
+++ b/ui/components/invitations/invitation-details.tsx
@@ -110,10 +110,11 @@ export const InvitationDetails = ({ attributes }: InvitationDetailsProps) => {
       </Card>
       <div className="flex w-full items-center justify-end">
         <CustomLink
-          path={"/invitations/"}
+          href={"/invitations/"}
           ariaLabel="Send Invitation"
           variant="solid"
           color="action"
+          size="md"
           endContent={<AddIcon size={20} />}
         >
           Back to Invitations
diff --git a/ui/components/invitations/send-invitation-button.tsx b/ui/components/invitations/send-invitation-button.tsx
index dc41181e76..3180bc97cb 100644
--- a/ui/components/invitations/send-invitation-button.tsx
+++ b/ui/components/invitations/send-invitation-button.tsx
@@ -8,10 +8,11 @@ export const SendInvitationButton = () => {
   return (
     <div className="flex w-full items-center justify-end">
       <CustomLink
-        path={"/invitations/new"}
+        href={"/invitations/new"}
         ariaLabel="Send Invitation"
         variant="solid"
         color="action"
+        size="md"
         endContent={<AddIcon size={20} />}
       >
         Send Invitation
diff --git a/ui/components/manage-groups/manage-groups-button.tsx b/ui/components/manage-groups/manage-groups-button.tsx
index 5c70eb4d8b..7015b7a80c 100644
--- a/ui/components/manage-groups/manage-groups-button.tsx
+++ b/ui/components/manage-groups/manage-groups-button.tsx
@@ -7,11 +7,11 @@ import { CustomLink } from "@/components/ui/custom";
 export const ManageGroupsButton = () => {
   return (
     <CustomLink
-      path={"/manage-groups"}
+      href={"/manage-groups"}
       ariaLabel="Manage Groups"
       variant="dashed"
       color="secondary"
-      className="rounded-md px-4 py-2 !font-bold hover:border-solid hover:bg-default-100"
+      size="md"
       startContent={<SettingsIcon size={20} />}
     >
       Manage Groups
diff --git a/ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx b/ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx
index aa07772c61..c29f1204c1 100644
--- a/ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx
+++ b/ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx
@@ -6,10 +6,11 @@ export const LinkToFindings = () => {
   return (
     <div className="mt-4 flex w-full items-center justify-end">
       <CustomLink
-        path="/findings?sort=severity,-inserted_at&filter[status__in]=FAIL&filter[delta__in]=new"
+        href="/findings?sort=severity,-inserted_at&filter[status__in]=FAIL&filter[delta__in]=new"
         ariaLabel="Go to Findings page"
         variant="solid"
         color="action"
+        size="sm"
       >
         Check out on Findings
       </CustomLink>
diff --git a/ui/components/overview/provider-overview/provider-overview.tsx b/ui/components/overview/provider-overview/provider-overview.tsx
index 200858c1ba..374456e949 100644
--- a/ui/components/overview/provider-overview/provider-overview.tsx
+++ b/ui/components/overview/provider-overview/provider-overview.tsx
@@ -179,10 +179,11 @@ export const ProvidersOverview = ({
         </div>
         <div className="mt-4 flex w-full items-center justify-end">
           <CustomLink
-            path="/providers"
+            href="/providers"
             ariaLabel="Go to Providers page"
             variant="solid"
             color="action"
+            size="sm"
             endContent={<AddIcon size={20} />}
           >
             Add Provider
diff --git a/ui/components/providers/add-provider-button.tsx b/ui/components/providers/add-provider-button.tsx
index 8a7cc45fd9..9367cc429d 100644
--- a/ui/components/providers/add-provider-button.tsx
+++ b/ui/components/providers/add-provider-button.tsx
@@ -7,9 +7,10 @@ import { AddIcon } from "../icons";
 export const AddProviderButton = () => {
   return (
     <CustomLink
-      path="/providers/connect-account"
+      href="/providers/connect-account"
       ariaLabel="Add Cloud Provider"
       variant="solid"
+      size="md"
       color="action"
       endContent={<AddIcon size={20} />}
     >
diff --git a/ui/components/providers/link-to-scans.tsx b/ui/components/providers/link-to-scans.tsx
index 6630298fb5..5ba0084ae1 100644
--- a/ui/components/providers/link-to-scans.tsx
+++ b/ui/components/providers/link-to-scans.tsx
@@ -9,10 +9,11 @@ interface LinkToScansProps {
 export const LinkToScans = ({ providerUid }: LinkToScansProps) => {
   return (
     <CustomLink
-      path={`/scans?filter[provider_uid]=${providerUid}`}
+      href={`/scans?filter[provider_uid]=${providerUid}`}
       ariaLabel="Go to Scans page"
       variant="solid"
       color="action"
+      size="sm"
     >
       View Scan Jobs
     </CustomLink>
diff --git a/ui/components/providers/workflow/credentials-role-helper.tsx b/ui/components/providers/workflow/credentials-role-helper.tsx
index 1716ad47a0..24dfda116a 100644
--- a/ui/components/providers/workflow/credentials-role-helper.tsx
+++ b/ui/components/providers/workflow/credentials-role-helper.tsx
@@ -19,8 +19,8 @@ export const CredentialsRoleHelper = () => {
         <CustomLink
           ariaLabel="Use the following AWS CloudFormation Quick Link to deploy the IAM Role"
           color="transparent"
-          className="h-auto w-fit min-w-0 p-0 text-blue-500"
-          path={`${getAWSCredentialsTemplateLinks().cloudformationQuickLink}${session?.tenantId}`}
+          variant="textLink"
+          href={`${getAWSCredentialsTemplateLinks().cloudformationQuickLink}${session?.tenantId}`}
           target="_blank"
         >
           Use the following AWS CloudFormation Quick Link to deploy the IAM Role
@@ -41,8 +41,8 @@ export const CredentialsRoleHelper = () => {
           <CustomLink
             ariaLabel="CloudFormation Template"
             color="transparent"
-            className="h-auto w-fit min-w-0 p-0 text-blue-500"
-            path={getAWSCredentialsTemplateLinks().cloudformation}
+            variant="textLink"
+            href={getAWSCredentialsTemplateLinks().cloudformation}
             target="_blank"
           >
             CloudFormation Template
@@ -50,8 +50,8 @@ export const CredentialsRoleHelper = () => {
           <CustomLink
             ariaLabel="Terraform Code"
             color="transparent"
-            className="h-auto w-fit min-w-0 p-0 text-blue-500"
-            path={getAWSCredentialsTemplateLinks().terraform}
+            variant="textLink"
+            href={getAWSCredentialsTemplateLinks().terraform}
             target="_blank"
           >
             Terraform Code
diff --git a/ui/components/roles/add-role-button.tsx b/ui/components/roles/add-role-button.tsx
index 05c8e5369b..7ee60c9ea0 100644
--- a/ui/components/roles/add-role-button.tsx
+++ b/ui/components/roles/add-role-button.tsx
@@ -8,10 +8,11 @@ export const AddRoleButton = () => {
   return (
     <div className="flex w-full items-center justify-end">
       <CustomLink
-        path="/roles/new"
+        href="/roles/new"
         ariaLabel="Add Role"
         variant="solid"
         color="action"
+        size="md"
         endContent={<AddIcon size={20} />}
       >
         Add Role
diff --git a/ui/components/scans/link-to-findings-from-scan.tsx b/ui/components/scans/link-to-findings-from-scan.tsx
index 2b55405983..0c2c256e01 100644
--- a/ui/components/scans/link-to-findings-from-scan.tsx
+++ b/ui/components/scans/link-to-findings-from-scan.tsx
@@ -13,10 +13,11 @@ export const LinkToFindingsFromScan = ({
 }: LinkToFindingsProps) => {
   return (
     <CustomLink
-      path={`/findings?filter[scan__in]=${scanId}&filter[status__in]=FAIL`}
+      href={`/findings?filter[scan__in]=${scanId}&filter[status__in]=FAIL`}
       ariaLabel="Go to Findings page"
       color="muted"
-      className="w-[7rem] rounded-md border border-prowler-theme-green px-4 py-2 text-xs !font-bold text-default-500 hover:bg-prowler-theme-green hover:!text-black disabled:opacity-30"
+      variant="ghost"
+      size="sm"
       isDisabled={isDisabled}
     >
       See Findings
diff --git a/ui/components/scans/no-providers-added.tsx b/ui/components/scans/no-providers-added.tsx
index f0bafe5ac4..af092d1710 100644
--- a/ui/components/scans/no-providers-added.tsx
+++ b/ui/components/scans/no-providers-added.tsx
@@ -27,11 +27,12 @@ export const NoProvidersAdded = () => {
             </div>
 
             <CustomLink
-              path="/providers/connect-account"
+              href="/providers/connect-account"
               ariaLabel="Go to Add Cloud Provider page"
               className="w-full max-w-xs justify-center"
               variant="solid"
               color="action"
+              size="md"
             >
               Get Started
             </CustomLink>
diff --git a/ui/components/scans/no-providers-connected.tsx b/ui/components/scans/no-providers-connected.tsx
index 4a9f32e13b..8b7bd4147e 100644
--- a/ui/components/scans/no-providers-connected.tsx
+++ b/ui/components/scans/no-providers-connected.tsx
@@ -28,11 +28,12 @@ export const NoProvidersConnected = () => {
         </div>
         <div className="w-full md:w-auto md:flex-shrink-0">
           <CustomLink
-            path="/providers"
+            href="/providers"
             className="w-full justify-center md:w-fit"
             ariaLabel="Go to Cloud providers page"
             variant="solid"
             color="action"
+            size="md"
           >
             Review Cloud Providers
           </CustomLink>
diff --git a/ui/components/ui/custom/custom-link.tsx b/ui/components/ui/custom/custom-link.tsx
index 9cf9160f49..086f1c787c 100644
--- a/ui/components/ui/custom/custom-link.tsx
+++ b/ui/components/ui/custom/custom-link.tsx
@@ -1,10 +1,11 @@
-import clsx from "clsx";
 import Link from "next/link";
 import React from "react";
 
+import { cn } from "@/lib";
+
 interface CustomLinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  path: string;
+  href: string;
   target?: "_self" | "_blank";
   rel?: string;
   className?: string;
@@ -12,11 +13,12 @@ interface CustomLinkProps
   variant?:
     | "default"
     | "dashed"
-    | "underline"
     | "ghost"
     | "block"
     | "solid"
-    | "unstyled";
+    | "unstyled"
+    | "iconButton"
+    | "textLink";
   color?:
     | "primary"
     | "secondary"
@@ -25,6 +27,7 @@ interface CustomLinkProps
     | "danger"
     | "success"
     | "muted";
+  size?: "md" | "sm" | "lg";
   startContent?: React.ReactNode;
   endContent?: React.ReactNode;
   isIconOnly?: boolean;
@@ -40,34 +43,46 @@ const linkClasses = {
 
 const variantClasses = {
   default: "",
-  dashed: "border border-dashed border-current",
-  underline: "underline hover:opacity-80",
-  ghost: "bg-transparent text-inherit",
+  dashed:
+    "border border-default border-dashed bg-transparent  justify-center whitespace-nowrap shadow-sm hover:border-solid hover:bg-default-100 active:bg-default-200 active:border-solid",
+  iconButton:
+    "whitespace-nowrap rounded-[14px] border-2 border-gray-200 bg-prowler-grey-medium p-3 bg-transparent",
+  ghost:
+    "whitespace-nowrap border border-prowler-theme-green text-default-500 hover:bg-prowler-theme-green hover:!text-black disabled:opacity-30",
+  solid: "whitespace-nowrap min-w-20",
+  textLink: "h-auto w-fit min-w-0 p-0 text-blue-500",
   block: "block w-full text-left",
   unstyled: "",
-  solid: "rounded-md px-4 py-2 !font-bold",
 };
 
 const colorClasses = {
   primary: "text-prowler-theme-green",
   secondary: "text-default-800 dark:text-white",
-  action: "bg-prowler-theme-green font-bold text-prowler-theme-midnight ",
+  action:
+    "bg-prowler-theme-green font-bold text-prowler-theme-midnight hover:opacity-80 transition-opacity duration-100",
   transparent: "border-0 border-transparent bg-transparent",
   danger: "text-red-600 dark:text-red-400",
   success: "text-green-600 dark:text-green-400",
   muted: "text-gray-500 dark:text-gray-400",
 };
 
+const sizeClasses = {
+  sm: "text-xs px-4 h-8 rounded-lg",
+  md: "text-sm px-4 py-2 h-10 rounded-lg",
+  lg: "text-lg px-5 py-3 h-12 rounded-xl",
+};
+
 export const CustomLink = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
   (
     {
-      path,
+      href,
       target = "_self",
       rel,
       className,
       children,
       variant = "default",
       color = "primary",
+      size = "md",
       startContent,
       endContent,
       isIconOnly = false,
@@ -88,9 +103,10 @@ export const CustomLink = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
       </>
     );
 
-    const combinedClasses = clsx(
+    const combinedClasses = cn(
       linkClasses.base,
       colorClasses[color],
+      sizeClasses[size],
       variantClasses[variant],
       isIconOnly && linkClasses.iconOnly,
       isDisabled && linkClasses.disabled,
@@ -107,7 +123,7 @@ export const CustomLink = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
       </span>
     ) : (
       <Link
-        href={path}
+        href={href}
         target={target}
         rel={computedRel}
         ref={ref}
diff --git a/ui/components/ui/headers/navigation-header.tsx b/ui/components/ui/headers/navigation-header.tsx
index 9530b65887..b3a4e38410 100644
--- a/ui/components/ui/headers/navigation-header.tsx
+++ b/ui/components/ui/headers/navigation-header.tsx
@@ -19,8 +19,8 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
     <>
       <header className="flex items-center gap-3 border-b border-gray-200 px-6 py-4 dark:border-gray-800">
         <CustomLink
-          path={href || ""}
-          className="rounded-xl border-2 border-gray-200 bg-prowler-grey-medium bg-transparent p-3"
+          href={href || ""}
+          variant="iconButton"
           ariaLabel="Navigation button"
           color="muted"
         >
diff --git a/ui/components/ui/sidebar/menu.tsx b/ui/components/ui/sidebar/menu.tsx
index 273c1aa0f8..87220d9a9f 100644
--- a/ui/components/ui/sidebar/menu.tsx
+++ b/ui/components/ui/sidebar/menu.tsx
@@ -29,13 +29,12 @@ export const Menu = ({ isOpen }: { isOpen: boolean }) => {
     <>
       <div className="px-2">
         <CustomLink
-          path="/scans"
-          className={cn(
-            isOpen ? "w-full" : "w-fit",
-            "px justify-center rounded-md px-8 py-3 !font-bold",
-          )}
+          href="/scans"
+          className={cn(isOpen ? "w-full" : "w-fit", "justify-center")}
+          variant="solid"
           ariaLabel="Launch Scan"
           color="action"
+          size="md"
           endContent={isOpen ? <AddIcon size={20} /> : null}
         >
           {isOpen ? "Launch Scan" : <AddIcon size={20} />}
diff --git a/ui/components/users/add-user-button.tsx b/ui/components/users/add-user-button.tsx
index 050305aade..2049adefc2 100644
--- a/ui/components/users/add-user-button.tsx
+++ b/ui/components/users/add-user-button.tsx
@@ -8,10 +8,11 @@ export const AddUserButton = () => {
   return (
     <div className="flex w-full items-center justify-end">
       <CustomLink
-        path="/invitations/new"
+        href="/invitations/new"
         ariaLabel="Invite User"
         variant="solid"
         color="action"
+        size="md"
         endContent={<AddIcon size={20} />}
       >
         Invite User