feat: upgraded to tw v4

This commit is contained in:
=
2025-10-09 22:37:42 +05:30
parent 2da35b389d
commit 7b0a51f5cf
669 changed files with 2856 additions and 3143 deletions
@@ -107,7 +107,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
"mt-4 w-full",
viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10",
viewMode === ViewMode.Undocked &&
"fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-[32rem] lg:w-[34%]"
"fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-lg lg:w-[34%]"
)}
>
<div
@@ -119,7 +119,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
{viewMode === ViewMode.Docked && (
<div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4">
<div>
<h3 className="text-lg font-semibold text-mineshaft-100">Access Tree</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Access Tree</h3>
<p className="text-sm leading-3 text-mineshaft-400">
Visual access policies for the configured role.
</p>
@@ -191,7 +191,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
<SelectItem
key={env.slug}
value={env.slug}
className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
>
<div className="ml-3 truncate font-medium">{env.name}</div>
</SelectItem>
@@ -209,7 +209,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
<Panel position="top-right" className="flex gap-2">
<Tooltip position="bottom" align="center" content={expandButtonLabel}>
<IconButton
className="rounded p-2"
className="rounded-sm p-2"
colorSchema="secondary"
variant="plain"
onClick={handleToggleView}
@@ -226,7 +226,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
</Tooltip>
<Tooltip align="end" position="bottom" content={hideButtonLabel}>
<IconButton
className="rounded p-2"
className="rounded-sm p-2"
colorSchema="secondary"
variant="plain"
onClick={onClose}
@@ -55,13 +55,13 @@ const ErrorDisplay = ({
</p>
</div>
<div className="relative flex flex-1 flex-col overflow-hidden">
<pre className="thin-scrollbar w-full flex-1 overflow-y-auto whitespace-pre-wrap rounded bg-mineshaft-700 p-2 text-xs text-mineshaft-100">
<pre className="thin-scrollbar w-full flex-1 overflow-y-auto rounded-sm bg-mineshaft-700 p-2 text-xs whitespace-pre-wrap text-mineshaft-100">
{display}
</pre>
<IconButton
variant="plain"
colorSchema="secondary"
className="absolute right-4 top-2"
className="absolute top-2 right-4"
ariaLabel="Copy secret value"
onClick={copyToClipboard}
>
@@ -46,7 +46,7 @@ export const PermissionSimulation = ({
<Panel position="top-left">
<Button
size="xs"
className="mr-1 rounded"
className="mr-1 rounded-sm"
colorSchema="secondary"
onClick={handlePermissionSimulation}
rightIcon={
@@ -65,9 +65,9 @@ export const PermissionSimulation = ({
<Panel
onClick={handlePermissionSimulation}
position="top-left"
className={`group flex flex-col gap-2 pb-4 pr-4 ${expand ? "" : "cursor-pointer"}`}
className={`group flex flex-col gap-2 pr-4 pb-4 ${expand ? "" : "cursor-pointer"}`}
>
<div className="flex w-[20rem] flex-col gap-1.5 rounded border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200">
<div className="flex w-[20rem] flex-col gap-1.5 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200">
<div>
<div className="flex w-full items-center justify-between">
<span className="text-sm">Permission Simulation</span>
@@ -83,7 +83,7 @@ export const PermissionSimulation = ({
</IconButton>
</div>
{expand && (
<p className="mb-2 mt-1 text-xs text-mineshaft-400">
<p className="mt-1 mb-2 text-xs text-mineshaft-400">
Evaluate conditional policies to see what permissions will be granted given a secret
name or tags
</p>
@@ -121,7 +121,7 @@ export const PermissionSimulation = ({
onValueChange={setEnvironment}
className="w-full border border-mineshaft-500 capitalize"
position="popper"
dropdownContainerClassName="max-w-[19rem]"
dropdownContainerClassName="max-w-76"
>
{environments.map(({ name, slug }) => {
return (
@@ -32,7 +32,7 @@ export const FolderNode = ({
<>
<Handle
type="target"
className="pointer-events-none !cursor-pointer opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Top}
/>
<div
@@ -42,7 +42,7 @@ export const FolderNode = ({
<FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} />
<span>{parentId ? `/${name}` : "/"}</span>
</div>
<div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded bg-mineshaft-600 px-2 py-1 text-xs">
<div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-sm bg-mineshaft-600 px-2 py-1 text-xs">
{Object.entries(actions).map(([action, access]) => {
const { className, icon } = AccessMap[access];
@@ -70,7 +70,7 @@ export const FolderNode = ({
</div>
<Handle
type="source"
className="pointer-events-none !cursor-pointer opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Bottom}
/>
</>
@@ -61,7 +61,7 @@ export const AccessTreeSecretPathInput = ({
<div ref={wrapperRef} className="relative">
<div
className={twMerge(
"flex items-center overflow-hidden rounded transition-all duration-300 ease-in-out",
"flex items-center overflow-hidden rounded-sm transition-all duration-300 ease-in-out",
isFocused ? "bg-mineshaft-800 shadow-md" : "bg-mineshaft-700",
isExpanded ? "w-64" : "h-10 w-10"
)}
@@ -26,11 +26,11 @@ type ConditionDisplayProps = {
const ConditionDisplay = ({ _key: key, value, operator }: ConditionDisplayProps) => {
return (
<li>
<span className="font-medium capitalize text-mineshaft-100">{camelCaseToSpaces(key)}</span>{" "}
<span className="font-medium text-mineshaft-100 capitalize">{camelCaseToSpaces(key)}</span>{" "}
<span className="text-mineshaft-200">
{formatedConditionsOperatorNames[operator as PermissionConditionOperators]}
</span>{" "}
<span className="rounded bg-mineshaft-600 p-0.5 font-mono">
<span className="rounded-sm bg-mineshaft-600 p-0.5 font-mono">
{typeof value === "string" ? value : value.join(", ")}
</span>
.
@@ -45,7 +45,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
case PermissionAccess.Full:
component = (
<>
<div className="flex items-center gap-1.5 capitalize text-green">
<div className="flex items-center gap-1.5 text-green capitalize">
<FontAwesomeIcon icon={faCheckCircle} size="xs" />
<span>Full {formatActionName(action)} Permissions</span>
</div>
@@ -62,7 +62,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
case PermissionAccess.Partial:
component = (
<>
<div className="flex items-center gap-1.5 capitalize text-yellow">
<div className="flex items-center gap-1.5 text-yellow capitalize">
<FontAwesomeIcon icon={faCircleMinus} className="text-yellow" size="xs" />
<span>Conditional {formatActionName(action)} Permissions</span>
</div>
@@ -137,7 +137,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
case PermissionAccess.None:
component = (
<>
<div className="flex items-center gap-1.5 capitalize text-red">
<div className="flex items-center gap-1.5 text-red capitalize">
<FontAwesomeIcon icon={faCircleXmark} size="xs" />
<span>No {formatActionName(action)} Permissions</span>
</div>
@@ -40,7 +40,7 @@ export const RoleNode = ({
<>
<Handle
type="target"
className="pointer-events-none !cursor-pointer opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Top}
/>
<div className="flex h-14 w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500">
@@ -51,7 +51,7 @@ export const RoleNode = ({
</div>
<Handle
type="source"
className="pointer-events-none !cursor-pointer opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Bottom}
/>
</>
@@ -15,7 +15,7 @@ export const ShowMoreButtonNode = ({
<div className="flex h-full w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-2">
<Handle
type="target"
className="pointer-events-none !cursor-pointer opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Top}
/>