From 15186bada3ecb34860ffa4ac475f8da581502bfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 21 May 2023 23:50:52 +0200
Subject: [PATCH] Proper spacing on MFA page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/security/mfa-form.tsx | 28 ++++++++--------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/security/mfa-form.tsx b/app/soapbox/features/security/mfa-form.tsx
index 1fd47445f2..346617da8e 100644
--- a/app/soapbox/features/security/mfa-form.tsx
+++ b/app/soapbox/features/security/mfa-form.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 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 DisableOtpForm from './mfa/disable-otp-form';
@@ -37,23 +37,15 @@ const MfaForm: React.FC = () => {
   const mfa = useAppSelector((state) => state.security.get('mfa'));
 
   return (
-    <Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}>
-      <Card variant='rounded'>
-        <CardHeader backHref='/settings'>
-          <CardTitle title={intl.formatMessage(messages.heading)} />
-        </CardHeader>
-
-        <CardBody>
-          {mfa.getIn(['settings', 'totp']) ? (
-            <DisableOtpForm />
-          ) : (
-            <Stack space={4}>
-              <EnableOtpForm displayOtpForm={displayOtpForm} handleSetupProceedClick={handleSetupProceedClick} />
-              {displayOtpForm && <OtpConfirmForm />}
-            </Stack>
-          )}
-        </CardBody>
-      </Card>
+    <Column label={intl.formatMessage(messages.heading)}>
+      {mfa.getIn(['settings', 'totp']) ? (
+        <DisableOtpForm />
+      ) : (
+        <Stack space={4}>
+          <EnableOtpForm displayOtpForm={displayOtpForm} handleSetupProceedClick={handleSetupProceedClick} />
+          {displayOtpForm && <OtpConfirmForm />}
+        </Stack>
+      )}
     </Column>
   );
 };