feat: upgraded to tw v4

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
@@ -14,8 +14,8 @@ export const PersonalSettingsPage = () => {
</Helmet>
<div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
<div className="w-full max-w-6xl">
<div className="mb-6 mt-6">
<p className="text-3xl font-semibold text-gray-200">{t("settings.personal.title")}</p>
<div className="mt-6 mb-6">
<p className="text-3xl font-medium text-gray-200">{t("settings.personal.title")}</p>
</div>
<PersonalTabGroup />
</div>
@@ -15,7 +15,7 @@ export const APIKeySection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-8 flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">
<p className="text-xl font-medium text-mineshaft-100">
{t("settings.personal.api-keys.title")}
</p>
<Tooltip content="API Keys are deprecated and will be removed in the future.">
@@ -164,7 +164,7 @@ export const AddAPIKeyModal = ({ popUp, handlePopUpToggle }: Props) => {
</div>
</form>
) : (
<div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<div className="mt-2 mr-2 mb-3 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all">{newAPIKey}</p>
<IconButton
ariaLabel="copy icon"
@@ -173,7 +173,7 @@ export const AddAPIKeyModal = ({ popUp, handlePopUpToggle }: Props) => {
onClick={copyTokenToClipboard}
>
<FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
<span className="group-hover:animate-fade-in absolute -top-20 -left-8 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
Click to copy
</span>
</IconButton>
@@ -93,9 +93,7 @@ export const AuthMethodSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">
Authentication methods
</h2>
<h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Authentication methods</h2>
<p className="mb-4 text-gray-400">
By enabling a SSO provider, you are allowing an account with that provider which uses the
same email address as your existing Infisical account to be able to log in to Infisical.
@@ -167,7 +167,7 @@ export const ChangeEmailSection = () => {
return (
<>
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Change email</h2>
<h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Change email</h2>
<form onSubmit={emailForm.handleSubmit(handleEmailSubmit)}>
<div className="max-w-md">
@@ -119,7 +119,7 @@ export const ChangePasswordSection = () => {
onSubmit={handleSubmit(onFormSubmit)}
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
>
<h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Change password</h2>
<h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Change password</h2>
<div className="max-w-md">
<Controller
defaultValue=""
@@ -162,7 +162,7 @@ export const ChangePasswordSection = () => {
return (
<div className="items-top ml-1 flex flex-row justify-start" key={key}>
<div>
<FontAwesomeIcon icon={faXmark} className="text-md ml-0.5 mr-2.5 text-red" />
<FontAwesomeIcon icon={faXmark} className="text-md mr-2.5 ml-0.5 text-red" />
</div>
<p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
</div>
@@ -36,7 +36,7 @@ export const DeleteAccountSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-4 text-xl font-semibold text-mineshaft-100">Danger Zone</p>
<p className="mb-4 text-xl font-medium text-mineshaft-100">Danger Zone</p>
<Button
isLoading={isPending}
colorSchema="danger"
@@ -32,7 +32,7 @@ export const PersonalTabGroup = () => {
<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">
<FontAwesomeIcon icon={faWarning} className="pr-6 text-4xl text-white/80" />
<div className="flex w-full flex-col text-sm">
<span className="mb-4 text-lg font-semibold">Deprecation Notice</span>
<span className="mb-4 text-lg font-medium">Deprecation Notice</span>
<p>
API Keys are being deprecated in favor of Machine Identities.
<br />
@@ -41,7 +41,7 @@ export const PersonalTabGroup = () => {
<a
href="https://infisical.com/blog/deprecating-api-keys"
target="_blank"
className="font-semibold text-primary-400"
className="font-medium text-primary-400"
rel="noreferrer"
>
here
@@ -51,7 +51,7 @@ export const PersonalTabGroup = () => {
<a
href="https://infisical.com/docs/documentation/platform/identities/overview"
target="_blank"
className="font-semibold text-primary-400"
className="font-medium text-primary-400"
rel="noreferrer"
>
Learn more about Machine Identities
@@ -284,7 +284,7 @@ export const MFASection = () => {
}}
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
>
<h2 className="mb-6 text-xl font-semibold text-mineshaft-100">Two-factor Authentication</h2>
<h2 className="mb-6 text-xl font-medium text-mineshaft-100">Two-factor Authentication</h2>
{user && (
<div className="space-y-4">
@@ -332,7 +332,7 @@ export const MFASection = () => {
{showMobileAuthSetup && !totpConfiguration?.isVerified && (
<div className="space-y-6">
<h3 className="mb-6 text-lg font-semibold text-mineshaft-100">
<h3 className="mb-6 text-lg font-medium text-mineshaft-100">
Setup Mobile Authenticator
</h3>
@@ -366,7 +366,7 @@ export const MFASection = () => {
<div>
<p className="mb-2 text-xs text-mineshaft-400">
Can&apos;t scan? Enter this code manually:{" "}
<code className="rounded bg-mineshaft-700 px-3 py-1 font-mono text-sm text-mineshaft-100">
<code className="rounded-sm bg-mineshaft-700 px-3 py-1 font-mono text-sm text-mineshaft-100">
{totpRegistration.otpUrl.split("secret=")[1]?.split("&")[0] ||
"Loading..."}
</code>
@@ -446,7 +446,7 @@ export const MFASection = () => {
{user?.isMfaEnabled && totpConfiguration?.isVerified && (
<div className="mt-8 border-t border-mineshaft-600 pt-6">
<h3 className="mb-4 text-lg font-semibold text-mineshaft-100">
<h3 className="mb-4 text-lg font-medium text-mineshaft-100">
Mobile Authenticator Management
</h3>
@@ -21,7 +21,7 @@ export const SessionsSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-8 flex justify-between">
<h2 className="flex-1 text-xl font-semibold text-mineshaft-100">Sessions</h2>
<h2 className="flex-1 text-xl font-medium text-mineshaft-100">Sessions</h2>
<Button
colorSchema="secondary"
type="submit"
@@ -50,7 +50,7 @@ export const UserNameSection = (): JSX.Element => {
onSubmit={handleSubmit(onFormSubmit)}
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
>
<p className="mb-4 text-xl font-semibold text-mineshaft-100">Name</p>
<p className="mb-4 text-xl font-medium text-mineshaft-100">Name</p>
<div className="mb-2 max-w-md">
<Controller
defaultValue=""