ben.carrasco/prowler
1
0 Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-10-29 23:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade to React 19, Next.js 15, React Compiler, HeroUI and Tailwind 4 (#8748)

Browse Source 
Co-authored-by: Alan Buscaglia <alanbuscaglia@MacBook-Pro.local>
Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>
Co-authored-by: César Arroba <cesar@prowler.com>
Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
This commit is contained in:
Alan BuscagliaAlan BuscagliaalejandrobailoCésar ArrobaAlejandro Bailo
 authored and GitHub committed 2025-09-30 09:59:51 +02:00
1 parent 2a4b62527a
commit 4d5676f00e
261 files changed
+6339 -6126
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/components/ui/accordion/Accordion.tsx
+4 -7
View File
@@ -1,10 +1,7 @@
"use client";
import {
Accordion as NextUIAccordion,
AccordionItem,
Selection,
} from "@nextui-org/react";
import { Accordion as NextUIAccordion, AccordionItem } from "@heroui/accordion";
import type { Selection } from "@react-types/shared";
import { ChevronDown } from "lucide-react";
import React, { ReactNode, useCallback, useMemo, useState } from "react";
@@ -47,7 +44,7 @@ const AccordionContent = ({
<div className="text-sm text-gray-700 dark:text-gray-300">
{content}
{items && items.length > 0 && (
<div className="ml-2 mt-4 border-l-2 border-gray-200 pl-4 dark:border-gray-700">
<div className="mt-4 ml-2 border-l-2 border-gray-200 pl-4 dark:border-gray-700">
<Accordion
items={items}
variant="light"
@@ -118,7 +115,7 @@ export const Accordion = ({
return (
<NextUIAccordion
className={cn("w-full !px-0", className)}
className={cn("w-full px-0!", className)}
variant={variant}
selectionMode={selectionMode}
selectedKeys={expandedKeys}
ui/components/ui/action-card/ActionCard.tsx
+4 -4
View File
@@ -1,8 +1,8 @@
"use client";
import type { CardProps } from "@heroui/card";
import { Card, CardBody } from "@heroui/card";
import { Icon } from "@iconify/react";
import type { CardProps } from "@nextui-org/react";
import { Card, CardBody } from "@nextui-org/react";
import React from "react";
import { cn } from "@/lib";
@@ -63,7 +63,7 @@ export const ActionCard = React.forwardRef<HTMLDivElement, ActionCardProps>(
<CardBody className="flex h-full flex-row items-center gap-2 p-2">
<div
className={cn(
"item-center flex rounded-medium border p-1",
"item-center rounded-medium flex border p-1",
colors?.iconWrapper,
)}
>
@@ -71,7 +71,7 @@ export const ActionCard = React.forwardRef<HTMLDivElement, ActionCardProps>(
</div>
<div className="flex flex-col">
<p className="text-md">{title}</p>
<p className="text-sm text-default-400">
<p className="text-default-400 text-sm">
{description || children}
</p>
</div>
ui/components/ui/alert-dialog/AlertDialog.tsx
+5 -8
View File
@@ -1,6 +1,6 @@
"use client";
import { cn } from "@nextui-org/react";
import { cn } from "@heroui/theme";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import * as React from "react";
@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
className,
)}
{...props}
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
className,
)}
{...props}
@@ -48,10 +48,7 @@ const AlertDialogHeader = ({
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className,
)}
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
);
@@ -63,7 +60,7 @@ const AlertDialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
"flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
className,
)}
{...props}
ui/components/ui/alert/Alert.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ const AlertTitle = React.forwardRef<
>(({ className, children, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
className={cn("mb-1 leading-none font-medium tracking-tight", className)}
{...props}
>
{children}
ui/components/ui/breadcrumbs/breadcrumb-navigation.tsx
+11 -11
View File
@@ -1,7 +1,7 @@
"use client";
import { BreadcrumbItem, Breadcrumbs } from "@heroui/breadcrumbs";
import { Icon } from "@iconify/react";
import { BreadcrumbItem, Breadcrumbs } from "@nextui-org/react";
import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation";
import { ReactNode } from "react";
@@ -109,12 +109,12 @@ export function BreadcrumbNavigation({
{typeof icon === "string" ? (
<Icon className="text-default-500" height={24} icon={icon} width={24} />
) : icon ? (
<div className="flex h-8 w-8 items-center justify-center [&>*]:h-full [&>*]:w-full">
<div className="flex h-8 w-8 items-center justify-center *:h-full *:w-full">
{icon}
</div>
) : null}
<h1
className={`text-sm font-bold text-default-700 ${isLink ? "transition-colors hover:text-primary" : ""}`}
className={`text-default-700 text-sm font-bold ${isLink ? "hover:text-primary transition-colors" : ""}`}
>
{titleText}
</h1>
@@ -146,7 +146,7 @@ export function BreadcrumbNavigation({
) : breadcrumb.isClickable && breadcrumb.path ? (
<Link
href={buildNavigationUrl(breadcrumb.path)}
className="flex cursor-pointer items-center space-x-2"
className="flex cursor-pointer items-center gap-2"
>
{breadcrumb.icon && typeof breadcrumb.icon === "string" ? (
<Icon
@@ -156,18 +156,18 @@ export function BreadcrumbNavigation({
width={24}
/>
) : breadcrumb.icon ? (
<div className="flex h-6 w-6 items-center justify-center [&>*]:h-full [&>*]:w-full">
<div className="flex h-6 w-6 items-center justify-center *:h-full *:w-full">
{breadcrumb.icon}
</div>
) : null}
<span className="text-wrap text-sm font-bold text-default-700 transition-colors hover:text-primary">
<span className="text-default-700 hover:text-primary text-sm font-bold text-wrap transition-colors">
{breadcrumb.name}
</span>
</Link>
) : breadcrumb.isClickable && breadcrumb.onClick ? (
<button
onClick={breadcrumb.onClick}
className="flex cursor-pointer items-center space-x-2 text-wrap text-sm font-medium text-primary transition-colors hover:text-primary-600"
className="text-primary hover:text-primary-600 flex cursor-pointer items-center gap-2 text-sm font-medium text-wrap transition-colors"
>
{breadcrumb.icon && typeof breadcrumb.icon === "string" ? (
<Icon
@@ -177,14 +177,14 @@ export function BreadcrumbNavigation({
width={24}
/>
) : breadcrumb.icon ? (
<div className="flex h-6 w-6 items-center justify-center [&>*]:h-full [&>*]:w-full">
<div className="flex h-6 w-6 items-center justify-center *:h-full *:w-full">
{breadcrumb.icon}
</div>
) : null}
<span>{breadcrumb.name}</span>
</button>
) : (
<div className="flex items-center space-x-2">
<div className="flex items-center gap-2">
{breadcrumb.icon && typeof breadcrumb.icon === "string" ? (
<Icon
className="text-default-500"
@@ -193,11 +193,11 @@ export function BreadcrumbNavigation({
width={24}
/>
) : breadcrumb.icon ? (
<div className="flex h-6 w-6 items-center justify-center [&>*]:h-full [&>*]:w-full">
<div className="flex h-6 w-6 items-center justify-center *:h-full *:w-full">
{breadcrumb.icon}
</div>
) : null}
<span className="text-wrap text-sm font-medium text-gray-900 dark:text-gray-100">
<span className="text-sm font-medium text-wrap text-gray-900 dark:text-gray-100">
{breadcrumb.name}
</span>
</div>
ui/components/ui/chart/Chart.tsx
+4 -4
View File
@@ -57,7 +57,7 @@ const ChartContainer = React.forwardRef<
data-chart={chartId}
ref={ref}
className={cn(
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-none",
className,
)}
{...props}
@@ -184,7 +184,7 @@ const ChartTooltipContent = React.forwardRef<
<div
ref={ref}
className={cn(
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-slate-200 border-slate-200/50 bg-white px-2.5 py-1.5 text-xs shadow-xl dark:border-slate-800 dark:border-slate-800/50 dark:bg-slate-950",
"grid min-w-32 items-start gap-1.5 rounded-lg border border-slate-200 border-slate-200/50 bg-white px-2.5 py-1.5 text-xs shadow-xl dark:border-slate-800 dark:border-slate-800/50 dark:bg-slate-950",
className,
)}
>
@@ -213,7 +213,7 @@ const ChartTooltipContent = React.forwardRef<
!hideIndicator && (
<div
className={cn(
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
{
"h-2.5 w-2.5": indicator === "dot",
"w-1": indicator === "line",
@@ -244,7 +244,7 @@ const ChartTooltipContent = React.forwardRef<
</span>
</div>
{item.value && (
<span className="font-mono font-medium tabular-nums text-slate-950 dark:text-slate-50">
<span className="font-mono font-medium text-slate-950 tabular-nums dark:text-slate-50">
{item.value.toLocaleString()}
</span>
)}
ui/components/ui/chart/horizontal-split-chart.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
"use client";
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
import * as React from "react";
import { useEffect, useState } from "react";
@@ -216,7 +216,7 @@ export const HorizontalSplitBar = ({
{/* Central separator */}
<div
className="flex-shrink-0 bg-background"
className="bg-background shrink-0"
style={{ width: `${separatorWidth}px` }}
/>
ui/components/ui/code-snippet/code-snippet.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Snippet } from "@nextui-org/react";
import { Snippet } from "@heroui/snippet";
export const CodeSnippet = ({ value }: { value: string }) => (
<Snippet
ui/components/ui/content-layout/skeleton-content-layout.tsx
+6 -6
View File
@@ -1,16 +1,16 @@
import { Skeleton } from "@nextui-org/react";
import { Skeleton } from "@heroui/skeleton";
export const SkeletonContentLayout = () => {
return (
<div className="flex items-center space-x-4">
<div className="flex items-center gap-4">
{/* Theme Switch Skeleton */}
<Skeleton className="h-8 w-8 rounded-full dark:bg-prowler-blue-800">
<div className="h-8 w-8 bg-default-200"></div>
<Skeleton className="dark:bg-prowler-blue-800 h-8 w-8 rounded-full">
<div className="bg-default-200 h-8 w-8"></div>
</Skeleton>
{/* User Avatar Skeleton */}
<Skeleton className="h-10 w-10 rounded-full dark:bg-prowler-blue-800">
<div className="h-10 w-10 bg-default-200"></div>
<Skeleton className="dark:bg-prowler-blue-800 h-10 w-10 rounded-full">
<div className="bg-default-200 h-10 w-10"></div>
</Skeleton>
</div>
);
ui/components/ui/custom/custom-alert-modal.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Modal, ModalBody, ModalContent, ModalHeader } from "@nextui-org/react";
import { Modal, ModalBody, ModalContent, ModalHeader } from "@heroui/modal";
import React, { ReactNode } from "react";
interface CustomAlertModalProps {
ui/components/ui/custom/custom-banner.tsx
+3 -3
View File
@@ -18,9 +18,9 @@ export const CustomBanner = ({
buttonLink = "/",
}: CustomBannerProps) => {
return (
<div className="flex items-center justify-start rounded-lg border-1 border-system-warning-light px-4 py-6 shadow-box dark:bg-prowler-blue-400">
<div className="border-system-warning-light shadow-box dark:bg-prowler-blue-400 flex items-center justify-start rounded-lg border px-4 py-6">
<div className="flex w-full flex-col items-start gap-6 md:flex-row md:items-center md:justify-between md:gap-8">
<div className="flex flex-col space-y-3">
<div className="flex flex-col gap-3">
<div className="flex items-center justify-start gap-3">
<InfoIcon className="h-6 w-6 text-gray-800 dark:text-white" />
<h2 className="text-lg font-bold text-gray-800 dark:text-white">
@@ -29,7 +29,7 @@ export const CustomBanner = ({
</div>
<p className="text-sm text-gray-600 dark:text-gray-300">{message}</p>
</div>
<div className="w-full md:w-auto md:flex-shrink-0">
<div className="w-full md:w-auto md:shrink-0">
<CustomButton
asLink={buttonLink}
className="w-full justify-center md:w-fit"
ui/components/ui/custom/custom-box.tsx
+4 -3
View File
@@ -1,5 +1,6 @@
import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
import { CardProps as NextUICardProps } from "@nextui-org/react";
import type { CardProps as NextUICardProps } from "@heroui/card";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { Divider } from "@heroui/divider";
import React from "react";
interface CustomBoxProps {
children: React.ReactNode;
@@ -29,7 +30,7 @@ export const CustomBox = ({
<Divider />
</>
)}
<CardBody className="px-3 pb-4 pt-3">{children}</CardBody>
<CardBody className="px-3 pt-3 pb-4">{children}</CardBody>
</Card>
);
};
ui/components/ui/custom/custom-button.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { Button, CircularProgress } from "@nextui-org/react";
import { Button } from "@heroui/button";
import { CircularProgress } from "@heroui/progress";
import type { PressEvent } from "@react-types/shared";
import clsx from "clsx";
import Link from "next/link";
ui/components/ui/custom/custom-dropdown-filter.tsx
+14 -22
View File
@@ -1,15 +1,10 @@
"use client";
import {
Button,
Checkbox,
CheckboxGroup,
Divider,
Popover,
PopoverContent,
PopoverTrigger,
ScrollShadow,
} from "@nextui-org/react";
import { Button } from "@heroui/button";
import { Checkbox, CheckboxGroup } from "@heroui/checkbox";
import { Divider } from "@heroui/divider";
import { Popover, PopoverContent, PopoverTrigger } from "@heroui/popover";
import { ScrollShadow } from "@heroui/scroll-shadow";
import { ChevronDown, X } from "lucide-react";
import { useSearchParams } from "next/navigation";
import React, {
@@ -221,7 +216,7 @@ export const CustomDropdownFilter = ({
>
<PopoverTrigger>
<Button
className="border-input hover:bg-accent hover:text-accent-foreground inline-flex h-auto min-h-10 items-center justify-between whitespace-nowrap rounded-md border border-dashed bg-background px-3 py-2 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none disabled:opacity-50 dark:bg-prowler-blue-800"
className="border-input hover:bg-accent hover:text-accent-foreground bg-background dark:bg-prowler-blue-800 inline-flex h-auto min-h-10 items-center justify-between rounded-md border px-3 py-2 text-xs font-medium whitespace-nowrap shadow-sm transition-colors focus-visible:outline-none disabled:opacity-50"
endContent={
<ChevronDown
className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
@@ -231,26 +226,23 @@ export const CustomDropdownFilter = ({
variant="flat"
>
<div className="flex min-w-0 flex-1 items-center gap-2">
<span className="flex-shrink-0 text-small">
<span className="text-small shrink-0">
{filter?.labelCheckboxGroup}
</span>
{selectedValues.length > 0 && (
<>
<Divider
orientation="vertical"
className="h-4 flex-shrink-0"
/>
<div className="flex min-w-0 flex-shrink items-center">
<Divider orientation="vertical" className="h-4 shrink-0" />
<div className="flex min-w-0 shrink items-center">
{selectedValues.length <= 2 ? (
<span
className="max-w-32 truncate text-xs text-default-500"
className="text-default-500 max-w-32 truncate text-xs"
title={selectedValues.map(getDisplayLabel).join(", ")}
>
{selectedValues.map(getDisplayLabel).join(", ")}
</span>
) : (
<span className="truncate text-xs text-default-500">
<span className="text-default-500 truncate text-xs">
{isAllSelected
? "All selected"
: `${selectedValues.length} selected`}
@@ -258,7 +250,7 @@ export const CustomDropdownFilter = ({
)}
<div
onClick={handleClearAll}
className="ml-1 flex h-4 w-4 flex-shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-default-200"
className="hover:bg-default-200 ml-1 flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors"
aria-label="Clear selection"
role="button"
tabIndex={0}
@@ -269,7 +261,7 @@ export const CustomDropdownFilter = ({
}
}}
>
<X className="h-3 w-3 text-default-400 hover:text-default-600" />
<X className="text-default-400 hover:text-default-600 h-3 w-3" />
</div>
</div>
</>
@@ -277,7 +269,7 @@ export const CustomDropdownFilter = ({
</div>
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto min-w-80 dark:bg-prowler-blue-800">
<PopoverContent className="dark:bg-prowler-blue-800 w-auto min-w-80">
<div className="flex w-full flex-col gap-4 p-2">
<CheckboxGroup
color="default"
ui/components/ui/custom/custom-dropdown-selection.tsx
+7 -12
View File
@@ -1,15 +1,10 @@
"use client";
import {
Button,
Checkbox,
CheckboxGroup,
Divider,
Popover,
PopoverContent,
PopoverTrigger,
ScrollShadow,
} from "@nextui-org/react";
import { Button } from "@heroui/button";
import { Checkbox, CheckboxGroup } from "@heroui/checkbox";
import { Divider } from "@heroui/divider";
import { Popover, PopoverContent, PopoverTrigger } from "@heroui/popover";
import { ScrollShadow } from "@heroui/scroll-shadow";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { PlusCircleIcon } from "@/components/icons";
@@ -81,14 +76,14 @@ export const CustomDropdownSelection: React.FC<
<Popover backdrop="transparent" placement="bottom-start">
<PopoverTrigger>
<Button
className="border-input hover:bg-accent hover:text-accent-foreground inline-flex h-10 items-center justify-center whitespace-nowrap rounded-md border border-dashed bg-background px-3 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none disabled:opacity-50 dark:bg-prowler-blue-800"
className="border-input hover:bg-accent hover:text-accent-foreground bg-background dark:bg-prowler-blue-800 inline-flex h-10 items-center justify-center rounded-md border border-dashed px-3 text-xs font-medium whitespace-nowrap shadow-sm transition-colors focus-visible:outline-none disabled:opacity-50"
startContent={<PlusCircleIcon size={16} />}
size="md"
>
<h3 className="text-small">{label}</h3>
</Button>
</PopoverTrigger>
<PopoverContent className="w-80 dark:bg-prowler-blue-800">
<PopoverContent className="dark:bg-prowler-blue-800 w-80">
<div className="flex w-full flex-col gap-6 p-2">
<CheckboxGroup
color="default"
ui/components/ui/custom/custom-input.tsx
+5 -4
View File
@@ -1,7 +1,7 @@
"use client";
import { Input } from "@heroui/input";
import { Icon } from "@iconify/react";
import { Input } from "@nextui-org/react";
import React, { useState } from "react";
import { Control, FieldPath, FieldValues } from "react-hook-form";
@@ -79,7 +79,7 @@ export const CustomInput = <T extends FieldValues>({
const endContent = (password || confirmPassword) && (
<button type="button" onClick={toggleVisibility}>
<Icon
className="pointer-events-none text-2xl text-default-400"
className="text-default-400 pointer-events-none text-2xl"
icon={
(password && isPasswordVisible) ||
(confirmPassword && isConfirmPasswordVisible)
@@ -101,7 +101,7 @@ export const CustomInput = <T extends FieldValues>({
id={name}
classNames={{
label:
"tracking-tight font-light !text-default-500 text-xs !z-0",
"tracking-tight font-light !text-default-500 text-xs z-0!",
input: "text-default-500 text-small",
}}
isRequired={inputIsRequired}
@@ -117,10 +117,11 @@ export const CustomInput = <T extends FieldValues>({
isDisabled={isDisabled}
isReadOnly={isReadOnly}
{...field}
value={field.value ?? ""}
/>
</FormControl>
{showFormMessage && (
<FormMessage className="max-w-full text-xs text-system-error dark:text-system-error" />
<FormMessage className="text-system-error dark:text-system-error max-w-full text-xs" />
)}
</>
)}
ui/components/ui/custom/custom-link.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const CustomLink = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
href={href}
scroll={scroll}
className={cn(
`text-${size} text-nowrap break-all font-medium text-primary decoration-1 hover:underline`,
`text-${size} text-primary font-medium text-nowrap break-all decoration-1 hover:underline`,
className,
)}
aria-label={ariaLabel}
ui/components/ui/custom/custom-radio.tsx
+6 -4
View File
@@ -1,4 +1,6 @@
import { cn, useRadio, VisuallyHidden } from "@nextui-org/react";
import { useRadio } from "@heroui/radio";
import { cn } from "@heroui/theme";
import { VisuallyHidden } from "@react-aria/visually-hidden";
import React from "react";
interface CustomRadioProps {
@@ -24,9 +26,9 @@ export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
<Component
{...getBaseProps()}
className={cn(
"group inline-flex flex-row-reverse items-center justify-between tap-highlight-transparent hover:opacity-70 active:opacity-50",
"max-w-full cursor-pointer gap-4 rounded-lg border-2 border-default p-4",
"w-full hover:border-action data-[selected=true]:border-action",
"group tap-highlight-transparent inline-flex flex-row-reverse items-center justify-between hover:opacity-70 active:opacity-50",
"border-default max-w-full cursor-pointer gap-4 rounded-lg border-2 p-4",
"hover:border-action data-[selected=true]:border-action w-full",
)}
>
<VisuallyHidden>
ui/components/ui/custom/custom-section.tsx
+2 -2
View File
@@ -9,9 +9,9 @@ export const CustomSection = ({
children,
action,
}: CustomSectionProps) => (
<div className="flex flex-col gap-4 rounded-lg p-4 shadow dark:bg-prowler-blue-400">
<div className="dark:bg-prowler-blue-400 flex flex-col gap-4 rounded-lg p-4 shadow">
<div className="flex items-center justify-between">
<h3 className="text-md font-medium text-gray-800 dark:text-prowler-theme-pale/90">
<h3 className="text-md dark:text-prowler-theme-pale/90 font-medium text-gray-800">
{title}
</h3>
{action && <div>{action}</div>}
ui/components/ui/custom/custom-server-input.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
"use client";
import { Input } from "@nextui-org/react";
import { Input } from "@heroui/input";
import React from "react";
interface CustomServerInputProps {
@@ -49,7 +49,7 @@ export const CustomServerInput = ({
value={value}
onChange={onChange}
classNames={{
label: "tracking-tight font-light !text-default-500 text-xs !z-0",
label: "tracking-tight font-light !text-default-500 text-xs z-0!",
input: "text-default-500 text-small",
}}
/>
ui/components/ui/custom/custom-table-link.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const TableLink = ({ href, label, isDisabled }: TableLinkProps) => {
asLink={href}
ariaLabel={label}
variant="ghost"
className="text-xs font-medium text-default-500 hover:text-primary disabled:opacity-30"
className="text-default-500 hover:text-primary text-xs font-medium disabled:opacity-30"
size="sm"
isDisabled={isDisabled}
>
ui/components/ui/custom/custom-textarea.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
"use client";
import { Textarea } from "@nextui-org/react";
import { Textarea } from "@heroui/input";
import React from "react";
import { Control, FieldPath, FieldValues } from "react-hook-form";
ui/components/ui/dialog/dialog.tsx
+6 -9
View File
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
className,
)}
{...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
className,
)}
{...props}
>
{children}
<DialogPrimitive.Close className="focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
<DialogPrimitive.Close className="focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground ring-offset-background absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
@@ -58,10 +58,7 @@ const DialogHeader = ({
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className,
)}
className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)}
{...props}
/>
);
@@ -73,7 +70,7 @@ const DialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
"flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
className,
)}
{...props}
@@ -88,7 +85,7 @@ const DialogTitle = React.forwardRef<
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
"text-lg leading-none font-semibold tracking-tight",
className,
)}
{...props}
ui/components/ui/download-icon-button/download-icon-button.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
"use client";
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
import { DownloadIcon } from "lucide-react";
import { CustomButton } from "../custom/custom-button";
@@ -29,7 +29,7 @@ export const DownloadIconButton = ({
variant="ghost"
isDisabled={isDisabled || isDownloading}
onPress={() => onDownload(paramId)}
className="p-0 text-default-500 hover:text-primary disabled:opacity-30"
className="text-default-500 hover:text-primary p-0 disabled:opacity-30"
isIconOnly
ariaLabel={ariaLabel}
size="sm"
ui/components/ui/dropdown-menu/dropdown-menu.tsx
+7 -7
View File
@@ -31,7 +31,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"hover:text-accent-foreground focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm text-default-600 outline-none hover:bg-default-100 hover:font-bold",
"hover:text-accent-foreground focus:bg-accent data-[state=open]:bg-accent text-default-600 hover:bg-default-100 flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:font-bold",
inset && "pl-8",
className,
)}
@@ -51,7 +51,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md bg-background/95 p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-prowler-blue-800",
"text-popover-foreground bg-background/95 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-prowler-blue-800 z-50 min-w-32 overflow-hidden rounded-md p-1 shadow-lg",
className,
)}
{...props}
@@ -69,7 +69,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md bg-background/95 p-1 shadow-md dark:bg-prowler-blue-800",
"text-popover-foreground bg-background/95 dark:bg-prowler-blue-800 z-50 min-w-32 overflow-hidden rounded-md p-1 shadow-md",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
@@ -88,7 +88,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm text-default-600 subpixel-antialiased outline-none transition-colors hover:bg-default-100 hover:[font-variation-settings:'wght'_600] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:hover:bg-prowler-blue-400",
"focus:bg-accent focus:text-accent-foreground text-default-600 hover:bg-default-100 dark:hover:bg-prowler-blue-400 relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm subpixel-antialiased transition-colors outline-none select-none hover:[font-variation-settings:'wght'_600] data-disabled:pointer-events-none data-disabled:opacity-50",
inset && "pl-8",
className,
)}
@@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-default-600 outline-none transition-colors hover:bg-default-100 hover:font-bold data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus:bg-accent focus:text-accent-foreground text-default-600 hover:bg-default-100 relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none hover:font-bold data-disabled:pointer-events-none data-disabled:opacity-50",
className,
)}
checked={checked}
@@ -128,7 +128,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
className,
)}
{...props}
@@ -168,7 +168,7 @@ const DropdownMenuSeparator = React.forwardRef<
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn(
"-mx-1 my-1 h-px bg-default-200 dark:bg-default-700",
"bg-default-200 dark:bg-default-700 -mx-1 my-1 h-px",
className,
)}
{...props}
ui/components/ui/dropdown/Dropdown.tsx
+6 -6
View File
@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
"focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none",
inset && "pl-8",
className,
)}
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
className,
)}
{...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
className,
)}
{...props}
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
inset && "pl-8",
className,
)}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
className,
)}
checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
className,
)}
{...props}
ui/components/ui/entities/copy-link-button.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
"use client";
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
import { CheckCheck, ExternalLink } from "lucide-react";
import { useState } from "react";
@@ -27,7 +27,7 @@ export const CopyLinkButton = ({ url }: CopyLinkButtonProps) => {
<button
type="button"
onClick={handleCopy}
className="ml-2 cursor-pointer p-0"
className="ml-2 inline-flex cursor-pointer flex-row items-center gap-2 p-0"
aria-label="Copy URL to clipboard"
>
{copied ? (
ui/components/ui/entities/date-with-time.tsx
+2 -2
View File
@@ -30,11 +30,11 @@ export const DateWithTime: React.FC<DateWithTimeProps> = ({
<div
className={`flex ${inline ? "flex-row items-center gap-2" : "flex-col"}`}
>
<span className="whitespace-nowrap text-xs font-semibold">
<span className="text-xs font-semibold whitespace-nowrap">
{formattedDate}
</span>
{showTime && (
<span className="whitespace-nowrap text-xs text-gray-500">
<span className="text-xs whitespace-nowrap text-gray-500">
{formattedTime}
</span>
)}
ui/components/ui/entities/entity-info-short.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
import React from "react";
import { IdIcon } from "@/components/icons";
@@ -26,7 +26,7 @@ export const EntityInfoShort: React.FC<EntityInfoProps> = ({
return (
<div className="flex items-center justify-start">
<div className="flex items-center justify-between gap-x-2">
<div className="relative flex-shrink-0">
<div className="relative shrink-0">
{getProviderLogo(cloudProvider)}
{showConnectionStatus && (
<Tooltip
@@ -34,7 +34,7 @@ export const EntityInfoShort: React.FC<EntityInfoProps> = ({
content={showConnectionStatus ? "Connected" : "Not Connected"}
>
<span
className={`absolute right-[-0.2rem] top-[-0.1rem] h-2 w-2 cursor-pointer rounded-full ${
className={`absolute top-[-0.1rem] right-[-0.2rem] h-2 w-2 cursor-pointer rounded-full ${
showConnectionStatus ? "bg-green-500" : "bg-red-500"
}`}
/>
@@ -44,7 +44,7 @@ export const EntityInfoShort: React.FC<EntityInfoProps> = ({
<div className="flex max-w-[120px] flex-col">
{entityAlias && (
<Tooltip content={entityAlias} placement="top" size="sm">
<span className="truncate text-ellipsis text-xs text-default-500">
<span className="text-default-500 truncate text-xs text-ellipsis">
{entityAlias}
</span>
</Tooltip>
ui/components/ui/entities/info-field.tsx
+8 -8
View File
@@ -1,4 +1,4 @@
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
import clsx from "clsx";
import { InfoIcon } from "lucide-react";
@@ -16,7 +16,7 @@ interface InfoFieldProps {
content="Download a ZIP file that includes the JSON (OCSF), CSV, and HTML scan reports, along with the compliance report."
>
<div className="flex items-center gap-2">
<InfoIcon className="mb-1 text-primary" size={12} />
<InfoIcon className="text-primary mb-1" size={12} />
</div>
</Tooltip>;
@@ -31,13 +31,13 @@ export const InfoField = ({
if (inline) {
return (
<div className={clsx("flex items-center gap-2", className)}>
<span className="text-xs font-bold text-gray-500 dark:text-prowler-theme-pale/70">
<span className="dark:text-prowler-theme-pale/70 text-xs font-bold text-gray-500">
<span className="flex items-center gap-1">
{label}:
{tooltipContent && (
<Tooltip className="text-xs" content={tooltipContent}>
<div className="flex cursor-pointer items-center gap-2">
<InfoIcon className="mb-1 text-primary" size={12} />
<InfoIcon className="text-primary mb-1" size={12} />
</div>
</Tooltip>
)}
@@ -50,13 +50,13 @@ export const InfoField = ({
return (
<div className={clsx("flex flex-col gap-1", className)}>
<span className="text-xs font-bold text-gray-500 dark:text-prowler-theme-pale/70">
<span className="dark:text-prowler-theme-pale/70 text-xs font-bold text-gray-500">
<span className="flex items-center gap-1">
{label}
{tooltipContent && (
<Tooltip className="text-xs" content={tooltipContent}>
<div className="flex cursor-pointer items-center gap-2">
<InfoIcon className="mb-1 text-primary" size={12} />
<InfoIcon className="text-primary mb-1" size={12} />
</div>
</Tooltip>
)}
@@ -64,13 +64,13 @@ export const InfoField = ({
</span>
{variant === "simple" ? (
<div className="break-all text-small text-gray-900 dark:text-prowler-theme-pale">
<div className="text-small dark:text-prowler-theme-pale break-all text-gray-900">
{children}
</div>
) : variant === "transparent" ? (
<div className="text-sm">{children}</div>
) : (
<div className="rounded-lg bg-gray-50 px-3 py-2 text-sm text-gray-900 dark:bg-slate-800 dark:text-prowler-theme-pale">
<div className="dark:text-prowler-theme-pale rounded-lg bg-gray-50 px-3 py-2 text-sm text-gray-900 dark:bg-slate-800">
{children}
</div>
)}
ui/components/ui/entities/snippet-chip.tsx
+4 -5
View File
@@ -1,4 +1,6 @@
import { cn, Snippet, Tooltip } from "@nextui-org/react";
import { Snippet } from "@heroui/snippet";
import { cn } from "@heroui/theme";
import { Tooltip } from "@heroui/tooltip";
import React from "react";
import { CopyIcon, DoneIcon } from "@/components/icons";
@@ -38,10 +40,7 @@ export const SnippetChip = ({
codeString={value}
{...props}
>
<div
className="flex min-w-0 items-center space-x-2"
aria-label={ariaLabel}
>
<div className="flex min-w-0 items-center gap-2" aria-label={ariaLabel}>
{icon}
<Tooltip content={value} placement="top" size="sm">
<span className="min-w-0 flex-1 truncate text-xs">
ui/components/ui/form/Form.tsx
+5 -1
View File
@@ -81,7 +81,11 @@ const FormItem = React.forwardRef<
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
<div
ref={ref}
className={cn("flex flex-col gap-2", className)}
{...props}
/>
</FormItemContext.Provider>
);
});
ui/components/ui/form/form-buttons.tsx
+1 -1
View File
@@ -97,7 +97,7 @@ export const FormButtons = ({
leftIcon,
}: FormButtonsProps) => {
return (
<div className="flex w-full justify-center space-x-6">
<div className="flex w-full justify-center gap-6">
<FormCancelButton
setIsOpen={setIsOpen}
onCancel={onCancel}
ui/components/ui/headers/navigation-header.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Divider } from "@heroui/divider";
import { Icon } from "@iconify/react";
import { Divider } from "@nextui-org/react";
import React from "react";
import { CustomButton } from "@/components/ui/custom/custom-button";
@@ -29,7 +29,7 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
<Icon icon={icon} className="text-gray-600 dark:text-gray-400" />
</CustomButton>
<Divider orientation="vertical" className="h-6" />
<h1 className="text-xl font-light text-default-700">{title}</h1>
<h1 className="text-default-700 text-xl font-light">{title}</h1>
</header>
</>
);
ui/components/ui/nav-bar/navbar.tsx
+2 -2
View File
@@ -15,9 +15,9 @@ interface NavbarProps {
export function Navbar({ title, icon }: NavbarProps) {
return (
<header className="sticky top-0 z-10 w-full bg-background/95 shadow backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:shadow-primary">
<header className="bg-background/95 supports-[backdrop-filter]:bg-background/60 dark:shadow-primary sticky top-0 z-10 w-full shadow backdrop-blur">
<div className="mx-4 flex h-14 items-center sm:mx-8">
<div className="flex items-center space-x-2">
<div className="flex items-center gap-2">
<SheetMenu />
<BreadcrumbNavigation
mode="auto"
ui/components/ui/scroll-area/scroll-area.tsx
+3 -3
View File
@@ -31,11 +31,11 @@ const ScrollBar = React.forwardRef<
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
"flex touch-none transition-colors select-none",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
"h-full w-2.5 border-l border-l-transparent p-px",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
"h-2.5 flex-col border-t border-t-transparent p-px",
className,
)}
{...props}
ui/components/ui/select/Select.tsx
+4 -4
View File
@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300 [&>span]:line-clamp-1",
"flex h-9 w-full items-center justify-between rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm ring-offset-white placeholder:text-slate-500 focus:ring-1 focus:ring-slate-950 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300 [&>span]:line-clamp-1",
className,
)}
{...props}
@@ -80,7 +80,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
@@ -93,7 +93,7 @@ const SelectContent = React.forwardRef<
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
)}
>
{children}
@@ -123,7 +123,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
"relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none focus:bg-slate-100 focus:text-slate-900 data-disabled:pointer-events-none data-disabled:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
className,
)}
{...props}
ui/components/ui/sheet/sheet.tsx
+5 -8
View File
@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
className,
)}
{...props}
@@ -40,7 +40,7 @@ const sheetVariants = cva(
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
right:
"inset-y-0 right-0 h-full w-3/4 border-t-1 border-b-1 border-l-2 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
"inset-y-0 right-0 h-full w-3/4 border-t border-b border-l-2 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
},
},
defaultVariants: {
@@ -64,7 +64,7 @@ const SheetContent = React.forwardRef<
className={cn(sheetVariants({ side }), className)}
{...props}
>
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800">
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-neutral-100 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
@@ -79,10 +79,7 @@ const SheetHeader = ({
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className,
)}
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
);
@@ -94,7 +91,7 @@ const SheetFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
"flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
className,
)}
{...props}
ui/components/ui/sheet/trigger-sheet.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export function TriggerSheet({
<SheetTrigger className="flex items-center gap-2">
{triggerComponent}
</SheetTrigger>
<SheetContent className="my-4 max-h-[calc(100vh-2rem)] max-w-[95vw] overflow-y-auto rounded-l-xl pt-10 dark:bg-prowler-theme-midnight md:my-8 md:max-h-[calc(100vh-4rem)] md:max-w-[55vw]">
<SheetContent className="dark:bg-prowler-theme-midnight my-4 max-h-[calc(100vh-2rem)] max-w-[95vw] overflow-y-auto rounded-l-xl pt-10 md:my-8 md:max-h-[calc(100vh-4rem)] md:max-w-[55vw]">
<SheetHeader>
<SheetTitle className="sr-only">{title}</SheetTitle>
<SheetDescription className="sr-only">{description}</SheetDescription>
ui/components/ui/sidebar/collapse-menu-button.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
"use client";
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
import { ChevronDown } from "lucide-react";
import Link from "next/link";
@@ -87,7 +87,7 @@ export const CollapseMenuButton = ({
</div>
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
<CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden">
{submenus.map(
(
{ href, label, active, icon: SubIcon, target, disabled, onClick },
@@ -114,7 +114,7 @@ export const CollapseMenuButton = ({
disabled={true}
>
<div className="flex items-center">
<div className="mr-4 h-full border-l border-default-200"></div>
<div className="border-default-200 mr-4 h-full border-l"></div>
<span className="mr-2">
<SubIcon size={16} />
</span>
@@ -152,7 +152,7 @@ export const CollapseMenuButton = ({
className="flex items-center"
onClick={onClick}
>
<div className="mr-4 h-full border-l border-default-200"></div>
<div className="border-default-200 mr-4 h-full border-l"></div>
<span className="mr-2">
<SubIcon size={16} />
</span>
ui/components/ui/sidebar/menu.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
"use client";
import { Divider } from "@nextui-org/react";
import { Divider } from "@heroui/divider";
import { Ellipsis, LogOut } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
@@ -97,15 +97,15 @@ export const Menu = ({ isOpen }: { isOpen: boolean }) => {
{isOpen ? "Launch Scan" : <AddIcon size={20} />}
</CustomButton>
</div>
<ScrollArea className="[&>div>div[style]]:!block">
<ScrollArea className="[&>div>div[style]]:block!">
<nav className="mt-2 h-full w-full lg:mt-6">
<ul className="flex min-h-[calc(100vh-16px-60px-40px-16px-32px-40px-32px-44px)] flex-col items-start space-y-1 px-2 lg:min-h-[calc(100vh-16px-60px-40px-16px-64px-16px-41px)]">
<ul className="flex min-h-[calc(100vh-16px-60px-40px-16px-32px-40px-32px-44px)] flex-col items-start gap-1 px-2 lg:min-h-[calc(100vh-16px-60px-40px-16px-64px-16px-41px)]">
{filteredMenuList.map(({ groupLabel, menus }, index) => (
<li
className={cn(
"w-full",
groupLabel ? "pt-2" : "",
index === filteredMenuList.length - 2 && "!mt-auto",
index === filteredMenuList.length - 2 && "mt-auto!",
)}
key={index}
>
ui/components/ui/sidebar/sheet-menu.tsx
+2 -2
View File
@@ -23,14 +23,14 @@ export function SheetMenu() {
</Button>
</SheetTrigger>
<SheetContent
className="flex h-full flex-col px-3 dark:bg-prowler-theme-midnight sm:w-72"
className="dark:bg-prowler-theme-midnight flex h-full flex-col px-3 sm:w-72"
side="left"
>
<SheetHeader>
<SheetTitle className="sr-only">Sidebar</SheetTitle>
<SheetDescription className="sr-only" />
<Button
className="flex items-center justify-center pb-2 pt-1"
className="flex items-center justify-center pt-1 pb-2"
variant="link"
asChild
>
ui/components/ui/sidebar/sidebar-toggle.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ interface SidebarToggleProps {
export function SidebarToggle({ isOpen, setIsOpen }: SidebarToggleProps) {
return (
<div className="invisible absolute -right-[16px] top-[12px] z-20 lg:visible">
<div className="invisible absolute top-[12px] -right-[16px] z-20 lg:visible">
<Button
onClick={() => setIsOpen?.()}
className="h-8 w-8 rounded-md"
ui/components/ui/sidebar/sidebar.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ export function Sidebar() {
return (
<aside
className={cn(
"fixed left-0 top-0 z-20 h-screen -translate-x-full transition-[width] duration-300 ease-in-out lg:translate-x-0",
"fixed top-0 left-0 z-20 h-screen -translate-x-full transition-[width] duration-300 ease-in-out lg:translate-x-0",
!getOpenState() ? "w-[90px]" : "w-72",
settings.disabled && "hidden",
)}
@@ -29,7 +29,7 @@ export function Sidebar() {
<div
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
className="no-scrollbar relative flex h-full flex-col overflow-y-auto overflow-x-hidden px-3 py-4 shadow-md dark:shadow-primary"
className="no-scrollbar dark:shadow-primary relative flex h-full flex-col overflow-x-hidden overflow-y-auto px-3 py-4 shadow-md"
>
<Button
className={cn(
@@ -58,7 +58,7 @@ export function Sidebar() {
<div
className={clsx({
hidden: !isOpen,
"!mt-0": isOpen,
"mt-0!": isOpen,
})}
>
<ProwlerExtended />
ui/components/ui/skeleton/skeleton.tsx
+6 -9
View File
@@ -39,7 +39,7 @@ export function Skeleton({
: undefined,
}}
className={cn(
"animate-pulse bg-gray-200 dark:bg-prowler-blue-800",
"dark:bg-prowler-blue-800 animate-pulse bg-gray-200",
variantClasses[variant],
!animate && "animate-none",
className,
@@ -60,9 +60,9 @@ export function SkeletonTable({
roundedCells?: boolean;
}) {
return (
<div className={cn("w-full space-y-4", className)}>
<div className={cn("flex w-full flex-col gap-4", className)}>
{/* Header */}
<div className="flex items-center space-x-4 pb-4">
<div className="flex items-center gap-4 pb-4">
{Array.from({ length: columns }).map((_, index) => (
<Skeleton
key={`header-${index}`}
@@ -75,10 +75,7 @@ export function SkeletonTable({
{/* Rows */}
{Array.from({ length: rows }).map((_, rowIndex) => (
<div
key={`row-${rowIndex}`}
className="flex items-center space-x-4 py-3"
>
<div key={`row-${rowIndex}`} className="flex items-center gap-4 py-3">
{Array.from({ length: columns }).map((_, colIndex) => (
<Skeleton
key={`cell-${rowIndex}-${colIndex}`}
@@ -95,7 +92,7 @@ export function SkeletonTable({
export function SkeletonCard({ className }: { className?: string }) {
return (
<div className={cn("space-y-3", className)}>
<div className={cn("flex flex-col gap-3", className)}>
<Skeleton variant="card" />
<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-4 w-1/2" />
@@ -113,7 +110,7 @@ export function SkeletonText({
lastLineWidth?: string;
}) {
return (
<div className={cn("space-y-2", className)}>
<div className={cn("flex flex-col gap-2", className)}>
{Array.from({ length: lines - 1 }).map((_, index) => (
<Skeleton key={index} className="h-4 w-full" variant="text" />
))}
ui/components/ui/table/data-table-column-header.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
"use client";
import { Button } from "@nextui-org/react";
import { Button } from "@heroui/button";
import { Column } from "@tanstack/react-table";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { HTMLAttributes } from "react";
@@ -80,10 +80,10 @@ export const DataTableColumnHeader = <TData, TValue>({
return (
<Button
className="flex h-10 w-full items-center justify-between whitespace-nowrap bg-transparent px-0 text-left align-middle text-tiny font-semibold text-foreground-500 outline-none dark:text-slate-400"
className="text-tiny text-foreground-500 flex h-10 w-full items-center justify-between bg-transparent px-0 text-left align-middle font-semibold whitespace-nowrap outline-none dark:text-slate-400"
onPress={getToggleSortingHandler}
>
<span className="block whitespace-nowrap break-normal">{title}</span>
<span className="block break-normal whitespace-nowrap">{title}</span>
{renderSortIcon()}
</Button>
);
ui/components/ui/table/data-table-pagination.tsx
+5 -5
View File
@@ -75,14 +75,14 @@ export function DataTablePagination({
return (
<div className="flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8">
<div className="whitespace-nowrap text-sm">
<div className="text-sm whitespace-nowrap">
{totalEntries} entries in total
</div>
{totalEntries > 10 && (
<div className="flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
{/* Rows per page selector */}
<div className="flex items-center space-x-2">
<p className="whitespace-nowrap text-sm font-medium">
<div className="flex items-center gap-2">
<p className="text-sm font-medium whitespace-nowrap">
Rows per page
</p>
<Select
@@ -114,7 +114,7 @@ export function DataTablePagination({
}
}}
>
<SelectTrigger className="h-8 w-[4.5rem]">
<SelectTrigger className="h-8 w-18">
<SelectValue />
</SelectTrigger>
<SelectContent side="top">
@@ -133,7 +133,7 @@ export function DataTablePagination({
<div className="flex items-center justify-center text-sm font-medium">
Page {currentPage} of {totalPages}
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center gap-2">
<Link
aria-label="Go to first page"
className={`${baseLinkClass} ${isFirstPage ? disabledLinkClass : ""}`}
ui/components/ui/table/data-table.tsx
+3 -2
View File
@@ -40,6 +40,7 @@ export function DataTable<TData, TValue>({
}: DataTableProviderProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const table = useReactTable({
data,
columns,
@@ -59,7 +60,7 @@ export function DataTable<TData, TValue>({
return (
<>
<div className="relative z-0 flex w-full flex-col justify-between gap-4 overflow-auto rounded-large p-4 shadow-small dark:bg-prowler-blue-400">
<div className="rounded-large shadow-small dark:bg-prowler-blue-400 relative z-0 flex w-full flex-col justify-between gap-4 overflow-auto p-4">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
@@ -110,7 +111,7 @@ export function DataTable<TData, TValue>({
</Table>
</div>
{metadata && (
<div className="flex w-full items-center space-x-2 py-4">
<div className="flex w-full items-center gap-2 py-4">
<DataTablePagination
metadata={metadata}
disableScroll={disableScroll}
ui/components/ui/table/severity-badge.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { Chip } from "@nextui-org/react";
import { Chip } from "@heroui/chip";
import clsx from "clsx";
import React from "react";
@@ -36,7 +36,7 @@ export const SeverityBadge = ({ severity }: { severity: Severity }) => {
return (
<Chip
className={clsx("gap-1 border-none capitalize text-default-600", {
className={clsx("text-default-600 gap-1 border-none capitalize", {
"bg-system-severity-critical text-white dark:text-white":
severity === "critical",
})}
ui/components/ui/table/status-badge.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import { Chip } from "@nextui-org/react";
import { Chip } from "@heroui/chip";
import clsx from "clsx";
import React from "react";
@@ -41,8 +41,8 @@ export const StatusBadge = ({
return (
<Chip
className={clsx(
"relative w-full max-w-full border-none text-xs capitalize text-default-600",
status === "executing" && "border-1 border-solid border-transparent",
"text-default-600 relative w-full max-w-full border-none text-xs capitalize",
status === "executing" && "border border-solid border-transparent",
className,
)}
size={size}
@@ -52,8 +52,8 @@ export const StatusBadge = ({
>
{status === "executing" ? (
<div className="relative flex items-center justify-center gap-1">
<SpinnerIcon size={16} className="animate-spin text-default-500" />
<span className="pointer-events-none text-[0.6rem] text-default-500">
<SpinnerIcon size={16} className="text-default-500 animate-spin" />
<span className="text-default-500 pointer-events-none text-[0.6rem]">
{loadingProgress}%
</span>
<span>executing</span>
ui/components/ui/table/status-finding-badge.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { Chip } from "@nextui-org/react";
import { Chip } from "@heroui/chip";
import React from "react";
export type FindingStatus = "FAIL" | "PASS" | "MANUAL" | "MUTED";
@@ -33,7 +33,7 @@ export const StatusFindingBadge = ({
color={color}
{...props}
>
<span className="text-xs font-light tracking-wide text-default-600">
<span className="text-default-600 text-xs font-light tracking-wide">
{status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()}
{value !== undefined && `: ${value}`}
</span>
ui/components/ui/table/table.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { cn } from "@nextui-org/react";
import { cn } from "@heroui/theme";
import * as React from "react";
const Table = React.forwardRef<
@@ -22,7 +22,7 @@ const TableHeader = React.forwardRef<
<thead
ref={ref}
className={cn(
"[&>tr]:first:rounded-lg [&>tr]:first:shadow-small",
"[&>tr]:first:shadow-small [&>tr]:first:rounded-lg",
className,
)}
{...props}
@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
"h-10 whitespace-nowrap bg-default-100 px-2 text-left align-middle text-tiny font-semibold text-foreground-500 outline-none first:rounded-l-lg last:rounded-r-lg data-[focus-visible=true]:z-10 data-[hover=true]:text-foreground-400 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2 data-[focus-visible=true]:outline-focus dark:bg-prowler-blue-800 dark:text-slate-400 rtl:text-right rtl:first:rounded-l-[unset] rtl:first:rounded-r-lg rtl:last:rounded-l-lg rtl:last:rounded-r-[unset] [&:has([role=checkbox])]:pr-0",
"bg-default-100 text-tiny text-foreground-500 data-[hover=true]:text-foreground-400 data-[focus-visible=true]:outline-focus dark:bg-prowler-blue-800 h-10 px-2 text-left align-middle font-semibold whitespace-nowrap outline-none first:rounded-l-lg last:rounded-r-lg data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2 rtl:text-right rtl:first:rounded-l-[unset] rtl:first:rounded-r-lg rtl:last:rounded-l-lg rtl:last:rounded-r-[unset] dark:text-slate-400 [&:has([role=checkbox])]:pr-0",
className,
)}
{...props}
ui/components/ui/toast/Toast.tsx
+4 -4
View File
@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
<ToastPrimitives.Viewport
ref={ref}
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
"fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",
className,
)}
{...props}
@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
const toastVariants = cva(
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-slate-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-slate-800",
"group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-slate-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-slate-800",
{
variants: {
variant: {
@@ -63,7 +63,7 @@ const ToastAction = React.forwardRef<
<ToastPrimitives.Action
ref={ref}
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-slate-100 focus:outline-none focus:ring-1 focus:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-slate-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-slate-50 group-[.destructive]:focus:ring-red-500 dark:border-slate-800 dark:hover:bg-slate-800 dark:focus:ring-slate-300 dark:group-[.destructive]:border-slate-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-slate-50 dark:group-[.destructive]:focus:ring-red-900",
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium transition-colors group-[.destructive]:border-slate-100/40 hover:bg-slate-100 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-slate-50 focus:ring-1 focus:ring-slate-950 focus:outline-none group-[.destructive]:focus:ring-red-500 disabled:pointer-events-none disabled:opacity-50 dark:border-slate-800 dark:group-[.destructive]:border-slate-800/40 dark:hover:bg-slate-800 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-slate-50 dark:focus:ring-slate-300 dark:group-[.destructive]:focus:ring-red-900",
className,
)}
{...props}
@@ -78,7 +78,7 @@ const ToastClose = React.forwardRef<
<ToastPrimitives.Close
ref={ref}
className={cn(
"absolute right-1 top-1 rounded-md p-1 text-slate-950/50 opacity-0 transition-opacity hover:text-slate-950 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-slate-50/50 dark:hover:text-slate-50",
"absolute top-1 right-1 rounded-md p-1 text-slate-950/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-slate-950 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:ring-1 focus:outline-none group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-slate-50/50 dark:hover:text-slate-50",
className,
)}
toast-close=""
ui/components/ui/tooltip/tooltip.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
className,
)}
{...props}
ui/components/ui/user-nav/user-nav.tsx
+3 -3
View File
@@ -64,8 +64,8 @@ export const UserNav = () => {
<DropdownMenuContent className="w-56" align="end" forceMount>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-small font-medium leading-none">
<div className="flex flex-col gap-1">
<p className="text-small leading-none font-medium">
{name}
{companyName && (
<span className="text-xs">{` | ${companyName}`}</span>
@@ -81,7 +81,7 @@ export const UserNav = () => {
<DropdownMenuItem className="hover:cursor-pointer" asChild>
<CustomLink
href="/profile"
className="flex items-center font-normal text-prowler-black dark:text-prowler-white"
className="text-prowler-black dark:text-prowler-white flex items-center font-normal"
target="_self"
>
<User className="text-muted-foreground mr-3 h-4 w-4" />