Merge branch 'mfa-form-page' into 'develop'

Proper spacing on MFA page

See merge request soapbox-pub/soapbox!2519
This commit is contained in:
marcin mikołajczak 2023-05-23 16:57:45 +00:00
commit 0a397c1cfe
1 changed files with 10 additions and 18 deletions

View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { useIntl, defineMessages } from 'react-intl'; import { useIntl, defineMessages } from 'react-intl';
import { fetchMfa } from 'soapbox/actions/mfa'; import { fetchMfa } from 'soapbox/actions/mfa';
import { Card, CardBody, CardHeader, CardTitle, Column, Stack } from 'soapbox/components/ui'; import { Column, Stack } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
import DisableOtpForm from './mfa/disable-otp-form'; import DisableOtpForm from './mfa/disable-otp-form';
@ -37,13 +37,7 @@ const MfaForm: React.FC = () => {
const mfa = useAppSelector((state) => state.security.get('mfa')); const mfa = useAppSelector((state) => state.security.get('mfa'));
return ( return (
<Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}> <Column label={intl.formatMessage(messages.heading)}>
<Card variant='rounded'>
<CardHeader backHref='/settings'>
<CardTitle title={intl.formatMessage(messages.heading)} />
</CardHeader>
<CardBody>
{mfa.getIn(['settings', 'totp']) ? ( {mfa.getIn(['settings', 'totp']) ? (
<DisableOtpForm /> <DisableOtpForm />
) : ( ) : (
@ -52,8 +46,6 @@ const MfaForm: React.FC = () => {
{displayOtpForm && <OtpConfirmForm />} {displayOtpForm && <OtpConfirmForm />}
</Stack> </Stack>
)} )}
</CardBody>
</Card>
</Column> </Column>
); );
}; };