awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgraded to tw v4

Browse Source
This commit is contained in:
=
2025-10-09 22:33:34 +05:30
parent 2da35b389d
commit 7b0a51f5cf
669 changed files with 2856 additions and 3143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1390
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
frontend/package.json
View File

@@ -11,11 +11,9 @@
"lint:fix": "eslint --fix ./src",
"type:check": "tsc --noEmit --project ./tsconfig.app.json"
},
"overrides": {
"sha.js": "2.4.12"
},
"dependencies": {
"@casl/ability": "^6.7.2",
"@casl/react": "^4.0.0",
@@ -108,6 +106,7 @@
"@eslint/js": "^9.15.0",
"@kesills/eslint-config-airbnb-typescript": "^20.0.0",
"@stylistic/eslint-plugin": "^2.12.1",
"@tailwindcss/postcss": "^4.1.14",
"@tailwindcss/typography": "^0.5.15",
"@tanstack/eslint-plugin-router": "^1.87.6",
"@tanstack/router-devtools": "^1.87.9",
@@ -122,7 +121,6 @@
"@types/react-dom": "^18.3.1",
"@types/react-helmet": "^6.1.11",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.1",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^9.1.0",
@@ -135,8 +133,8 @@
"globals": "^15.12.0",
"postcss": "^8.4.49",
"prettier": "3.4.2",
"prettier-plugin-tailwindcss": "^0.6.9",
"tailwindcss": "^3.4.16",
"prettier-plugin-tailwindcss": "^0.6.14",
"tailwindcss": "^4.1.14",
"typescript": "~5.6.2",
"typescript-eslint": "^8.15.0",
"vite": "^5.4.18",

3
frontend/postcss.config.js
View File

@@ -1,6 +1,5 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
}

4
frontend/src/components/app-connections/AppConnectionOption.tsx
View File

@@ -26,8 +26,8 @@ export const AppConnectionOption = ({
<p className="truncate">{children}</p>
{!props.data.projectId && (
<Tooltip content="This connection belongs to your organization.">
<div className="ml-2 mr-auto">
<Badge className="flex h-5 w-min items-center gap-1 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300 hover:text-bunker-300">
<div className="mr-auto ml-2">
<Badge className="flex h-5 w-min items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300 hover:text-bunker-300">
<FontAwesomeIcon icon={faBuilding} size="sm" />
Organization
</Badge>

8
frontend/src/components/auth/CodeInputStep.tsx
View File

@@ -91,7 +91,7 @@ export default function CodeInputStep({
return (
<div className="mx-auto h-full w-full pb-4 md:px-8">
<p className="text-md flex justify-center text-bunker-200">{t("signup.step2-message")}</p>
<p className="text-md my-1 flex justify-center font-semibold text-bunker-200">{email} </p>
<p className="text-md my-1 flex justify-center font-medium text-bunker-200">{email} </p>
<div className="mx-auto hidden w-max min-w-[20rem] md:block">
<ReactCodeInput
name=""
@@ -100,7 +100,7 @@ export default function CodeInputStep({
fields={6}
onChange={setCode}
{...props}
className="mb-2 mt-6"
className="mt-6 mb-2"
/>
</div>
<div className="mx-auto mt-4 block w-max md:hidden">
@@ -111,11 +111,11 @@ export default function CodeInputStep({
fields={6}
onChange={setCode}
{...propsPhone}
className="mb-2 mt-2"
className="mt-2 mb-2"
/>
</div>
{codeError && <Error text={t("signup.step2-code-error")} />}
<div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
<div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
<div className="text-l w-full py-1 text-lg">
<Button
type="submit"

8
frontend/src/components/auth/EnterEmailStep.tsx
View File

@@ -55,7 +55,7 @@ export default function EnterEmailStep({
return (
<div>
<div className="mx-auto w-full md:px-6">
<p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-xl font-medium text-transparent">
<p className="flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-medium text-transparent">
{t("signup.step1-start")}
</p>
<div className="m-auto mt-8 flex w-1/4 min-w-[20rem] flex-col items-center justify-center rounded-lg lg:w-1/6">
@@ -68,12 +68,12 @@ export default function EnterEmailStep({
className="h-12"
/>
{emailError && (
<p className="ml-1.5 mt-1.5 w-full text-left text-xs text-red-600">
<p className="mt-1.5 ml-1.5 w-full text-left text-xs text-red-600">
Please enter a valid email.
</p>
)}
</div>
<div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-1/6">
<div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-1/6">
<div className="text-l w-full py-1 text-lg">
<Button
type="submit"
@@ -92,7 +92,7 @@ export default function EnterEmailStep({
</div>
</div>
</div>
<div className="mx-auto mb-48 mt-2 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
<div className="mx-auto mt-2 mb-48 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
<Link to="/login">
<button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
<span className="cursor-pointer text-sm text-mineshaft-400 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">

2
frontend/src/components/auth/InitialSignupStep.tsx
View File

@@ -23,7 +23,7 @@ export default function InitialSignupStep({
return (
<div className="mx-auto flex w-full flex-col items-center justify-center">
<h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
<h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
{t("signup.initial-title")}
</h1>
<RegionSelect />

18
frontend/src/components/auth/Mfa.tsx
View File

@@ -159,7 +159,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
<div className="mb-6 text-center text-lg font-bold text-white">
Your organization requires mobile authentication to be configured.
</div>
<div className="mx-auto w-max pb-4 pt-4 md:mb-16 md:px-8">
<div className="mx-auto w-max pt-4 pb-4 md:mb-16 md:px-8">
<TotpRegistration
shouldCenterQr
onComplete={async () => {
@@ -173,7 +173,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
}
return (
<div className="mx-auto w-max pb-6 pt-6 md:mb-16 md:px-8">
<div className="mx-auto w-max pt-6 pb-6 md:mb-16 md:px-8">
{!hideLogo && (
<Link to="/">
<div className="mb-4 flex justify-center">
@@ -184,12 +184,12 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
{method === MfaMethod.EMAIL && (
<>
<p className="text-l flex justify-center text-bunker-300">{t("mfa.step2-message")}</p>
<p className="text-l my-1 flex justify-center font-semibold text-bunker-300">{email}</p>
<p className="text-l my-1 flex justify-center font-medium text-bunker-300">{email}</p>
</>
)}
{method === MfaMethod.TOTP && (
<div className="mb-8 text-center">
<h2 className="mb-3 text-xl font-semibold text-bunker-100">Two-Factor Authentication</h2>
<h2 className="mb-3 text-xl font-medium text-bunker-100">Two-Factor Authentication</h2>
<p className="mx-auto max-w-md text-sm leading-relaxed text-bunker-300">
{showRecoveryCodeInput
? "Enter one of your backup recovery codes"
@@ -207,13 +207,13 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
type="text"
fields={6}
onChange={setMfaCode}
className="mb-2 mt-6"
className="mt-6 mb-2"
{...codeInputProps}
/>
</div>
)}
{method === MfaMethod.TOTP && (
<div className="mb-6 mt-8 flex justify-center">
<div className="mt-8 mb-6 flex justify-center">
<ReactCodeInput
key={showRecoveryCodeInput ? "recovery" : "totp"}
name=""
@@ -236,13 +236,13 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
type="text"
fields={6}
onChange={setMfaCode}
className="mb-2 mt-2"
className="mt-2 mb-2"
{...codeInputPropsPhone}
/>
</div>
)}
{method === MfaMethod.TOTP && (
<div className="mb-6 mt-4 flex justify-center">
<div className="mt-4 mb-6 flex justify-center">
<ReactCodeInput
key={showRecoveryCodeInput ? "recovery-mobile" : "totp-mobile"}
name=""
@@ -264,7 +264,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
size="md"
type="submit"
isFullWidth
className="h-11 rounded-lg font-medium shadow-sm transition-all duration-200 hover:shadow-md"
className="h-11 rounded-lg font-medium shadow-xs transition-all duration-200 hover:shadow-md"
colorSchema="primary"
variant="outline_bg"
isLoading={isLoading}

14
frontend/src/components/auth/TeamInviteStep.tsx
View File

@@ -41,26 +41,26 @@ export default function TeamInviteStep(): JSX.Element {
};
return (
<div className="min-w-lg mx-auto mb-64 h-full w-max px-8 pb-4 md:mb-32">
<p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-2xl font-semibold text-transparent">
<div className="mx-auto mb-64 h-full w-max min-w-lg px-8 pb-4 md:mb-32">
<p className="flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-2xl font-medium text-transparent">
{t("signup.step5-invite-team")}
</p>
<p className="mb-6 mt-4 flex justify-center text-center text-bunker-400 md:mx-8">
<p className="mt-4 mb-6 flex justify-center text-center text-bunker-400 md:mx-8">
{t("signup.step5-subtitle")}
</p>
<div className="mx-auto mb-6 w-max rounded-xl border border-mineshaft-500 bg-mineshaft-800 px-8 pb-4 pt-6 drop-shadow-xl">
<div className="mx-auto mb-6 w-max rounded-xl border border-mineshaft-500 bg-mineshaft-800 px-8 pt-6 pb-4 drop-shadow-xl">
<div>
<div className="pb-1 pl-1 text-sm font-medium text-bunker-300">
<span>Emails</span>
</div>
<textarea
className="h-20 w-full min-w-[30rem] rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 placeholder:text-bunker-400 focus:ring-2"
className="ring-opacity-70 h-20 w-full min-w-120 rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 ring-primary-800 outline-hidden placeholder:text-bunker-400 focus:ring-2"
value={emails}
onChange={(e) => setEmails(e.target.value)}
placeholder="email@example.com, email2@example.com..."
/>
</div>
<div className="mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mb-2 md:mt-4 md:min-w-[30rem] md:max-w-md">
<div className="mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mt-4 md:mb-2 md:max-w-md md:min-w-120">
<Button
onClick={() => {
if (serverDetails?.emailConfigured) {
@@ -84,7 +84,7 @@ export default function TeamInviteStep(): JSX.Element {
onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
/>
</div>
<div className="mx-auto mb-2 mt-4 flex max-h-24 min-w-[20rem] max-w-max flex-row items-center justify-center px-4 text-lg md:p-2">
<div className="mx-auto mt-4 mb-2 flex max-h-24 max-w-max min-w-[20rem] flex-row items-center justify-center px-4 text-lg md:p-2">
<Button
onClick={redirectToHome}
size="sm"

10
frontend/src/components/auth/UserInfoStep.tsx
View File

@@ -139,7 +139,7 @@ export default function UserInfoStep({
return (
<div className="mx-auto mb-36 h-full w-max rounded-xl md:mb-16 md:px-8">
<p className="text-medium mx-8 mb-6 flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-xl font-bold text-transparent md:mx-16">
<p className="text-medium mx-8 mb-6 flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-bold text-transparent md:mx-16">
{t("signup.step3-message")}
</p>
<div className="mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800 md:px-8">
@@ -156,7 +156,7 @@ export default function UserInfoStep({
className="h-12"
/>
{nameError && (
<p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
<p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
Please, specify your name
</p>
)}
@@ -174,7 +174,7 @@ export default function UserInfoStep({
className="h-12"
/>
{organizationNameError && (
<p className="ml-1 mt-1 w-full text-left text-xs text-red-600">
<p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
Please, specify your organization name
</p>
)}
@@ -219,7 +219,7 @@ export default function UserInfoStep({
<div>
<FontAwesomeIcon
icon={faXmark}
className="text-md ml-0.5 mr-2.5 text-red"
className="text-md mr-2.5 ml-0.5 text-red"
/>
</div>
<p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
@@ -232,7 +232,7 @@ export default function UserInfoStep({
</div>
)}
</div>
<div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
<div className="mx-auto mt-2 flex w-1/4 max-w-xs min-w-[20rem] flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
<div className="text-l w-full py-1 text-lg">
<Button
type="submit"

2
frontend/src/components/basic/Error.tsx
View File

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const Error = ({ text }: { text: string }): JSX.Element => {
return (
<div className="relative m-auto flex w-fit flex-row items-center justify-center rounded-full">
<FontAwesomeIcon icon={faExclamationTriangle} className="mx-2 mb-2 mt-1.5 text-red" />
<FontAwesomeIcon icon={faExclamationTriangle} className="mx-2 mt-1.5 mb-2 text-red" />
{text && <p className="relative top-0 mr-2 py-1 text-sm text-red">{text}</p>}
</div>
);

16
frontend/src/components/basic/InputField.tsx
View File

@@ -40,7 +40,7 @@ const InputField = ({
if (isStatic === true) {
return (
<div className="my-2 flex w-full max-w-md flex-col justify-center md:my-4">
<p className="mb-0.5 text-sm font-semibold text-gray-400">{label}</p>
<p className="mb-0.5 text-sm font-medium text-gray-400">{label}</p>
{text && <p className="mb-2 text-xs text-gray-400">{text}</p>}
<input
onChange={(e) => onChangeHandler(e.target.value)}
@@ -48,7 +48,7 @@ const InputField = ({
placeholder={placeholder}
value={value}
required={isRequired}
className="text-md w-full min-w-16 rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none"
className="text-md w-full min-w-16 rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-hidden"
name={name}
readOnly
autoComplete={autoComplete}
@@ -60,7 +60,7 @@ const InputField = ({
return (
<div className="w-full flex-col">
<div className="mb-0.5 flex flex-row items-center text-mineshaft-300">
<p className="mr-1 text-sm font-semibold">{label}</p>
<p className="mr-1 text-sm font-medium">{label}</p>
</div>
<div
className={`group relative flex w-full max-w-2xl flex-col justify-center border ${
@@ -75,11 +75,11 @@ const InputField = ({
required={isRequired}
className={`${
blurred
? "text-bunker-800 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400"
? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
: ""
} ${
error ? "focus:ring-red/50" : "focus:ring-primary/50"
} text-md peer relative w-full min-w-16 rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-none duration-200 focus:ring-4`}
} text-md peer relative w-full min-w-16 rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-hidden duration-200 focus:ring-4`}
name={name}
spellCheck="false"
autoComplete={autoComplete}
@@ -101,7 +101,7 @@ const InputField = ({
</button>
)}
{blurred && (
<div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden text-clip rounded-md 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("")
@@ -109,7 +109,7 @@ const InputField = ({
.map(() => (
<FontAwesomeIcon
key={guidGenerator()}
className="mx-0.5 text-xxs"
className="text-xxs mx-0.5"
icon={faCircle}
/>
))}
@@ -121,7 +121,7 @@ const InputField = ({
</div>
)} */}
</div>
{error && <p className="mx-0 mb-2 mt-0.5 max-w-xs text-xs text-red">{errorText}</p>}
{error && <p className="mx-0 mt-0.5 mb-2 max-w-xs text-xs text-red">{errorText}</p>}
</div>
);
};

6
frontend/src/components/integrations/NoEnvironmentsBanner.tsx
View File

@@ -12,10 +12,8 @@ export const NoEnvironmentsBanner = ({ projectId }: IProps) => {
return (
<div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
<div className="flex w-full flex-col text-sm">
<span className="mb-2 text-lg font-semibold">
No environments in your project was found
</span>
<p className="prose">
<span className="mb-2 text-lg font-medium">No environments in your project was found</span>
<p>
In order to use integrations, you need to create at least one environment in your project.
</p>
</div>

2
frontend/src/components/mfa/RecoveryCodesDownload.tsx
View File

@@ -58,7 +58,7 @@ export const RecoveryCodesDownload = ({
<Modal isOpen={isOpen} onOpenChange={hasDownloaded ? handleClose : () => {}}>
<ModalContent title="Recovery Codes" className="max-w-md">
<div className="space-y-4">
<div className="rounded border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
<div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
Save these codes securely. Each can only be used once.
</div>

26
frontend/src/components/navigation/NavHeader.tsx
View File

@@ -66,35 +66,33 @@ export default function NavHeader({
return (
<div className="flex flex-row items-center pt-6">
<div className="mr-2 flex h-5 w-5 min-w-[1.25rem] items-center justify-center rounded-md bg-primary text-sm text-black">
<div className="mr-2 flex h-5 w-5 min-w-5 items-center justify-center rounded-md bg-primary text-sm text-black">
{currentOrg?.name?.charAt(0)}
</div>
<Link
to="/organization/projects"
className="truncate pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary"
className="truncate pl-0.5 text-sm font-medium text-primary/80 hover:text-primary"
>
{currentOrg?.name}
</Link>
{isProjectRelated && (
<>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
<div className="truncate text-sm font-semibold text-bunker-300">
{currentProject?.name}
</div>
<FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-xs text-gray-400" />
<div className="truncate text-sm font-medium text-bunker-300">{currentProject?.name}</div>
</>
)}
{isOrganizationRelated && (
<>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
<div className="text-sm font-semibold text-bunker-300">Organization Settings</div>
<FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-xs text-gray-400" />
<div className="text-sm font-medium text-bunker-300">Organization Settings</div>
</>
)}
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
<FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-sm text-gray-400" />
{pageName === "Secrets" ? (
<Link
to="/projects/secret-management/$projectId/overview"
params={{ projectId: currentProject.id }}
className="text-sm font-semibold text-primary/80 hover:text-primary"
className="text-sm font-medium text-primary/80 hover:text-primary"
>
{pageName}
</Link>
@@ -103,7 +101,7 @@ export default function NavHeader({
)}
{currentEnv && secretPath === "/" && (
<>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
<FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
<div className="rounded-md pl-3 hover:bg-bunker-100/10">
<Tooltip content="Select environment">
<Select
@@ -126,11 +124,11 @@ export default function NavHeader({
)}
{isFolderMode && routerEnvSlug && Boolean(secretPathSegments.length) && (
<div className="flex items-center space-x-3">
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
<FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
<Link
to="/projects/secret-management/$projectId/secrets/$envSlug"
params={{ projectId: currentProject.id, envSlug: routerEnvSlug }}
className="text-sm font-semibold text-primary/80 hover:text-primary"
className="text-sm font-medium text-primary/80 hover:text-primary"
>
{userAvailableEnvs?.find(({ slug }) => slug === currentEnv)?.name}
</Link>
@@ -145,7 +143,7 @@ export default function NavHeader({
className="flex items-center space-x-3"
key={`breadcrumb-secret-path-${folderName}`}
>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
<FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
{index + 1 === secretPathSegments?.length ? (
<div className="flex items-center space-x-2">
<span

2
frontend/src/components/navigation/RegionSelect.tsx
View File

@@ -122,7 +122,7 @@ export const RegionSelect = () => {
<span className="mr-2 inline-block w-4">{flag}</span>
{value.toUpperCase()} Region
</p>
<ul className="ml-6 mt-2 flex flex-col gap-1">
<ul className="mt-2 ml-6 flex flex-col gap-1">
<li>
<FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Fastest
option if you are based in {value === Region.US ? "the" : ""} {label}

2
frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx
View File

@@ -57,7 +57,7 @@ export const SecretDashboardPathBreadcrumb = ({
type: "info"
});
}}
className="opacity-0 transition duration-75 hover:bg-bunker-100/10 group-hover:opacity-100"
className="opacity-0 transition duration-75 group-hover:opacity-100 hover:bg-bunker-100/10"
>
<FontAwesomeIcon
icon={!isCopying ? faCopy : faCheck}

4
frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx
View File

@@ -13,7 +13,7 @@ export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props)
<div className="font-medium">Last Login</div>
</div>
<div className="mb-2 flex items-center gap-2 text-sm">
<div className="flex items-center justify-center rounded bg-mineshaft-700 p-3">
<div className="flex items-center justify-center rounded-sm bg-mineshaft-700 p-3">
<FontAwesomeIcon icon={faShield} className="h-4 w-4" />
</div>
<div className="flex flex-col">
@@ -22,7 +22,7 @@ export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props)
</div>
</div>
<div className="flex items-center gap-2 text-sm">
<div className="flex items-center justify-center rounded bg-mineshaft-700 p-3">
<div className="flex items-center justify-center rounded-sm bg-mineshaft-700 p-3">
<FontAwesomeIcon icon={faClock} className="h-4 w-4" />
</div>
<div className="flex flex-col">

10
frontend/src/components/permissions/AccessTree/AccessTree.tsx
View File

@@ -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}

4
frontend/src/components/permissions/AccessTree/components/AccessTreeErrorBoundary.tsx
View File

@@ -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}
>

10
frontend/src/components/permissions/AccessTree/components/PermissionSimulation.tsx
View File

@@ -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 (

6
frontend/src/components/permissions/AccessTree/nodes/FolderNode/FolderNode.tsx
View File

@@ -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}
/>
</>

2
frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/AccessTreeSecretPathInput.tsx
View File

@@ -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"
)}

10
frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/FolderNodeTooltipContent.tsx
View File

@@ -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>

4
frontend/src/components/permissions/AccessTree/nodes/RoleNode.tsx
View File

@@ -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}
/>
</>

2
frontend/src/components/permissions/AccessTree/nodes/ShowMoreButtonNode.tsx
View File

@@ -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}
/>

6
frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx
View File

@@ -69,16 +69,16 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) =>
label = "Failed to Import Certificates";
icon = faTriangleExclamation;
tooltipContent = (
<div className="flex flex-col gap-2 whitespace-normal py-1">
<div className="flex flex-col gap-2 py-1 whitespace-normal">
{failureMessage && (
<div>
<div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">
{mini ? "Failed to Import Certificates" : "Failure Reason"}
</div>
</div>
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div>
)}
</div>

2
frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx
View File

@@ -29,7 +29,7 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
rel="noopener noreferrer"
>
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}

6
frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx
View File

@@ -69,16 +69,16 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) =>
label = "Failed to Remove Certificates";
icon = faTriangleExclamation;
tooltipContent = (
<div className="flex flex-col gap-2 whitespace-normal py-1">
<div className="flex flex-col gap-2 py-1 whitespace-normal">
{failureMessage && (
<div>
<div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">
{mini ? "Failed to Remove Certificates" : "Failure Reason"}
</div>
</div>
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div>
)}
</div>

2
frontend/src/components/pki-syncs/PkiSyncSelect.tsx
View File

@@ -60,7 +60,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/>
<div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
<div className="grid h-118 grid-cols-4 content-start gap-2">
{filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
const { image, name } = PKI_SYNC_MAP[destination];
return (

4
frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx
View File

@@ -124,7 +124,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
if (showConfirmation)
return (
<>
<div className="flex flex-col rounded-sm border border-l-[2px] border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
<div className="flex flex-col rounded-xs border border-l-2 border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
<div className="mb-1 flex items-center text-sm">
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
Certificate Sync Behavior
@@ -171,7 +171,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
className={({ selected }) =>
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
`-mb-[0.14rem] w-30 ${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"

2
frontend/src/components/pki-syncs/forms/PkiSyncDetailsFields.tsx
View File

@@ -38,7 +38,7 @@ export const PkiSyncDetailsFields = () => {
value={value}
onChange={onChange}
placeholder="Describe the purpose of this sync..."
className="!resize-none"
className="resize-none!"
rows={4}
/>
</FormControl>

4
frontend/src/components/project/ProjectOverviewChangeSection.tsx
View File

@@ -85,7 +85,7 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="justify-betweens flex">
<h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Overview</h2>
<h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Project Overview</h2>
<div className="space-x-2">
<Button
variant="outline_bg"
@@ -200,7 +200,7 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
placeholder="Project description"
{...field}
rows={3}
className="thin-scrollbar max-w-md !resize-none bg-mineshaft-800"
className="thin-scrollbar max-w-md resize-none! bg-mineshaft-800"
isDisabled={!isAllowed}
/>
</FormControl>

6
frontend/src/components/projects/NewProjectModal.tsx
View File

@@ -202,7 +202,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
<div
key={el.value}
className={twMerge(
"flex cursor-pointer flex-col items-center gap-2 rounded border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600",
"flex cursor-pointer flex-col items-center gap-2 rounded-sm border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600",
field.value === el.value && "border-primary-400 bg-mineshaft-600 opacity-100"
)}
onClick={() => field.onChange(el.value)}
@@ -238,7 +238,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
placeholder="Project description"
{...field}
rows={3}
className="thin-scrollbar w-full !resize-none bg-mineshaft-900"
className="thin-scrollbar w-full resize-none! bg-mineshaft-900"
/>
</FormControl>
)}
@@ -333,7 +333,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
</AccordionContent>
</AccordionItem>
</Accordion>
<div className="absolute bottom-0 right-0 mb-6 mr-6 flex items-start justify-end">
<div className="absolute right-0 bottom-0 mr-6 mb-6 flex items-start justify-end">
<ModalClose>
<Button colorSchema="secondary" variant="plain" className="py-2">
Cancel

2
frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx
View File

@@ -124,7 +124,7 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
rel="noopener noreferrer"
>
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}

2
frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx
View File

@@ -29,7 +29,7 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
rel="noopener noreferrer"
>
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}

10
frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx
View File

@@ -31,13 +31,15 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
position="left"
className="max-w-sm select-text"
content={
<div className="flex flex-col gap-2 whitespace-normal py-1">
<div className="flex flex-col gap-2 py-1 whitespace-normal">
<div>
<div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">Failure Reason</div>
</div>
<div className="break-words rounded bg-mineshaft-600 p-2 text-xs">{errorMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
{errorMessage}
</div>
</div>
{nextRotationAt && (
<span className="text-xs text-mineshaft-300">
@@ -65,7 +67,7 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
return (
<Badge
className={twMerge(
"flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300",
"flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300",
className
)}
>

4
frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewRotationGeneratedCredentialsDisplay.tsx
View File

@@ -23,7 +23,7 @@ export const ViewRotationGeneratedCredentialsDisplay = ({
<p className="text-sm text-mineshaft-300">
The active credential set currently mapped to the rotation secrets.
</p>
<div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
<div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-2">
{activeCredentials}
</div>
</div>
@@ -38,7 +38,7 @@ export const ViewRotationGeneratedCredentialsDisplay = ({
<p className="text-sm text-mineshaft-300">
The retired credential set that will be revoked during the next rotation cycle.
</p>
<div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
<div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-2">
{inactiveCredentials}
</div>
</div>

4
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx
View File

@@ -90,7 +90,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
});
}
}}
className="bg-mineshaft-700 text-white [color-scheme:dark]"
className="bg-mineshaft-700 text-white scheme-dark"
/>
</FormControl>
);
@@ -126,7 +126,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
}}
/>
{!IS_ROTATION_DUAL_CREDENTIALS[type] && isAutoRotationEnabled && (
<div className="rounded border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
<div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
<FontAwesomeIcon icon={faWarning} className="mr-1" /> Due to{" "}
{SECRET_ROTATION_MAP[type].name} Rotations rotating a single credential set, auto-rotation
may result in service interruptions. If you need to ensure service continuity, we

2
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields.tsx
View File

@@ -38,7 +38,7 @@ export const SecretRotationV2DetailsFields = () => {
value={value ?? ""}
onChange={onChange}
placeholder="Describe the purpose of this rotation..."
className="!resize-none"
className="resize-none!"
rows={4}
/>
</FormControl>

2
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx
View File

@@ -192,7 +192,7 @@ export const SecretRotationV2Form = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
className={({ selected }) =>
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
`-mb-[0.14rem] w-30 ${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"

2
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/Auth0ClientSecretRotationParametersFields.tsx
View File

@@ -38,7 +38,7 @@ export const Auth0ClientSecretRotationParametersFields = () => {
content={
<>
Ensure that your connection has the{" "}
<span className="font-semibold">read_clients</span> permission and the application
<span className="font-medium">read_clients</span> permission and the application
exists in the connection&#39;s audience.
</>
}

2
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/AzureClientSecretRotationParametersFields.tsx
View File

@@ -38,7 +38,7 @@ export const AzureClientSecretRotationParametersFields = () => {
content={
<>
Ensure that your connection has the{" "}
<span className="font-semibold">
<span className="font-medium">
Application.ReadWrite.All, Directory.ReadWrite.All,
Application.ReadWrite.OwnedBy, user_impersonation and User.Read
</span>{" "}

4
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/LdapPasswordRotationParametersFields.tsx
View File

@@ -27,7 +27,7 @@ export const LdapPasswordRotationParametersFields = () => {
tooltipText={
<>
<span>Determines how the rotation will be performed:</span>
<ul className="ml-4 mt-2 flex list-disc flex-col gap-2">
<ul className="mt-2 ml-4 flex list-disc flex-col gap-2">
<li>
<span className="font-medium">Connection Principal</span> - The Connection
principal will rotate the target principal&#39;s password.
@@ -130,7 +130,7 @@ export const LdapPasswordRotationParametersFields = () => {
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Password Requirements</span>
</div>
<div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
<div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
<Controller
control={control}
name="parameters.passwordRequirements.length"

6
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/RedisCredentialsRotationParametersFields.tsx
View File

@@ -22,7 +22,7 @@ export const RedisCredentialsRotationParametersFields = () => {
defaultValue=""
render={({ field, fieldState: { error } }) => (
<FormControl
tooltipClassName="max-w-[40rem] w-full"
tooltipClassName="max-w-160 w-full"
tooltipText={
<div className="flex flex-col gap-4">
<p>
@@ -31,7 +31,7 @@ export const RedisCredentialsRotationParametersFields = () => {
</p>
<p>
The default value is{" "}
<code className="rounded bg-mineshaft-700 px-1 py-0.5 font-mono font-medium text-bunker-300">
<code className="rounded-sm bg-mineshaft-700 px-1 py-0.5 font-mono font-medium text-bunker-300">
~* +@all
</code>
. You can modify it to suit your needs.
@@ -64,7 +64,7 @@ export const RedisCredentialsRotationParametersFields = () => {
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Password Requirements</span>
</div>
<div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
<div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
<Controller
control={control}
name="parameters.passwordRequirements.length"

2
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlCredentialsRotationParametersFields.tsx
View File

@@ -74,7 +74,7 @@ export const SqlCredentialsRotationParametersFields = () => {
to suit your needs.
</p>
<p className="mb-3 text-sm">
<pre className="max-h-[10rem] overflow-y-auto whitespace-pre-wrap rounded border border-mineshaft-700 bg-mineshaft-800 p-2 text-mineshaft-300">
<pre className="max-h-40 overflow-y-auto rounded-sm border border-mineshaft-700 bg-mineshaft-800 p-2 whitespace-pre-wrap text-mineshaft-300">
{rotationOption!.template.createUserStatement}
</pre>
</p>

4
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx
View File

@@ -32,13 +32,13 @@ export const SecretsMappingTable = ({ items }: Props) => {
<tr key={name}>
<td className="whitespace-nowrap">
<div className="mb-4 flex h-full items-start justify-center">
<Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 whitespace-nowrap border border-mineshaft-600 bg-mineshaft-600 text-bunker-200">
<Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 border border-mineshaft-600 bg-mineshaft-600 whitespace-nowrap text-bunker-200">
<FontAwesomeIcon icon={faKey} />
<span>{name}</span>
</Badge>
</div>
</td>
<td className="whitespace-nowrap pl-5 pr-5">
<td className="pr-5 pl-5 whitespace-nowrap">
<div className="mb-4 flex items-center justify-center">
<FontAwesomeIcon className="text-mineshaft-400" icon={faArrowRight} />
</div>

2
frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx
View File

@@ -117,7 +117,7 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
rel="noopener noreferrer"
>
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}

2
frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx
View File

@@ -29,7 +29,7 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
rel="noopener noreferrer"
>
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}

8
frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx
View File

@@ -34,13 +34,15 @@ export const SecretScanningScanStatusBadge = ({
position="left"
className="max-w-sm select-text"
content={
<div className="flex flex-col gap-2 whitespace-normal py-1">
<div className="flex flex-col gap-2 py-1 whitespace-normal">
<div>
<div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">Failure Reason</div>
</div>
<div className="break-words rounded bg-mineshaft-600 p-2 text-xs">{errorMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
{errorMessage}
</div>
{scannedAt && (
<div className="mt-1 text-xs text-mineshaft-400">
Attempted {formatDistance(new Date(scannedAt), new Date(), { addSuffix: true })}

2
frontend/src/components/secret-scanning/forms/SecretScanningDataSourceDetailsFields.tsx
View File

@@ -38,7 +38,7 @@ export const SecretScanningDataSourceDetailsFields = () => {
value={value ?? ""}
onChange={onChange}
placeholder="Provide a description for this data source..."
className="!resize-none"
className="resize-none!"
rows={4}
/>
</FormControl>

2
frontend/src/components/secret-scanning/forms/SecretScanningDataSourceForm.tsx
View File

@@ -145,7 +145,7 @@ export const SecretScanningDataSourceForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
className={({ selected }) =>
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
`-mb-[0.14rem] w-30 ${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"

6
frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx
View File

@@ -69,16 +69,16 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro
label = "Failed to Import Secrets";
icon = faTriangleExclamation;
tooltipContent = (
<div className="flex flex-col gap-2 whitespace-normal py-1">
<div className="flex flex-col gap-2 py-1 whitespace-normal">
{failureMessage && (
<div>
<div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">
{mini ? "Failed to Import Secrets" : "Failure Reason"}
</div>
</div>
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div>
)}
</div>

2
frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx
View File

@@ -29,7 +29,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
rel="noopener noreferrer"
>
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}

6
frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx
View File

@@ -69,16 +69,16 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro
label = "Failed to Remove Secrets";
icon = faTriangleExclamation;
tooltipContent = (
<div className="flex flex-col gap-2 whitespace-normal py-1">
<div className="flex flex-col gap-2 py-1 whitespace-normal">
{failureMessage && (
<div>
<div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">
{mini ? "Failed to Remove Secrets" : "Failure Reason"}
</div>
</div>
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div>
)}
</div>

2
frontend/src/components/secret-syncs/SecretSyncSelect.tsx
View File

@@ -58,7 +58,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/>
<div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
<div className="grid h-118 grid-cols-4 content-start gap-2">
{filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
const { image, name } = SECRET_SYNC_MAP[destination];
return (

4
frontend/src/components/secret-syncs/forms/CreateSecretSyncForm.tsx
View File

@@ -138,7 +138,7 @@ export const CreateSecretSyncForm = ({
if (showConfirmation)
return (
<>
<div className="flex flex-col rounded-sm border border-l-[2px] border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
<div className="flex flex-col rounded-xs border border-l-2 border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
<div className="mb-1 flex items-center text-sm">
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
Secret Sync Behavior
@@ -185,7 +185,7 @@ export const CreateSecretSyncForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
className={({ selected }) =>
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
`-mb-[0.14rem] w-30 ${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"

2
frontend/src/components/secret-syncs/forms/DuplicateDestinationConfirmationModal.tsx
View File

@@ -26,7 +26,7 @@ export const DuplicateDestinationConfirmationModal = ({
{duplicateProjectId && (
<p className="mt-2 text-xs text-mineshaft-400">
Duplicate found in project ID:{" "}
<code className="rounded bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
<code className="rounded-sm bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
{duplicateProjectId}
</code>
</p>

6
frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsParameterStoreSyncFields.tsx
View File

@@ -38,15 +38,15 @@ export const AwsParameterStoreSyncFields = () => {
<>
The path is required and will be prepended to the key schema. For example, if you
have a path of{" "}
<code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
<code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
/demo/path/
</code>{" "}
and a key schema of{" "}
<code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
<code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
INFISICAL_{"{{secretKey}}"}
</code>
, then the result will be{" "}
<code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
<code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
/demo/path/INFISICAL_{"{{secretKey}}"}
</code>
</>

2
frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx
View File

@@ -10,7 +10,7 @@ const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGI
<components.Option isSelected={isSelected} {...props}>
<div className="flex flex-row items-center justify-between">
<p className="truncate">{children}</p>
<Badge variant="success" className="ml-1 mr-auto cursor-pointer">
<Badge variant="success" className="mr-auto ml-1 cursor-pointer">
{props.data.slug}
</Badge>
{isSelected && (

2
frontend/src/components/secret-syncs/forms/SecretSyncDetailsFields.tsx
View File

@@ -38,7 +38,7 @@ export const SecretSyncDetailsFields = () => {
value={value}
onChange={onChange}
placeholder="Describe the purpose of this sync..."
className="!resize-none"
className="resize-none!"
rows={4}
/>
</FormControl>

10
frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsParameterStoreSyncOptionsFields.tsx
View File

@@ -33,7 +33,7 @@ const AwsTagsSection = () => {
});
return (
<div className="mb-4 mt-2 flex flex-col pl-2">
<div className="mt-2 mb-4 flex flex-col pl-2">
<div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
{tagFields.fields.map(({ id: tagFieldId }, i) => (
<Fragment key={tagFieldId}>
@@ -143,19 +143,19 @@ export const AwsParameterStoreSyncOptionsFields = () => {
<p>
To configure a KMS key, ensure the following permissions are present on the
selected IAM role:{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:ListAliases&#34;
</span>
,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:DescribeKey&#34;
</span>
,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:Encrypt&#34;
</span>
,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:Decrypt&#34;
</span>
.

12
frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsSecretsManagerSyncOptionsFields.tsx
View File

@@ -34,7 +34,7 @@ const AwsTagsSection = () => {
});
return (
<div className="mb-4 mt-2 flex flex-col pl-2">
<div className="mt-2 mb-4 flex flex-col pl-2">
<div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
{tagFields.fields.map(({ id: tagFieldId }, i) => (
<Fragment key={tagFieldId}>
@@ -145,19 +145,19 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
<p>
To configure a KMS key, ensure the following permissions are present on the
selected IAM role:{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:ListAliases&#34;
</span>
,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:DescribeKey&#34;
</span>
,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:Encrypt&#34;
</span>
,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:Decrypt&#34;
</span>
.
@@ -224,7 +224,7 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
isChecked={value}
onCheckedChange={onChange}
>
<p className="w-[14rem]">
<p className="w-56">
Sync Secret Metadata as Tags{" "}
<Tooltip
className="max-w-md"

4
frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
View File

@@ -224,14 +224,14 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
onCheckedChange={onChange}
isChecked={value}
>
<p className="w-[11rem]">
<p className="w-44">
Disable Secret Deletion{" "}
<Tooltip
className="max-w-md"
content={
<>
<p>
When enabled, Infisical will <span className="font-semibold">not</span>{" "}
When enabled, Infisical will <span className="font-medium">not</span>{" "}
remove secrets from the destination during a sync.
</p>
<p className="mt-4">

4
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx
View File

@@ -26,7 +26,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
content={
<Table>
<THead>
<Th className="whitespace-nowrap p-2">Key</Th>
<Th className="p-2 whitespace-nowrap">Key</Th>
<Th className="p-2">Value</Th>
</THead>
<TBody>
@@ -41,7 +41,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
}
>
<div className="w-min">
<Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faEye} />
<span>
{tags.length} Tag{tags.length > 1 ? "s" : ""}

4
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx
View File

@@ -58,7 +58,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
content={
<Table>
<THead>
<Th className="whitespace-nowrap p-2">Key</Th>
<Th className="p-2 whitespace-nowrap">Key</Th>
<Th className="p-2">Value</Th>
</THead>
<TBody>
@@ -73,7 +73,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
}
>
<div className="w-min">
<Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faEye} />
<span>
{tags.length} Tag{tags.length > 1 ? "s" : ""}

7
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
View File

@@ -191,7 +191,7 @@ export const SecretSyncReviewFields = () => {
{hasDuplicate && (
<div className="mb-2 flex items-start rounded-md border border-yellow-600 bg-yellow-900/20 px-3 py-2">
<div className="flex text-sm text-yellow-100">
<FontAwesomeIcon icon={faWarning} className="mr-2 mt-1 text-yellow-600" />
<FontAwesomeIcon icon={faWarning} className="mt-1 mr-2 text-yellow-600" />
<div>
<p>
Another secret sync in your organization is already configured with the same
@@ -199,7 +199,10 @@ export const SecretSyncReviewFields = () => {
</p>
{duplicateProjectId && (
<p className="mt-1 text-xs text-yellow-200">
Duplicate found in project ID: <code className="rounded bg-yellow-800/50 px-1 py-0.5">{duplicateProjectId}</code>
Duplicate found in project ID:{" "}
<code className="rounded-sm bg-yellow-800/50 px-1 py-0.5">
{duplicateProjectId}
</code>
</p>
)}
</div>

4
frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx
View File

@@ -84,7 +84,7 @@ export const SecretReferenceNode = ({
<Collapsible.Trigger
className={twMerge(
hasChildren && "decoration-bunker-4ø00 underline-offset-4 data-[state=open]:underline",
"[&>svg]:data-[state=open]:rotate-[90deg] [&>svg]:data-[state=open]:text-yellow-500"
"data-[state=open]:[&>svg]:rotate-90 data-[state=open]:[&>svg]:text-yellow-500"
)}
disabled={!hasChildren}
>
@@ -201,7 +201,7 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
/>
</FormControl>
<FormLabel className="mb-2" label="Reference Tree" />
<div className="thin-scrollbar relative max-h-96 overflow-auto rounded-md border border-mineshaft-600 bg-bunker-700 py-6 text-sm text-mineshaft-200">
<div className="relative max-h-96 thin-scrollbar overflow-auto rounded-md border border-mineshaft-600 bg-bunker-700 py-6 text-sm text-mineshaft-200">
{isError ? (
<div className="flex items-center justify-center py-4">
<FontAwesomeIcon icon={faExclamationTriangle} className="mr-2 text-red-500" />

10
frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx
View File

@@ -170,13 +170,13 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
Tag Color
</div>
<div className="flex space-x-2">
<div className="flex items-center justify-center rounded border border-mineshaft-500 bg-mineshaft-900 p-2">
<div className="flex items-center justify-center rounded-sm border border-mineshaft-500 bg-mineshaft-900 p-2">
<div
className="h-6 w-6 rounded-full"
style={{ background: `${selectedTagColor}` }}
/>
</div>
<div className="flex flex-grow items-center rounded border-mineshaft-500 bg-mineshaft-900 px-1 pr-2">
<div className="flex grow items-center rounded-sm border-mineshaft-500 bg-mineshaft-900 px-1 pr-2">
{!showHexInput ? (
<div className="inline-flex items-center gap-3 pl-3">
{secretTagsColors.map(($tagColor: TagColor) => {
@@ -202,7 +202,7 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
})}
</div>
) : (
<div className="tags-hex-wrapper flex flex-grow items-center px-2">
<div className="tags-hex-wrapper flex grow items-center px-2">
<div className="relative flex items-center rounded-md">
{isValidHexColor(selectedTagColor) && (
<div
@@ -216,7 +216,7 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
<div className="bg-blue h-7 w-7 rounded-full border border-dashed border-mineshaft-500" />
)}
</div>
<div className="flex-grow">
<div className="grow">
<Input
variant="plain"
value={selectedTagColor}
@@ -230,7 +230,7 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
<div className="mx-4 h-8 border border-mineshaft-500" />
<div className="flex h-7 w-7 items-center justify-center">
<div
className={`flex h-7 w-7 cursor-pointer items-center justify-center rounded-sm border border-mineshaft-500 bg-mineshaft-900 bg-transparent p-2 hover:ring-2 hover:ring-offset-1 ${
className={`flex h-7 w-7 cursor-pointer items-center justify-center rounded-xs border border-mineshaft-500 bg-mineshaft-900 bg-transparent p-2 hover:ring-2 hover:ring-offset-1 ${
showHexInput ? "tags-conic-bg rounded-full" : ""
}`}
onClick={() => setShowHexInput((prev) => !prev)}

2
frontend/src/components/v2/AccessRestrictedBanner/AccessRestrictedBanner.tsx
View File

@@ -16,7 +16,7 @@ export const AccessRestrictedBanner = ({
)
}: Props) => {
return (
<div className="flex items-center rounded-md border border-mineshaft-500 bg-gradient-to-br from-mineshaft-900 to-mineshaft-600 px-16 py-12 text-center text-bunker-300">
<div className="flex items-center rounded-md border border-mineshaft-500 bg-linear-to-br from-mineshaft-900 to-mineshaft-600 px-16 py-12 text-center text-bunker-300">
<div>
<div className="text-4xl font-medium text-bunker-100">{title}</div>
<div className="-mt-1 text-sm">{body}</div>

6
frontend/src/components/v2/Accordion/Accordion.tsx
View File

@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
className={twMerge(
"group flex h-11 flex-1 items-center justify-between px-4 py-2 outline-none hover:text-primary data-[state=open]:text-primary",
"group flex h-11 flex-1 items-center justify-between px-4 py-2 outline-hidden hover:text-primary data-[state=open]:text-primary",
className
)}
{...props}
@@ -36,7 +36,7 @@ export const AccordionTrigger = forwardRef<
{children}
<FontAwesomeIcon
icon={faChevronDown}
className="text-sm transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
className="text-sm transition-transform duration-300 ease-[cubic-bezier(0.87,0,0.13,1)] group-data-[state=open]:rotate-180"
aria-hidden
/>
</AccordionPrimitive.Trigger>
@@ -53,7 +53,7 @@ export const AccordionContent = forwardRef<
>(({ children, className, childrenClassName, ...props }, forwardedRef) => (
<AccordionPrimitive.Content
className={twMerge(
"overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown",
"data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down overflow-hidden",
className
)}
{...props}

2
frontend/src/components/v2/Alert/Alert.tsx
View File

@@ -66,7 +66,7 @@ const Alert = forwardRef<
</div>
<div className="flex flex-col gap-y-1">
{hideTitle ? null : (
<h5 className="font-medium leading-6 tracking-tight" {...props}>
<h5 className="leading-6 font-medium tracking-tight" {...props}>
{defaultTitle}
</h5>
)}

4
frontend/src/components/v2/Blur/Blur.tsx
View File

@@ -11,11 +11,11 @@ export const Blur = ({ className, tooltipText }: IProps) => {
return (
<Tooltip content={tooltipText} className="max-w-md" isDisabled={!tooltipText}>
<div
className={twMerge("flex w-80 flex-grow items-center py-1 pl-4 pr-2", className)}
className={twMerge("flex w-80 grow items-center py-1 pr-2 pl-4", className)}
tabIndex={0}
role="button"
>
<span className="blur">********</span>
<span className="blur-sm">********</span>
</div>
</Tooltip>
);

2
frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx
View File

@@ -27,7 +27,7 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
<ol
ref={ref}
className={twMerge(
"flex flex-wrap items-center break-words text-sm text-bunker-100",
"flex flex-wrap items-center text-sm break-words text-bunker-100",
className
)}
{...props}

10
frontend/src/components/v2/Button/Button.tsx
View File

@@ -31,7 +31,7 @@ const buttonVariants = cva(
colorSchema: {
primary: ["bg-primary", "text-black", "border-primary bg-opacity-90 hover:bg-opacity-100"],
secondary: ["bg-mineshaft", "text-gray-300", "border-mineshaft hover:bg-opacity-80"],
danger: ["!bg-red", "!text-white", "!border-red hover:!bg-opacity-90"],
danger: ["bg-red!", "text-white!", "border-red! hover:!bg-opacity-90"],
gray: ["bg-bunker-500", "text-bunker-200"]
},
variant: {
@@ -42,7 +42,7 @@ const buttonVariants = cva(
outline_bg: "",
// a constant color not in use on hover or click goes colorSchema color
star: "text-bunker-200 bg-mineshaft-700 border-mineshaft-600",
link: "text-primary !p-0 bg-transparent outline-none border-none"
link: "text-primary p-0! bg-transparent outline-hidden border-none"
},
isDisabled: {
true: "bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed",
@@ -84,7 +84,7 @@ const buttonVariants = cva(
colorSchema: "primary",
variant: "outline_bg",
className:
"bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/[0.1] hover:border-primary/40 text-bunker-200"
"bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/10 hover:border-primary/40 text-bunker-200"
},
{
colorSchema: "secondary",
@@ -116,7 +116,7 @@ const buttonVariants = cva(
colorSchema: "danger",
variant: "outline_bg",
className:
"bg-mineshaft-600 border border-red-500 hover:bg-red/[0.1] hover:border-red/40 text-red-500"
"bg-mineshaft-600 border border-red-500 hover:bg-red/10 hover:border-red/40 text-red-500"
},
{
colorSchema: "primary",
@@ -198,7 +198,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
: "infisical_loading"
}
isAutoPlay
className="absolute w-8 rounded-xl opacity-80 shadow-sm"
className="absolute w-8 rounded-xl opacity-80 shadow-xs"
/>
)}
{leftIcon && (

4
frontend/src/components/v2/Card/Card.tsx
View File

@@ -10,7 +10,7 @@ export type CardTitleProps = {
export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
<div
className={twMerge(
"mb-5 break-words border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal",
"mb-5 border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal break-words",
className
)}
>
@@ -35,7 +35,7 @@ export type CardBodyProps = {
};
export const CardBody = ({ children, className, style }: CardBodyProps) => (
<div className={twMerge("px-6 pb-6 pt-0", className)} style={style}>
<div className={twMerge("px-6 pt-0 pb-6", className)} style={style}>
{children}
</div>
);

2
frontend/src/components/v2/Checkbox/Checkbox.tsx
View File

@@ -40,7 +40,7 @@ export const Checkbox = ({
<div className={twMerge("flex items-center font-inter text-bunker-300", containerClassName)}>
<CheckboxPrimitive.Root
className={twMerge(
"flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400/50 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
"flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-mineshaft-400/50 bg-mineshaft-600 shadow-sm transition-all hover:bg-mineshaft-500",
isDisabled && "bg-bunker-400 hover:bg-bunker-400",
isChecked && "border-primary/50 bg-primary/30",
Boolean(children) && "mr-3",

2
frontend/src/components/v2/ConfirmActionModal/ConfirmActionModal.tsx
View File

@@ -89,7 +89,7 @@ export const ConfirmActionModal = ({
>
<FormControl
label={
<div className="break-words pb-2 text-sm">
<div className="pb-2 text-sm break-words">
{confirmationMessage || (
<>
Type <span className="font-bold">{confirmKey}</span> to perform this action

2
frontend/src/components/v2/ContentLoader/ContentLoader.tsx
View File

@@ -30,7 +30,7 @@ export const ContentLoader = ({ text, frequency = 2000, className, lottieClassNa
return (
<div
className={twMerge(
"container relative mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 px-8 text-mineshaft-50 dark:[color-scheme:dark]",
"relative container mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 px-8 text-mineshaft-50 dark:scheme-dark",
className
)}
>

4
frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx
View File

@@ -42,9 +42,9 @@ export const CreatableSelect = <T,>({
),
placeholder: () => "text-mineshaft-400 text-sm pl-1 py-0.5",
input: () => "pl-1 py-0.5",
valueContainer: () => `p-1 max-h-[14rem] ${isMulti ? "!overflow-y-scroll" : ""} gap-1`,
valueContainer: () => `p-1 max-h-56 ${isMulti ? "overflow-y-scroll!" : ""} gap-1`,
singleValue: () => "leading-7 ml-1",
multiValue: () => "bg-mineshaft-600 rounded items-center py-0.5 px-2 gap-1.5",
multiValue: () => "bg-mineshaft-600 rounded-sm items-center py-0.5 px-2 gap-1.5",
multiValueLabel: () => "leading-6 text-sm",
multiValueRemove: () => "hover:text-red text-bunker-400",
indicatorsContainer: () => "p-1 gap-1",

4
frontend/src/components/v2/DatePicker/DatePicker.tsx
View File

@@ -120,7 +120,7 @@ export const DatePicker = ({
today: "text-primary border-primary",
selected: " text-mineshaft-100 bg-mineshaft-500",
root: `text-mineshaft-300 ${defaultClassNames}`,
[UI.DayButton]: "p-3 rounded hover:text-mineshaft-100",
[UI.DayButton]: "p-3 rounded-sm hover:text-mineshaft-100",
[UI.Weekday]: "px-3 pt-3",
[UI.Chevron]: "fill-mineshaft-300/70 hover:fill-mineshaft-300",
disabled: "text-mineshaft-400 pointer-events-none"
@@ -133,7 +133,7 @@ export const DatePicker = ({
type="time"
value={displayUtc ? localTimeToUTC(timeValue) : timeValue}
onChange={handleTimeChange}
className="bg-mineshaft-700 text-white [color-scheme:dark]"
className="bg-mineshaft-700 text-white scheme-dark"
/>
</div>
)}

2
frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
View File

@@ -96,7 +96,7 @@ export const DeleteActionModal = ({
>
<FormControl
label={
<div className="break-words pb-2 text-sm">
<div className="pb-2 text-sm break-words">
{deletionMessage || (
<>
Type <span className="font-bold">{deleteKey}</span> to perform this action

8
frontend/src/components/v2/Drawer/Drawer.tsx
View File

@@ -17,14 +17,14 @@ export type DrawerContentProps = DialogPrimitive.DialogContentProps & {
} & VariantProps<typeof drawerContentVariation>;
const drawerContentVariation = cva(
"fixed ease-in-out duration-300 z-[90] border border-mineshaft-600 drop-shadow-2xl",
"fixed ease-in-out duration-300 z-90 border border-mineshaft-600 drop-shadow-2xl",
{
variants: {
direction: {
right: [
"right-0 top-0",
"h-full w-96",
"data-[state=open]:animate-drawerRightIn data-[state=closed]:animate-drawerRightOut"
"data-[state=open]:animate-drawer-right-in data-[state=closed]:animate-drawer-right-out"
]
}
}
@@ -64,7 +64,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
)}
<CardBody
className={twMerge(
"flex-grow overflow-y-auto overflow-x-hidden px-4 pt-4 dark:[color-scheme:dark]",
"grow overflow-x-hidden overflow-y-auto px-4 pt-4 dark:scheme-dark",
cardBodyClassName
)}
>
@@ -75,7 +75,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
<IconButton
variant="plain"
ariaLabel="close"
className="absolute right-6 top-4 rounded text-bunker-400 hover:text-bunker-50"
className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
>
<FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
</IconButton>

16
frontend/src/components/v2/Dropdown/Dropdown.tsx
View File

@@ -24,7 +24,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
{...props}
ref={forwardedRef}
className={twMerge(
"z-30 min-w-[220px] overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade",
"data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=top]:animate-slide-down-and-fade z-30 min-w-[220px] overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow-sm will-change-auto",
className
)}
>
@@ -48,7 +48,7 @@ export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenu
{...props}
ref={forwardedRef}
className={twMerge(
"z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade",
"data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=top]:animate-slide-down-and-fade z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow-sm will-change-auto",
className
)}
>
@@ -66,7 +66,7 @@ export type DropdownLabelProps = DropdownMenuPrimitive.DropdownMenuLabelProps;
export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
<DropdownMenuPrimitive.Label
{...props}
className={twMerge("px-4 pb-1 pt-2 text-xs text-bunker-400", className)}
className={twMerge("px-4 pt-2 pb-1 text-xs text-bunker-400", className)}
/>
);
@@ -92,14 +92,14 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
<DropdownMenuPrimitive.Item
{...props}
className={twMerge(
"block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
"block cursor-pointer rounded-xs px-4 py-2 font-inter text-xs text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700",
className,
isDisabled ? "pointer-events-none cursor-not-allowed opacity-50" : ""
)}
>
<Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
{icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
<span className="flex-grow text-left">{children}</span>
<span className="grow text-left">{children}</span>
{icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
</Item>
</DropdownMenuPrimitive.Item>
@@ -126,13 +126,13 @@ export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
<DropdownMenuPrimitive.SubTrigger
{...props}
className={twMerge(
"block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
"block cursor-pointer rounded-xs px-4 py-2 font-inter text-xs text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700",
className
)}
>
<Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
{icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
<span className="flex-grow text-left">{children}</span>
<span className="grow text-left">{children}</span>
{icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
</Item>
</DropdownMenuPrimitive.SubTrigger>
@@ -161,7 +161,7 @@ export const DropdownMenuSeparator = forwardRef<
<DropdownMenuPrimitive.Separator
ref={ref}
{...props}
className={twMerge("m-1 h-[1px] bg-gray-700", className)}
className={twMerge("m-1 h-px bg-gray-700", className)}
/>
));

4
frontend/src/components/v2/Editor/Editor.tsx
View File

@@ -21,7 +21,7 @@ function onError(error: Error) {
}
const inputVariants = cva(
"input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2 hover:ring-bunker-400/60 duration-100",
"input w-full py-1.5 text-gray-400 placeholder:text-sm placeholder-gray-500/50 outline-hidden focus:ring-2 hover:ring-bunker-400/60 duration-100",
{
variants: {
size: {
@@ -37,7 +37,7 @@ const inputVariants = cva(
variant: {
filled: ["bg-mineshaft-900", "text-gray-400"],
outline: ["bg-transparent"],
plain: "bg-transparent outline-none"
plain: "bg-transparent outline-hidden"
},
isError: {
true: "focus:ring-red/50 placeholder-red-300",

10
frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx
View File

@@ -81,12 +81,12 @@ export const FilterableSelect = <T,>({
}}
classNames={{
container: ({ isDisabled }) =>
twMerge("w-full font-inter text-sm", isDisabled && "!pointer-events-auto opacity-50"),
twMerge("w-full font-inter text-sm", isDisabled && "pointer-events-auto! opacity-50"),
control: ({ isFocused, isDisabled }) =>
twMerge(
isFocused ? "border-primary-400/50" : "border-mineshaft-600",
`w-full rounded-md border bg-mineshaft-900 p-0.5 font-inter text-mineshaft-200 ${
isDisabled ? "!cursor-not-allowed" : "hover:cursor-pointer hover:border-gray-400"
isDisabled ? "cursor-not-allowed!" : "hover:cursor-pointer hover:border-gray-400"
} `
),
placeholder: () =>
@@ -94,10 +94,10 @@ export const FilterableSelect = <T,>({
input: () => `pl-1 ${isMulti ? "py-[0.22rem]" : ""}`,
valueContainer: () =>
`px-1 max-h-[8.2rem] ${
isMulti ? "!overflow-y-auto thin-scrollbar py-1" : "py-[0.1rem]"
isMulti ? "overflow-y-auto! thin-scrollbar py-1" : "py-[0.1rem]"
} gap-1`,
singleValue: () => "leading-7 ml-1",
multiValue: () => "bg-mineshaft-600 text-sm rounded items-center py-0.5 px-2 gap-1.5",
multiValue: () => "bg-mineshaft-600 text-sm rounded-sm items-center py-0.5 px-2 gap-1.5",
multiValueLabel: () => "leading-6 text-sm",
multiValueRemove: () => "hover:text-red text-bunker-400",
indicatorsContainer: () => "p-1 gap-1",
@@ -112,7 +112,7 @@ export const FilterableSelect = <T,>({
twMerge(
isFocused && "bg-mineshaft-700 active:bg-mineshaft-600",
isSelected && "text-mineshaft-200",
"rounded px-3 py-2 text-xs hover:cursor-pointer"
"rounded-sm px-3 py-2 text-xs hover:cursor-pointer"
),
noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md",
loadingMessage: () => "text-mineshaft-400 p-2 rounded-md"

2
frontend/src/components/v2/FontAwesomeSymbol/FontAwesomeSymbol.tsx
View File

@@ -8,7 +8,7 @@ export const FontAwesomeSymbol = forwardRef<HTMLDivElement, Props>(
({ symbolName, ...props }, ref) => {
return (
<div ref={ref} {...props}>
<svg className="w-inherit h-inherit">
<svg className="h-inherit w-inherit">
<use href={`#${symbolName}`} />
</svg>
</div>

4
frontend/src/components/v2/FormControl/FormControl.tsx
View File

@@ -36,7 +36,7 @@ export const FormLabel = ({
>
{label}
{isRequired && <span className="ml-1 text-red">*</span>}
{isOptional && <span className="ml-1 text-xs italic text-gray-500">- Optional</span>}
{isOptional && <span className="ml-1 text-xs text-gray-500 italic">- Optional</span>}
{icon && !tooltipText && (
<span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
{icon}
@@ -58,7 +58,7 @@ export type FormHelperTextProps = {
export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
<div
className={twMerge(
"mt-2 flex items-center font-inter text-xs text-mineshaft-300 text-opacity-90",
"text-opacity-90 mt-2 flex items-center font-inter text-xs text-mineshaft-300",
isError && "text-red-600"
)}
>

2
frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx
View File

@@ -29,7 +29,7 @@ export const GenericFieldLabel = ({
{children ? (
<p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p>
) : (
<p className="text-sm italic text-mineshaft-400/50">None</p>
<p className="text-sm text-mineshaft-400/50 italic">None</p>
)}
</div>
);

2
frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx
View File

@@ -29,7 +29,7 @@ export const HeaderResizer = ({
style={{ left: `calc(50% + ${scrollOffset}px)`, top: heightOffset }}
className="pointer-events-none absolute z-30 -translate-x-1/2"
>
<div className="h-1 w-8 rounded bg-gray-400 opacity-50" />
<div className="h-1 w-8 rounded-sm bg-gray-400 opacity-50" />
</div>
</>
);

2
frontend/src/components/v2/HoverCard/HoverCard.tsx
View File

@@ -18,7 +18,7 @@ export const HoverObject = ({ text, icon, color }: Props): JSX.Element => (
</a>
</HoverCard.Trigger>
<HoverCard.Portal>
<HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
<HoverCard.Content className="HoverCardContent z-300" sideOffset={5}>
<div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 drop-shadow-xl">
<div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
<div>

4
frontend/src/components/v2/IconButton/IconButton.tsx
View File

@@ -42,7 +42,7 @@ const iconButtonVariants = cva(
false: ""
},
size: {
xs: ["text-xs", "rounded-sm", "py-1.5", "px-2"],
xs: ["text-xs", "rounded-xs", "py-1.5", "px-2"],
sm: ["text-sm", "py-3", "px-3"],
md: ["text-md", "py-4", "px-4"],
lg: ["text-lg", "py-6", "px-6"]
@@ -58,7 +58,7 @@ const iconButtonVariants = cva(
colorSchema: "primary",
variant: "outline_bg",
className:
"bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100"
"bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/15 hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100"
},
{
colorSchema: "danger",

6
frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
View File

@@ -334,7 +334,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
<Popover.Content
align="start"
onOpenAutoFocus={(e) => e.preventDefault()}
className="relative top-2 z-[100] max-h-64 overflow-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
className="relative top-2 z-100 max-h-64 overflow-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
style={{
width: "var(--radix-popover-trigger-width)"
}}
@@ -369,7 +369,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
className="flex w-full items-center justify-between border-mineshaft-600 text-left"
key={`secret-reference-secret-${i + 1}`}
>
<div className="text-md relative flex w-full cursor-default select-none items-center justify-between px-2 py-2 opacity-75 outline-none transition-all">
<div className="text-md relative flex w-full cursor-default items-center justify-between px-2 py-2 opacity-75 outline-hidden transition-all select-none">
<div className="flex w-full items-start gap-2">
<div className="mt-1 flex items-center">{entryIcon}</div>
<div className="text-md w-10/12 truncate text-left">
@@ -401,7 +401,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
<div
className={`${
highlightedIndex === i ? "bg-mineshaft-500" : ""
} text-md relative flex w-full cursor-pointer select-none items-center justify-between px-2 py-2 outline-none transition-all hover:bg-mineshaft-700 data-[highlighted]:bg-mineshaft-700`}
} text-md relative flex w-full cursor-pointer items-center justify-between px-2 py-2 outline-hidden transition-all select-none hover:bg-mineshaft-700 data-highlighted:bg-mineshaft-700`}
>
<div className="flex w-full items-start gap-2">
<div className="mt-1 flex items-center">{entryIcon}</div>

4
frontend/src/components/v2/Input/Input.tsx
View File

@@ -16,7 +16,7 @@ type Props = {
};
const inputVariants = cva(
"input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2 hover:ring-bunker-400/60 duration-100",
"input w-full py-1.5 text-gray-400 placeholder:text-sm placeholder-gray-500/50 outline-hidden focus:ring-2 hover:ring-bunker-400/60 duration-100",
{
variants: {
size: {
@@ -32,7 +32,7 @@ const inputVariants = cva(
variant: {
filled: ["bg-mineshaft-900", "text-gray-400"],
outline: ["bg-transparent"],
plain: "bg-transparent outline-none"
plain: "bg-transparent outline-hidden"
},
isError: {
true: "focus:ring-red/50 placeholder-red-300",

2
frontend/src/components/v2/LeaveProjectModal/LeaveProjectModal.tsx
View File

@@ -85,7 +85,7 @@ export const LeaveProjectModal = ({
>
<FormControl
label={
<div className="break-words pb-2 text-sm">
<div className="pb-2 text-sm break-words">
Type <span className="font-bold">{deleteKey}</span> to leave the project
</div>
}

6
frontend/src/components/v2/Menu/Menu.tsx
View File

@@ -40,7 +40,7 @@ export const MenuItem = <T extends ElementType = "button">({
type="button"
role="menuitem"
className={twMerge(
"duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-2 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
"group relative mt-0.5 flex w-full cursor-pointer items-center rounded-sm px-2 py-2 font-inter text-sm text-bunker-100 transition-all duration-50 hover:bg-mineshaft-700",
isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
isDisabled && "cursor-not-allowed hover:bg-transparent",
className
@@ -49,7 +49,7 @@ export const MenuItem = <T extends ElementType = "button">({
{...props}
>
{leftIcon}
{children && <span className="flex-grow whitespace-nowrap text-left">{children}</span>}
{children && <span className="grow text-left whitespace-nowrap">{children}</span>}
{description && <span className="mt-2 text-xs">{description}</span>}
</Item>
);
@@ -65,7 +65,7 @@ export type MenuGroupProps = {
export const MenuGroup = ({ children, title, className }: MenuGroupProps): JSX.Element => (
<>
<li className={twMerge("px-2 pt-3 text-xs font-medium uppercase text-gray-400", className)}>
<li className={twMerge("px-2 pt-3 text-xs font-medium text-gray-400 uppercase", className)}>
{title}
</li>
{children}

8
frontend/src/components/v2/Modal/Modal.tsx
View File

@@ -33,14 +33,14 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
) => (
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay
className={twMerge("fixed inset-0 z-30 h-full w-full animate-fadeIn", overlayClassName)}
className={twMerge("animate-fade-in fixed inset-0 z-30 h-full w-full", overlayClassName)}
style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
/>
<DialogPrimitive.Content {...props} ref={forwardedRef}>
<Card
isRounded
className={twMerge(
"thin-scrollbar fixed left-1/2 top-1/2 z-30 max-w-xl -translate-x-2/4 -translate-y-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
"animate-pop-in fixed top-1/2 left-1/2 z-30 thin-scrollbar max-w-xl -translate-x-2/4 -translate-y-2/4 border border-mineshaft-600 drop-shadow-2xl dark:scheme-dark",
className
)}
style={{ maxHeight: "90%" }}
@@ -51,7 +51,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
</DialogPrimitive.Title>
)}
<CardBody
className={twMerge("overflow-y-auto overflow-x-hidden", bodyClassName)}
className={twMerge("overflow-x-hidden overflow-y-auto", bodyClassName)}
style={{ maxHeight: "90%" }}
>
{children}
@@ -61,7 +61,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
<IconButton
variant="plain"
ariaLabel="close"
className="absolute right-6 top-4 rounded text-bunker-400 hover:text-bunker-50"
className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
>
<FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
</IconButton>

2
frontend/src/components/v2/NoticeBanner/NoticeBanner.tsx
View File

@@ -19,7 +19,7 @@ export const NoticeBanner = ({ icon = faWarning, title, children, className }: P
>
<FontAwesomeIcon icon={icon} className="pr-6 text-4xl text-white/80" />
<div className="flex w-full flex-col text-sm">
<div className="mb-2 text-lg font-semibold">{title}</div>
<div className="mb-2 text-lg font-medium">{title}</div>
<div>{children}</div>
</div>
</div>

2
frontend/src/components/v2/PageHeader/PageHeader.tsx
View File

@@ -12,7 +12,7 @@ export const PageHeader = ({ title, description, children, className }: Props) =
<div className={twMerge("mb-4 w-full", className)}>
<div className="flex w-full justify-between">
<div className="w-full">
<h1 className="mr-4 text-3xl font-semibold capitalize text-white">{title}</h1>
<h1 className="mr-4 text-3xl font-medium text-white capitalize">{title}</h1>
</div>
<div className="flex items-center gap-2">{children}</div>
</div>

4
frontend/src/components/v2/Pagination/Pagination.tsx
View File

@@ -94,7 +94,7 @@ export const Pagination = ({
onClick={() => onChangePage(1)}
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} />
</IconButton>
<IconButton
@@ -120,7 +120,7 @@ export const Pagination = ({
onClick={() => onChangePage(upperLimit)}
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} />
</IconButton>
</div>

Some files were not shown because too many files have changed in this diff Show More