awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 22:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvement: minor design nits

Browse Source
This commit is contained in:
Scott Wilson
2025-09-26 15:22:47 -07:00
parent 890ab4d806
commit 5beb347fd2
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/user/PersonalSettingsPage/components/SecuritySection/MFASection.tsx
+10 -7
View File
@@ -288,10 +288,10 @@ export const MFASection = () => {
{user && ( {user && (
<div className="space-y-4"> <div className="space-y-4">
<div className="max-w-md"> <div className="max-w-sm">
<FormControl <FormControl
label="Enable 2-factor authentication" label="Enable two-factor authentication"
helperText="Adds an extra layer of security to your account" helperText="Protect your account with an additional verification step"
> >
<Select <Select
value={formData.isMfaEnabled ? "enabled" : "disabled"} value={formData.isMfaEnabled ? "enabled" : "disabled"}
@@ -299,6 +299,8 @@ export const MFASection = () => {
handleFormDataChange("isMfaEnabled", value === "enabled") handleFormDataChange("isMfaEnabled", value === "enabled")
} }
className="w-full" className="w-full"
position="popper"
dropdownContainerClassName="max-w-none"
> >
<SelectItem value="disabled">Disabled</SelectItem> <SelectItem value="disabled">Disabled</SelectItem>
<SelectItem value="enabled">Enabled</SelectItem> <SelectItem value="enabled">Enabled</SelectItem>
@@ -307,7 +309,7 @@ export const MFASection = () => {
</div> </div>
{formData.isMfaEnabled && ( {formData.isMfaEnabled && (
<div className="max-w-md"> <div className="max-w-sm">
<FormControl <FormControl
label="Authentication method" label="Authentication method"
helperText="Choose your preferred method for two-factor authentication" helperText="Choose your preferred method for two-factor authentication"
@@ -318,6 +320,8 @@ export const MFASection = () => {
handleFormDataChange("selectedMfaMethod", value as MfaMethod) handleFormDataChange("selectedMfaMethod", value as MfaMethod)
} }
className="w-full" className="w-full"
position="popper"
dropdownContainerClassName="max-w-none"
> >
<SelectItem value={MfaMethod.EMAIL}>Email</SelectItem> <SelectItem value={MfaMethod.EMAIL}>Email</SelectItem>
<SelectItem value={MfaMethod.TOTP}>Mobile Authenticator</SelectItem> <SelectItem value={MfaMethod.TOTP}>Mobile Authenticator</SelectItem>
@@ -399,7 +403,6 @@ export const MFASection = () => {
setTotpCode(pastedData); setTotpCode(pastedData);
}} }}
placeholder="Enter 2FA code" placeholder="Enter 2FA code"
className="font-mono tracking-wider"
maxLength={6} maxLength={6}
/> />
</FormControl> </FormControl>
@@ -473,11 +476,11 @@ export const MFASection = () => {
</div> </div>
{shouldShowRecoveryCodes && ( {shouldShowRecoveryCodes && (
<div className="mt-6 grid w-full grid-cols-4 gap-3"> <div className="mt-6 grid w-full max-w-lg grid-cols-5 gap-3">
{totpConfiguration.recoveryCodes.map((code) => ( {totpConfiguration.recoveryCodes.map((code) => (
<code <code
key={code} key={code}
className="block rounded bg-mineshaft-800 px-3 py-2 text-center font-mono text-sm text-mineshaft-100" className="block rounded bg-mineshaft-700/70 px-3 py-2 text-center font-mono text-sm text-mineshaft-100"
> >
{code} {code}
</code> </code>