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

View File

@@ -30,6 +30,6 @@ jobs:
- name: 🏗️ Run Type check
run: npm run type:check
working-directory: frontend
- name: 🏗️ Run Link check
run: npm run lint:fix
- name: 🏗️ Run Lint check
run: npm run lint
working-directory: frontend

View File

@@ -101,7 +101,7 @@ const InputField = ({
</button>
)}
{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" />
{value
.split("")

View File

@@ -171,7 +171,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
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
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"

View File

@@ -192,7 +192,7 @@ export const SecretRotationV2Form = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
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
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"

View File

@@ -145,7 +145,7 @@ export const SecretScanningDataSourceForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
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
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"

View File

@@ -185,7 +185,7 @@ export const CreateSecretSyncForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
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
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"

View File

@@ -10,7 +10,7 @@ interface IProps {
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: {

View File

@@ -116,7 +116,7 @@ const buttonVariants = cva(
colorSchema: "danger",
variant: "outline_bg",
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",

View File

@@ -21,7 +21,7 @@ export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) =>
</Popover.Trigger>
<Popover.Portal>
<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}
hideWhenDetached
side="left"

View File

@@ -111,29 +111,29 @@ export type TWorkspaceUser = {
organization: string;
roles: (
| {
id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string;
customRoleName: string;
customRoleSlug: string;
isTemporary: false;
temporaryRange: null;
temporaryMode: null;
temporaryAccessEndTime: null;
temporaryAccessStartTime: null;
}
id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string;
customRoleName: string;
customRoleSlug: string;
isTemporary: false;
temporaryRange: null;
temporaryMode: null;
temporaryAccessEndTime: null;
temporaryAccessStartTime: null;
}
| {
id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string;
customRoleName: string;
customRoleSlug: string;
isTemporary: true;
temporaryRange: string;
temporaryMode: ProjectUserMembershipTemporaryMode;
temporaryAccessEndTime: string;
temporaryAccessStartTime: string;
}
id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string;
customRoleName: string;
customRoleSlug: string;
isTemporary: true;
temporaryRange: string;
temporaryMode: ProjectUserMembershipTemporaryMode;
temporaryAccessEndTime: string;
temporaryAccessStartTime: string;
}
)[];
status: "invited" | "accepted" | "verified" | "completed";
deniedPermissions: any[];

View File

@@ -26,14 +26,14 @@
html {
@apply overflow-hidden;
}
}
:root {
:root {
font-family: var(--font-inter);
--foreground: oklch(0.985 0 0);
--background: oklch(0.145 0 0);
--toastify-color-dark: var(--color-mineshaft-700);
}
}
@theme {
@@ -401,18 +401,16 @@
}
}
@layer components {
.Toastify__toast {
.Toastify__toast {
@apply rounded-md;
}
}
.Toastify__toast-body {
.Toastify__toast-body {
@apply items-start;
}
}
.Toastify__toast-icon {
.Toastify__toast-icon {
@apply w-4 pt-1;
}
}
.tags-conic-bg {

View File

@@ -525,7 +525,7 @@ export const OrgMembersTable = ({
</p>
{u.superAdmin && (
<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">
<FontAwesomeIcon className="xl:hidden" icon={faUserShield} />
</Tooltip>

View File

@@ -135,7 +135,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
>
<Tab
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"
@@ -146,7 +146,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab>
<Tab
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"

View File

@@ -181,7 +181,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
>
<Tab
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"
@@ -192,7 +192,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab>
<Tab
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"

View File

@@ -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
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"
@@ -138,7 +138,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab>
<Tab
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"

View File

@@ -26,7 +26,7 @@ export const SqlConnectionFields = ({
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
<Tab
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"
}`
}
@@ -35,7 +35,7 @@ export const SqlConnectionFields = ({
</Tab>
<Tab
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"
}`
}

View File

@@ -63,16 +63,14 @@ export const CurrentPlanSection = () => {
return (
<Tr key={`current-plan-row-${name}`} className="h-12">
<Td>
{name}
{toolTipText && (
<Tooltip content={toolTipText}>
<FontAwesomeIcon
icon={faInfoCircle}
className="relative bottom-2 left-2"
size="xs"
/>
</Tooltip>
)}
<div className="flex items-center">
{name}
{toolTipText && (
<Tooltip content={toolTipText}>
<FontAwesomeIcon icon={faInfoCircle} className="ml-2" size="xs" />
</Tooltip>
)}
</div>
</Td>
<Td>{displayCell(allowed)}</Td>
<Td>{used}</Td>

View File

@@ -28,7 +28,7 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
type="button"
className={`p-4 ${
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
</button>

View File

@@ -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
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"
}`
}
@@ -29,7 +29,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
</Tab>
<Tab
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"
}`
}

View File

@@ -49,7 +49,7 @@ export const SecretOverviewFolderRow = ({
className={twMerge("hidden group-hover:flex", isSelected && "flex")}
/>
<FontAwesomeIcon
className={twMerge("block group-hover:hidden", isSelected && "hidden")}
className={twMerge("block group-hover:!hidden", isSelected && "!hidden")}
icon={faFolder}
/>
</div>

View File

@@ -133,7 +133,7 @@ export const SecretOverviewTableRow = ({
className={twMerge("hidden group-hover:flex", isSelected && "flex")}
/>
<FontAwesomeIcon
className={twMerge("block group-hover:hidden", isSelected && "hidden")}
className={twMerge("block group-hover:!hidden", isSelected && "!hidden")}
icon={isFormExpanded ? faAngleDown : faKey}
/>
</div>

View File

@@ -253,7 +253,9 @@ export const QuickSearchSecretItem = ({
>
{secret.value || "EMPTY"}
</p>
<p className="w-48 text-sm group-hover:hidden">***************************</p>
<p className="w-48 text-sm group-hover:!hidden">
***************************
</p>
</div>
</Tooltip>
</DropdownMenuItem>

View File

@@ -462,8 +462,8 @@ export const SecretItem = memo(
/>
<FontAwesomeSymbol
className={twMerge(
"ml-3 block h-3.5 w-3.5 group-hover:hidden",
isSelected && "hidden"
"ml-3 block h-3.5 w-3.5 group-hover:!hidden",
isSelected && "!hidden"
)}
symbolName={FontAwesomeSpriteName.SecretKey}
/>