Proper spacing on MFA page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-05-21 23:50:52 +02:00
parent cdd0fd63b2
commit 15186bada3

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>
); );
}; };