Merge pull request #4652 from Infisical/tw-v4-fixes

Tw v4 fixes
This commit is contained in:
Scott Wilson
2025-10-10 11:53:56 -07:00
committed by GitHub
23 changed files with 66 additions and 68 deletions
+2 -2
View File
@@ -30,6 +30,6 @@ jobs:
- name: 🏗️ Run Type check - name: 🏗️ Run Type check
run: npm run type:check run: npm run type:check
working-directory: frontend working-directory: frontend
- name: 🏗️ Run Link check - name: 🏗️ Run Lint check
run: npm run lint:fix run: npm run lint
working-directory: frontend working-directory: frontend
+1 -1
View File
@@ -101,7 +101,7 @@ const InputField = ({
</button> </button>
)} )}
{blurred && ( {blurred && (
<div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden rounded-md text-clip text-gray-400/50 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible"> <div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden rounded-md text-clip text-gray-400/50 group-hover:!hidden peer-hover:hidden peer-focus:hidden peer-active:invisible">
<p className="ml-2" /> <p className="ml-2" />
{value {value
.split("") .split("")
@@ -171,7 +171,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
setSelectedTabIndex((prev) => (isEnabled ? index : prev)); setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}} }}
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
@@ -192,7 +192,7 @@ export const SecretRotationV2Form = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev)); setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}} }}
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
@@ -145,7 +145,7 @@ export const SecretScanningDataSourceForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev)); setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}} }}
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
@@ -185,7 +185,7 @@ export const CreateSecretSyncForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev)); setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}} }}
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
+1 -1
View File
@@ -10,7 +10,7 @@ interface IProps {
const badgeVariants = cva( const badgeVariants = cva(
[ [
"inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-xs text-yellow opacity-80 hover:opacity-100" "inline-block cursor-default rounded-md bg-yellow/20 px-1.5 py-0.5 text-xs text-yellow opacity-80 hover:opacity-100"
], ],
{ {
variants: { variants: {
+1 -1
View File
@@ -116,7 +116,7 @@ const buttonVariants = cva(
colorSchema: "danger", colorSchema: "danger",
variant: "outline_bg", variant: "outline_bg",
className: className:
"bg-mineshaft-600 border border-red-500 hover:bg-red/10 hover:border-red/40 text-red-500" "bg-mineshaft-600 border border-red-500/40 hover:bg-red/15 bg-red/10 hover:border-red text-red-500"
}, },
{ {
colorSchema: "primary", colorSchema: "primary",
@@ -21,7 +21,7 @@ export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) =>
</Popover.Trigger> </Popover.Trigger>
<Popover.Portal> <Popover.Portal>
<Popover.Content <Popover.Content
className="focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=bottom]:animate-slide-up-and-fade data-[state=open]:data-[side=left]:animate-slide-right-and-fade data-[state=open]:data-[side=right]:animate-slide-left-and-fade data-[state=open]:data-[side=top]:animate-slide-down-and-fade z-100 min-h-fit w-[460px] rounded-sm border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity]" className="data-[state=open]:data-[side=bottom]:animate-slide-up-and-fade data-[state=open]:data-[side=left]:animate-slide-right-and-fade data-[state=open]:data-[side=right]:animate-slide-left-and-fade data-[state=open]:data-[side=top]:animate-slide-down-and-fade focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] z-100 min-h-fit w-[460px] rounded-sm border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity]"
sideOffset={5} sideOffset={5}
hideWhenDetached hideWhenDetached
side="left" side="left"
+22 -22
View File
@@ -111,29 +111,29 @@ export type TWorkspaceUser = {
organization: string; organization: string;
roles: ( roles: (
| { | {
id: string; id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom"; role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string; customRoleId: string;
customRoleName: string; customRoleName: string;
customRoleSlug: string; customRoleSlug: string;
isTemporary: false; isTemporary: false;
temporaryRange: null; temporaryRange: null;
temporaryMode: null; temporaryMode: null;
temporaryAccessEndTime: null; temporaryAccessEndTime: null;
temporaryAccessStartTime: null; temporaryAccessStartTime: null;
} }
| { | {
id: string; id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom"; role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string; customRoleId: string;
customRoleName: string; customRoleName: string;
customRoleSlug: string; customRoleSlug: string;
isTemporary: true; isTemporary: true;
temporaryRange: string; temporaryRange: string;
temporaryMode: ProjectUserMembershipTemporaryMode; temporaryMode: ProjectUserMembershipTemporaryMode;
temporaryAccessEndTime: string; temporaryAccessEndTime: string;
temporaryAccessStartTime: string; temporaryAccessStartTime: string;
} }
)[]; )[];
status: "invited" | "accepted" | "verified" | "completed"; status: "invited" | "accepted" | "verified" | "completed";
deniedPermissions: any[]; deniedPermissions: any[];
+7 -9
View File
@@ -26,14 +26,14 @@
html { html {
@apply overflow-hidden; @apply overflow-hidden;
} }
}
:root { :root {
font-family: var(--font-inter); font-family: var(--font-inter);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--background: oklch(0.145 0 0); --background: oklch(0.145 0 0);
--toastify-color-dark: var(--color-mineshaft-700); --toastify-color-dark: var(--color-mineshaft-700);
}
} }
@theme { @theme {
@@ -401,18 +401,16 @@
} }
} }
@layer components { .Toastify__toast {
.Toastify__toast {
@apply rounded-md; @apply rounded-md;
} }
.Toastify__toast-body { .Toastify__toast-body {
@apply items-start; @apply items-start;
} }
.Toastify__toast-icon { .Toastify__toast-icon {
@apply w-4 pt-1; @apply w-4 pt-1;
}
} }
.tags-conic-bg { .tags-conic-bg {
@@ -525,7 +525,7 @@ export const OrgMembersTable = ({
</p> </p>
{u.superAdmin && ( {u.superAdmin && (
<Badge variant="primary" className="ml-2 w-min whitespace-nowrap"> <Badge variant="primary" className="ml-2 w-min whitespace-nowrap">
<span className="hidden xl:inline">Server Admin</span> <span className="mr-1 hidden xl:inline">Server Admin</span>
<Tooltip content="Server Admin"> <Tooltip content="Server Admin">
<FontAwesomeIcon className="xl:hidden" icon={faUserShield} /> <FontAwesomeIcon className="xl:hidden" icon={faUserShield} />
</Tooltip> </Tooltip>
@@ -135,7 +135,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
> >
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
@@ -146,7 +146,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
@@ -181,7 +181,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
> >
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
@@ -192,7 +192,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
@@ -127,7 +127,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600"> <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
@@ -138,7 +138,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
@@ -26,7 +26,7 @@ export const SqlConnectionFields = ({
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600"> <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300" selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
}` }`
} }
@@ -35,7 +35,7 @@ export const SqlConnectionFields = ({
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300" selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
}` }`
} }
@@ -63,16 +63,14 @@ export const CurrentPlanSection = () => {
return ( return (
<Tr key={`current-plan-row-${name}`} className="h-12"> <Tr key={`current-plan-row-${name}`} className="h-12">
<Td> <Td>
{name} <div className="flex items-center">
{toolTipText && ( {name}
<Tooltip content={toolTipText}> {toolTipText && (
<FontAwesomeIcon <Tooltip content={toolTipText}>
icon={faInfoCircle} <FontAwesomeIcon icon={faInfoCircle} className="ml-2" size="xs" />
className="relative bottom-2 left-2" </Tooltip>
size="xs" )}
/> </div>
</Tooltip>
)}
</Td> </Td>
<Td>{displayCell(allowed)}</Td> <Td>{displayCell(allowed)}</Td>
<Td>{used}</Td> <Td>{used}</Td>
@@ -28,7 +28,7 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
type="button" type="button"
className={`p-4 ${ className={`p-4 ${
selected ? "border-b-2 border-white text-white" : "text-mineshaft-400" selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
} w-30 font-medium outline-hidden`} } w-30 font-medium whitespace-nowrap outline-hidden`}
> >
Bill monthly Bill monthly
</button> </button>
@@ -20,7 +20,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600"> <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300" selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
}` }`
} }
@@ -29,7 +29,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${ `-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300" selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
}` }`
} }
@@ -49,7 +49,7 @@ export const SecretOverviewFolderRow = ({
className={twMerge("hidden group-hover:flex", isSelected && "flex")} className={twMerge("hidden group-hover:flex", isSelected && "flex")}
/> />
<FontAwesomeIcon <FontAwesomeIcon
className={twMerge("block group-hover:hidden", isSelected && "hidden")} className={twMerge("block group-hover:!hidden", isSelected && "!hidden")}
icon={faFolder} icon={faFolder}
/> />
</div> </div>
@@ -133,7 +133,7 @@ export const SecretOverviewTableRow = ({
className={twMerge("hidden group-hover:flex", isSelected && "flex")} className={twMerge("hidden group-hover:flex", isSelected && "flex")}
/> />
<FontAwesomeIcon <FontAwesomeIcon
className={twMerge("block group-hover:hidden", isSelected && "hidden")} className={twMerge("block group-hover:!hidden", isSelected && "!hidden")}
icon={isFormExpanded ? faAngleDown : faKey} icon={isFormExpanded ? faAngleDown : faKey}
/> />
</div> </div>
@@ -253,7 +253,9 @@ export const QuickSearchSecretItem = ({
> >
{secret.value || "EMPTY"} {secret.value || "EMPTY"}
</p> </p>
<p className="w-48 text-sm group-hover:hidden">***************************</p> <p className="w-48 text-sm group-hover:!hidden">
***************************
</p>
</div> </div>
</Tooltip> </Tooltip>
</DropdownMenuItem> </DropdownMenuItem>
@@ -462,8 +462,8 @@ export const SecretItem = memo(
/> />
<FontAwesomeSymbol <FontAwesomeSymbol
className={twMerge( className={twMerge(
"ml-3 block h-3.5 w-3.5 group-hover:hidden", "ml-3 block h-3.5 w-3.5 group-hover:!hidden",
isSelected && "hidden" isSelected && "!hidden"
)} )}
symbolName={FontAwesomeSpriteName.SecretKey} symbolName={FontAwesomeSpriteName.SecretKey}
/> />