final touchup two factor component

src/components/TwoFactor/Modal/Manage.tsx

@@ -57,7 +57,7 @@ export default function TwoFactorModalManageSection(props: Iprops) {
             content: constants.UPDATE_TWO_FACTOR_MESSAGE,
             close: { text: constants.CANCEL },
             proceed: {
-                variant: 'success',
+                variant: 'accent',
                 text: constants.UPDATE,
                 action: reconfigureTwoFactor,
             },
@@ -78,12 +78,11 @@ export default function TwoFactorModalManageSection(props: Iprops) {
                 justifyContent="center"
                 textAlign={'center'}>
                 <Grid item sm={9} xs={12}>
-                    {constants.UPDATE_TWO_FACTOR_HINT}
+                    {constants.UPDATE_TWO_FACTOR_LABEL}
                 </Grid>
                 <Grid item sm={3} xs={12}>
                     <Button
-                        variant="contained"
-                        color={'success'}
+                        color={'accent'}
                         onClick={warnTwoFactorReconfigure}
                         style={{ width: '100%' }}>
                         {constants.RECONFIGURE}
@@ -97,12 +96,11 @@ export default function TwoFactorModalManageSection(props: Iprops) {
                 justifyContent="center"
                 textAlign={'center'}>
                 <Grid item sm={9} xs={12}>
-                    {constants.DISABLE_TWO_FACTOR_HINT}{' '}
+                    {constants.DISABLE_TWO_FACTOR_LABEL}{' '}
                 </Grid>
 
                 <Grid item sm={3} xs={12}>
                     <Button
-                        variant="contained"
                         color={'danger'}
                         onClick={warnTwoFactorDisable}
                         style={{ width: '100%' }}>

src/components/TwoFactor/Modal/Setup.tsx

@@ -7,13 +7,13 @@ import Container from 'components/Container';
 import { Button, Typography } from '@mui/material';
 
 interface Iprops {
-    closeSidebar: () => void;
+    close: () => void;
 }
 
-export default function TwoFactorModalSetupSection({ closeSidebar }: Iprops) {
+export default function TwoFactorModalSetupSection({ close }: Iprops) {
     const router = useRouter();
     const redirectToTwoFactorSetup = () => {
-        closeSidebar();
+        close();
         router.push(PAGES.TWO_FACTOR_SETUP);
     };
 
@@ -23,7 +23,8 @@ export default function TwoFactorModalSetupSection({ closeSidebar }: Iprops) {
             <Typography mb={2}>{constants.TWO_FACTOR_INFO}</Typography>
             <Button
                 variant="contained"
-                color="success"
+                color="accent"
+                size="large"
                 onClick={redirectToTwoFactorSetup}>
                 {constants.ENABLE_TWO_FACTOR}
             </Button>

src/components/TwoFactor/Modal/index.tsx

@@ -44,6 +44,7 @@ function TwoFactorModal(props: Props) {
     return (
         <MessageDialog
             size="xs"
+            fullWidth
             show={props.show}
             onHide={props.onHide}
             attributes={{
@@ -54,9 +55,7 @@ function TwoFactorModal(props: Props) {
                 {isTwoFactorEnabled ? (
                     <TwoFactorModalManageSection close={close} />
                 ) : (
-                    <TwoFactorModalSetupSection
-                        closeSidebar={props.closeSidebar}
-                    />
+                    <TwoFactorModalSetupSection close={close} />
                 )}
             </>
         </MessageDialog>

src/themes/darkThemeOptions.tsx

@@ -56,6 +56,11 @@ const darkThemeOptions = createTheme({
                     textTransform: 'none',
                     borderRadius: '8px',
                 },
+                sizeLarge: {
+                    fontSize: '18px',
+                    lineHeight: '21.78px',
+                    padding: '16px',
+                },
             },
         },
         MuiDialog: {

src/utils/strings/englishConstants.tsx

@@ -452,7 +452,7 @@ const englishConstants = {
             ? `1 file received. uploading in a jiffy`
             : `${count} files received. uploading in a jiffy`,
     TWO_FACTOR: 'Two-factor',
-    TWO_FACTOR_AUTHENTICATION: 'two-factor authentication',
+    TWO_FACTOR_AUTHENTICATION: 'Two-factor authentication',
     TWO_FACTOR_QR_INSTRUCTION:
         'scan the QR code below with your favorite authenticator app',
     ENTER_CODE_MANUALLY: 'enter the code manually',
@@ -461,21 +461,21 @@ const englishConstants = {
     SCAN_QR_CODE: 'scan QR code instead',
     CONTINUE: 'continue',
     BACK: 'back',
-    ENABLE_TWO_FACTOR: 'enable two-factor',
+    ENABLE_TWO_FACTOR: 'Enable two-factor',
     ENABLE: 'enable',
     LOST_DEVICE: 'lost two-factor device?',
     INCORRECT_CODE: 'incorrect code',
     RECOVER_TWO_FACTOR: 'recover two-factor',
     TWO_FACTOR_INFO:
-        'add an additional layer of security by requiring more than your email and password to log in to your account',
-    DISABLE_TWO_FACTOR_HINT: 'disable two-factor authentication',
-    UPDATE_TWO_FACTOR_HINT: 'update your authenticator device',
-    DISABLE: 'disable',
-    RECONFIGURE: 'reconfigure',
+        'Add an additional layer of security by requiring more than your email and password to log in to your account',
+    DISABLE_TWO_FACTOR_LABEL: 'Disable two-factor authentication',
+    UPDATE_TWO_FACTOR_LABEL: 'Update your authenticator device',
+    DISABLE: 'Disable',
+    RECONFIGURE: 'Reconfigure',
     UPDATE_TWO_FACTOR: 'update two-factor',
     UPDATE_TWO_FACTOR_MESSAGE:
         'continuing forward will void any previously configured authenticators',
-    UPDATE: 'update',
+    UPDATE: 'Update',
     DISABLE_TWO_FACTOR: 'disable two-factor',
     DISABLE_TWO_FACTOR_MESSAGE:
         'are you sure you want to disable your two-factor authentication',