awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-04 15:26:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgraded to tw v4

Browse Source
This commit is contained in:
=
2025-10-09 22:37:42 +05:30
parent 2da35b389d
commit 7b0a51f5cf
669 changed files with 2856 additions and 3143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+622 -768
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
+3 -5
View File
@@ -11,11 +11,9 @@
"lint:fix": "eslint --fix ./src", "lint:fix": "eslint --fix ./src",
"type:check": "tsc --noEmit --project ./tsconfig.app.json" "type:check": "tsc --noEmit --project ./tsconfig.app.json"
}, },
"overrides": { "overrides": {
"sha.js": "2.4.12" "sha.js": "2.4.12"
}, },
"dependencies": { "dependencies": {
"@casl/ability": "^6.7.2", "@casl/ability": "^6.7.2",
"@casl/react": "^4.0.0", "@casl/react": "^4.0.0",
@@ -108,6 +106,7 @@
"@eslint/js": "^9.15.0", "@eslint/js": "^9.15.0",
"@kesills/eslint-config-airbnb-typescript": "^20.0.0", "@kesills/eslint-config-airbnb-typescript": "^20.0.0",
"@stylistic/eslint-plugin": "^2.12.1", "@stylistic/eslint-plugin": "^2.12.1",
"@tailwindcss/postcss": "^4.1.14",
"@tailwindcss/typography": "^0.5.15", "@tailwindcss/typography": "^0.5.15",
"@tanstack/eslint-plugin-router": "^1.87.6", "@tanstack/eslint-plugin-router": "^1.87.6",
"@tanstack/router-devtools": "^1.87.9", "@tanstack/router-devtools": "^1.87.9",
@@ -122,7 +121,6 @@
"@types/react-dom": "^18.3.1", "@types/react-dom": "^18.3.1",
"@types/react-helmet": "^6.1.11", "@types/react-helmet": "^6.1.11",
"@vitejs/plugin-react-swc": "^3.5.0", "@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.1", "eslint": "^8.57.1",
"eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
@@ -135,8 +133,8 @@
"globals": "^15.12.0", "globals": "^15.12.0",
"postcss": "^8.4.49", "postcss": "^8.4.49",
"prettier": "3.4.2", "prettier": "3.4.2",
"prettier-plugin-tailwindcss": "^0.6.9", "prettier-plugin-tailwindcss": "^0.6.14",
"tailwindcss": "^3.4.16", "tailwindcss": "^4.1.14",
"typescript": "~5.6.2", "typescript": "~5.6.2",
"typescript-eslint": "^8.15.0", "typescript-eslint": "^8.15.0",
"vite": "^5.4.18", "vite": "^5.4.18",
frontend/postcss.config.js
+1 -2
View File
@@ -1,6 +1,5 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, '@tailwindcss/postcss': {},
autoprefixer: {},
}, },
} }
frontend/src/components/app-connections/AppConnectionOption.tsx
+2 -2
View File
@@ -26,8 +26,8 @@ export const AppConnectionOption = ({
<p className="truncate">{children}</p> <p className="truncate">{children}</p>
{!props.data.projectId && ( {!props.data.projectId && (
<Tooltip content="This connection belongs to your organization."> <Tooltip content="This connection belongs to your organization.">
<div className="ml-2 mr-auto"> <div className="mr-auto ml-2">
<Badge className="flex h-5 w-min items-center gap-1 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300 hover:text-bunker-300"> <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" /> <FontAwesomeIcon icon={faBuilding} size="sm" />
Organization Organization
</Badge> </Badge>
frontend/src/components/auth/CodeInputStep.tsx
+4 -4
View File
@@ -91,7 +91,7 @@ export default function CodeInputStep({
return ( return (
<div className="mx-auto h-full w-full pb-4 md:px-8"> <div className="mx-auto h-full w-full pb-4 md:px-8">
<p className="text-md flex justify-center text-bunker-200">{t("signup.step2-message")}</p> <p className="text-md flex justify-center text-bunker-200">{t("signup.step2-message")}</p>
<p className="text-md my-1 flex justify-center font-semibold text-bunker-200">{email} </p> <p className="text-md my-1 flex justify-center font-medium text-bunker-200">{email} </p>
<div className="mx-auto hidden w-max min-w-[20rem] md:block"> <div className="mx-auto hidden w-max min-w-[20rem] md:block">
<ReactCodeInput <ReactCodeInput
name="" name=""
@@ -100,7 +100,7 @@ export default function CodeInputStep({
fields={6} fields={6}
onChange={setCode} onChange={setCode}
{...props} {...props}
className="mb-2 mt-6" className="mt-6 mb-2"
/> />
</div> </div>
<div className="mx-auto mt-4 block w-max md:hidden"> <div className="mx-auto mt-4 block w-max md:hidden">
@@ -111,11 +111,11 @@ export default function CodeInputStep({
fields={6} fields={6}
onChange={setCode} onChange={setCode}
{...propsPhone} {...propsPhone}
className="mb-2 mt-2" className="mt-2 mb-2"
/> />
</div> </div>
{codeError && <Error text={t("signup.step2-code-error")} />} {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"> <div className="text-l w-full py-1 text-lg">
<Button <Button
type="submit" type="submit"
frontend/src/components/auth/EnterEmailStep.tsx
+4 -4
View File
@@ -55,7 +55,7 @@ export default function EnterEmailStep({
return ( return (
<div> <div>
<div className="mx-auto w-full md:px-6"> <div className="mx-auto w-full md:px-6">
<p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-xl font-medium text-transparent"> <p className="flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-medium text-transparent">
{t("signup.step1-start")} {t("signup.step1-start")}
</p> </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"> <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" className="h-12"
/> />
{emailError && ( {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. Please enter a valid email.
</p> </p>
)} )}
</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-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"> <div className="text-l w-full py-1 text-lg">
<Button <Button
type="submit" type="submit"
@@ -92,7 +92,7 @@ export default function EnterEmailStep({
</div> </div>
</div> </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"> <Link to="/login">
<button type="button" className="w-max pb-3 duration-200 hover:opacity-90"> <button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
<span className="cursor-pointer text-sm text-mineshaft-400 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"> <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">
frontend/src/components/auth/InitialSignupStep.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default function InitialSignupStep({
return ( return (
<div className="mx-auto flex w-full flex-col items-center justify-center"> <div className="mx-auto flex w-full flex-col items-center justify-center">
<h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent"> <h1 className="mb-8 bg-linear-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
{t("signup.initial-title")} {t("signup.initial-title")}
</h1> </h1>
<RegionSelect /> <RegionSelect />
frontend/src/components/auth/Mfa.tsx
+9 -9
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"> <div className="mb-6 text-center text-lg font-bold text-white">
Your organization requires mobile authentication to be configured. Your organization requires mobile authentication to be configured.
</div> </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 <TotpRegistration
shouldCenterQr shouldCenterQr
onComplete={async () => { onComplete={async () => {
@@ -173,7 +173,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
} }
return ( 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 && ( {!hideLogo && (
<Link to="/"> <Link to="/">
<div className="mb-4 flex justify-center"> <div className="mb-4 flex justify-center">
@@ -184,12 +184,12 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
{method === MfaMethod.EMAIL && ( {method === MfaMethod.EMAIL && (
<> <>
<p className="text-l flex justify-center text-bunker-300">{t("mfa.step2-message")}</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-semibold text-bunker-300">{email}</p> <p className="text-l my-1 flex justify-center font-medium text-bunker-300">{email}</p>
</> </>
)} )}
{method === MfaMethod.TOTP && ( {method === MfaMethod.TOTP && (
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<h2 className="mb-3 text-xl font-semibold text-bunker-100">Two-Factor Authentication</h2> <h2 className="mb-3 text-xl font-medium text-bunker-100">Two-Factor Authentication</h2>
<p className="mx-auto max-w-md text-sm leading-relaxed text-bunker-300"> <p className="mx-auto max-w-md text-sm leading-relaxed text-bunker-300">
{showRecoveryCodeInput {showRecoveryCodeInput
? "Enter one of your backup recovery codes" ? "Enter one of your backup recovery codes"
@@ -207,13 +207,13 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
type="text" type="text"
fields={6} fields={6}
onChange={setMfaCode} onChange={setMfaCode}
className="mb-2 mt-6" className="mt-6 mb-2"
{...codeInputProps} {...codeInputProps}
/> />
</div> </div>
)} )}
{method === MfaMethod.TOTP && ( {method === MfaMethod.TOTP && (
<div className="mb-6 mt-8 flex justify-center"> <div className="mt-8 mb-6 flex justify-center">
<ReactCodeInput <ReactCodeInput
key={showRecoveryCodeInput ? "recovery" : "totp"} key={showRecoveryCodeInput ? "recovery" : "totp"}
name="" name=""
@@ -236,13 +236,13 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
type="text" type="text"
fields={6} fields={6}
onChange={setMfaCode} onChange={setMfaCode}
className="mb-2 mt-2" className="mt-2 mb-2"
{...codeInputPropsPhone} {...codeInputPropsPhone}
/> />
</div> </div>
)} )}
{method === MfaMethod.TOTP && ( {method === MfaMethod.TOTP && (
<div className="mb-6 mt-4 flex justify-center"> <div className="mt-4 mb-6 flex justify-center">
<ReactCodeInput <ReactCodeInput
key={showRecoveryCodeInput ? "recovery-mobile" : "totp-mobile"} key={showRecoveryCodeInput ? "recovery-mobile" : "totp-mobile"}
name="" name=""
@@ -264,7 +264,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
size="md" size="md"
type="submit" type="submit"
isFullWidth isFullWidth
className="h-11 rounded-lg font-medium shadow-sm transition-all duration-200 hover:shadow-md" className="h-11 rounded-lg font-medium shadow-xs transition-all duration-200 hover:shadow-md"
colorSchema="primary" colorSchema="primary"
variant="outline_bg" variant="outline_bg"
isLoading={isLoading} isLoading={isLoading}
frontend/src/components/auth/TeamInviteStep.tsx
+7 -7
View File
@@ -41,26 +41,26 @@ export default function TeamInviteStep(): JSX.Element {
}; };
return ( return (
<div className="min-w-lg mx-auto mb-64 h-full w-max px-8 pb-4 md:mb-32"> <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-gradient-to-b from-white to-bunker-200 bg-clip-text text-2xl font-semibold text-transparent"> <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")} {t("signup.step5-invite-team")}
</p> </p>
<p className="mb-6 mt-4 flex justify-center text-center text-bunker-400 md:mx-8"> <p className="mt-4 mb-6 flex justify-center text-center text-bunker-400 md:mx-8">
{t("signup.step5-subtitle")} {t("signup.step5-subtitle")}
</p> </p>
<div className="mx-auto mb-6 w-max rounded-xl border border-mineshaft-500 bg-mineshaft-800 px-8 pb-4 pt-6 drop-shadow-xl"> <div className="mx-auto mb-6 w-max rounded-xl border border-mineshaft-500 bg-mineshaft-800 px-8 pt-6 pb-4 drop-shadow-xl">
<div> <div>
<div className="pb-1 pl-1 text-sm font-medium text-bunker-300"> <div className="pb-1 pl-1 text-sm font-medium text-bunker-300">
<span>Emails</span> <span>Emails</span>
</div> </div>
<textarea <textarea
className="h-20 w-full min-w-[30rem] rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 placeholder:text-bunker-400 focus:ring-2" className="ring-opacity-70 h-20 w-full min-w-120 rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 ring-primary-800 outline-hidden placeholder:text-bunker-400 focus:ring-2"
value={emails} value={emails}
onChange={(e) => setEmails(e.target.value)} onChange={(e) => setEmails(e.target.value)}
placeholder="[email protected], [email protected]..." placeholder="[email protected], [email protected]..."
/> />
</div> </div>
<div className="mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mb-2 md:mt-4 md:min-w-[30rem] md:max-w-md"> <div className="mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mt-4 md:mb-2 md:max-w-md md:min-w-120">
<Button <Button
onClick={() => { onClick={() => {
if (serverDetails?.emailConfigured) { if (serverDetails?.emailConfigured) {
@@ -84,7 +84,7 @@ export default function TeamInviteStep(): JSX.Element {
onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)} onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
/> />
</div> </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 <Button
onClick={redirectToHome} onClick={redirectToHome}
size="sm" size="sm"
frontend/src/components/auth/UserInfoStep.tsx
+5 -5
View File
@@ -139,7 +139,7 @@ export default function UserInfoStep({
return ( return (
<div className="mx-auto mb-36 h-full w-max rounded-xl md:mb-16 md:px-8"> <div className="mx-auto mb-36 h-full w-max rounded-xl md:mb-16 md:px-8">
<p className="text-medium mx-8 mb-6 flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-xl font-bold text-transparent md:mx-16"> <p className="text-medium mx-8 mb-6 flex justify-center bg-linear-to-b from-white to-bunker-200 bg-clip-text text-xl font-bold text-transparent md:mx-16">
{t("signup.step3-message")} {t("signup.step3-message")}
</p> </p>
<div className="mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800 md:px-8"> <div className="mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800 md:px-8">
@@ -156,7 +156,7 @@ export default function UserInfoStep({
className="h-12" className="h-12"
/> />
{nameError && ( {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 Please, specify your name
</p> </p>
)} )}
@@ -174,7 +174,7 @@ export default function UserInfoStep({
className="h-12" className="h-12"
/> />
{organizationNameError && ( {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 Please, specify your organization name
</p> </p>
)} )}
@@ -219,7 +219,7 @@ export default function UserInfoStep({
<div> <div>
<FontAwesomeIcon <FontAwesomeIcon
icon={faXmark} icon={faXmark}
className="text-md ml-0.5 mr-2.5 text-red" className="text-md mr-2.5 ml-0.5 text-red"
/> />
</div> </div>
<p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p> <p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
@@ -232,7 +232,7 @@ export default function UserInfoStep({
</div> </div>
)} )}
</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"> <div className="text-l w-full py-1 text-lg">
<Button <Button
type="submit" type="submit"
frontend/src/components/basic/Error.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const Error = ({ text }: { text: string }): JSX.Element => { const Error = ({ text }: { text: string }): JSX.Element => {
return ( return (
<div className="relative m-auto flex w-fit flex-row items-center justify-center rounded-full"> <div className="relative m-auto flex w-fit flex-row items-center justify-center rounded-full">
<FontAwesomeIcon icon={faExclamationTriangle} className="mx-2 mb-2 mt-1.5 text-red" /> <FontAwesomeIcon icon={faExclamationTriangle} className="mx-2 mt-1.5 mb-2 text-red" />
{text && <p className="relative top-0 mr-2 py-1 text-sm text-red">{text}</p>} {text && <p className="relative top-0 mr-2 py-1 text-sm text-red">{text}</p>}
</div> </div>
); );
frontend/src/components/basic/InputField.tsx
+8 -8
View File
@@ -40,7 +40,7 @@ const InputField = ({
if (isStatic === true) { if (isStatic === true) {
return ( return (
<div className="my-2 flex w-full max-w-md flex-col justify-center md:my-4"> <div className="my-2 flex w-full max-w-md flex-col justify-center md:my-4">
<p className="mb-0.5 text-sm font-semibold text-gray-400">{label}</p> <p className="mb-0.5 text-sm font-medium text-gray-400">{label}</p>
{text && <p className="mb-2 text-xs text-gray-400">{text}</p>} {text && <p className="mb-2 text-xs text-gray-400">{text}</p>}
<input <input
onChange={(e) => onChangeHandler(e.target.value)} onChange={(e) => onChangeHandler(e.target.value)}
@@ -48,7 +48,7 @@ const InputField = ({
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
required={isRequired} required={isRequired}
className="text-md w-full min-w-16 rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none" className="text-md w-full min-w-16 rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-hidden"
name={name} name={name}
readOnly readOnly
autoComplete={autoComplete} autoComplete={autoComplete}
@@ -60,7 +60,7 @@ const InputField = ({
return ( return (
<div className="w-full flex-col"> <div className="w-full flex-col">
<div className="mb-0.5 flex flex-row items-center text-mineshaft-300"> <div className="mb-0.5 flex flex-row items-center text-mineshaft-300">
<p className="mr-1 text-sm font-semibold">{label}</p> <p className="mr-1 text-sm font-medium">{label}</p>
</div> </div>
<div <div
className={`group relative flex w-full max-w-2xl flex-col justify-center border ${ className={`group relative flex w-full max-w-2xl flex-col justify-center border ${
@@ -75,11 +75,11 @@ const InputField = ({
required={isRequired} required={isRequired}
className={`${ className={`${
blurred 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" error ? "focus:ring-red/50" : "focus:ring-primary/50"
} text-md peer relative w-full min-w-16 rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-none duration-200 focus:ring-4`} } text-md peer relative w-full min-w-16 rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-hidden duration-200 focus:ring-4`}
name={name} name={name}
spellCheck="false" spellCheck="false"
autoComplete={autoComplete} autoComplete={autoComplete}
@@ -101,7 +101,7 @@ const InputField = ({
</button> </button>
)} )}
{blurred && ( {blurred && (
<div className="peer absolute flex h-10 w-fit max-w-xl items-center overflow-hidden 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" /> <p className="ml-2" />
{value {value
.split("") .split("")
@@ -109,7 +109,7 @@ const InputField = ({
.map(() => ( .map(() => (
<FontAwesomeIcon <FontAwesomeIcon
key={guidGenerator()} key={guidGenerator()}
className="mx-0.5 text-xxs" className="text-xxs mx-0.5"
icon={faCircle} icon={faCircle}
/> />
))} ))}
@@ -121,7 +121,7 @@ const InputField = ({
</div> </div>
)} */} )} */}
</div> </div>
{error && <p className="mx-0 mb-2 mt-0.5 max-w-xs text-xs text-red">{errorText}</p>} {error && <p className="mx-0 mt-0.5 mb-2 max-w-xs text-xs text-red">{errorText}</p>}
</div> </div>
); );
}; };
frontend/src/components/integrations/NoEnvironmentsBanner.tsx
+2 -4
View File
@@ -12,10 +12,8 @@ export const NoEnvironmentsBanner = ({ projectId }: IProps) => {
return ( return (
<div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white"> <div className="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"> <div className="flex w-full flex-col text-sm">
<span className="mb-2 text-lg font-semibold"> <span className="mb-2 text-lg font-medium">No environments in your project was found</span>
No environments in your project was found <p>
</span>
<p className="prose">
In order to use integrations, you need to create at least one environment in your project. In order to use integrations, you need to create at least one environment in your project.
</p> </p>
</div> </div>
frontend/src/components/mfa/RecoveryCodesDownload.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export const RecoveryCodesDownload = ({
<Modal isOpen={isOpen} onOpenChange={hasDownloaded ? handleClose : () => {}}> <Modal isOpen={isOpen} onOpenChange={hasDownloaded ? handleClose : () => {}}>
<ModalContent title="Recovery Codes" className="max-w-md"> <ModalContent title="Recovery Codes" className="max-w-md">
<div className="space-y-4"> <div className="space-y-4">
<div className="rounded border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow"> <div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
Save these codes securely. Each can only be used once. Save these codes securely. Each can only be used once.
</div> </div>
frontend/src/components/navigation/NavHeader.tsx
+12 -14
View File
@@ -66,35 +66,33 @@ export default function NavHeader({
return ( return (
<div className="flex flex-row items-center pt-6"> <div className="flex flex-row items-center pt-6">
<div className="mr-2 flex h-5 w-5 min-w-[1.25rem] items-center justify-center rounded-md bg-primary text-sm text-black"> <div className="mr-2 flex h-5 w-5 min-w-5 items-center justify-center rounded-md bg-primary text-sm text-black">
{currentOrg?.name?.charAt(0)} {currentOrg?.name?.charAt(0)}
</div> </div>
<Link <Link
to="/organization/projects" to="/organization/projects"
className="truncate pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary" className="truncate pl-0.5 text-sm font-medium text-primary/80 hover:text-primary"
> >
{currentOrg?.name} {currentOrg?.name}
</Link> </Link>
{isProjectRelated && ( {isProjectRelated && (
<> <>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" /> <FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-xs text-gray-400" />
<div className="truncate text-sm font-semibold text-bunker-300"> <div className="truncate text-sm font-medium text-bunker-300">{currentProject?.name}</div>
{currentProject?.name}
</div>
</> </>
)} )}
{isOrganizationRelated && ( {isOrganizationRelated && (
<> <>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" /> <FontAwesomeIcon icon={faAngleRight} className="mr-3 ml-3 text-xs text-gray-400" />
<div className="text-sm font-semibold text-bunker-300">Organization Settings</div> <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" ? ( {pageName === "Secrets" ? (
<Link <Link
to="/projects/secret-management/$projectId/overview" to="/projects/secret-management/$projectId/overview"
params={{ projectId: currentProject.id }} params={{ projectId: currentProject.id }}
className="text-sm font-semibold text-primary/80 hover:text-primary" className="text-sm font-medium text-primary/80 hover:text-primary"
> >
{pageName} {pageName}
</Link> </Link>
@@ -103,7 +101,7 @@ export default function NavHeader({
)} )}
{currentEnv && secretPath === "/" && ( {currentEnv && secretPath === "/" && (
<> <>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" /> <FontAwesomeIcon icon={faAngleRight} className="mr-1.5 ml-3 text-xs text-gray-400" />
<div className="rounded-md pl-3 hover:bg-bunker-100/10"> <div className="rounded-md pl-3 hover:bg-bunker-100/10">
<Tooltip content="Select environment"> <Tooltip content="Select environment">
<Select <Select
@@ -126,11 +124,11 @@ export default function NavHeader({
)} )}
{isFolderMode && routerEnvSlug && Boolean(secretPathSegments.length) && ( {isFolderMode && routerEnvSlug && Boolean(secretPathSegments.length) && (
<div className="flex items-center space-x-3"> <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 <Link
to="/projects/secret-management/$projectId/secrets/$envSlug" to="/projects/secret-management/$projectId/secrets/$envSlug"
params={{ projectId: currentProject.id, envSlug: routerEnvSlug }} params={{ projectId: currentProject.id, envSlug: routerEnvSlug }}
className="text-sm font-semibold text-primary/80 hover:text-primary" className="text-sm font-medium text-primary/80 hover:text-primary"
> >
{userAvailableEnvs?.find(({ slug }) => slug === currentEnv)?.name} {userAvailableEnvs?.find(({ slug }) => slug === currentEnv)?.name}
</Link> </Link>
@@ -145,7 +143,7 @@ export default function NavHeader({
className="flex items-center space-x-3" className="flex items-center space-x-3"
key={`breadcrumb-secret-path-${folderName}`} 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 ? ( {index + 1 === secretPathSegments?.length ? (
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<span <span
frontend/src/components/navigation/RegionSelect.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ export const RegionSelect = () => {
<span className="mr-2 inline-block w-4">{flag}</span> <span className="mr-2 inline-block w-4">{flag}</span>
{value.toUpperCase()} Region {value.toUpperCase()} Region
</p> </p>
<ul className="ml-6 mt-2 flex flex-col gap-1"> <ul className="mt-2 ml-6 flex flex-col gap-1">
<li> <li>
<FontAwesomeIcon size="xs" className="mr-0.5 text-green" 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} option if you are based in {value === Region.US ? "the" : ""} {label}
frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export const SecretDashboardPathBreadcrumb = ({
type: "info" type: "info"
}); });
}} }}
className="opacity-0 transition duration-75 hover:bg-bunker-100/10 group-hover:opacity-100" className="opacity-0 transition duration-75 group-hover:opacity-100 hover:bg-bunker-100/10"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={!isCopying ? faCopy : faCheck} icon={!isCopying ? faCopy : faCheck}
frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props)
<div className="font-medium">Last Login</div> <div className="font-medium">Last Login</div>
</div> </div>
<div className="mb-2 flex items-center gap-2 text-sm"> <div className="mb-2 flex items-center gap-2 text-sm">
<div className="flex items-center justify-center rounded bg-mineshaft-700 p-3"> <div className="flex items-center justify-center rounded-sm bg-mineshaft-700 p-3">
<FontAwesomeIcon icon={faShield} className="h-4 w-4" /> <FontAwesomeIcon icon={faShield} className="h-4 w-4" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
@@ -22,7 +22,7 @@ export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props)
</div> </div>
</div> </div>
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<div className="flex items-center justify-center rounded bg-mineshaft-700 p-3"> <div className="flex items-center justify-center rounded-sm bg-mineshaft-700 p-3">
<FontAwesomeIcon icon={faClock} className="h-4 w-4" /> <FontAwesomeIcon icon={faClock} className="h-4 w-4" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
frontend/src/components/permissions/AccessTree/AccessTree.tsx
+5 -5
View File
@@ -107,7 +107,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
"mt-4 w-full", "mt-4 w-full",
viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10", viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10",
viewMode === ViewMode.Undocked && viewMode === ViewMode.Undocked &&
"fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-[32rem] lg:w-[34%]" "fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-lg lg:w-[34%]"
)} )}
> >
<div <div
@@ -119,7 +119,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
{viewMode === ViewMode.Docked && ( {viewMode === ViewMode.Docked && (
<div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4"> <div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4">
<div> <div>
<h3 className="text-lg font-semibold text-mineshaft-100">Access Tree</h3> <h3 className="text-lg font-medium text-mineshaft-100">Access Tree</h3>
<p className="text-sm leading-3 text-mineshaft-400"> <p className="text-sm leading-3 text-mineshaft-400">
Visual access policies for the configured role. Visual access policies for the configured role.
</p> </p>
@@ -191,7 +191,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
<SelectItem <SelectItem
key={env.slug} key={env.slug}
value={env.slug} value={env.slug}
className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700" className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
> >
<div className="ml-3 truncate font-medium">{env.name}</div> <div className="ml-3 truncate font-medium">{env.name}</div>
</SelectItem> </SelectItem>
@@ -209,7 +209,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
<Panel position="top-right" className="flex gap-2"> <Panel position="top-right" className="flex gap-2">
<Tooltip position="bottom" align="center" content={expandButtonLabel}> <Tooltip position="bottom" align="center" content={expandButtonLabel}>
<IconButton <IconButton
className="rounded p-2" className="rounded-sm p-2"
colorSchema="secondary" colorSchema="secondary"
variant="plain" variant="plain"
onClick={handleToggleView} onClick={handleToggleView}
@@ -226,7 +226,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
</Tooltip> </Tooltip>
<Tooltip align="end" position="bottom" content={hideButtonLabel}> <Tooltip align="end" position="bottom" content={hideButtonLabel}>
<IconButton <IconButton
className="rounded p-2" className="rounded-sm p-2"
colorSchema="secondary" colorSchema="secondary"
variant="plain" variant="plain"
onClick={onClose} onClick={onClose}
frontend/src/components/permissions/AccessTree/components/AccessTreeErrorBoundary.tsx
+2 -2
View File
@@ -55,13 +55,13 @@ const ErrorDisplay = ({
</p> </p>
</div> </div>
<div className="relative flex flex-1 flex-col overflow-hidden"> <div className="relative flex flex-1 flex-col overflow-hidden">
<pre className="thin-scrollbar w-full flex-1 overflow-y-auto whitespace-pre-wrap rounded bg-mineshaft-700 p-2 text-xs text-mineshaft-100"> <pre className="thin-scrollbar w-full flex-1 overflow-y-auto rounded-sm bg-mineshaft-700 p-2 text-xs whitespace-pre-wrap text-mineshaft-100">
{display} {display}
</pre> </pre>
<IconButton <IconButton
variant="plain" variant="plain"
colorSchema="secondary" colorSchema="secondary"
className="absolute right-4 top-2" className="absolute top-2 right-4"
ariaLabel="Copy secret value" ariaLabel="Copy secret value"
onClick={copyToClipboard} onClick={copyToClipboard}
> >
frontend/src/components/permissions/AccessTree/components/PermissionSimulation.tsx
+5 -5
View File
@@ -46,7 +46,7 @@ export const PermissionSimulation = ({
<Panel position="top-left"> <Panel position="top-left">
<Button <Button
size="xs" size="xs"
className="mr-1 rounded" className="mr-1 rounded-sm"
colorSchema="secondary" colorSchema="secondary"
onClick={handlePermissionSimulation} onClick={handlePermissionSimulation}
rightIcon={ rightIcon={
@@ -65,9 +65,9 @@ export const PermissionSimulation = ({
<Panel <Panel
onClick={handlePermissionSimulation} onClick={handlePermissionSimulation}
position="top-left" position="top-left"
className={`group flex flex-col gap-2 pb-4 pr-4 ${expand ? "" : "cursor-pointer"}`} className={`group flex flex-col gap-2 pr-4 pb-4 ${expand ? "" : "cursor-pointer"}`}
> >
<div className="flex w-[20rem] flex-col gap-1.5 rounded border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200"> <div className="flex w-[20rem] flex-col gap-1.5 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200">
<div> <div>
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<span className="text-sm">Permission Simulation</span> <span className="text-sm">Permission Simulation</span>
@@ -83,7 +83,7 @@ export const PermissionSimulation = ({
</IconButton> </IconButton>
</div> </div>
{expand && ( {expand && (
<p className="mb-2 mt-1 text-xs text-mineshaft-400"> <p className="mt-1 mb-2 text-xs text-mineshaft-400">
Evaluate conditional policies to see what permissions will be granted given a secret Evaluate conditional policies to see what permissions will be granted given a secret
name or tags name or tags
</p> </p>
@@ -121,7 +121,7 @@ export const PermissionSimulation = ({
onValueChange={setEnvironment} onValueChange={setEnvironment}
className="w-full border border-mineshaft-500 capitalize" className="w-full border border-mineshaft-500 capitalize"
position="popper" position="popper"
dropdownContainerClassName="max-w-[19rem]" dropdownContainerClassName="max-w-76"
> >
{environments.map(({ name, slug }) => { {environments.map(({ name, slug }) => {
return ( return (
frontend/src/components/permissions/AccessTree/nodes/FolderNode/FolderNode.tsx
+3 -3
View File
@@ -32,7 +32,7 @@ export const FolderNode = ({
<> <>
<Handle <Handle
type="target" type="target"
className="pointer-events-none !cursor-pointer opacity-0" className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Top} position={Position.Top}
/> />
<div <div
@@ -42,7 +42,7 @@ export const FolderNode = ({
<FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} /> <FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} />
<span>{parentId ? `/${name}` : "/"}</span> <span>{parentId ? `/${name}` : "/"}</span>
</div> </div>
<div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded bg-mineshaft-600 px-2 py-1 text-xs"> <div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-sm bg-mineshaft-600 px-2 py-1 text-xs">
{Object.entries(actions).map(([action, access]) => { {Object.entries(actions).map(([action, access]) => {
const { className, icon } = AccessMap[access]; const { className, icon } = AccessMap[access];
@@ -70,7 +70,7 @@ export const FolderNode = ({
</div> </div>
<Handle <Handle
type="source" type="source"
className="pointer-events-none !cursor-pointer opacity-0" className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Bottom} position={Position.Bottom}
/> />
</> </>
frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/AccessTreeSecretPathInput.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export const AccessTreeSecretPathInput = ({
<div ref={wrapperRef} className="relative"> <div ref={wrapperRef} className="relative">
<div <div
className={twMerge( className={twMerge(
"flex items-center overflow-hidden rounded transition-all duration-300 ease-in-out", "flex items-center overflow-hidden rounded-sm transition-all duration-300 ease-in-out",
isFocused ? "bg-mineshaft-800 shadow-md" : "bg-mineshaft-700", isFocused ? "bg-mineshaft-800 shadow-md" : "bg-mineshaft-700",
isExpanded ? "w-64" : "h-10 w-10" isExpanded ? "w-64" : "h-10 w-10"
)} )}
frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/FolderNodeTooltipContent.tsx
+5 -5
View File
@@ -26,11 +26,11 @@ type ConditionDisplayProps = {
const ConditionDisplay = ({ _key: key, value, operator }: ConditionDisplayProps) => { const ConditionDisplay = ({ _key: key, value, operator }: ConditionDisplayProps) => {
return ( return (
<li> <li>
<span className="font-medium capitalize text-mineshaft-100">{camelCaseToSpaces(key)}</span>{" "} <span className="font-medium text-mineshaft-100 capitalize">{camelCaseToSpaces(key)}</span>{" "}
<span className="text-mineshaft-200"> <span className="text-mineshaft-200">
{formatedConditionsOperatorNames[operator as PermissionConditionOperators]} {formatedConditionsOperatorNames[operator as PermissionConditionOperators]}
</span>{" "} </span>{" "}
<span className="rounded bg-mineshaft-600 p-0.5 font-mono"> <span className="rounded-sm bg-mineshaft-600 p-0.5 font-mono">
{typeof value === "string" ? value : value.join(", ")} {typeof value === "string" ? value : value.join(", ")}
</span> </span>
. .
@@ -45,7 +45,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
case PermissionAccess.Full: case PermissionAccess.Full:
component = ( component = (
<> <>
<div className="flex items-center gap-1.5 capitalize text-green"> <div className="flex items-center gap-1.5 text-green capitalize">
<FontAwesomeIcon icon={faCheckCircle} size="xs" /> <FontAwesomeIcon icon={faCheckCircle} size="xs" />
<span>Full {formatActionName(action)} Permissions</span> <span>Full {formatActionName(action)} Permissions</span>
</div> </div>
@@ -62,7 +62,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
case PermissionAccess.Partial: case PermissionAccess.Partial:
component = ( component = (
<> <>
<div className="flex items-center gap-1.5 capitalize text-yellow"> <div className="flex items-center gap-1.5 text-yellow capitalize">
<FontAwesomeIcon icon={faCircleMinus} className="text-yellow" size="xs" /> <FontAwesomeIcon icon={faCircleMinus} className="text-yellow" size="xs" />
<span>Conditional {formatActionName(action)} Permissions</span> <span>Conditional {formatActionName(action)} Permissions</span>
</div> </div>
@@ -137,7 +137,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
case PermissionAccess.None: case PermissionAccess.None:
component = ( component = (
<> <>
<div className="flex items-center gap-1.5 capitalize text-red"> <div className="flex items-center gap-1.5 text-red capitalize">
<FontAwesomeIcon icon={faCircleXmark} size="xs" /> <FontAwesomeIcon icon={faCircleXmark} size="xs" />
<span>No {formatActionName(action)} Permissions</span> <span>No {formatActionName(action)} Permissions</span>
</div> </div>
frontend/src/components/permissions/AccessTree/nodes/RoleNode.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ export const RoleNode = ({
<> <>
<Handle <Handle
type="target" type="target"
className="pointer-events-none !cursor-pointer opacity-0" className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Top} position={Position.Top}
/> />
<div className="flex h-14 w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500"> <div className="flex h-14 w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500">
@@ -51,7 +51,7 @@ export const RoleNode = ({
</div> </div>
<Handle <Handle
type="source" type="source"
className="pointer-events-none !cursor-pointer opacity-0" className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Bottom} position={Position.Bottom}
/> />
</> </>
frontend/src/components/permissions/AccessTree/nodes/ShowMoreButtonNode.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const ShowMoreButtonNode = ({
<div className="flex h-full w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-2"> <div className="flex h-full w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-2">
<Handle <Handle
type="target" type="target"
className="pointer-events-none !cursor-pointer opacity-0" className="pointer-events-none cursor-pointer! opacity-0"
position={Position.Top} position={Position.Top}
/> />
frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx
+3 -3
View File
@@ -69,16 +69,16 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) =>
label = "Failed to Import Certificates"; label = "Failed to Import Certificates";
icon = faTriangleExclamation; icon = faTriangleExclamation;
tooltipContent = ( tooltipContent = (
<div className="flex flex-col gap-2 whitespace-normal py-1"> <div className="flex flex-col gap-2 py-1 whitespace-normal">
{failureMessage && ( {failureMessage && (
<div> <div>
<div className="mb-2 flex self-start text-red"> <div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" /> <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs"> <div className="text-xs">
{mini ? "Failed to Import Certificates" : "Failure Reason"} {mini ? "Failed to Import Certificates" : "Failure Reason"}
</div> </div>
</div> </div>
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div> <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div> </div>
)} )}
</div> </div>
frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100"> <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" /> <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span> <span>Docs</span>
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx
+3 -3
View File
@@ -69,16 +69,16 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) =>
label = "Failed to Remove Certificates"; label = "Failed to Remove Certificates";
icon = faTriangleExclamation; icon = faTriangleExclamation;
tooltipContent = ( tooltipContent = (
<div className="flex flex-col gap-2 whitespace-normal py-1"> <div className="flex flex-col gap-2 py-1 whitespace-normal">
{failureMessage && ( {failureMessage && (
<div> <div>
<div className="mb-2 flex self-start text-red"> <div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" /> <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs"> <div className="text-xs">
{mini ? "Failed to Remove Certificates" : "Failure Reason"} {mini ? "Failed to Remove Certificates" : "Failure Reason"}
</div> </div>
</div> </div>
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div> <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div> </div>
)} )}
</div> </div>
frontend/src/components/pki-syncs/PkiSyncSelect.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
placeholder="Search options..." placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400" className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/> />
<div className="grid h-[29.5rem] grid-cols-4 content-start gap-2"> <div className="grid h-118 grid-cols-4 content-start gap-2">
{filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => { {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
const { image, name } = PKI_SYNC_MAP[destination]; const { image, name } = PKI_SYNC_MAP[destination];
return ( return (
frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx
+2 -2
View File
@@ -124,7 +124,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
if (showConfirmation) if (showConfirmation)
return ( return (
<> <>
<div className="flex flex-col rounded-sm border border-l-[2px] border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3"> <div className="flex flex-col rounded-xs border border-l-2 border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
<div className="mb-1 flex items-center text-sm"> <div className="mb-1 flex items-center text-sm">
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" /> <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
Certificate Sync Behavior Certificate Sync Behavior
@@ -171,7 +171,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
setSelectedTabIndex((prev) => (isEnabled ? index : prev)); setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}} }}
className={({ selected }) => className={({ selected }) =>
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${ `-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
frontend/src/components/pki-syncs/forms/PkiSyncDetailsFields.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const PkiSyncDetailsFields = () => {
value={value} value={value}
onChange={onChange} onChange={onChange}
placeholder="Describe the purpose of this sync..." placeholder="Describe the purpose of this sync..."
className="!resize-none" className="resize-none!"
rows={4} rows={4}
/> />
</FormControl> </FormControl>
frontend/src/components/project/ProjectOverviewChangeSection.tsx
+2 -2
View File
@@ -85,7 +85,7 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
return ( return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"> <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="justify-betweens flex"> <div className="justify-betweens flex">
<h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Overview</h2> <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Project Overview</h2>
<div className="space-x-2"> <div className="space-x-2">
<Button <Button
variant="outline_bg" variant="outline_bg"
@@ -200,7 +200,7 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
placeholder="Project description" placeholder="Project description"
{...field} {...field}
rows={3} rows={3}
className="thin-scrollbar max-w-md !resize-none bg-mineshaft-800" className="thin-scrollbar max-w-md resize-none! bg-mineshaft-800"
isDisabled={!isAllowed} isDisabled={!isAllowed}
/> />
</FormControl> </FormControl>
frontend/src/components/projects/NewProjectModal.tsx
+3 -3
View File
@@ -202,7 +202,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
<div <div
key={el.value} key={el.value}
className={twMerge( className={twMerge(
"flex cursor-pointer flex-col items-center gap-2 rounded border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600", "flex cursor-pointer flex-col items-center gap-2 rounded-sm border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600",
field.value === el.value && "border-primary-400 bg-mineshaft-600 opacity-100" field.value === el.value && "border-primary-400 bg-mineshaft-600 opacity-100"
)} )}
onClick={() => field.onChange(el.value)} onClick={() => field.onChange(el.value)}
@@ -238,7 +238,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
placeholder="Project description" placeholder="Project description"
{...field} {...field}
rows={3} rows={3}
className="thin-scrollbar w-full !resize-none bg-mineshaft-900" className="thin-scrollbar w-full resize-none! bg-mineshaft-900"
/> />
</FormControl> </FormControl>
)} )}
@@ -333,7 +333,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
</Accordion> </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> <ModalClose>
<Button colorSchema="secondary" variant="plain" className="py-2"> <Button colorSchema="secondary" variant="plain" className="py-2">
Cancel Cancel
frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx
+1 -1
View File
@@ -124,7 +124,7 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100"> <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" /> <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span> <span>Docs</span>
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100"> <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" /> <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span> <span>Docs</span>
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx
+6 -4
View File
@@ -31,13 +31,15 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
position="left" position="left"
className="max-w-sm select-text" className="max-w-sm select-text"
content={ 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>
<div className="mb-2 flex self-start text-red"> <div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" /> <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">Failure Reason</div> <div className="text-xs">Failure Reason</div>
</div> </div>
<div className="break-words rounded bg-mineshaft-600 p-2 text-xs">{errorMessage}</div> <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
{errorMessage}
</div>
</div> </div>
{nextRotationAt && ( {nextRotationAt && (
<span className="text-xs text-mineshaft-300"> <span className="text-xs text-mineshaft-300">
@@ -65,7 +67,7 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
return ( return (
<Badge <Badge
className={twMerge( className={twMerge(
"flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300", "flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300",
className className
)} )}
> >
frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewRotationGeneratedCredentialsDisplay.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ export const ViewRotationGeneratedCredentialsDisplay = ({
<p className="text-sm text-mineshaft-300"> <p className="text-sm text-mineshaft-300">
The active credential set currently mapped to the rotation secrets. The active credential set currently mapped to the rotation secrets.
</p> </p>
<div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2"> <div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-2">
{activeCredentials} {activeCredentials}
</div> </div>
</div> </div>
@@ -38,7 +38,7 @@ export const ViewRotationGeneratedCredentialsDisplay = ({
<p className="text-sm text-mineshaft-300"> <p className="text-sm text-mineshaft-300">
The retired credential set that will be revoked during the next rotation cycle. The retired credential set that will be revoked during the next rotation cycle.
</p> </p>
<div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2"> <div className="flex flex-col gap-x-8 gap-y-2 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-2">
{inactiveCredentials} {inactiveCredentials}
</div> </div>
</div> </div>
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx
+2 -2
View File
@@ -90,7 +90,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
}); });
} }
}} }}
className="bg-mineshaft-700 text-white [color-scheme:dark]" className="bg-mineshaft-700 text-white scheme-dark"
/> />
</FormControl> </FormControl>
); );
@@ -126,7 +126,7 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
}} }}
/> />
{!IS_ROTATION_DUAL_CREDENTIALS[type] && isAutoRotationEnabled && ( {!IS_ROTATION_DUAL_CREDENTIALS[type] && isAutoRotationEnabled && (
<div className="rounded border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow"> <div className="rounded-sm border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
<FontAwesomeIcon icon={faWarning} className="mr-1" /> Due to{" "} <FontAwesomeIcon icon={faWarning} className="mr-1" /> Due to{" "}
{SECRET_ROTATION_MAP[type].name} Rotations rotating a single credential set, auto-rotation {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 may result in service interruptions. If you need to ensure service continuity, we
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const SecretRotationV2DetailsFields = () => {
value={value ?? ""} value={value ?? ""}
onChange={onChange} onChange={onChange}
placeholder="Describe the purpose of this rotation..." placeholder="Describe the purpose of this rotation..."
className="!resize-none" className="resize-none!"
rows={4} rows={4}
/> />
</FormControl> </FormControl>
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx
+1 -1
View File
@@ -192,7 +192,7 @@ export const SecretRotationV2Form = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev)); setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}} }}
className={({ selected }) => className={({ selected }) =>
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${ `-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/Auth0ClientSecretRotationParametersFields.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const Auth0ClientSecretRotationParametersFields = () => {
content={ content={
<> <>
Ensure that your connection has the{" "} Ensure that your connection has the{" "}
<span className="font-semibold">read_clients</span> permission and the application <span className="font-medium">read_clients</span> permission and the application
exists in the connection&#39;s audience. exists in the connection&#39;s audience.
</> </>
} }
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/AzureClientSecretRotationParametersFields.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const AzureClientSecretRotationParametersFields = () => {
content={ content={
<> <>
Ensure that your connection has the{" "} Ensure that your connection has the{" "}
<span className="font-semibold"> <span className="font-medium">
Application.ReadWrite.All, Directory.ReadWrite.All, Application.ReadWrite.All, Directory.ReadWrite.All,
Application.ReadWrite.OwnedBy, user_impersonation and User.Read Application.ReadWrite.OwnedBy, user_impersonation and User.Read
</span>{" "} </span>{" "}
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/LdapPasswordRotationParametersFields.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ export const LdapPasswordRotationParametersFields = () => {
tooltipText={ tooltipText={
<> <>
<span>Determines how the rotation will be performed:</span> <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> <li>
<span className="font-medium">Connection Principal</span> - The Connection <span className="font-medium">Connection Principal</span> - The Connection
principal will rotate the target principal&#39;s password. principal will rotate the target principal&#39;s password.
@@ -130,7 +130,7 @@ export const LdapPasswordRotationParametersFields = () => {
<div className="w-full border-b border-mineshaft-600"> <div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Password Requirements</span> <span className="text-sm text-mineshaft-300">Password Requirements</span>
</div> </div>
<div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3"> <div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
<Controller <Controller
control={control} control={control}
name="parameters.passwordRequirements.length" name="parameters.passwordRequirements.length"
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/RedisCredentialsRotationParametersFields.tsx
+3 -3
View File
@@ -22,7 +22,7 @@ export const RedisCredentialsRotationParametersFields = () => {
defaultValue="" defaultValue=""
render={({ field, fieldState: { error } }) => ( render={({ field, fieldState: { error } }) => (
<FormControl <FormControl
tooltipClassName="max-w-[40rem] w-full" tooltipClassName="max-w-160 w-full"
tooltipText={ tooltipText={
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<p> <p>
@@ -31,7 +31,7 @@ export const RedisCredentialsRotationParametersFields = () => {
</p> </p>
<p> <p>
The default value is{" "} The default value is{" "}
<code className="rounded bg-mineshaft-700 px-1 py-0.5 font-mono font-medium text-bunker-300"> <code className="rounded-sm bg-mineshaft-700 px-1 py-0.5 font-mono font-medium text-bunker-300">
~* +@all ~* +@all
</code> </code>
. You can modify it to suit your needs. . You can modify it to suit your needs.
@@ -64,7 +64,7 @@ export const RedisCredentialsRotationParametersFields = () => {
<div className="w-full border-b border-mineshaft-600"> <div className="w-full border-b border-mineshaft-600">
<span className="text-sm text-mineshaft-300">Password Requirements</span> <span className="text-sm text-mineshaft-300">Password Requirements</span>
</div> </div>
<div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3"> <div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded-sm border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
<Controller <Controller
control={control} control={control}
name="parameters.passwordRequirements.length" name="parameters.passwordRequirements.length"
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlCredentialsRotationParametersFields.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export const SqlCredentialsRotationParametersFields = () => {
to suit your needs. to suit your needs.
</p> </p>
<p className="mb-3 text-sm"> <p className="mb-3 text-sm">
<pre className="max-h-[10rem] overflow-y-auto whitespace-pre-wrap rounded border border-mineshaft-700 bg-mineshaft-800 p-2 text-mineshaft-300"> <pre className="max-h-40 overflow-y-auto rounded-sm border border-mineshaft-700 bg-mineshaft-800 p-2 whitespace-pre-wrap text-mineshaft-300">
{rotationOption!.template.createUserStatement} {rotationOption!.template.createUserStatement}
</pre> </pre>
</p> </p>
frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx
+2 -2
View File
@@ -32,13 +32,13 @@ export const SecretsMappingTable = ({ items }: Props) => {
<tr key={name}> <tr key={name}>
<td className="whitespace-nowrap"> <td className="whitespace-nowrap">
<div className="mb-4 flex h-full items-start justify-center"> <div className="mb-4 flex h-full items-start justify-center">
<Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 whitespace-nowrap border border-mineshaft-600 bg-mineshaft-600 text-bunker-200"> <Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 border border-mineshaft-600 bg-mineshaft-600 whitespace-nowrap text-bunker-200">
<FontAwesomeIcon icon={faKey} /> <FontAwesomeIcon icon={faKey} />
<span>{name}</span> <span>{name}</span>
</Badge> </Badge>
</div> </div>
</td> </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"> <div className="mb-4 flex items-center justify-center">
<FontAwesomeIcon className="text-mineshaft-400" icon={faArrowRight} /> <FontAwesomeIcon className="text-mineshaft-400" icon={faArrowRight} />
</div> </div>
frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100"> <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" /> <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span> <span>Docs</span>
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100"> <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" /> <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span> <span>Docs</span>
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx
+5 -3
View File
@@ -34,13 +34,15 @@ export const SecretScanningScanStatusBadge = ({
position="left" position="left"
className="max-w-sm select-text" className="max-w-sm select-text"
content={ 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>
<div className="mb-2 flex self-start text-red"> <div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" /> <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs">Failure Reason</div> <div className="text-xs">Failure Reason</div>
</div> </div>
<div className="break-words rounded bg-mineshaft-600 p-2 text-xs">{errorMessage}</div> <div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
{errorMessage}
</div>
{scannedAt && ( {scannedAt && (
<div className="mt-1 text-xs text-mineshaft-400"> <div className="mt-1 text-xs text-mineshaft-400">
Attempted {formatDistance(new Date(scannedAt), new Date(), { addSuffix: true })} Attempted {formatDistance(new Date(scannedAt), new Date(), { addSuffix: true })}
frontend/src/components/secret-scanning/forms/SecretScanningDataSourceDetailsFields.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const SecretScanningDataSourceDetailsFields = () => {
value={value ?? ""} value={value ?? ""}
onChange={onChange} onChange={onChange}
placeholder="Provide a description for this data source..." placeholder="Provide a description for this data source..."
className="!resize-none" className="resize-none!"
rows={4} rows={4}
/> />
</FormControl> </FormControl>
frontend/src/components/secret-scanning/forms/SecretScanningDataSourceForm.tsx
+1 -1
View File
@@ -145,7 +145,7 @@ export const SecretScanningDataSourceForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev)); setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}} }}
className={({ selected }) => className={({ selected }) =>
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${ `-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx
+3 -3
View File
@@ -69,16 +69,16 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro
label = "Failed to Import Secrets"; label = "Failed to Import Secrets";
icon = faTriangleExclamation; icon = faTriangleExclamation;
tooltipContent = ( tooltipContent = (
<div className="flex flex-col gap-2 whitespace-normal py-1"> <div className="flex flex-col gap-2 py-1 whitespace-normal">
{failureMessage && ( {failureMessage && (
<div> <div>
<div className="mb-2 flex self-start text-red"> <div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" /> <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs"> <div className="text-xs">
{mini ? "Failed to Import Secrets" : "Failure Reason"} {mini ? "Failed to Import Secrets" : "Failure Reason"}
</div> </div>
</div> </div>
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div> <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div> </div>
)} )}
</div> </div>
frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100"> <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" /> <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span> <span>Docs</span>
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx
+3 -3
View File
@@ -69,16 +69,16 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro
label = "Failed to Remove Secrets"; label = "Failed to Remove Secrets";
icon = faTriangleExclamation; icon = faTriangleExclamation;
tooltipContent = ( tooltipContent = (
<div className="flex flex-col gap-2 whitespace-normal py-1"> <div className="flex flex-col gap-2 py-1 whitespace-normal">
{failureMessage && ( {failureMessage && (
<div> <div>
<div className="mb-2 flex self-start text-red"> <div className="mb-2 flex self-start text-red">
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" /> <FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
<div className="text-xs"> <div className="text-xs">
{mini ? "Failed to Remove Secrets" : "Failure Reason"} {mini ? "Failed to Remove Secrets" : "Failure Reason"}
</div> </div>
</div> </div>
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div> <div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div> </div>
)} )}
</div> </div>
frontend/src/components/secret-syncs/SecretSyncSelect.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
placeholder="Search options..." placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400" className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/> />
<div className="grid h-[29.5rem] grid-cols-4 content-start gap-2"> <div className="grid h-118 grid-cols-4 content-start gap-2">
{filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => { {filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
const { image, name } = SECRET_SYNC_MAP[destination]; const { image, name } = SECRET_SYNC_MAP[destination];
return ( return (
frontend/src/components/secret-syncs/forms/CreateSecretSyncForm.tsx
+2 -2
View File
@@ -138,7 +138,7 @@ export const CreateSecretSyncForm = ({
if (showConfirmation) if (showConfirmation)
return ( return (
<> <>
<div className="flex flex-col rounded-sm border border-l-[2px] border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3"> <div className="flex flex-col rounded-xs border border-l-2 border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
<div className="mb-1 flex items-center text-sm"> <div className="mb-1 flex items-center text-sm">
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" /> <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
Secret Sync Behavior Secret Sync Behavior
@@ -185,7 +185,7 @@ export const CreateSecretSyncForm = ({
setSelectedTabIndex((prev) => (isEnabled ? index : prev)); setSelectedTabIndex((prev) => (isEnabled ? index : prev));
}} }}
className={({ selected }) => className={({ selected }) =>
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${ `-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected selected
? "border-b-2 border-mineshaft-300 text-mineshaft-200" ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300" : "text-bunker-300"
frontend/src/components/secret-syncs/forms/DuplicateDestinationConfirmationModal.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const DuplicateDestinationConfirmationModal = ({
{duplicateProjectId && ( {duplicateProjectId && (
<p className="mt-2 text-xs text-mineshaft-400"> <p className="mt-2 text-xs text-mineshaft-400">
Duplicate found in project ID:{" "} Duplicate found in project ID:{" "}
<code className="rounded bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200"> <code className="rounded-sm bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
{duplicateProjectId} {duplicateProjectId}
</code> </code>
</p> </p>
frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AwsParameterStoreSyncFields.tsx
+3 -3
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 The path is required and will be prepended to the key schema. For example, if you
have a path of{" "} have a path of{" "}
<code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300"> <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
/demo/path/ /demo/path/
</code>{" "} </code>{" "}
and a key schema of{" "} and a key schema of{" "}
<code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300"> <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
INFISICAL_{"{{secretKey}}"} INFISICAL_{"{{secretKey}}"}
</code> </code>
, then the result will be{" "} , then the result will be{" "}
<code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300"> <code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
/demo/path/INFISICAL_{"{{secretKey}}"} /demo/path/INFISICAL_{"{{secretKey}}"}
</code> </code>
</> </>
frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGI
<components.Option isSelected={isSelected} {...props}> <components.Option isSelected={isSelected} {...props}>
<div className="flex flex-row items-center justify-between"> <div className="flex flex-row items-center justify-between">
<p className="truncate">{children}</p> <p className="truncate">{children}</p>
<Badge variant="success" className="ml-1 mr-auto cursor-pointer"> <Badge variant="success" className="mr-auto ml-1 cursor-pointer">
{props.data.slug} {props.data.slug}
</Badge> </Badge>
{isSelected && ( {isSelected && (
frontend/src/components/secret-syncs/forms/SecretSyncDetailsFields.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const SecretSyncDetailsFields = () => {
value={value} value={value}
onChange={onChange} onChange={onChange}
placeholder="Describe the purpose of this sync..." placeholder="Describe the purpose of this sync..."
className="!resize-none" className="resize-none!"
rows={4} rows={4}
/> />
</FormControl> </FormControl>
frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsParameterStoreSyncOptionsFields.tsx
+5 -5
View File
@@ -33,7 +33,7 @@ const AwsTagsSection = () => {
}); });
return ( return (
<div className="mb-4 mt-2 flex flex-col pl-2"> <div className="mt-2 mb-4 flex flex-col pl-2">
<div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto"> <div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
{tagFields.fields.map(({ id: tagFieldId }, i) => ( {tagFields.fields.map(({ id: tagFieldId }, i) => (
<Fragment key={tagFieldId}> <Fragment key={tagFieldId}>
@@ -143,19 +143,19 @@ export const AwsParameterStoreSyncOptionsFields = () => {
<p> <p>
To configure a KMS key, ensure the following permissions are present on the To configure a KMS key, ensure the following permissions are present on the
selected IAM role:{" "} selected IAM role:{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300"> <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:ListAliases&#34; &#34;kms:ListAliases&#34;
</span> </span>
,{" "} ,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300"> <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:DescribeKey&#34; &#34;kms:DescribeKey&#34;
</span> </span>
,{" "} ,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300"> <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:Encrypt&#34; &#34;kms:Encrypt&#34;
</span> </span>
,{" "} ,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300"> <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:Decrypt&#34; &#34;kms:Decrypt&#34;
</span> </span>
. .
frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/AwsSecretsManagerSyncOptionsFields.tsx
+6 -6
View File
@@ -34,7 +34,7 @@ const AwsTagsSection = () => {
}); });
return ( return (
<div className="mb-4 mt-2 flex flex-col pl-2"> <div className="mt-2 mb-4 flex flex-col pl-2">
<div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto"> <div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
{tagFields.fields.map(({ id: tagFieldId }, i) => ( {tagFields.fields.map(({ id: tagFieldId }, i) => (
<Fragment key={tagFieldId}> <Fragment key={tagFieldId}>
@@ -145,19 +145,19 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
<p> <p>
To configure a KMS key, ensure the following permissions are present on the To configure a KMS key, ensure the following permissions are present on the
selected IAM role:{" "} selected IAM role:{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300"> <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:ListAliases&#34; &#34;kms:ListAliases&#34;
</span> </span>
,{" "} ,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300"> <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:DescribeKey&#34; &#34;kms:DescribeKey&#34;
</span> </span>
,{" "} ,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300"> <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:Encrypt&#34; &#34;kms:Encrypt&#34;
</span> </span>
,{" "} ,{" "}
<span className="rounded bg-mineshaft-600 text-mineshaft-300"> <span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
&#34;kms:Decrypt&#34; &#34;kms:Decrypt&#34;
</span> </span>
. .
@@ -224,7 +224,7 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
isChecked={value} isChecked={value}
onCheckedChange={onChange} onCheckedChange={onChange}
> >
<p className="w-[14rem]"> <p className="w-56">
Sync Secret Metadata as Tags{" "} Sync Secret Metadata as Tags{" "}
<Tooltip <Tooltip
className="max-w-md" className="max-w-md"
frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
+2 -2
View File
@@ -224,14 +224,14 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
onCheckedChange={onChange} onCheckedChange={onChange}
isChecked={value} isChecked={value}
> >
<p className="w-[11rem]"> <p className="w-44">
Disable Secret Deletion{" "} Disable Secret Deletion{" "}
<Tooltip <Tooltip
className="max-w-md" className="max-w-md"
content={ content={
<> <>
<p> <p>
When enabled, Infisical will <span className="font-semibold">not</span>{" "} When enabled, Infisical will <span className="font-medium">not</span>{" "}
remove secrets from the destination during a sync. remove secrets from the destination during a sync.
</p> </p>
<p className="mt-4"> <p className="mt-4">
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx
+2 -2
View File
@@ -26,7 +26,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
content={ content={
<Table> <Table>
<THead> <THead>
<Th className="whitespace-nowrap p-2">Key</Th> <Th className="p-2 whitespace-nowrap">Key</Th>
<Th className="p-2">Value</Th> <Th className="p-2">Value</Th>
</THead> </THead>
<TBody> <TBody>
@@ -41,7 +41,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
} }
> >
<div className="w-min"> <div className="w-min">
<Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300"> <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faEye} /> <FontAwesomeIcon icon={faEye} />
<span> <span>
{tags.length} Tag{tags.length > 1 ? "s" : ""} {tags.length} Tag{tags.length > 1 ? "s" : ""}
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx
+2 -2
View File
@@ -58,7 +58,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
content={ content={
<Table> <Table>
<THead> <THead>
<Th className="whitespace-nowrap p-2">Key</Th> <Th className="p-2 whitespace-nowrap">Key</Th>
<Th className="p-2">Value</Th> <Th className="p-2">Value</Th>
</THead> </THead>
<TBody> <TBody>
@@ -73,7 +73,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
} }
> >
<div className="w-min"> <div className="w-min">
<Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300"> <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faEye} /> <FontAwesomeIcon icon={faEye} />
<span> <span>
{tags.length} Tag{tags.length > 1 ? "s" : ""} {tags.length} Tag{tags.length > 1 ? "s" : ""}
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
+5 -2
View File
@@ -191,7 +191,7 @@ export const SecretSyncReviewFields = () => {
{hasDuplicate && ( {hasDuplicate && (
<div className="mb-2 flex items-start rounded-md border border-yellow-600 bg-yellow-900/20 px-3 py-2"> <div className="mb-2 flex items-start rounded-md border border-yellow-600 bg-yellow-900/20 px-3 py-2">
<div className="flex text-sm text-yellow-100"> <div className="flex text-sm text-yellow-100">
<FontAwesomeIcon icon={faWarning} className="mr-2 mt-1 text-yellow-600" /> <FontAwesomeIcon icon={faWarning} className="mt-1 mr-2 text-yellow-600" />
<div> <div>
<p> <p>
Another secret sync in your organization is already configured with the same Another secret sync in your organization is already configured with the same
@@ -199,7 +199,10 @@ export const SecretSyncReviewFields = () => {
</p> </p>
{duplicateProjectId && ( {duplicateProjectId && (
<p className="mt-1 text-xs text-yellow-200"> <p className="mt-1 text-xs text-yellow-200">
Duplicate found in project ID: <code className="rounded bg-yellow-800/50 px-1 py-0.5">{duplicateProjectId}</code> Duplicate found in project ID:{" "}
<code className="rounded-sm bg-yellow-800/50 px-1 py-0.5">
{duplicateProjectId}
</code>
</p> </p>
)} )}
</div> </div>
frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx
+2 -2
View File
@@ -84,7 +84,7 @@ export const SecretReferenceNode = ({
<Collapsible.Trigger <Collapsible.Trigger
className={twMerge( className={twMerge(
hasChildren && "decoration-bunker-4ø00 underline-offset-4 data-[state=open]:underline", hasChildren && "decoration-bunker-4ø00 underline-offset-4 data-[state=open]:underline",
"[&>svg]:data-[state=open]:rotate-[90deg] [&>svg]:data-[state=open]:text-yellow-500" "data-[state=open]:[&>svg]:rotate-90 data-[state=open]:[&>svg]:text-yellow-500"
)} )}
disabled={!hasChildren} disabled={!hasChildren}
> >
@@ -201,7 +201,7 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
/> />
</FormControl> </FormControl>
<FormLabel className="mb-2" label="Reference Tree" /> <FormLabel className="mb-2" label="Reference Tree" />
<div className="thin-scrollbar relative max-h-96 overflow-auto rounded-md border border-mineshaft-600 bg-bunker-700 py-6 text-sm text-mineshaft-200"> <div className="relative max-h-96 thin-scrollbar overflow-auto rounded-md border border-mineshaft-600 bg-bunker-700 py-6 text-sm text-mineshaft-200">
{isError ? ( {isError ? (
<div className="flex items-center justify-center py-4"> <div className="flex items-center justify-center py-4">
<FontAwesomeIcon icon={faExclamationTriangle} className="mr-2 text-red-500" /> <FontAwesomeIcon icon={faExclamationTriangle} className="mr-2 text-red-500" />
frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx
+5 -5
View File
@@ -170,13 +170,13 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
Tag Color Tag Color
</div> </div>
<div className="flex space-x-2"> <div className="flex space-x-2">
<div className="flex items-center justify-center rounded border border-mineshaft-500 bg-mineshaft-900 p-2"> <div className="flex items-center justify-center rounded-sm border border-mineshaft-500 bg-mineshaft-900 p-2">
<div <div
className="h-6 w-6 rounded-full" className="h-6 w-6 rounded-full"
style={{ background: `${selectedTagColor}` }} style={{ background: `${selectedTagColor}` }}
/> />
</div> </div>
<div className="flex flex-grow items-center rounded border-mineshaft-500 bg-mineshaft-900 px-1 pr-2"> <div className="flex grow items-center rounded-sm border-mineshaft-500 bg-mineshaft-900 px-1 pr-2">
{!showHexInput ? ( {!showHexInput ? (
<div className="inline-flex items-center gap-3 pl-3"> <div className="inline-flex items-center gap-3 pl-3">
{secretTagsColors.map(($tagColor: TagColor) => { {secretTagsColors.map(($tagColor: TagColor) => {
@@ -202,7 +202,7 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
})} })}
</div> </div>
) : ( ) : (
<div className="tags-hex-wrapper flex flex-grow items-center px-2"> <div className="tags-hex-wrapper flex grow items-center px-2">
<div className="relative flex items-center rounded-md"> <div className="relative flex items-center rounded-md">
{isValidHexColor(selectedTagColor) && ( {isValidHexColor(selectedTagColor) && (
<div <div
@@ -216,7 +216,7 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
<div className="bg-blue h-7 w-7 rounded-full border border-dashed border-mineshaft-500" /> <div className="bg-blue h-7 w-7 rounded-full border border-dashed border-mineshaft-500" />
)} )}
</div> </div>
<div className="flex-grow"> <div className="grow">
<Input <Input
variant="plain" variant="plain"
value={selectedTagColor} value={selectedTagColor}
@@ -230,7 +230,7 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
<div className="mx-4 h-8 border border-mineshaft-500" /> <div className="mx-4 h-8 border border-mineshaft-500" />
<div className="flex h-7 w-7 items-center justify-center"> <div className="flex h-7 w-7 items-center justify-center">
<div <div
className={`flex h-7 w-7 cursor-pointer items-center justify-center rounded-sm border border-mineshaft-500 bg-mineshaft-900 bg-transparent p-2 hover:ring-2 hover:ring-offset-1 ${ className={`flex h-7 w-7 cursor-pointer items-center justify-center rounded-xs border border-mineshaft-500 bg-mineshaft-900 bg-transparent p-2 hover:ring-2 hover:ring-offset-1 ${
showHexInput ? "tags-conic-bg rounded-full" : "" showHexInput ? "tags-conic-bg rounded-full" : ""
}`} }`}
onClick={() => setShowHexInput((prev) => !prev)} onClick={() => setShowHexInput((prev) => !prev)}
frontend/src/components/v2/AccessRestrictedBanner/AccessRestrictedBanner.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export const AccessRestrictedBanner = ({
) )
}: Props) => { }: Props) => {
return ( return (
<div className="flex items-center rounded-md border border-mineshaft-500 bg-gradient-to-br from-mineshaft-900 to-mineshaft-600 px-16 py-12 text-center text-bunker-300"> <div className="flex items-center rounded-md border border-mineshaft-500 bg-linear-to-br from-mineshaft-900 to-mineshaft-600 px-16 py-12 text-center text-bunker-300">
<div> <div>
<div className="text-4xl font-medium text-bunker-100">{title}</div> <div className="text-4xl font-medium text-bunker-100">{title}</div>
<div className="-mt-1 text-sm">{body}</div> <div className="-mt-1 text-sm">{body}</div>
frontend/src/components/v2/Accordion/Accordion.tsx
+3 -3
View File
@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
<AccordionPrimitive.Header className="flex"> <AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger <AccordionPrimitive.Trigger
className={twMerge( className={twMerge(
"group flex h-11 flex-1 items-center justify-between px-4 py-2 outline-none hover:text-primary data-[state=open]:text-primary", "group flex h-11 flex-1 items-center justify-between px-4 py-2 outline-hidden hover:text-primary data-[state=open]:text-primary",
className className
)} )}
{...props} {...props}
@@ -36,7 +36,7 @@ export const AccordionTrigger = forwardRef<
{children} {children}
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronDown} icon={faChevronDown}
className="text-sm transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180" className="text-sm transition-transform duration-300 ease-[cubic-bezier(0.87,0,0.13,1)] group-data-[state=open]:rotate-180"
aria-hidden aria-hidden
/> />
</AccordionPrimitive.Trigger> </AccordionPrimitive.Trigger>
@@ -53,7 +53,7 @@ export const AccordionContent = forwardRef<
>(({ children, className, childrenClassName, ...props }, forwardedRef) => ( >(({ children, className, childrenClassName, ...props }, forwardedRef) => (
<AccordionPrimitive.Content <AccordionPrimitive.Content
className={twMerge( className={twMerge(
"overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown", "data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down overflow-hidden",
className className
)} )}
{...props} {...props}
frontend/src/components/v2/Alert/Alert.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ const Alert = forwardRef<
</div> </div>
<div className="flex flex-col gap-y-1"> <div className="flex flex-col gap-y-1">
{hideTitle ? null : ( {hideTitle ? null : (
<h5 className="font-medium leading-6 tracking-tight" {...props}> <h5 className="leading-6 font-medium tracking-tight" {...props}>
{defaultTitle} {defaultTitle}
</h5> </h5>
)} )}
frontend/src/components/v2/Blur/Blur.tsx
+2 -2
View File
@@ -11,11 +11,11 @@ export const Blur = ({ className, tooltipText }: IProps) => {
return ( return (
<Tooltip content={tooltipText} className="max-w-md" isDisabled={!tooltipText}> <Tooltip content={tooltipText} className="max-w-md" isDisabled={!tooltipText}>
<div <div
className={twMerge("flex w-80 flex-grow items-center py-1 pl-4 pr-2", className)} className={twMerge("flex w-80 grow items-center py-1 pr-2 pl-4", className)}
tabIndex={0} tabIndex={0}
role="button" role="button"
> >
<span className="blur">********</span> <span className="blur-sm">********</span>
</div> </div>
</Tooltip> </Tooltip>
); );
frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
<ol <ol
ref={ref} ref={ref}
className={twMerge( className={twMerge(
"flex flex-wrap items-center break-words text-sm text-bunker-100", "flex flex-wrap items-center text-sm break-words text-bunker-100",
className className
)} )}
{...props} {...props}
frontend/src/components/v2/Button/Button.tsx
+5 -5
View File
@@ -31,7 +31,7 @@ const buttonVariants = cva(
colorSchema: { colorSchema: {
primary: ["bg-primary", "text-black", "border-primary bg-opacity-90 hover:bg-opacity-100"], primary: ["bg-primary", "text-black", "border-primary bg-opacity-90 hover:bg-opacity-100"],
secondary: ["bg-mineshaft", "text-gray-300", "border-mineshaft hover:bg-opacity-80"], secondary: ["bg-mineshaft", "text-gray-300", "border-mineshaft hover:bg-opacity-80"],
danger: ["!bg-red", "!text-white", "!border-red hover:!bg-opacity-90"], danger: ["bg-red!", "text-white!", "border-red! hover:!bg-opacity-90"],
gray: ["bg-bunker-500", "text-bunker-200"] gray: ["bg-bunker-500", "text-bunker-200"]
}, },
variant: { variant: {
@@ -42,7 +42,7 @@ const buttonVariants = cva(
outline_bg: "", outline_bg: "",
// a constant color not in use on hover or click goes colorSchema color // a constant color not in use on hover or click goes colorSchema color
star: "text-bunker-200 bg-mineshaft-700 border-mineshaft-600", star: "text-bunker-200 bg-mineshaft-700 border-mineshaft-600",
link: "text-primary !p-0 bg-transparent outline-none border-none" link: "text-primary p-0! bg-transparent outline-hidden border-none"
}, },
isDisabled: { isDisabled: {
true: "bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed", true: "bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed",
@@ -84,7 +84,7 @@ const buttonVariants = cva(
colorSchema: "primary", colorSchema: "primary",
variant: "outline_bg", variant: "outline_bg",
className: className:
"bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/[0.1] hover:border-primary/40 text-bunker-200" "bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/10 hover:border-primary/40 text-bunker-200"
}, },
{ {
colorSchema: "secondary", colorSchema: "secondary",
@@ -116,7 +116,7 @@ const buttonVariants = cva(
colorSchema: "danger", colorSchema: "danger",
variant: "outline_bg", variant: "outline_bg",
className: className:
"bg-mineshaft-600 border border-red-500 hover:bg-red/[0.1] hover:border-red/40 text-red-500" "bg-mineshaft-600 border border-red-500 hover:bg-red/10 hover:border-red/40 text-red-500"
}, },
{ {
colorSchema: "primary", colorSchema: "primary",
@@ -198,7 +198,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
: "infisical_loading" : "infisical_loading"
} }
isAutoPlay isAutoPlay
className="absolute w-8 rounded-xl opacity-80 shadow-sm" className="absolute w-8 rounded-xl opacity-80 shadow-xs"
/> />
)} )}
{leftIcon && ( {leftIcon && (
frontend/src/components/v2/Card/Card.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ export type CardTitleProps = {
export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => ( export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
<div <div
className={twMerge( className={twMerge(
"mb-5 break-words border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal", "mb-5 border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal break-words",
className className
)} )}
> >
@@ -35,7 +35,7 @@ export type CardBodyProps = {
}; };
export const CardBody = ({ children, className, style }: CardBodyProps) => ( export const CardBody = ({ children, className, style }: CardBodyProps) => (
<div className={twMerge("px-6 pb-6 pt-0", className)} style={style}> <div className={twMerge("px-6 pt-0 pb-6", className)} style={style}>
{children} {children}
</div> </div>
); );
frontend/src/components/v2/Checkbox/Checkbox.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export const Checkbox = ({
<div className={twMerge("flex items-center font-inter text-bunker-300", containerClassName)}> <div className={twMerge("flex items-center font-inter text-bunker-300", containerClassName)}>
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
className={twMerge( className={twMerge(
"flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400/50 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500", "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-mineshaft-400/50 bg-mineshaft-600 shadow-sm transition-all hover:bg-mineshaft-500",
isDisabled && "bg-bunker-400 hover:bg-bunker-400", isDisabled && "bg-bunker-400 hover:bg-bunker-400",
isChecked && "border-primary/50 bg-primary/30", isChecked && "border-primary/50 bg-primary/30",
Boolean(children) && "mr-3", Boolean(children) && "mr-3",
frontend/src/components/v2/ConfirmActionModal/ConfirmActionModal.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ export const ConfirmActionModal = ({
> >
<FormControl <FormControl
label={ label={
<div className="break-words pb-2 text-sm"> <div className="pb-2 text-sm break-words">
{confirmationMessage || ( {confirmationMessage || (
<> <>
Type <span className="font-bold">{confirmKey}</span> to perform this action Type <span className="font-bold">{confirmKey}</span> to perform this action
frontend/src/components/v2/ContentLoader/ContentLoader.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const ContentLoader = ({ text, frequency = 2000, className, lottieClassNa
return ( return (
<div <div
className={twMerge( className={twMerge(
"container relative mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 px-8 text-mineshaft-50 dark:[color-scheme:dark]", "relative container mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 px-8 text-mineshaft-50 dark:scheme-dark",
className className
)} )}
> >
frontend/src/components/v2/CreatableSelect/CreatableSelect.tsx
+2 -2
View File
@@ -42,9 +42,9 @@ export const CreatableSelect = <T,>({
), ),
placeholder: () => "text-mineshaft-400 text-sm pl-1 py-0.5", placeholder: () => "text-mineshaft-400 text-sm pl-1 py-0.5",
input: () => "pl-1 py-0.5", input: () => "pl-1 py-0.5",
valueContainer: () => `p-1 max-h-[14rem] ${isMulti ? "!overflow-y-scroll" : ""} gap-1`, valueContainer: () => `p-1 max-h-56 ${isMulti ? "overflow-y-scroll!" : ""} gap-1`,
singleValue: () => "leading-7 ml-1", singleValue: () => "leading-7 ml-1",
multiValue: () => "bg-mineshaft-600 rounded items-center py-0.5 px-2 gap-1.5", multiValue: () => "bg-mineshaft-600 rounded-sm items-center py-0.5 px-2 gap-1.5",
multiValueLabel: () => "leading-6 text-sm", multiValueLabel: () => "leading-6 text-sm",
multiValueRemove: () => "hover:text-red text-bunker-400", multiValueRemove: () => "hover:text-red text-bunker-400",
indicatorsContainer: () => "p-1 gap-1", indicatorsContainer: () => "p-1 gap-1",
frontend/src/components/v2/DatePicker/DatePicker.tsx
+2 -2
View File
@@ -120,7 +120,7 @@ export const DatePicker = ({
today: "text-primary border-primary", today: "text-primary border-primary",
selected: " text-mineshaft-100 bg-mineshaft-500", selected: " text-mineshaft-100 bg-mineshaft-500",
root: `text-mineshaft-300 ${defaultClassNames}`, root: `text-mineshaft-300 ${defaultClassNames}`,
[UI.DayButton]: "p-3 rounded hover:text-mineshaft-100", [UI.DayButton]: "p-3 rounded-sm hover:text-mineshaft-100",
[UI.Weekday]: "px-3 pt-3", [UI.Weekday]: "px-3 pt-3",
[UI.Chevron]: "fill-mineshaft-300/70 hover:fill-mineshaft-300", [UI.Chevron]: "fill-mineshaft-300/70 hover:fill-mineshaft-300",
disabled: "text-mineshaft-400 pointer-events-none" disabled: "text-mineshaft-400 pointer-events-none"
@@ -133,7 +133,7 @@ export const DatePicker = ({
type="time" type="time"
value={displayUtc ? localTimeToUTC(timeValue) : timeValue} value={displayUtc ? localTimeToUTC(timeValue) : timeValue}
onChange={handleTimeChange} onChange={handleTimeChange}
className="bg-mineshaft-700 text-white [color-scheme:dark]" className="bg-mineshaft-700 text-white scheme-dark"
/> />
</div> </div>
)} )}
frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ export const DeleteActionModal = ({
> >
<FormControl <FormControl
label={ label={
<div className="break-words pb-2 text-sm"> <div className="pb-2 text-sm break-words">
{deletionMessage || ( {deletionMessage || (
<> <>
Type <span className="font-bold">{deleteKey}</span> to perform this action Type <span className="font-bold">{deleteKey}</span> to perform this action
frontend/src/components/v2/Drawer/Drawer.tsx
+4 -4
View File
@@ -17,14 +17,14 @@ export type DrawerContentProps = DialogPrimitive.DialogContentProps & {
} & VariantProps<typeof drawerContentVariation>; } & VariantProps<typeof drawerContentVariation>;
const drawerContentVariation = cva( const drawerContentVariation = cva(
"fixed ease-in-out duration-300 z-[90] border border-mineshaft-600 drop-shadow-2xl", "fixed ease-in-out duration-300 z-90 border border-mineshaft-600 drop-shadow-2xl",
{ {
variants: { variants: {
direction: { direction: {
right: [ right: [
"right-0 top-0", "right-0 top-0",
"h-full w-96", "h-full w-96",
"data-[state=open]:animate-drawerRightIn data-[state=closed]:animate-drawerRightOut" "data-[state=open]:animate-drawer-right-in data-[state=closed]:animate-drawer-right-out"
] ]
} }
} }
@@ -64,7 +64,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
)} )}
<CardBody <CardBody
className={twMerge( className={twMerge(
"flex-grow overflow-y-auto overflow-x-hidden px-4 pt-4 dark:[color-scheme:dark]", "grow overflow-x-hidden overflow-y-auto px-4 pt-4 dark:scheme-dark",
cardBodyClassName cardBodyClassName
)} )}
> >
@@ -75,7 +75,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
<IconButton <IconButton
variant="plain" variant="plain"
ariaLabel="close" ariaLabel="close"
className="absolute right-6 top-4 rounded text-bunker-400 hover:text-bunker-50" className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
> >
<FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" /> <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
</IconButton> </IconButton>
frontend/src/components/v2/Dropdown/Dropdown.tsx
+8 -8
View File
@@ -24,7 +24,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
{...props} {...props}
ref={forwardedRef} ref={forwardedRef}
className={twMerge( className={twMerge(
"z-30 min-w-[220px] overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade", "data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=top]:animate-slide-down-and-fade z-30 min-w-[220px] overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow-sm will-change-auto",
className className
)} )}
> >
@@ -48,7 +48,7 @@ export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenu
{...props} {...props}
ref={forwardedRef} ref={forwardedRef}
className={twMerge( className={twMerge(
"z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade", "data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=top]:animate-slide-down-and-fade z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow-sm will-change-auto",
className className
)} )}
> >
@@ -66,7 +66,7 @@ export type DropdownLabelProps = DropdownMenuPrimitive.DropdownMenuLabelProps;
export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => ( export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
<DropdownMenuPrimitive.Label <DropdownMenuPrimitive.Label
{...props} {...props}
className={twMerge("px-4 pb-1 pt-2 text-xs text-bunker-400", className)} className={twMerge("px-4 pt-2 pb-1 text-xs text-bunker-400", className)}
/> />
); );
@@ -92,14 +92,14 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Item
{...props} {...props}
className={twMerge( className={twMerge(
"block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700", "block cursor-pointer rounded-xs px-4 py-2 font-inter text-xs text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700",
className, className,
isDisabled ? "pointer-events-none cursor-not-allowed opacity-50" : "" isDisabled ? "pointer-events-none cursor-not-allowed opacity-50" : ""
)} )}
> >
<Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}> <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
{icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>} {icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
<span className="flex-grow text-left">{children}</span> <span className="grow text-left">{children}</span>
{icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>} {icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
</Item> </Item>
</DropdownMenuPrimitive.Item> </DropdownMenuPrimitive.Item>
@@ -126,13 +126,13 @@ export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
<DropdownMenuPrimitive.SubTrigger <DropdownMenuPrimitive.SubTrigger
{...props} {...props}
className={twMerge( className={twMerge(
"block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700", "block cursor-pointer rounded-xs px-4 py-2 font-inter text-xs text-mineshaft-200 outline-hidden data-highlighted:bg-mineshaft-700",
className className
)} )}
> >
<Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}> <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
{icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>} {icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
<span className="flex-grow text-left">{children}</span> <span className="grow text-left">{children}</span>
{icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>} {icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
</Item> </Item>
</DropdownMenuPrimitive.SubTrigger> </DropdownMenuPrimitive.SubTrigger>
@@ -161,7 +161,7 @@ export const DropdownMenuSeparator = forwardRef<
<DropdownMenuPrimitive.Separator <DropdownMenuPrimitive.Separator
ref={ref} ref={ref}
{...props} {...props}
className={twMerge("m-1 h-[1px] bg-gray-700", className)} className={twMerge("m-1 h-px bg-gray-700", className)}
/> />
)); ));
frontend/src/components/v2/Editor/Editor.tsx
+2 -2
View File
@@ -21,7 +21,7 @@ function onError(error: Error) {
} }
const inputVariants = cva( const inputVariants = cva(
"input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2 hover:ring-bunker-400/60 duration-100", "input w-full py-1.5 text-gray-400 placeholder:text-sm placeholder-gray-500/50 outline-hidden focus:ring-2 hover:ring-bunker-400/60 duration-100",
{ {
variants: { variants: {
size: { size: {
@@ -37,7 +37,7 @@ const inputVariants = cva(
variant: { variant: {
filled: ["bg-mineshaft-900", "text-gray-400"], filled: ["bg-mineshaft-900", "text-gray-400"],
outline: ["bg-transparent"], outline: ["bg-transparent"],
plain: "bg-transparent outline-none" plain: "bg-transparent outline-hidden"
}, },
isError: { isError: {
true: "focus:ring-red/50 placeholder-red-300", true: "focus:ring-red/50 placeholder-red-300",
frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx
+5 -5
View File
@@ -81,12 +81,12 @@ export const FilterableSelect = <T,>({
}} }}
classNames={{ classNames={{
container: ({ isDisabled }) => container: ({ isDisabled }) =>
twMerge("w-full font-inter text-sm", isDisabled && "!pointer-events-auto opacity-50"), twMerge("w-full font-inter text-sm", isDisabled && "pointer-events-auto! opacity-50"),
control: ({ isFocused, isDisabled }) => control: ({ isFocused, isDisabled }) =>
twMerge( twMerge(
isFocused ? "border-primary-400/50" : "border-mineshaft-600", isFocused ? "border-primary-400/50" : "border-mineshaft-600",
`w-full rounded-md border bg-mineshaft-900 p-0.5 font-inter text-mineshaft-200 ${ `w-full rounded-md border bg-mineshaft-900 p-0.5 font-inter text-mineshaft-200 ${
isDisabled ? "!cursor-not-allowed" : "hover:cursor-pointer hover:border-gray-400" isDisabled ? "cursor-not-allowed!" : "hover:cursor-pointer hover:border-gray-400"
} ` } `
), ),
placeholder: () => placeholder: () =>
@@ -94,10 +94,10 @@ export const FilterableSelect = <T,>({
input: () => `pl-1 ${isMulti ? "py-[0.22rem]" : ""}`, input: () => `pl-1 ${isMulti ? "py-[0.22rem]" : ""}`,
valueContainer: () => valueContainer: () =>
`px-1 max-h-[8.2rem] ${ `px-1 max-h-[8.2rem] ${
isMulti ? "!overflow-y-auto thin-scrollbar py-1" : "py-[0.1rem]" isMulti ? "overflow-y-auto! thin-scrollbar py-1" : "py-[0.1rem]"
} gap-1`, } gap-1`,
singleValue: () => "leading-7 ml-1", singleValue: () => "leading-7 ml-1",
multiValue: () => "bg-mineshaft-600 text-sm rounded items-center py-0.5 px-2 gap-1.5", multiValue: () => "bg-mineshaft-600 text-sm rounded-sm items-center py-0.5 px-2 gap-1.5",
multiValueLabel: () => "leading-6 text-sm", multiValueLabel: () => "leading-6 text-sm",
multiValueRemove: () => "hover:text-red text-bunker-400", multiValueRemove: () => "hover:text-red text-bunker-400",
indicatorsContainer: () => "p-1 gap-1", indicatorsContainer: () => "p-1 gap-1",
@@ -112,7 +112,7 @@ export const FilterableSelect = <T,>({
twMerge( twMerge(
isFocused && "bg-mineshaft-700 active:bg-mineshaft-600", isFocused && "bg-mineshaft-700 active:bg-mineshaft-600",
isSelected && "text-mineshaft-200", isSelected && "text-mineshaft-200",
"rounded px-3 py-2 text-xs hover:cursor-pointer" "rounded-sm px-3 py-2 text-xs hover:cursor-pointer"
), ),
noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md", noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md",
loadingMessage: () => "text-mineshaft-400 p-2 rounded-md" loadingMessage: () => "text-mineshaft-400 p-2 rounded-md"
frontend/src/components/v2/FontAwesomeSymbol/FontAwesomeSymbol.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ export const FontAwesomeSymbol = forwardRef<HTMLDivElement, Props>(
({ symbolName, ...props }, ref) => { ({ symbolName, ...props }, ref) => {
return ( return (
<div ref={ref} {...props}> <div ref={ref} {...props}>
<svg className="w-inherit h-inherit"> <svg className="h-inherit w-inherit">
<use href={`#${symbolName}`} /> <use href={`#${symbolName}`} />
</svg> </svg>
</div> </div>
frontend/src/components/v2/FormControl/FormControl.tsx
+2 -2
View File
@@ -36,7 +36,7 @@ export const FormLabel = ({
> >
{label} {label}
{isRequired && <span className="ml-1 text-red">*</span>} {isRequired && <span className="ml-1 text-red">*</span>}
{isOptional && <span className="ml-1 text-xs italic text-gray-500">- Optional</span>} {isOptional && <span className="ml-1 text-xs text-gray-500 italic">- Optional</span>}
{icon && !tooltipText && ( {icon && !tooltipText && (
<span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200"> <span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
{icon} {icon}
@@ -58,7 +58,7 @@ export type FormHelperTextProps = {
export const FormHelperText = ({ isError, text }: FormHelperTextProps) => ( export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
<div <div
className={twMerge( className={twMerge(
"mt-2 flex items-center font-inter text-xs text-mineshaft-300 text-opacity-90", "text-opacity-90 mt-2 flex items-center font-inter text-xs text-mineshaft-300",
isError && "text-red-600" isError && "text-red-600"
)} )}
> >
frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const GenericFieldLabel = ({
{children ? ( {children ? (
<p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p> <p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p>
) : ( ) : (
<p className="text-sm italic text-mineshaft-400/50">None</p> <p className="text-sm text-mineshaft-400/50 italic">None</p>
)} )}
</div> </div>
); );
frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const HeaderResizer = ({
style={{ left: `calc(50% + ${scrollOffset}px)`, top: heightOffset }} style={{ left: `calc(50% + ${scrollOffset}px)`, top: heightOffset }}
className="pointer-events-none absolute z-30 -translate-x-1/2" className="pointer-events-none absolute z-30 -translate-x-1/2"
> >
<div className="h-1 w-8 rounded bg-gray-400 opacity-50" /> <div className="h-1 w-8 rounded-sm bg-gray-400 opacity-50" />
</div> </div>
</> </>
); );
frontend/src/components/v2/HoverCard/HoverCard.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export const HoverObject = ({ text, icon, color }: Props): JSX.Element => (
</a> </a>
</HoverCard.Trigger> </HoverCard.Trigger>
<HoverCard.Portal> <HoverCard.Portal>
<HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}> <HoverCard.Content className="HoverCardContent z-300" sideOffset={5}>
<div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 drop-shadow-xl"> <div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 drop-shadow-xl">
<div style={{ display: "flex", flexDirection: "column", gap: 15 }}> <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
<div> <div>
frontend/src/components/v2/IconButton/IconButton.tsx
+2 -2
View File
@@ -42,7 +42,7 @@ const iconButtonVariants = cva(
false: "" false: ""
}, },
size: { size: {
xs: ["text-xs", "rounded-sm", "py-1.5", "px-2"], xs: ["text-xs", "rounded-xs", "py-1.5", "px-2"],
sm: ["text-sm", "py-3", "px-3"], sm: ["text-sm", "py-3", "px-3"],
md: ["text-md", "py-4", "px-4"], md: ["text-md", "py-4", "px-4"],
lg: ["text-lg", "py-6", "px-6"] lg: ["text-lg", "py-6", "px-6"]
@@ -58,7 +58,7 @@ const iconButtonVariants = cva(
colorSchema: "primary", colorSchema: "primary",
variant: "outline_bg", variant: "outline_bg",
className: className:
"bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100" "bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/15 hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100"
}, },
{ {
colorSchema: "danger", colorSchema: "danger",
frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+3 -3
View File
@@ -334,7 +334,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
<Popover.Content <Popover.Content
align="start" align="start"
onOpenAutoFocus={(e) => e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()}
className="relative top-2 z-[100] max-h-64 overflow-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md" className="relative top-2 z-100 max-h-64 overflow-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
style={{ style={{
width: "var(--radix-popover-trigger-width)" width: "var(--radix-popover-trigger-width)"
}} }}
@@ -369,7 +369,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
className="flex w-full items-center justify-between border-mineshaft-600 text-left" className="flex w-full items-center justify-between border-mineshaft-600 text-left"
key={`secret-reference-secret-${i + 1}`} key={`secret-reference-secret-${i + 1}`}
> >
<div className="text-md relative flex w-full cursor-default select-none items-center justify-between px-2 py-2 opacity-75 outline-none transition-all"> <div className="text-md relative flex w-full cursor-default items-center justify-between px-2 py-2 opacity-75 outline-hidden transition-all select-none">
<div className="flex w-full items-start gap-2"> <div className="flex w-full items-start gap-2">
<div className="mt-1 flex items-center">{entryIcon}</div> <div className="mt-1 flex items-center">{entryIcon}</div>
<div className="text-md w-10/12 truncate text-left"> <div className="text-md w-10/12 truncate text-left">
@@ -401,7 +401,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
<div <div
className={`${ className={`${
highlightedIndex === i ? "bg-mineshaft-500" : "" highlightedIndex === i ? "bg-mineshaft-500" : ""
} text-md relative flex w-full cursor-pointer select-none items-center justify-between px-2 py-2 outline-none transition-all hover:bg-mineshaft-700 data-[highlighted]:bg-mineshaft-700`} } text-md relative flex w-full cursor-pointer items-center justify-between px-2 py-2 outline-hidden transition-all select-none hover:bg-mineshaft-700 data-highlighted:bg-mineshaft-700`}
> >
<div className="flex w-full items-start gap-2"> <div className="flex w-full items-start gap-2">
<div className="mt-1 flex items-center">{entryIcon}</div> <div className="mt-1 flex items-center">{entryIcon}</div>
frontend/src/components/v2/Input/Input.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ type Props = {
}; };
const inputVariants = cva( const inputVariants = cva(
"input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2 hover:ring-bunker-400/60 duration-100", "input w-full py-1.5 text-gray-400 placeholder:text-sm placeholder-gray-500/50 outline-hidden focus:ring-2 hover:ring-bunker-400/60 duration-100",
{ {
variants: { variants: {
size: { size: {
@@ -32,7 +32,7 @@ const inputVariants = cva(
variant: { variant: {
filled: ["bg-mineshaft-900", "text-gray-400"], filled: ["bg-mineshaft-900", "text-gray-400"],
outline: ["bg-transparent"], outline: ["bg-transparent"],
plain: "bg-transparent outline-none" plain: "bg-transparent outline-hidden"
}, },
isError: { isError: {
true: "focus:ring-red/50 placeholder-red-300", true: "focus:ring-red/50 placeholder-red-300",
frontend/src/components/v2/LeaveProjectModal/LeaveProjectModal.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ export const LeaveProjectModal = ({
> >
<FormControl <FormControl
label={ label={
<div className="break-words pb-2 text-sm"> <div className="pb-2 text-sm break-words">
Type <span className="font-bold">{deleteKey}</span> to leave the project Type <span className="font-bold">{deleteKey}</span> to leave the project
</div> </div>
} }
frontend/src/components/v2/Menu/Menu.tsx
+3 -3
View File
@@ -40,7 +40,7 @@ export const MenuItem = <T extends ElementType = "button">({
type="button" type="button"
role="menuitem" role="menuitem"
className={twMerge( className={twMerge(
"duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-2 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700", "group relative mt-0.5 flex w-full cursor-pointer items-center rounded-sm px-2 py-2 font-inter text-sm text-bunker-100 transition-all duration-50 hover:bg-mineshaft-700",
isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600", isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
isDisabled && "cursor-not-allowed hover:bg-transparent", isDisabled && "cursor-not-allowed hover:bg-transparent",
className className
@@ -49,7 +49,7 @@ export const MenuItem = <T extends ElementType = "button">({
{...props} {...props}
> >
{leftIcon} {leftIcon}
{children && <span className="flex-grow whitespace-nowrap text-left">{children}</span>} {children && <span className="grow text-left whitespace-nowrap">{children}</span>}
{description && <span className="mt-2 text-xs">{description}</span>} {description && <span className="mt-2 text-xs">{description}</span>}
</Item> </Item>
); );
@@ -65,7 +65,7 @@ export type MenuGroupProps = {
export const MenuGroup = ({ children, title, className }: MenuGroupProps): JSX.Element => ( export const MenuGroup = ({ children, title, className }: MenuGroupProps): JSX.Element => (
<> <>
<li className={twMerge("px-2 pt-3 text-xs font-medium uppercase text-gray-400", className)}> <li className={twMerge("px-2 pt-3 text-xs font-medium text-gray-400 uppercase", className)}>
{title} {title}
</li> </li>
{children} {children}
frontend/src/components/v2/Modal/Modal.tsx
+4 -4
View File
@@ -33,14 +33,14 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
) => ( ) => (
<DialogPrimitive.Portal> <DialogPrimitive.Portal>
<DialogPrimitive.Overlay <DialogPrimitive.Overlay
className={twMerge("fixed inset-0 z-30 h-full w-full animate-fadeIn", overlayClassName)} className={twMerge("animate-fade-in fixed inset-0 z-30 h-full w-full", overlayClassName)}
style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }} style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
/> />
<DialogPrimitive.Content {...props} ref={forwardedRef}> <DialogPrimitive.Content {...props} ref={forwardedRef}>
<Card <Card
isRounded isRounded
className={twMerge( className={twMerge(
"thin-scrollbar fixed left-1/2 top-1/2 z-30 max-w-xl -translate-x-2/4 -translate-y-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]", "animate-pop-in fixed top-1/2 left-1/2 z-30 thin-scrollbar max-w-xl -translate-x-2/4 -translate-y-2/4 border border-mineshaft-600 drop-shadow-2xl dark:scheme-dark",
className className
)} )}
style={{ maxHeight: "90%" }} style={{ maxHeight: "90%" }}
@@ -51,7 +51,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
</DialogPrimitive.Title> </DialogPrimitive.Title>
)} )}
<CardBody <CardBody
className={twMerge("overflow-y-auto overflow-x-hidden", bodyClassName)} className={twMerge("overflow-x-hidden overflow-y-auto", bodyClassName)}
style={{ maxHeight: "90%" }} style={{ maxHeight: "90%" }}
> >
{children} {children}
@@ -61,7 +61,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
<IconButton <IconButton
variant="plain" variant="plain"
ariaLabel="close" ariaLabel="close"
className="absolute right-6 top-4 rounded text-bunker-400 hover:text-bunker-50" className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
> >
<FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" /> <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
</IconButton> </IconButton>
frontend/src/components/v2/NoticeBanner/NoticeBanner.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const NoticeBanner = ({ icon = faWarning, title, children, className }: P
> >
<FontAwesomeIcon icon={icon} className="pr-6 text-4xl text-white/80" /> <FontAwesomeIcon icon={icon} className="pr-6 text-4xl text-white/80" />
<div className="flex w-full flex-col text-sm"> <div className="flex w-full flex-col text-sm">
<div className="mb-2 text-lg font-semibold">{title}</div> <div className="mb-2 text-lg font-medium">{title}</div>
<div>{children}</div> <div>{children}</div>
</div> </div>
</div> </div>
frontend/src/components/v2/PageHeader/PageHeader.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export const PageHeader = ({ title, description, children, className }: Props) =
<div className={twMerge("mb-4 w-full", className)}> <div className={twMerge("mb-4 w-full", className)}>
<div className="flex w-full justify-between"> <div className="flex w-full justify-between">
<div className="w-full"> <div className="w-full">
<h1 className="mr-4 text-3xl font-semibold capitalize text-white">{title}</h1> <h1 className="mr-4 text-3xl font-medium text-white capitalize">{title}</h1>
</div> </div>
<div className="flex items-center gap-2">{children}</div> <div className="flex items-center gap-2">{children}</div>
</div> </div>
frontend/src/components/v2/Pagination/Pagination.tsx
+2 -2
View File
@@ -94,7 +94,7 @@ export const Pagination = ({
onClick={() => onChangePage(1)} onClick={() => onChangePage(1)}
isDisabled={!canGoFirst} isDisabled={!canGoFirst}
> >
<FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronLeft} /> <FontAwesomeIcon className="absolute top-1 left-2.5 text-xs" icon={faChevronLeft} />
<FontAwesomeIcon className="text-xs" icon={faChevronLeft} /> <FontAwesomeIcon className="text-xs" icon={faChevronLeft} />
</IconButton> </IconButton>
<IconButton <IconButton
@@ -120,7 +120,7 @@ export const Pagination = ({
onClick={() => onChangePage(upperLimit)} onClick={() => onChangePage(upperLimit)}
isDisabled={!canGoLast} isDisabled={!canGoLast}
> >
<FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronRight} /> <FontAwesomeIcon className="absolute top-1 left-2.5 text-xs" icon={faChevronRight} />
<FontAwesomeIcon className="text-xs" icon={faChevronRight} /> <FontAwesomeIcon className="text-xs" icon={faChevronRight} />
</IconButton> </IconButton>
</div> </div>

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