This commit is contained in:
x032205
2025-12-10 15:02:40 -05:00
parent b65689a616
commit 94629124d8
5 changed files with 19 additions and 18 deletions
@@ -49,7 +49,7 @@ export const Pagination = ({
return ( return (
<div <div
className={twMerge( className={twMerge(
"border-mineshaft-600 bg-mineshaft-800 flex w-full items-center justify-end border-t px-4 py-3 text-white", "flex w-full items-center justify-end border-t border-mineshaft-600 bg-mineshaft-800 px-4 py-3 text-white",
className className
)} )}
> >
@@ -94,7 +94,7 @@ export const Pagination = ({
onClick={() => onChangePage(1)} onClick={() => onChangePage(1)}
isDisabled={!canGoFirst} isDisabled={!canGoFirst}
> >
<FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronLeft} /> <FontAwesomeIcon className="absolute top-1 left-2.5 text-xs" icon={faChevronLeft} />
<FontAwesomeIcon className="text-xs" icon={faChevronLeft} /> <FontAwesomeIcon className="text-xs" icon={faChevronLeft} />
</IconButton> </IconButton>
<IconButton <IconButton
@@ -120,7 +120,7 @@ export const Pagination = ({
onClick={() => onChangePage(upperLimit)} onClick={() => onChangePage(upperLimit)}
isDisabled={!canGoLast} isDisabled={!canGoLast}
> >
<FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronRight} /> <FontAwesomeIcon className="absolute top-1 left-2.5 text-xs" icon={faChevronRight} />
<FontAwesomeIcon className="text-xs" icon={faChevronRight} /> <FontAwesomeIcon className="text-xs" icon={faChevronRight} />
</IconButton> </IconButton>
</div> </div>
@@ -11,7 +11,7 @@ type Props = {
export const AccountViewToggle = ({ value, onChange }: Props) => { export const AccountViewToggle = ({ value, onChange }: Props) => {
return ( return (
<div className="border-mineshaft-600 bg-mineshaft-800 flex gap-0.5 rounded-md border p-1"> <div className="flex gap-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
<IconButton <IconButton
variant="outline_bg" variant="outline_bg"
onClick={() => { onClick={() => {
@@ -21,7 +21,7 @@ export const AccountViewToggle = ({ value, onChange }: Props) => {
size="xs" size="xs"
className={`${ className={`${
value === PamAccountView.Flat ? "bg-mineshaft-500" : "bg-transparent" value === PamAccountView.Flat ? "bg-mineshaft-500" : "bg-transparent"
} hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`} } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
> >
<FontAwesomeIcon icon={faBorderAll} /> <FontAwesomeIcon icon={faBorderAll} />
</IconButton> </IconButton>
@@ -34,7 +34,7 @@ export const AccountViewToggle = ({ value, onChange }: Props) => {
size="xs" size="xs"
className={`${ className={`${
value === PamAccountView.Nested ? "bg-mineshaft-500" : "bg-transparent" value === PamAccountView.Nested ? "bg-mineshaft-500" : "bg-transparent"
} hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`} } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
> >
<FontAwesomeIcon icon={faList} /> <FontAwesomeIcon icon={faList} />
</IconButton> </IconButton>
@@ -27,7 +27,7 @@ export const FolderBreadCrumbs = ({ path = "/" }: Props) => {
return ( return (
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div <div
className="breadcrumb border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-600 relative z-20 border-solid py-1 pl-5 pr-2 text-sm" className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pr-2 pl-5 text-sm hover:bg-mineshaft-600"
onClick={() => onFolderCrumbClick(0)} onClick={() => onFolderCrumbClick(0)}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") { if (e.key === "Enter" || e.key === " ") {
@@ -48,7 +48,7 @@ export const FolderBreadCrumbs = ({ path = "/" }: Props) => {
key={`path-${index + 1}`} key={`path-${index + 1}`}
className={`breadcrumb relative z-20 ${ className={`breadcrumb relative z-20 ${
index + 1 === arr.length ? "cursor-default" : "cursor-pointer" index + 1 === arr.length ? "cursor-default" : "cursor-pointer"
} border-mineshaft-600 text-mineshaft-200 border-solid py-1 pl-5 pr-2 text-sm`} } border-solid border-mineshaft-600 py-1 pr-2 pl-5 text-sm text-mineshaft-200`}
onClick={() => onFolderCrumbClick(index + 1)} onClick={() => onFolderCrumbClick(index + 1)}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") { if (e.key === "Enter" || e.key === " ") {
@@ -1,6 +1,7 @@
import { PAM_RESOURCE_TYPE_MAP, TPamAccount } from "@app/hooks/api/pam";
import { LogInIcon } from "lucide-react"; import { LogInIcon } from "lucide-react";
import { PAM_RESOURCE_TYPE_MAP, TPamAccount } from "@app/hooks/api/pam";
type Props = { type Props = {
account: TPamAccount; account: TPamAccount;
onAccess: (resource: TPamAccount) => void; onAccess: (resource: TPamAccount) => void;
@@ -17,10 +18,10 @@ export const PamAccountCard = ({ account, onAccess, accountPath }: Props) => {
onClick={() => onAccess(account)} onClick={() => onAccess(account)}
type="button" type="button"
key={account.id} key={account.id}
className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-700 flex cursor-pointer flex-col overflow-clip rounded-sm border p-4 text-start transition-transform duration-100 hover:scale-[103%]" className="flex cursor-pointer flex-col overflow-clip rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4 text-start transition-transform duration-100 hover:scale-[103%] hover:bg-mineshaft-700"
> >
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="border-mineshaft-500 bg-mineshaft-600 rounded-sm border p-1.5 shadow-inner"> <div className="rounded-sm border border-mineshaft-500 bg-mineshaft-600 p-1.5 shadow-inner">
<img <img
alt={resourceTypeName} alt={resourceTypeName}
src={`/images/integrations/${image}`} src={`/images/integrations/${image}`}
@@ -29,8 +30,8 @@ export const PamAccountCard = ({ account, onAccess, accountPath }: Props) => {
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex justify-between gap-2"> <div className="flex justify-between gap-2">
<p className="text-mineshaft-100 truncate text-lg font-medium">{name}</p> <p className="truncate text-lg font-medium text-mineshaft-100">{name}</p>
<LogInIcon className="text-mineshaft-400 size-5" /> <LogInIcon className="size-5 text-mineshaft-400" />
</div> </div>
<p <p
@@ -40,7 +41,7 @@ export const PamAccountCard = ({ account, onAccess, accountPath }: Props) => {
</p> </p>
</div> </div>
</div> </div>
<p className="text-mineshaft-400 mt-4 truncate text-sm">{description || "No description"}</p> <p className="mt-4 truncate text-sm text-mineshaft-400">{description || "No description"}</p>
</button> </button>
); );
}; };
@@ -299,14 +299,14 @@ export const PamAccountsTable = ({ projectId }: Props) => {
variant="plain" variant="plain"
size="sm" size="sm"
className={twMerge( className={twMerge(
"border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 min-w-10 items-center justify-center overflow-hidden border p-0 transition-all", "flex h-10 min-w-10 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
isTableFiltered && "border-primary/50 text-primary" isTableFiltered && "border-primary/50 text-primary"
)} )}
> >
<FontAwesomeIcon icon={faFilter} /> <FontAwesomeIcon icon={faFilter} />
</IconButton> </IconButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end"> <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
<DropdownMenuLabel>Resource</DropdownMenuLabel> <DropdownMenuLabel>Resource</DropdownMenuLabel>
{resources.length ? ( {resources.length ? (
resources.map((resource) => { resources.map((resource) => {
@@ -381,7 +381,7 @@ export const PamAccountsTable = ({ projectId }: Props) => {
<IconButton <IconButton
variant="outline_bg" variant="outline_bg"
ariaLabel="add-folder-or-import" ariaLabel="add-folder-or-import"
className="bg-mineshaft-600 rounded-l-none p-3" className="rounded-l-none bg-mineshaft-600 p-3"
> >
<FontAwesomeIcon icon={faAngleDown} /> <FontAwesomeIcon icon={faAngleDown} />
</IconButton> </IconButton>
@@ -428,7 +428,7 @@ export const PamAccountsTable = ({ projectId }: Props) => {
))} ))}
</div> </div>
<Pagination <Pagination
className="justify-start! col-span-full border-transparent bg-transparent pl-2" className="col-span-full justify-start! border-transparent bg-transparent pl-2"
count={totalCount} count={totalCount}
page={page} page={page}
perPage={perPage} perPage={perPage}