Merge branch 'two-factor-redesign' into forms-redesign

src/components/pages/gallery/LinkButton.tsx

@@ -1,5 +1,6 @@
 import { Link, LinkProps } from '@mui/material';
 import React, { FC } from 'react';
+import { ButtonProps } from 'react-bootstrap';
 
 export enum ButtonVariant {
     success = 'success',
@@ -28,9 +29,15 @@ export function getVariantColor(variant: string) {
     }
 }
 
-const LinkButton: FC<LinkProps<'button'>> = ({ children, ...props }) => {
+const LinkButton: FC<LinkProps<'button', { color?: ButtonProps['color'] }>> = ({
+    children,
+    ...props
+}) => {
     return (
-        <Link component="button" {...props}>
+        <Link
+            component="button"
+            {...props}
+            sx={{ color: props.color && `${props.color}.main` }}>
             {children}
         </Link>
     );

src/components/pages/gallery/PlanSelector.tsx

@@ -318,7 +318,7 @@ function PlanSelector(props: Props) {
                         <>
                             {isSubscriptionCancelled(subscription) ? (
                                 <LinkButton
-                                    variant="success"
+                                    color={'success'}
                                     onClick={() =>
                                         props.setDialogMessage({
                                             title: constants.CONFIRM_ACTIVATE_SUBSCRIPTION,
@@ -346,7 +346,7 @@ function PlanSelector(props: Props) {
                                 </LinkButton>
                             ) : (
                                 <LinkButton
-                                    variant="danger"
+                                    color="danger"
                                     onClick={() =>
                                         props.setDialogMessage({
                                             title: constants.CONFIRM_CANCEL_SUBSCRIPTION,
@@ -372,7 +372,7 @@ function PlanSelector(props: Props) {
                                 </LinkButton>
                             )}
                             <LinkButton
-                                variant="primary"
+                                color="primary"
                                 onClick={updatePaymentMethod.bind(
                                     null,
                                     props.setDialogMessage,
@@ -384,7 +384,7 @@ function PlanSelector(props: Props) {
                         </>
                     ) : (
                         <LinkButton
-                            variant="primary"
+                            color="primary"
                             onClick={props.closeModal}
                             style={{
                                 color: 'rgb(121, 121, 121)',

src/pages/two-factor/verify/index.tsx

@@ -1,6 +1,6 @@
 import Container from 'components/Container';
 import LogoImg from 'components/LogoImg';
-import VerifyTwoFactor from 'components/VerifyTwoFactor';
+import VerifyTwoFactor from 'components/TwoFactor/VerifyForm';
 import router from 'next/router';
 import React, { useEffect, useState } from 'react';
 import { Button, Card } from 'react-bootstrap';
@@ -9,6 +9,7 @@ import { PAGES } from 'constants/pages';
 import { User } from 'types/user';
 import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
 import constants from 'utils/strings/constants';
+import LinkButton from 'components/pages/gallery/LinkButton';
 
 export default function Home() {
     const [sessionID, setSessionID] = useState('');
@@ -61,9 +62,11 @@ export default function Home() {
                     </Card.Title>
                     <VerifyTwoFactor
                         onSubmit={onSubmit}
-                        back={router.back}
                         buttonText={constants.VERIFY}
                     />
+                    <LinkButton onClick={router.back}>
+                        {constants.GO_BACK}
+                    </LinkButton>
                     <div
                         style={{
                             display: 'flex',