github/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-01-11 00:17:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: correct lint

Browse Source
This commit is contained in:
Scott Wilson
2025-10-10 11:46:46 -07:00
parent 48ea19f807
commit cd703a77e9
835 changed files with 3457 additions and 3457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/check-fe-ts-and-lint.yml vendored
View File

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

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

@@ -17,7 +17,7 @@ export const AppConnectionOption = ({
<components.Option isSelected={isSelected} {...props}>
<div className="flex flex-row items-center justify-between">
{isCreateOption ? (
<div className="text-mineshaft-400 flex items-center gap-x-1">
<div className="flex items-center gap-x-1 text-mineshaft-400">
<FontAwesomeIcon icon={faPlus} size="sm" />
<span className="mr-auto">Create New Connection</span>
</div>
@@ -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="bg-mineshaft-400/50 text-bunker-300 hover:text-bunker-300 flex h-5 w-min items-center gap-1 whitespace-nowrap">
<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>
@@ -35,7 +35,7 @@ export const AppConnectionOption = ({
</Tooltip>
)}
{isSelected && (
<FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
<FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
)}
</>
)}

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

@@ -90,8 +90,8 @@ export default function CodeInputStep({
return (
<div className="mx-auto h-full w-full pb-4 md:px-8">
<p className="text-md text-bunker-200 flex justify-center">{t("signup.step2-message")}</p>
<p className="text-md text-bunker-200 my-1 flex justify-center font-medium">{email} </p>
<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-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"
@@ -135,9 +135,9 @@ export default function CodeInputStep({
<div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
<div className="flex flex-row items-baseline gap-1 text-sm">
<span className="text-bunker-400">{t("signup.step2-resend-alert")}</span>
<div className="text-md text-bunker-400 mt-2 flex flex-row">
<div className="text-md mt-2 flex flex-row text-bunker-400">
<button disabled={isLoading} onClick={resendVerificationEmail} type="button">
<span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
{isResendingVerificationEmail
? t("signup.step2-resend-progress")
: t("signup.step2-resend-submit")}
@@ -145,7 +145,7 @@ export default function CodeInputStep({
</button>
</div>
</div>
<p className="text-bunker-400 pb-2 text-sm">{t("signup.step2-spam-alert")}</p>
<p className="pb-2 text-sm text-bunker-400">{t("signup.step2-spam-alert")}</p>
</div>
</div>
);

10
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="bg-linear-to-b to-bunker-200 flex justify-center from-white 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,10 +92,10 @@ 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="text-mineshaft-400 hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer text-sm duration-200 hover:underline hover:underline-offset-4">
<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">
{t("signup.already-have-account")}
</span>
</button>

8
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="bg-linear-to-b to-bunker-200 mb-8 from-white 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 />
@@ -90,12 +90,12 @@ export default function InitialSignupStep({
</Button>
</div>
)}
<div className="text-bunker-400 mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs lg:w-1/6">
<div className="mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs text-bunker-400 lg:w-1/6">
{t("signup.create-policy")}
</div>
<div className="text-bunker-400 mt-2 flex flex-row text-xs">
<div className="mt-2 flex flex-row text-xs text-bunker-400">
<Link to="/login">
<span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
{t("signup.already-have-account")}
</span>
</Link>

32
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">
@@ -183,14 +183,14 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
)}
{method === MfaMethod.EMAIL && (
<>
<p className="text-l text-bunker-300 flex justify-center">{t("mfa.step2-message")}</p>
<p className="text-l text-bunker-300 my-1 flex justify-center font-medium">{email}</p>
<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-medium text-bunker-300">{email}</p>
</>
)}
{method === MfaMethod.TOTP && (
<div className="mb-8 text-center">
<h2 className="text-bunker-100 mb-3 text-xl font-medium">Two-Factor Authentication</h2>
<p className="text-bunker-300 mx-auto max-w-md text-sm leading-relaxed">
<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"
: "Enter the verification code from your authenticator app"}
@@ -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="shadow-xs h-11 rounded-lg font-medium 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}
@@ -282,7 +282,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
setShowRecoveryCodeInput(!showRecoveryCodeInput);
setMfaCode("");
}}
className="text-bunker-400 hover:text-bunker-200 hover:decoration-primary-700 transition-colors duration-200 hover:underline hover:underline-offset-4"
className="text-bunker-400 transition-colors duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
>
{showRecoveryCodeInput ? "Use authenticator code" : "Use a recovery code"}
</button>
@@ -311,7 +311,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
</div>
}
>
<span className="text-bunker-400 hover:text-bunker-200 cursor-help transition-colors duration-200">
<span className="cursor-help text-bunker-400 transition-colors duration-200 hover:text-bunker-200">
Lost your recovery codes?
</span>
</Tooltip>
@@ -322,9 +322,9 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
<div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
<div className="flex flex-row items-baseline gap-1 text-sm">
<span className="text-bunker-400">{t("signup.step2-resend-alert")}</span>
<div className="text-md text-bunker-400 mt-2 flex flex-row">
<div className="text-md mt-2 flex flex-row text-bunker-400">
<button disabled={isLoadingResend} onClick={handleResendMfaCode} type="button">
<span className="hover:text-bunker-200 hover:decoration-primary-700 cursor-pointer duration-200 hover:underline hover:underline-offset-4">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
{isLoadingResend
? t("signup.step2-resend-progress")
: t("signup.step2-resend-submit")}
@@ -332,7 +332,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
</button>
</div>
</div>
<p className="text-bunker-400 pb-2 text-sm">{t("signup.step2-spam-alert")}</p>
<p className="pb-2 text-sm text-bunker-400">{t("signup.step2-spam-alert")}</p>
</div>
)}
</div>

16
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="bg-linear-to-b to-bunker-200 flex justify-center from-white bg-clip-text text-2xl font-medium 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="text-bunker-400 mb-6 mt-4 flex justify-center text-center 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="border-mineshaft-500 bg-mineshaft-800 mx-auto mb-6 w-max rounded-xl border 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="text-bunker-300 pb-1 pl-1 text-sm font-medium">
<div className="pb-1 pl-1 text-sm font-medium text-bunker-300">
<span>Emails</span>
</div>
<textarea
className="min-w-120 border-mineshaft-500 bg-mineshaft-900/70 text-bunker-300 ring-primary-800 outline-hidden placeholder:text-bunker-400 h-20 w-full rounded-md border px-2 py-1 text-sm ring-opacity-70 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="md:min-w-120 mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mb-2 md:mt-4 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"

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

@@ -139,12 +139,12 @@ 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 bg-linear-to-b to-bunker-200 mx-8 mb-6 flex justify-center from-white 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="md:border-mineshaft-600 md:bg-mineshaft-800 mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:px-8">
<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">
<div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
<p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
<p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
Your Name
</p>
<Input
@@ -156,13 +156,13 @@ 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>
)}
</div>
<div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
<p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
<p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
Organization Name
</p>
<Input
@@ -174,13 +174,13 @@ 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>
)}
</div>
<div className="relative z-0 flex w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
<p className="text-bunker-300 mb-1 ml-1 w-full text-left text-sm font-medium">
<p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
Where did you hear about us? <span className="font-light">(optional)</span>
</p>
<Input
@@ -219,7 +219,7 @@ export default function UserInfoStep({
<div>
<FontAwesomeIcon
icon={faXmark}
className="text-md text-red ml-0.5 mr-2.5"
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"

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

@@ -4,8 +4,8 @@ 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="text-red mx-2 mb-2 mt-1.5" />
{text && <p className="text-red relative top-0 mr-2 py-1 text-sm">{text}</p>}
<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>
);
};

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

@@ -48,7 +48,7 @@ const InputField = ({
placeholder={placeholder}
value={value}
required={isRequired}
className="text-md bg-bunker-800 outline-hidden w-full min-w-16 rounded-md border border-gray-600 p-2 text-gray-400"
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}
@@ -59,7 +59,7 @@ const InputField = ({
}
return (
<div className="w-full flex-col">
<div className="text-mineshaft-300 mb-0.5 flex flex-row items-center">
<div className="mb-0.5 flex flex-row items-center text-mineshaft-300">
<p className="mr-1 text-sm font-medium">{label}</p>
</div>
<div
@@ -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 bg-mineshaft-900 outline-hidden peer relative w-full min-w-16 rounded-md p-2 text-gray-400 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("")
@@ -121,7 +121,7 @@ const InputField = ({
</div>
)} */}
</div>
{error && <p className="text-red mx-0 mb-2 mt-0.5 max-w-xs text-xs">{errorText}</p>}
{error && <p className="mx-0 mt-0.5 mb-2 max-w-xs text-xs text-red">{errorText}</p>}
</div>
);
};

2
frontend/src/components/features/TtlFormLabel.tsx
View File

@@ -29,7 +29,7 @@ export const TtlFormLabel = ({ label }: { label: string }) => (
<FontAwesomeIcon
icon={faQuestionCircle}
size="sm"
className="text-mineshaft-300 relative right-1 mt-0.5"
className="relative right-1 mt-0.5 text-mineshaft-300"
/>
</Tooltip>
}

6
frontend/src/components/features/WishForm.tsx
View File

@@ -63,7 +63,7 @@ export const WishForm = () => {
open={isOpen}
>
<PopoverTrigger asChild>
<div className="text-md hover:text-mineshaft-200 mb-3 w-full pl-5 duration-200">
<div className="text-md mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
<FontAwesomeIcon icon={faRocketchat} className="mr-2" />
Request a feature
</div>
@@ -72,7 +72,7 @@ export const WishForm = () => {
hideCloseBtn
align="start"
alignOffset={20}
className="border-mineshaft-600 bg-mineshaft-900 mb-1 w-auto border p-4 drop-shadow-2xl"
className="mb-1 w-auto border border-mineshaft-600 bg-mineshaft-900 p-4 drop-shadow-2xl"
sticky="always"
>
<form onSubmit={handleSubmit(createWish)}>
@@ -82,7 +82,7 @@ export const WishForm = () => {
errorText={errors?.text?.message}
>
<TextArea
className="border-mineshaft-600 border bg-black/10 text-sm focus:ring-0"
className="border border-mineshaft-600 bg-black/10 text-sm focus:ring-0"
variant="outline"
placeholder="Wish for anything! Help us improve the platform."
reSize="none"

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

@@ -10,7 +10,7 @@ export const NoEnvironmentsBanner = ({ projectId }: IProps) => {
const navigate = useNavigate();
return (
<div className="border-primary-600/70 bg-primary/[.07] mt-4 flex w-full flex-row items-center rounded-md border p-4 text-base text-white">
<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-medium">No environments in your project was found</span>
<p>

2
frontend/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx
View File

@@ -44,7 +44,7 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<ModalContent title="Unleash Infisical's Full Power">
<p className="text-bunker-300 mb-2">{text}</p>
<p className="mb-2 text-bunker-300">{text}</p>
<p className="text-bunker-300">
Upgrade and get access to this, as well as to other powerful enhancements.
</p>

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

@@ -58,15 +58,15 @@ export const RecoveryCodesDownload = ({
<Modal isOpen={isOpen} onOpenChange={hasDownloaded ? handleClose : () => {}}>
<ModalContent title="Recovery Codes" className="max-w-md">
<div className="space-y-4">
<div className="border-yellow bg-yellow/10 text-yellow rounded-sm border p-2 px-3 text-xs">
<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>
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="grid grid-cols-2 gap-x-6 gap-y-2 font-mono text-sm">
{recoveryCodes.map((code, index) => (
<div key={code} className="text-mineshaft-200 flex items-center">
<span className="text-mineshaft-400 w-8 text-right">{index + 1}.</span>
<div key={code} className="flex items-center text-mineshaft-200">
<span className="w-8 text-right text-mineshaft-400">{index + 1}.</span>
<span className="pl-2">{code}</span>
</div>
))}
@@ -96,11 +96,11 @@ export const RecoveryCodesDownload = ({
</div>
{hasDownloaded ? (
<p className="text-mineshaft-400 text-center text-xs">
<p className="text-center text-xs text-mineshaft-400">
Recovery codes downloaded. You can now close this modal.
</p>
) : (
<p className="text-mineshaft-400 text-center text-xs">
<p className="text-center text-xs text-mineshaft-400">
Download the recovery codes to continue.
</p>
)}

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

@@ -73,7 +73,7 @@ const TotpRegistration = ({ onComplete, shouldCenterQr }: Props) => {
return (
<>
<div className="text-bunker-200 flex max-w-lg flex-col">
<div className="flex max-w-lg flex-col text-bunker-200">
<div className="mb-8">
1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
code.

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

@@ -66,33 +66,33 @@ export default function NavHeader({
return (
<div className="flex flex-row items-center pt-6">
<div className="bg-primary mr-2 flex h-5 w-5 min-w-5 items-center justify-center rounded-md 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="text-primary/80 hover:text-primary truncate pl-0.5 text-sm font-medium"
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="text-bunker-300 truncate text-sm font-medium">{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-bunker-300 text-sm font-medium">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-primary/80 hover:text-primary text-sm font-medium"
className="text-sm font-medium text-primary/80 hover:text-primary"
>
{pageName}
</Link>
@@ -101,15 +101,15 @@ export default function NavHeader({
)}
{currentEnv && secretPath === "/" && (
<>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
<div className="hover:bg-bunker-100/10 rounded-md pl-3">
<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
value={currentEnv}
onValueChange={(value) => {
if (value && onEnvChange) onEnvChange(value);
}}
className="text-primary/80 hover:text-primary border-none bg-transparent pl-0 text-sm font-medium"
className="border-none bg-transparent pl-0 text-sm font-medium text-primary/80 hover:text-primary"
dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
>
{userAvailableEnvs?.map(({ name, slug }) => (
@@ -124,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-primary/80 hover:text-primary text-sm font-medium"
className="text-sm font-medium text-primary/80 hover:text-primary"
>
{userAvailableEnvs?.find(({ slug }) => slug === currentEnv)?.name}
</Link>
@@ -143,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
@@ -195,7 +195,7 @@ export default function NavHeader({
}}
search={(query) => ({ ...query, secretPath: newSecretPath })}
className={twMerge(
"hover:text-primary text-sm transition-all",
"text-sm transition-all hover:text-primary",
isHoveringCopyButton ? "text-primary" : "text-primary/80"
)}
>
@@ -207,7 +207,7 @@ export default function NavHeader({
})}
{isProtectedBranch && (
<Tooltip content={`Protected by policy ${protectionPolicyName}`}>
<FontAwesomeIcon icon={faLock} className="text-primary ml-2" />
<FontAwesomeIcon icon={faLock} className="ml-2 text-primary" />
</Tooltip>
)}
</div>

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

@@ -108,7 +108,7 @@ export const RegionSelect = () => {
</Select>
<Modal>
<ModalTrigger asChild>
<button type="button" className="text-mineshaft-400 mt-1 text-right text-xs underline">
<button type="button" className="mt-1 text-right text-xs text-mineshaft-400 underline">
Help me pick a data region
</button>
</ModalTrigger>
@@ -122,17 +122,17 @@ 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="text-green mr-0.5" icon={faCheck} /> Fastest
<FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Fastest
option if you are based in {value === Region.US ? "the" : ""} {label}
</li>
<li>
<FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Data
<FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Data
storage compliance for this region
</li>
<li>
<FontAwesomeIcon size="xs" className="text-green mr-0.5" icon={faCheck} /> Hosted
<FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Hosted
in {regionLocation}
</li>
</ul>

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

@@ -57,7 +57,7 @@ export const SecretDashboardPathBreadcrumb = ({
type: "info"
});
}}
className="hover:bg-bunker-100/10 opacity-0 transition duration-75 group-hover:opacity-100"
className="opacity-0 transition duration-75 group-hover:opacity-100 hover:bg-bunker-100/10"
>
<FontAwesomeIcon
icon={!isCopying ? faCopy : faCheck}
@@ -76,7 +76,7 @@ export const SecretDashboardPathBreadcrumb = ({
}}
search={(query) => ({ ...query, secretPath: newSecretPath })}
className={twMerge(
"hover:text-primary text-sm transition-all",
"text-sm transition-all hover:text-primary",
isCopying && "text-primary"
)}
>

2
frontend/src/components/notifications/Notifications.tsx
View File

@@ -38,7 +38,7 @@ export const NotificationContent = ({
{copyActions.map((action) => (
<div className="flex flex-row items-center gap-2" key={`copy-${action.name}`}>
{action.label && (
<span className="text-mineshaft-400 ml-2 text-xs">{action.label}</span>
<span className="ml-2 text-xs text-mineshaft-400">{action.label}</span>
)}
<CopyButton
value={action.value}

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

@@ -9,11 +9,11 @@ type Props = {
export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props) => (
<div>
<div className="border-mineshaft-600 mb-2 flex items-center gap-2 border-b pb-1">
<div className="mb-2 flex items-center gap-2 border-b border-mineshaft-600 pb-1">
<div className="font-medium">Last Login</div>
</div>
<div className="mb-2 flex items-center gap-2 text-sm">
<div className="bg-mineshaft-700 flex items-center justify-center rounded-sm 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="bg-mineshaft-700 flex items-center justify-center rounded-sm 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">

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

@@ -107,20 +107,20 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
"mt-4 w-full",
viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10",
viewMode === ViewMode.Undocked &&
"min-w-lg fixed bottom-4 left-20 z-50 h-[40%] w-[38%] lg:w-[34%]"
"fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-lg lg:w-[34%]"
)}
>
<div
className={twMerge(
"border-mineshaft-600 bg-mineshaft-900 mb-4 h-full w-full rounded-lg border transition-transform duration-500",
"mb-4 h-full w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 transition-transform duration-500",
viewMode === ViewMode.Docked ? "relative p-4" : "relative p-0"
)}
>
{viewMode === ViewMode.Docked && (
<div className="border-mineshaft-400 mb-4 flex items-start justify-between border-b pb-4">
<div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4">
<div>
<h3 className="text-mineshaft-100 text-lg font-medium">Access Tree</h3>
<p className="text-mineshaft-400 text-sm leading-3">
<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>
</div>
@@ -129,7 +129,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
variant="outline_bg"
colorSchema="secondary"
type="submit"
className="bg-mineshaft-700 h-10 rounded-r-none"
className="h-10 rounded-r-none bg-mineshaft-700"
leftIcon={<FontAwesomeIcon icon={faWindowRestore} />}
onClick={handleToggleView}
>
@@ -139,7 +139,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
variant="outline_bg"
colorSchema="secondary"
type="submit"
className="bg-mineshaft-600 h-10 rounded-l-none"
className="h-10 rounded-l-none bg-mineshaft-600"
leftIcon={<FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />}
onClick={handleToggleModalView}
>
@@ -156,7 +156,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
>
<div className="h-full w-full">
<ReactFlow
className="border-mineshaft rounded-md border"
className="rounded-md border border-mineshaft"
nodes={nodes}
edges={edges}
edgeTypes={EdgeTypes}
@@ -191,7 +191,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
<SelectItem
key={env.slug}
value={env.slug}
className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
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>

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

@@ -39,12 +39,12 @@ const ErrorDisplay = ({
return (
<div className="flex h-full w-full flex-col gap-2">
<div className="text-mineshaft-100 flex items-center gap-2">
<div className="flex items-center gap-2 text-mineshaft-100">
<FontAwesomeIcon icon={faExclamationTriangle} className="text-red" />
<p>
Error displaying access tree. Please contact{" "}
<a
className="text-mineshaft-200 decoration-primary-500 hover:text-mineshaft-100 inline cursor-pointer underline underline-offset-4 duration-200"
className="inline cursor-pointer text-mineshaft-200 underline decoration-primary-500 underline-offset-4 duration-200 hover:text-mineshaft-100"
target="_blank"
rel="noopener noreferrer"
href="mailto:support@infisical.com"
@@ -55,13 +55,13 @@ const ErrorDisplay = ({
</p>
</div>
<div className="relative flex flex-1 flex-col overflow-hidden">
<pre className="thin-scrollbar bg-mineshaft-700 text-mineshaft-100 w-full flex-1 overflow-y-auto whitespace-pre-wrap rounded-sm p-2 text-xs">
<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}
>

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

@@ -51,7 +51,7 @@ export const PermissionSimulation = ({
onClick={handlePermissionSimulation}
rightIcon={
<FontAwesomeIcon
className="text-bunker-300 hover:text-primary pl-1 text-sm hover:opacity-80"
className="pl-1 text-sm text-bunker-300 hover:text-primary hover:opacity-80"
icon={faChevronDown}
/>
}
@@ -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="border-mineshaft-600 bg-mineshaft-800 font-inter flex w-[20rem] flex-col gap-1.5 rounded-sm border p-2 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="text-mineshaft-400 mb-2 mt-1 text-xs">
<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>
@@ -96,7 +96,7 @@ export const PermissionSimulation = ({
<Select
value={subject}
onValueChange={(value) => setSubject(value as ProjectPermissionSub)}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -119,7 +119,7 @@ export const PermissionSimulation = ({
<Select
value={environment}
onValueChange={setEnvironment}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
dropdownContainerClassName="max-w-76"
>

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

@@ -32,17 +32,17 @@ export const FolderNode = ({
<>
<Handle
type="target"
className="cursor-pointer! pointer-events-none opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Top}
/>
<div
className={`flex ${hasMinimalAccess ? "" : "opacity-40"} border-mineshaft bg-mineshaft-800 font-inter h-full w-full flex-col items-center justify-center rounded-md border px-2 py-3 shadow-lg transition-opacity duration-500`}
className={`flex ${hasMinimalAccess ? "" : "opacity-40"} h-full 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`}
>
<div className="text-mineshaft-100 flex items-center space-x-2 text-xs">
<FontAwesomeIcon className="text-yellow mb-0.5 font-medium" icon={faFolder} />
<div className="flex items-center space-x-2 text-xs text-mineshaft-100">
<FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} />
<span>{parentId ? `/${name}` : "/"}</span>
</div>
<div className="bg-mineshaft-600 mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-sm 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="cursor-pointer! pointer-events-none opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Bottom}
/>
</>

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

@@ -68,7 +68,7 @@ export const AccessTreeSecretPathInput = ({
>
{isExpanded ? (
<div
className="text-mineshaft-300 flex h-10 w-10 cursor-pointer items-center justify-center hover:text-white"
className="flex h-10 w-10 cursor-pointer items-center justify-center text-mineshaft-300 hover:text-white"
onClick={toggleSearch}
role="button"
tabIndex={0}
@@ -83,7 +83,7 @@ export const AccessTreeSecretPathInput = ({
) : (
<Tooltip position="bottom" content="Search Paths">
<div
className="text-mineshaft-300 flex h-10 w-10 cursor-pointer items-center justify-center hover:text-white"
className="flex h-10 w-10 cursor-pointer items-center justify-center text-mineshaft-300 hover:text-white"
onClick={toggleSearch}
role="button"
tabIndex={0}

20
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="text-mineshaft-100 font-medium capitalize">{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="bg-mineshaft-600 rounded-sm 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,13 +45,13 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
case PermissionAccess.Full:
component = (
<>
<div className="text-green flex items-center gap-1.5 capitalize">
<div className="flex items-center gap-1.5 text-green capitalize">
<FontAwesomeIcon icon={faCheckCircle} size="xs" />
<span>Full {formatActionName(action)} Permissions</span>
</div>
<p className="text-mineshaft-200">
Policy grants unconditional{" "}
<span className="text-mineshaft-100 font-medium">
<span className="font-medium text-mineshaft-100">
{formatActionName(action).toLowerCase()}
</span>{" "}
permission for {subject.replaceAll("-", " ")} in this folder.
@@ -62,13 +62,13 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
case PermissionAccess.Partial:
component = (
<>
<div className="text-yellow flex items-center gap-1.5 capitalize">
<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>
<p className="text-mineshaft-200 mb-1">
<p className="mb-1 text-mineshaft-200">
Policy conditionally allows{" "}
<span className="text-mineshaft-100 font-medium">
<span className="font-medium text-mineshaft-100">
{formatActionName(action).toLowerCase()}
</span>{" "}
permission for {subject.replaceAll("-", " ")} in this folder.
@@ -137,13 +137,13 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
case PermissionAccess.None:
component = (
<>
<div className="text-red flex items-center gap-1.5 capitalize">
<div className="flex items-center gap-1.5 text-red capitalize">
<FontAwesomeIcon icon={faCircleXmark} size="xs" />
<span>No {formatActionName(action)} Permissions</span>
</div>
<p className="text-mineshaft-200">
Policy always forbids{" "}
<span className="text-mineshaft-100 font-medium">
<span className="font-medium text-mineshaft-100">
{formatActionName(action).toLowerCase()}
</span>{" "}
permission for {subject.replaceAll("-", " ")} in this folder.
@@ -157,7 +157,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
return (
<NodeToolbar
className="border-mineshaft-600 bg-mineshaft-800 text-bunker-100 rounded-md border px-4 py-2 text-sm font-light"
className="rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-sm font-light text-bunker-100"
isVisible
position={Position.Bottom}
>

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

@@ -11,7 +11,7 @@ import { createRoleNode } from "../utils";
const getSubjectIcon = (subject: ProjectPermissionSub) => {
switch (subject) {
case ProjectPermissionSub.Secrets:
return <FontAwesomeIcon icon={faKey} className="text-bunker-300 h-4 w-4" />;
return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
case ProjectPermissionSub.SecretFolders:
return <FontAwesomeIcon icon={faFolder} className="h-4 w-4 text-yellow-700" />;
case ProjectPermissionSub.DynamicSecrets:
@@ -19,7 +19,7 @@ const getSubjectIcon = (subject: ProjectPermissionSub) => {
case ProjectPermissionSub.SecretImports:
return <FontAwesomeIcon icon={faFileImport} className="h-4 w-4 text-green-700" />;
default:
return <FontAwesomeIcon icon={faKey} className="text-bunker-300 h-4 w-4" />;
return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
}
};
@@ -40,18 +40,18 @@ export const RoleNode = ({
<>
<Handle
type="target"
className="cursor-pointer! pointer-events-none opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Top}
/>
<div className="border-mineshaft bg-mineshaft-800 font-inter flex h-14 w-full flex-col items-center justify-center rounded-md border px-2 py-3 shadow-lg transition-opacity duration-500">
<div className="text-mineshaft-100 flex items-center space-x-2">
<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">
<div className="flex items-center space-x-2 text-mineshaft-100">
{getSubjectIcon(subject)}
<span className="text-sm">{formatLabel(subject)} Access</span>
</div>
</div>
<Handle
type="source"
className="cursor-pointer! pointer-events-none opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Bottom}
/>
</>

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

@@ -12,10 +12,10 @@ export const ShowMoreButtonNode = ({
const tooltipText = `${remaining} ${remaining === 1 ? "folder is" : "folders are"} hidden. Click to show ${remaining > 10 ? "10 more" : ""}`;
return (
<div className="border-mineshaft-600 bg-mineshaft-800 flex h-full w-full items-center justify-center rounded-md border p-2">
<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="cursor-pointer! pointer-events-none opacity-0"
className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Top}
/>

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

@@ -51,11 +51,11 @@ const Content = ({ pkiSync, onComplete }: ContentProps) => {
handleTriggerImportCertificates();
}}
>
<p className="text-mineshaft-200 mb-8 text-sm">
<p className="mb-8 text-sm text-mineshaft-200">
Are you sure you want to import certificates from this {destinationName} destination into
Infisical?
</p>
<p className="text-bunker-300 mb-6 text-xs">
<p className="mb-6 text-xs text-bunker-300">
This operation will retrieve certificates from {destinationName} and make them available in
your PKI subscriber. Only certificates that are not already imported will be processed.
</p>

8
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="text-red mb-2 flex self-start">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<div className="mb-2 flex self-start text-red">
<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="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div>
)}
</div>

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

@@ -17,10 +17,10 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
<img
alt={`${destinationDetails.name} logo`}
src={`/images/integrations/${destinationDetails.image}`}
className="bg-bunker-500 h-12 w-12 rounded-md p-2"
className="h-12 w-12 rounded-md bg-bunker-500 p-2"
/>
<div>
<div className="text-mineshaft-300 flex items-center">
<div className="flex items-center text-mineshaft-300">
{destinationDetails.name} Certificate Sync
<a
target="_blank"
@@ -28,8 +28,8 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
className="mb-1 ml-1"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<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="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
</div>
</a>
</div>
<p className="text-mineshaft-400 text-sm leading-4">
<p className="text-sm leading-4 text-mineshaft-400">
{isConfigured
? `Edit ${destinationDetails.name} Certificate Sync`
: `Sync certificates to ${destinationDetails.name}`}

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

@@ -51,7 +51,7 @@ const Content = ({ pkiSync, onComplete }: ContentProps) => {
handleTriggerRemoveCertificates();
}}
>
<p className="text-mineshaft-200 mb-8 text-sm">
<p className="mb-8 text-sm text-mineshaft-200">
Are you sure you want to remove certificates synced by Infisical from this {destinationName}{" "}
destination?
</p>

8
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="text-red mb-2 flex self-start">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<div className="mb-2 flex self-start text-red">
<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="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div>
)}
</div>

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

@@ -46,7 +46,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
return (
<div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" />
<p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
<p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
</div>
);
}
@@ -60,7 +60,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/>
<div className="h-118 grid 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 (
@@ -72,7 +72,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
? handlePopUpOpen("upgradePlan")
: onSelect(destination)
}
className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border p-4 duration-200"
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
>
<img
src={`/images/integrations/${image}`}
@@ -109,7 +109,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
service you're looking for,`}{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://infisical.com/slack"
rel="noopener noreferrer"
>
@@ -118,7 +118,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
or{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://github.com/Infisical/infisical/discussions"
rel="noopener noreferrer"
>
@@ -129,7 +129,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
</>
}
>
<div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
<div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
<span className="text-xs">
Don&#39;t see the third-party service you&#39;re looking for?
</span>

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

@@ -65,7 +65,7 @@ export const PkiSyncTable = ({ pkiSyncs, onEdit, onDelete, onTrigger }: Props) =
{pkiSyncs.map((pkiSync) => (
<Tr
key={pkiSync.id}
className="hover:bg-mineshaft-700 cursor-pointer"
className="cursor-pointer hover:bg-mineshaft-700"
onClick={() => onEdit(pkiSync)}
>
<Td>{pkiSync.name}</Td>

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

@@ -32,7 +32,7 @@ export const AwsCertificateManagerPkiSyncFields = () => {
<Select
value={field.value}
onValueChange={field.onChange}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
placeholder="Select an AWS region"
>

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

@@ -124,12 +124,12 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
if (showConfirmation)
return (
<>
<div className="rounded-xs border-mineshaft-600 border-l-primary bg-mineshaft-700/80 flex flex-col border border-l-2 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="text-primary mr-1.5" />
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
Certificate Sync Behavior
</div>
<p className="text-bunker-200 mt-1 text-sm">
<p className="mt-1 text-sm text-bunker-200">
Only certificates managed by Infisical will be affected during sync operations.
Certificates not created or managed by Infisical will remain untouched, and changes made
to Infisical-managed certificates directly in the destination service may be overwritten
@@ -162,7 +162,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
<form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
<FormProvider {...formMethods}>
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
<Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
{FORM_TABS.map((tab, index) => (
<Tab
onClick={async (e) => {
@@ -171,9 +171,9 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
className={({ selected }) =>
`-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}
@@ -207,7 +207,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
id="auto-sync-enabled"
thumbClassName="bg-mineshaft-800"
onCheckedChange={onChange}

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

@@ -40,7 +40,7 @@ export const PkiSyncConnectionField = ({ onChange: callback }: Props) => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">
<p className="mb-4 text-sm text-bunker-300">
Specify the {appName} Connection to use to connect to {connectionName} and configure
destination parameters.
</p>
@@ -69,7 +69,7 @@ export const PkiSyncConnectionField = ({ onChange: callback }: Props) => {
name="connection"
/>
{availableConnections?.length === 0 && (
<p className="text-yellow -mt-2.5 mb-2.5 text-xs">
<p className="-mt-2.5 mb-2.5 text-xs text-yellow">
<FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
{canCreateConnection ? (
<>

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

@@ -9,7 +9,7 @@ export const PkiSyncDetailsFields = () => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">
<p className="mb-4 text-sm text-bunker-300">
Provide a name and description for this Certificate Sync.
</p>
<Controller

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

@@ -18,7 +18,7 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">Configure how certificates should be synced.</p>
<p className="mb-4 text-sm text-bunker-300">Configure how certificates should be synced.</p>
{/*
TODO: Re-enable this when we have a way to import certificates
<Controller
@@ -64,7 +64,7 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl isError={Boolean(error)} errorText={error?.message}>
<Switch
className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
id="can-remove-certificates"
thumbClassName="bg-mineshaft-800"
onCheckedChange={onChange}
@@ -121,7 +121,7 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
<span className="text-yellow">
Character restrictions for {syncOption.name}:
</span>
<div className="text-bunker-300 text-xs">
<div className="text-xs text-bunker-300">
The following characters are not allowed:{" "}
{syncOption.forbiddenCharacters.split("").join(" ")}
</div>

16
frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx
View File

@@ -34,8 +34,8 @@ export const PkiSyncReviewFields = () => {
return (
<div className="mb-4 flex flex-col gap-6">
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Source</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Source</span>
</div>
<div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="PKI Subscriber">
@@ -44,8 +44,8 @@ export const PkiSyncReviewFields = () => {
</div>
</div>
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Destination</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Destination</span>
</div>
<div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="Connection">{connection?.name}</GenericFieldLabel>
@@ -58,8 +58,8 @@ export const PkiSyncReviewFields = () => {
</div>
</div>
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Sync Options</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Sync Options</span>
</div>
<div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="Auto-Sync">
@@ -86,8 +86,8 @@ export const PkiSyncReviewFields = () => {
</div>
</div>
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Details</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Details</span>
</div>
<div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="Name">{name}</GenericFieldLabel>

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

@@ -16,7 +16,7 @@ export const PkiSyncSourceFields = () => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">
<p className="mb-4 text-sm text-bunker-300">
Specify the PKI subscriber where you would like to sync certificates from.
</p>

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

@@ -83,9 +83,9 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
};
return (
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="justify-betweens flex">
<h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">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 resize-none! bg-mineshaft-800 max-w-md"
className="thin-scrollbar max-w-md resize-none! bg-mineshaft-800"
isDisabled={!isAllowed}
/>
</FormControl>

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

@@ -202,7 +202,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
<div
key={el.value}
className={twMerge(
"border-mineshaft-600 hover:border-primary-400 hover:bg-mineshaft-600 flex cursor-pointer flex-col items-center gap-2 rounded-sm border px-2 py-4 opacity-75 transition-all",
"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 resize-none! bg-mineshaft-900 w-full"
className="thin-scrollbar w-full resize-none! bg-mineshaft-900"
/>
</FormControl>
)}
@@ -311,7 +311,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
onValueChange={(e) => {
onChange(e);
}}
className="bg-mineshaft-600 mb-12 w-full"
className="mb-12 w-full bg-mineshaft-600"
position="popper"
dropdownContainerClassName="max-w-none -top-1"
side="top"
@@ -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

6
frontend/src/components/roles/RoleOption.tsx
View File

@@ -13,15 +13,15 @@ export const RoleOption = ({
<div>
<p className="truncate">{children}</p>
{props.data.description ? (
<p className="text-mineshaft-400 truncate text-xs leading-4">
<p className="truncate text-xs leading-4 text-mineshaft-400">
{props.data.description}
</p>
) : (
<p className="text-mineshaft-400/50 text-xs leading-4">No Description</p>
<p className="text-xs leading-4 text-mineshaft-400/50">No Description</p>
)}
</div>
{isSelected && (
<FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
<FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
)}
</div>
</components.Option>

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

@@ -115,7 +115,7 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
selectedRotation ? (
<SecretRotationV2ModalHeader isConfigured={false} type={selectedRotation} />
) : (
<div className="text-mineshaft-300 flex items-center">
<div className="flex items-center text-mineshaft-300">
Add Secret Rotation
<a
target="_blank"
@@ -123,8 +123,8 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
className="mb-1 ml-1"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<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="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}

8
frontend/src/components/secret-rotations-v2/DeleteSecretRotationV2Modal.tsx
View File

@@ -72,7 +72,7 @@ export const DeleteSecretRotationV2Modal = ({
>
<Switch
containerClassName="mt-4"
className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
thumbClassName="bg-mineshaft-800"
isChecked={revokeGeneratedCredentials}
onCheckedChange={setRevokeGeneratedCredentials}
@@ -80,13 +80,13 @@ export const DeleteSecretRotationV2Modal = ({
>
Revoke Credentials
</Switch>
<p className="font-inter text-mineshaft-400 mt-1 text-sm">
<p className="mt-1 font-inter text-sm text-mineshaft-400">
Generated credentials will {revokeGeneratedCredentials ? "" : "not"} be revoked on deletion
{revokeGeneratedCredentials ? "" : " and remain active"}.
</p>
<Switch
containerClassName="mt-4"
className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
thumbClassName="bg-mineshaft-800"
isChecked={deleteSecrets}
onCheckedChange={setDeleteSecrets}
@@ -94,7 +94,7 @@ export const DeleteSecretRotationV2Modal = ({
>
Delete Secrets
</Switch>
<p className="font-inter text-mineshaft-400 mt-1 text-sm">
<p className="mt-1 font-inter text-sm text-mineshaft-400">
Rotation secrets will {deleteSecrets ? "" : "not"} be removed from your project on deletion.
</p>
</DeleteActionModal>

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

@@ -48,7 +48,7 @@ const Content = ({ secretRotation, onComplete }: ContentProps) => {
return (
<div>
<p className="text-mineshaft-200 mb-8 text-sm">
<p className="mb-8 text-sm text-mineshaft-200">
Are you sure you want to rotate the secrets for this {rotationType} Rotation?
</p>
<div className="mt-8 flex w-full items-center justify-between gap-2">

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

@@ -17,10 +17,10 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
<img
alt={`${destinationDetails.name} logo`}
src={`/images/integrations/${destinationDetails.image}`}
className="bg-bunker-500 h-12 w-12 rounded-md p-2"
className="h-12 w-12 rounded-md bg-bunker-500 p-2"
/>
<div>
<div className="text-mineshaft-300 flex items-center">
<div className="flex items-center text-mineshaft-300">
{destinationDetails.name} Rotation
<a
target="_blank"
@@ -28,8 +28,8 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
className="mb-1 ml-1"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<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="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
</div>
</a>
</div>
<p className="text-mineshaft-400 text-sm leading-4">
<p className="text-sm leading-4 text-mineshaft-400">
{isConfigured
? `Edit ${destinationDetails.name} Rotation`
: `Rotate ${destinationDetails.name}`}

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

@@ -16,7 +16,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
return (
<div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" />
<p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
<p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
</div>
);
}
@@ -31,7 +31,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
type="button"
key={type}
onClick={() => onSelect(type)}
className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
>
<img
src={`/images/integrations/${image}`}
@@ -56,7 +56,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
service you're looking for,`}{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://infisical.com/slack"
rel="noopener noreferrer"
>
@@ -65,7 +65,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
or{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://github.com/Infisical/infisical/discussions"
rel="noopener noreferrer"
>
@@ -76,7 +76,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
</>
}
>
<div className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-900/50 group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed p-4">
<div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
<FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
<div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
Coming Soon

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

@@ -31,18 +31,18 @@ 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="text-red mb-2 flex self-start">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">Failure Reason</div>
</div>
<div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
{errorMessage}
</div>
</div>
{nextRotationAt && (
<span className="text-mineshaft-300 text-xs">
<span className="text-xs text-mineshaft-300">
Next rotation attempt on {format(nextRotationAt, "MM/dd/yyyy")} at{" "}
{format(nextRotationAt, "h:mm aa")}.
</span>
@@ -67,7 +67,7 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
return (
<Badge
className={twMerge(
"bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap",
"flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300",
className
)}
>

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

@@ -48,7 +48,7 @@ const Content = ({ secretRotation }: ContentProps) => {
return (
<div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" />
<p className="text-mineshaft-400 mt-4 text-sm">Loading generated credentials...</p>
<p className="mt-4 text-sm text-mineshaft-400">Loading generated credentials...</p>
</div>
);
}
@@ -56,7 +56,7 @@ const Content = ({ secretRotation }: ContentProps) => {
if (!generatedCredentialsResponse) {
return (
<div className="flex w-full justify-center">
<p className="text-red text-sm">No generated credentials found for this rotation.</p>
<p className="text-sm text-red">No generated credentials found for this rotation.</p>
</div>
);
}
@@ -126,14 +126,14 @@ const Content = ({ secretRotation }: ContentProps) => {
{Component}
{!IS_ROTATION_DUAL_CREDENTIALS[type] && (
<NoticeBannerV2 title={`${appName} Retired Credentials Behavior`}>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm text-mineshaft-300">
Due to {SECRET_ROTATION_MAP[type].name} Rotations utilizing a single credential set,
retired credentials will not be able to authenticate with {appName} during their{" "}
<a
target="_blank"
href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
rel="noopener noreferrer"
className="decoration-primary hover:text-mineshaft-200 underline underline-offset-2"
className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
>
inactive period
</a>
@@ -142,7 +142,7 @@ const Content = ({ secretRotation }: ContentProps) => {
</NoticeBannerV2>
)}
{nextRotationAt && (
<div className="text-mineshaft-200 flex items-center gap-x-1.5 text-sm">
<div className="flex items-center gap-x-1.5 text-sm text-mineshaft-200">
<FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
<span>
Next rotation occurs on: {format(nextRotationAt, "MM/dd/yyyy")} at{" "}

2
frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay.tsx
View File

@@ -21,7 +21,7 @@ export const CredentialDisplay = ({ children, label, isSensitive }: Props) => {
return (
<GenericFieldLabel label={label}>
{children ? (
<div className="text-mineshaft-100 flex w-full items-center gap-1">
<div className="flex w-full items-center gap-1 text-mineshaft-100">
{showCredential ? children : "****************************"}
<Tooltip content={`Copy ${label}`}>
<IconButton

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

@@ -14,31 +14,31 @@ export const ViewRotationGeneratedCredentialsDisplay = ({
return (
<>
<div className="flex flex-col gap-2">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-100 text-sm">
<FontAwesomeIcon icon={faCheck} className="text-green mr-1.5" />
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-100">
<FontAwesomeIcon icon={faCheck} className="mr-1.5 text-green" />
Current Credentials
</span>
</div>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm text-mineshaft-300">
The active credential set currently mapped to the rotation secrets.
</p>
<div className="border-mineshaft-600 bg-mineshaft-700 flex flex-col gap-x-8 gap-y-2 rounded-sm border 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>
{inactiveCredentials && (
<div className="flex flex-col gap-2">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-100 text-sm">
<FontAwesomeIcon icon={faClockRotateLeft} className="text-yellow mr-1.5" />
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-100">
<FontAwesomeIcon icon={faClockRotateLeft} className="mr-1.5 text-yellow" />
Retired Credentials
</span>
</div>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm text-mineshaft-300">
The retired credential set that will be revoked during the next rotation cycle.
</p>
<div className="border-mineshaft-600 bg-mineshaft-700 flex flex-col gap-x-8 gap-y-2 rounded-sm border 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>

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

@@ -26,7 +26,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
return (
<>
<p className="text-bunker-300 mb-4 text-sm">
<p className="mb-4 text-sm text-bunker-300">
Configure the connection rotation strategy for this Secret Rotation.
</p>
{!isUpdate && environments && (
@@ -90,7 +90,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
});
}
}}
className="bg-mineshaft-700 scheme-dark text-white"
className="bg-mineshaft-700 text-white scheme-dark"
/>
</FormControl>
);
@@ -113,7 +113,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
id="auto-rotation-enabled"
thumbClassName="bg-mineshaft-800"
onCheckedChange={onChange}
@@ -126,7 +126,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
}}
/>
{!IS_ROTATION_DUAL_CREDENTIALS[type] && isAutoRotationEnabled && (
<div className="border-yellow bg-yellow/10 text-yellow rounded-sm border p-2 px-3 text-xs">
<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
@@ -135,7 +135,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
target="_blank"
rel="noopener noreferrer"
className="decoration-yellow hover:text-mineshaft-200 underline underline-offset-2"
className="underline decoration-yellow underline-offset-2 hover:text-mineshaft-200"
>
Read more
</a>

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

@@ -105,7 +105,7 @@ export const SecretRotationV2ConnectionField = ({ onChange: callback, isUpdate }
name="connection"
/>
{!isUpdate && !isPending && !availableConnections?.length && !canCreateConnection && (
<p className="text-yellow -mt-2.5 mb-2.5 text-xs">
<p className="-mt-2.5 mb-2.5 text-xs text-yellow">
<FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
You do not have access to any {appName} Connections. Contact an admin to create one.
</p>

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

@@ -9,7 +9,7 @@ export const SecretRotationV2DetailsFields = () => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">
<p className="mb-4 text-sm text-bunker-300">
Provide a name and description for this Secret Rotation.
</p>
<Controller

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

@@ -183,7 +183,7 @@ export const SecretRotationV2Form = ({
<form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
<FormProvider {...formMethods}>
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
<Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
{FORM_TABS.map((tab, index) => (
<Tab
onClick={async (e) => {
@@ -192,9 +192,9 @@ export const SecretRotationV2Form = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
className={({ selected }) =>
`-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}

10
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.
@@ -66,7 +66,7 @@ export const LdapPasswordRotationParametersFields = () => {
);
onChange(val);
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -127,10 +127,10 @@ export const LdapPasswordRotationParametersFields = () => {
)}
</div>
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Password Requirements</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Password Requirements</span>
</div>
<div className="border-mineshaft-600 bg-mineshaft-700 grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border 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"

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

@@ -31,7 +31,7 @@ export const RedisCredentialsRotationParametersFields = () => {
</p>
<p>
The default value is{" "}
<code className="bg-mineshaft-700 text-bunker-300 rounded-sm px-1 py-0.5 font-mono font-medium">
<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.
@@ -39,7 +39,7 @@ export const RedisCredentialsRotationParametersFields = () => {
<p>
For more information, please refer to the{" "}
<a
className="text-primary-500 hover:text-primary-600 font-medium underline"
className="font-medium text-primary-500 underline hover:text-primary-600"
href="https://redis.io/docs/latest/operate/oss_and_stack/management/security/acl/"
target="_blank"
rel="noopener noreferrer"
@@ -61,10 +61,10 @@ export const RedisCredentialsRotationParametersFields = () => {
</div>
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Password Requirements</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Password Requirements</span>
</div>
<div className="border-mineshaft-600 bg-mineshaft-700 grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border 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/SecretRotationV2ParametersFields.tsx
View File

@@ -33,7 +33,7 @@ export const SecretRotationV2ParametersFields = () => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">
<p className="mb-4 text-sm text-bunker-300">
Configure the required parameters for this Secret Rotation.
</p>
<Component />

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

@@ -62,19 +62,19 @@ export const SqlCredentialsRotationParametersFields = () => {
name="parameters.username2"
/>
<NoticeBannerV2 title="Example Create User Statement">
<p className="text-mineshaft-300 mb-3 text-sm">
<p className="mb-3 text-sm text-mineshaft-300">
Infisical requires two database users to be created for rotation.
</p>
<p className="text-mineshaft-300 mb-3 text-sm">
<p className="mb-3 text-sm text-mineshaft-300">
These users are intended to be solely managed by Infisical. Altering their login after
rotation may cause unexpected failure.
</p>
<p className="text-mineshaft-300 mb-3 text-sm">
<p className="mb-3 text-sm text-mineshaft-300">
Below is an example statement for creating the required users. You may need to modify it
to suit your needs.
</p>
<p className="mb-3 text-sm">
<pre className="border-mineshaft-700 bg-mineshaft-800 text-mineshaft-300 max-h-40 overflow-y-auto whitespace-pre-wrap rounded-sm border p-2">
<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>

8
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx
View File

@@ -46,8 +46,8 @@ export const SecretRotationV2ReviewFields = () => {
return (
<div className="mb-4 flex flex-col gap-6">
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Configuration</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Configuration</span>
</div>
<div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="Connection">{connection.name}</GenericFieldLabel>
@@ -63,8 +63,8 @@ export const SecretRotationV2ReviewFields = () => {
</div>
<Component />
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Details</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Details</span>
</div>
<div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="Name">{name}</GenericFieldLabel>

4
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SecretRotationReviewSection.tsx
View File

@@ -8,8 +8,8 @@ type Props = {
export const SecretRotationReviewSection = ({ label, children }: Props) => {
return (
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">{label}</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">{label}</span>
</div>
<div className="flex flex-wrap gap-x-8 gap-y-2">{children}</div>
</div>

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

@@ -33,7 +33,7 @@ export const SecretRotationV2SecretsMappingFields = () => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">
<p className="mb-4 text-sm text-bunker-300">
Map the rotated credentials to secrets in your Infisical project.
</p>
<Component />

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="border-mineshaft-600 bg-mineshaft-600 text-bunker-200 pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 whitespace-nowrap border">
<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>

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

@@ -108,7 +108,7 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
selectedDataSource ? (
<SecretScanningDataSourceModalHeader isConfigured={false} type={selectedDataSource} />
) : (
<div className="text-mineshaft-300 flex items-center">
<div className="flex items-center text-mineshaft-300">
Add Data Source
<a
target="_blank"
@@ -116,8 +116,8 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
className="mb-1 ml-1"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<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="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}

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

@@ -58,7 +58,7 @@ export const DeleteSecretScanningDataSourceModal = ({
deleteKey={name}
onDeleteApproved={handleDeleteDataSource}
>
<p className="font-inter text-mineshaft-400 mt-1 text-sm">
<p className="mt-1 font-inter text-sm text-mineshaft-400">
Findings associated with this data source will be preserved.
</p>
</DeleteActionModal>

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

@@ -17,10 +17,10 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
<img
alt={`${dataSourceDetails.name} logo`}
src={`/images/integrations/${dataSourceDetails.image}`}
className="bg-bunker-500 h-12 rounded-md p-2"
className="h-12 rounded-md bg-bunker-500 p-2"
/>
<div>
<div className="text-mineshaft-300 flex items-center">
<div className="flex items-center text-mineshaft-300">
{dataSourceDetails.name} Data Source
<a
target="_blank"
@@ -28,8 +28,8 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
className="mb-1 ml-1"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<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="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
</div>
</a>
</div>
<p className="text-mineshaft-400 text-sm leading-4">
<p className="text-sm leading-4 text-mineshaft-400">
{isConfigured ? "Edit" : "Connect a"} {dataSourceDetails.name} Data Source
</p>
</div>

10
frontend/src/components/secret-scanning/SecretScanningDataSourceSelect.tsx
View File

@@ -19,7 +19,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
return (
<div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" />
<p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
<p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
</div>
);
}
@@ -34,7 +34,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
type="button"
key={type}
onClick={() => onSelect(type)}
className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
>
<img
src={`/images/integrations/${image}`}
@@ -59,7 +59,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
service you're looking for,`}{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://infisical.com/slack"
rel="noopener noreferrer"
>
@@ -68,7 +68,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
or{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://github.com/Infisical/infisical/discussions"
rel="noopener noreferrer"
>
@@ -79,7 +79,7 @@ export const SecretScanningDataSourceSelect = ({ onSelect }: Props) => {
</>
}
>
<div className="border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-900/50 group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed p-4">
<div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
<FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
<div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
Coming Soon

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

@@ -34,17 +34,17 @@ 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="text-red mb-2 flex self-start">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">Failure Reason</div>
</div>
<div className="bg-mineshaft-600 break-words rounded-sm p-2 text-xs">
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
{errorMessage}
</div>
{scannedAt && (
<div className="text-mineshaft-400 mt-1 text-xs">
<div className="mt-1 text-xs text-mineshaft-400">
Attempted {formatDistance(new Date(scannedAt), new Date(), { addSuffix: true })}
</div>
)}

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

@@ -110,7 +110,7 @@ export const BitbucketDataSourceConfigFields = () => {
onValueChange={(val) => {
setValue("config.includeRepos", val === ScanMethod.AllRepositories ? ["*"] : []);
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
dropdownContainerClassName="max-w-none"
isDisabled={!connectionId}

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

@@ -61,7 +61,7 @@ export const GitHubDataSourceConfigFields = () => {
onValueChange={(val) => {
setValue("config.includeRepos", val === ScanMethod.AllRepositories ? ["*"] : []);
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
dropdownContainerClassName="max-w-none"
isDisabled={!connectionId}

8
frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/GitLabDataSourceConfigFields.tsx
View File

@@ -85,13 +85,13 @@ export const GitLabDataSourceConfigFields = () => {
<ul className="flex list-disc flex-col gap-3 pl-4">
<li>
<p className="text-mineshaft-300">
<span className="text-bunker-200 font-medium">Project</span>: Scan an
<span className="font-medium text-bunker-200">Project</span>: Scan an
individual GitLab project.
</p>
</li>
<li>
<p className="text-mineshaft-300">
<span className="text-bunker-200 font-medium">Group</span>: Scan one or more
<span className="font-medium text-bunker-200">Group</span>: Scan one or more
projects belonging to a GitLab group.
</p>
</li>
@@ -105,7 +105,7 @@ export const GitLabDataSourceConfigFields = () => {
onChange(v);
clearAllFields();
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
isDisabled={isUpdate}
dropdownContainerClassName="max-w-none"
@@ -207,7 +207,7 @@ export const GitLabDataSourceConfigFields = () => {
onValueChange={(val) => {
setValue("config.includeProjects", val === ScanMethod.AllProjects ? ["*"] : []);
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
dropdownContainerClassName="max-w-none"
isDisabled={!connectionId}

4
frontend/src/components/secret-scanning/forms/SecretScanningDataSourceConfigFields/SecretScanningDataSourceConfigFields.tsx
View File

@@ -25,7 +25,7 @@ export const SecretScanningDataSourceConfigFields = () => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">Connect and configure your Data Source.</p>
<p className="mb-4 text-sm text-bunker-300">Connect and configure your Data Source.</p>
<Component />
<Controller
control={control}
@@ -42,7 +42,7 @@ export const SecretScanningDataSourceConfigFields = () => {
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
id="auto-scan-enabled"
thumbClassName="bg-mineshaft-800"
onCheckedChange={onChange}

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

@@ -106,7 +106,7 @@ export const SecretScanningDataSourceConnectionField = ({
name="connection"
/>
{!isUpdate && !isPending && !availableConnections?.length && !canCreateConnection && (
<p className="text-yellow -mt-2.5 mb-2.5 text-xs">
<p className="-mt-2.5 mb-2.5 text-xs text-yellow">
<FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
You do not have access to any {connectionName} Connections. Contact an admin to create
one.

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

@@ -9,7 +9,7 @@ export const SecretScanningDataSourceDetailsFields = () => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">
<p className="mb-4 text-sm text-bunker-300">
Provide a name and description for this Data Source.
</p>
<Controller

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

@@ -136,7 +136,7 @@ export const SecretScanningDataSourceForm = ({
<form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
<FormProvider {...formMethods}>
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
<Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
{FORM_TABS.map((tab, index) => (
<Tab
onClick={async (e) => {
@@ -145,9 +145,9 @@ export const SecretScanningDataSourceForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
className={({ selected }) =>
`-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}

4
frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/SecretScanningDataSourceReviewFields.tsx
View File

@@ -25,8 +25,8 @@ export const SecretScanningDataSourceReviewFields = () => {
<div className="mb-4 flex flex-col gap-6">
<Component />
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Details</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Details</span>
</div>
<div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="Name">{name}</GenericFieldLabel>

4
frontend/src/components/secret-scanning/forms/SecretScanningDataSourceReviewFields/shared/SecretScanningDataSourceConfigReviewSection.tsx
View File

@@ -7,8 +7,8 @@ type Props = {
export const SecretScanningDataSourceConfigReviewSection = ({ children }: Props) => {
return (
<div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b">
<span className="text-mineshaft-300 text-sm">Configuration</span>
<div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Configuration</span>
</div>
<div className="flex flex-wrap gap-x-8 gap-y-2">{children}</div>
</div>

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

@@ -58,7 +58,7 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
>
<Switch
containerClassName="mt-4"
className="bg-mineshaft-400/50 data-[state=checked]:bg-red/50 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
thumbClassName="bg-mineshaft-800"
isChecked={removeSecrets}
onCheckedChange={setRemoveSecrets}

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

@@ -77,7 +77,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
return (
<form onSubmit={handleSubmit(handleTriggerImportSecrets)}>
<p className="text-mineshaft-200 mb-8 text-sm">
<p className="mb-8 text-sm text-mineshaft-200">
Are you sure you want to import secrets from this {destinationName} destination into
Infiscal?
</p>
@@ -100,7 +100,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
return (
<li key={name}>
<p className="text-mineshaft-300">
<span className="text-bunker-200 font-medium">{name}</span>: {description}
<span className="font-medium text-bunker-200">{name}</span>: {description}
</p>
</li>
);
@@ -115,7 +115,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
<Select
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
placeholder="Select an option..."
dropdownContainerClassName="max-w-none"

8
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="text-red mb-2 flex self-start">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<div className="mb-2 flex self-start text-red">
<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="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div>
)}
</div>

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

@@ -17,10 +17,10 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
<img
alt={`${destinationDetails.name} logo`}
src={`/images/integrations/${destinationDetails.image}`}
className="bg-bunker-500 h-12 w-12 rounded-md p-2"
className="h-12 w-12 rounded-md bg-bunker-500 p-2"
/>
<div>
<div className="text-mineshaft-300 flex items-center">
<div className="flex items-center text-mineshaft-300">
{destinationDetails.name} Sync
<a
target="_blank"
@@ -28,8 +28,8 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
className="mb-1 ml-1"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<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="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
</div>
</a>
</div>
<p className="text-mineshaft-400 text-sm leading-4">
<p className="text-sm leading-4 text-mineshaft-400">
{isConfigured
? `Edit ${destinationDetails.name} Sync`
: `Sync secrets to ${destinationDetails.name}`}

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

@@ -46,7 +46,7 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
return (
<>
<p className="text-mineshaft-200 mb-8 text-sm">
<p className="mb-8 text-sm text-mineshaft-200">
Are you sure you want to remove synced secrets from this {destinationName} destination?
</p>
<div className="mt-8 flex w-full items-center justify-between gap-2">

8
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="text-red mb-2 flex self-start">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
<div className="mb-2 flex self-start text-red">
<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="bg-mineshaft-600 rounded-sm p-2 text-xs">{failureMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div>
)}
</div>

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

@@ -44,7 +44,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
return (
<div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" />
<p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
<p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
</div>
);
}
@@ -58,7 +58,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/>
<div className="h-118 grid 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 (
@@ -70,7 +70,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
? handlePopUpOpen("upgradePlan")
: onSelect(destination)
}
className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border p-4 duration-200"
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
>
<img
src={`/images/integrations/${image}`}
@@ -107,7 +107,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
service you're looking for,`}{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://infisical.com/slack"
rel="noopener noreferrer"
>
@@ -116,7 +116,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
or{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://github.com/Infisical/infisical/discussions"
rel="noopener noreferrer"
>
@@ -127,7 +127,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
</>
}
>
<div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
<div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
<span className="text-xs">
Don&#39;t see the third-party service you&#39;re looking for?
</span>

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

@@ -138,12 +138,12 @@ export const CreateSecretSyncForm = ({
if (showConfirmation)
return (
<>
<div className="rounded-xs border-mineshaft-600 border-l-primary bg-mineshaft-700/80 flex flex-col border border-l-2 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="text-primary mr-1.5" />
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
Secret Sync Behavior
</div>
<p className="text-bunker-200 mt-1 text-sm">
<p className="mt-1 text-sm text-bunker-200">
Secret Syncs are the source of truth for connected third-party services. Any secret,
including associated data, not present or imported in Infisical before syncing will be
overwritten, and changes made directly in the connected service outside of infisical may
@@ -176,7 +176,7 @@ export const CreateSecretSyncForm = ({
<form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
<FormProvider {...formMethods}>
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
<Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
{FORM_TABS.map((tab, index) => (
<Tab
onClick={async (e) => {
@@ -185,9 +185,9 @@ export const CreateSecretSyncForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}}
className={({ selected }) =>
`-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} outline-hidden px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}
@@ -221,7 +221,7 @@ export const CreateSecretSyncForm = ({
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
id="auto-sync-enabled"
thumbClassName="bg-mineshaft-800"
onCheckedChange={onChange}

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

@@ -24,9 +24,9 @@ export const DuplicateDestinationConfirmationModal = ({
destination. Proceeding may cause conflicts or overwrite existing data.
</p>
{duplicateProjectId && (
<p className="text-mineshaft-400 mt-2 text-xs">
<p className="mt-2 text-xs text-mineshaft-400">
Duplicate found in project ID:{" "}
<code className="bg-mineshaft-600 text-mineshaft-200 rounded-sm px-1 py-0.5">
<code className="rounded-sm bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
{duplicateProjectId}
</code>
</p>

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

@@ -46,7 +46,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
return (
<>
<p className="text-bunker-300 mb-4 text-sm">
<p className="mb-4 text-sm text-bunker-300">
Specify the {appName} Connection to use to connect to {connectionName} and configure
destination parameters.
</p>
@@ -89,7 +89,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
name="connection"
/>
{!isPending && !availableConnections?.length && !canCreateConnection && (
<p className="text-yellow -mt-2.5 mb-2.5 text-xs">
<p className="-mt-2.5 mb-2.5 text-xs text-yellow">
<FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
You do not have access to any {appName} Connections. Contact an admin to create one.
</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="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
<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="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
<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="bg-mineshaft-600 text-mineshaft-300 rounded-sm px-0.5 py-px text-sm">
<code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
/demo/path/INFISICAL_{"{{secretKey}}"}
</code>
</>

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

@@ -40,13 +40,13 @@ export const AwsSecretsManagerSyncFields = () => {
<ul className="flex list-disc flex-col gap-3 pl-4">
<li>
<p className="text-mineshaft-300">
<span className="text-bunker-200 font-medium">One-To-One</span>: Each
<span className="font-medium text-bunker-200">One-To-One</span>: Each
Infisical secret will be mapped to a separate AWS Secrets Manager secret.
</p>
</li>
<li>
<p className="text-mineshaft-300">
<span className="text-bunker-200 font-medium">Many-To-One</span>: All
<span className="font-medium text-bunker-200">Many-To-One</span>: All
Infisical secrets will be mapped to a single AWS Secrets Manager secret.
</p>
</li>
@@ -63,7 +63,7 @@ export const AwsSecretsManagerSyncFields = () => {
onChange(val);
setValue("syncOptions.syncSecretMetadataAsTags", false);
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
placeholder="Select an option..."
dropdownContainerClassName="max-w-none"

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

@@ -76,7 +76,7 @@ export const CloudflarePagesSyncFields = () => {
<Select
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
placeholder="Select an environment..."
dropdownContainerClassName="max-w-none"

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

@@ -119,7 +119,7 @@ export const GcpSyncFields = () => {
return (
<li key={name}>
<p className="text-mineshaft-300">
<span className="text-bunker-200 font-medium">{name}</span>: {description}
<span className="font-medium text-bunker-200">{name}</span>: {description}
</p>
</li>
);
@@ -133,7 +133,7 @@ export const GcpSyncFields = () => {
<Select
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
dropdownContainerClassName="max-w-none"
isDisabled={!projectId}

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

@@ -79,7 +79,7 @@ export const GitHubSyncFields = () => {
onValueChange={(val) => {
onChange(val);
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
placeholder="Select a scope..."
dropdownContainerClassName="max-w-none"
@@ -131,7 +131,7 @@ export const GitHubSyncFields = () => {
onChange(val);
setValue("destinationConfig.selectedRepositoryIds", undefined);
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
placeholder="Select visibility..."
dropdownContainerClassName="max-w-none"

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

@@ -41,7 +41,7 @@ const SecretProtectionOption = ({
}) => {
return (
<Switch
className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
id={id}
thumbClassName="bg-mineshaft-800"
onCheckedChange={onChange}
@@ -108,7 +108,7 @@ export const GitLabSyncFields = () => {
setValue("destinationConfig.groupId", "");
setValue("destinationConfig.groupName", "");
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
placeholder="Select a scope..."
dropdownContainerClassName="max-w-none"

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

@@ -135,7 +135,7 @@ export const HumanitecSyncFields = () => {
return (
<li key={name}>
<p className="text-mineshaft-300">
<span className="text-bunker-200 font-medium">{name}</span>: {description}
<span className="font-medium text-bunker-200">{name}</span>: {description}
</p>
</li>
);
@@ -150,7 +150,7 @@ export const HumanitecSyncFields = () => {
onChange(val);
setValue("destinationConfig.env", "");
}}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
placeholder="Select a scope..."
dropdownContainerClassName="max-w-none"

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

@@ -66,7 +66,7 @@ export const RenderSyncFields = () => {
return (
<li key={name}>
<p className="text-mineshaft-300">
<span className="text-bunker-200 font-medium">{name}</span>: {description}
<span className="font-medium text-bunker-200">{name}</span>: {description}
</p>
</li>
);
@@ -78,7 +78,7 @@ export const RenderSyncFields = () => {
<Select
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
placeholder="Select a scope..."
dropdownContainerClassName="max-w-none"

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

@@ -120,7 +120,7 @@ export const TeamCitySyncFields = () => {
)}
/>
<span className="text-bunker-300 text-sm">
<span className="text-sm text-bunker-300">
Not selecting a Build Configuration will sync your secrets to the entire project.
</span>
</>

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