houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ui as per figma file (#14008)

Browse Source 
Fix issue: #13742
Step number look better then without number so did't removed that 
Added description in H2Title component 
Not added new description shown in figma because it is to large and
H2Title truncate after 2 lines
We can add this figma content only if we do not use H2Title component 

<img width="719" height="553" alt="image"
src="https://github.com/user-attachments/assets/1aae680f-de4e-424b-baf7-c0d402581d28"
/>

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Kailash Rajput
2025-08-21 14:50:32 +05:30
committed by GitHub
parent 809fe5699f
commit f89a01342b
7 changed files with 274 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx
+55 -43
View File
@@ -9,11 +9,9 @@ import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { DeleteTwoFactorAuthentication } from '@/settings/two-factor-authentication/components/DeleteTwoFactorAuthenticationMethod';
import { TwoFactorAuthenticationSetupForSettingsEffect } from '@/settings/two-factor-authentication/components/TwoFactorAuthenticationSetupForSettingsEffect';
import {
TwoFactorAuthenticationVerificationForSettings,
useTwoFactorVerificationForSettings,
} from '@/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationForSettings';
import { TwoFactorAuthenticationVerificationForSettings } from '@/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationForSettings';
import { useCurrentUserWorkspaceTwoFactorAuthentication } from '@/settings/two-factor-authentication/hooks/useCurrentUserWorkspaceTwoFactorAuthentication';
import { useTwoFactorVerificationForSettings } from '@/settings/two-factor-authentication/hooks/useTwoFactorVerificationForSettings';
import { extractSecretFromOtpUri } from '@/settings/two-factor-authentication/utils/extractSecretFromOtpUri';
import { SettingsPath } from '@/types/SettingsPath';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@@ -26,40 +24,55 @@ import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledQRCodeContainer = styled.div`
margin: ${({ theme }) => theme.spacing(4)} 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: ${({ theme }) => theme.spacing(3)};
`;
const StyledInstructions = styled.div`
const StyledQRCodeWrapper = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.md};
display: flex;
justify-content: center;
padding: ${({ theme }) => theme.spacing(4)};
`;
const StyledQRCode = styled(QRCode)`
height: 137px;
width: 137px;
`;
const StyledCopySetupKeyText = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
margin-bottom: ${({ theme }) => theme.spacing(4)};
max-width: 400px;
`;
const StyledDivider = styled.div`
width: 100%;
height: 1px;
background-color: ${({ theme }) => theme.border.color.light};
margin: ${({ theme }) => theme.spacing(6)} 0;
text-align: left;
line-height: 1.5;
`;
const StyledCopySetupKeyLink = styled.button`
background: none;
border: none;
color: ${({ theme }) => theme.font.color.secondary};
color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer;
display: flex;
align-items: center;
gap: ${({ theme }) => theme.spacing(1)};
display: inline;
font-size: ${({ theme }) => theme.font.size.sm};
margin-top: ${({ theme }) => theme.spacing(2)};
padding: 0;
text-decoration: underline;
margin-left: 0;
&:hover {
color: ${({ theme }) => theme.font.color.primary};
color: ${({ theme }) => theme.font.color.secondary};
}
`;
const StyledDivider = styled.div`
margin: ${({ theme }) => theme.spacing(6)} 0;
width: 100%;
`;
export const SettingsTwoFactorAuthenticationMethod = () => {
const { t } = useLingui();
const theme = useTheme();
@@ -133,35 +146,34 @@ export const SettingsTwoFactorAuthenticationMethod = () => {
) : (
<Section>
<TwoFactorAuthenticationSetupForSettingsEffect />
<H2Title title={t`1. Scan the QR code`} />
<StyledInstructions>
<Trans>
Use an authenticator app like Google Authenticator, Authy, or
Microsoft Authenticator to scan this QR code.
</Trans>
</StyledInstructions>
<H2Title
title={t`Authenticator app`}
description={t`Authenticator apps and browser extensions like 1Password, Authy, Microsoft Authenticator, etc. generate one-time passwords that are used as a second factor to verify your identity when prompted during sign-in.`}
/>
<StyledQRCodeContainer>
{!qrCode ? <Loader /> : <QRCode value={qrCode} />}
{qrCode && (
<StyledCopySetupKeyLink onClick={handleCopySetupKey}>
<IconCopy size={theme.icon.size.sm} />
<Trans>Copy Setup Key</Trans>
</StyledCopySetupKeyLink>
{!qrCode ? (
<Loader />
) : (
<>
<StyledQRCodeWrapper>
<StyledQRCode value={qrCode} />
</StyledQRCodeWrapper>
<StyledCopySetupKeyText>
<Trans>Can't scan? Copy the</Trans>{' '}
<StyledCopySetupKeyLink onClick={handleCopySetupKey}>
<Trans>setup key</Trans>
</StyledCopySetupKeyLink>
</StyledCopySetupKeyText>
</>
)}
</StyledQRCodeContainer>
<StyledDivider />
<H2Title title={t`2. Enter the code`} />
<StyledInstructions>
<Trans>
Enter the 6-digit verification code from your authenticator
app to complete the setup.
</Trans>
</StyledInstructions>
<H2Title
title={t`Verify the code from the app`}
description={t`Copy paste the code below`}
/>
<TwoFactorAuthenticationVerificationForSettings />
</Section>
)}