+ {/* eslint-disable-next-line react/no-unknown-property */}
+
+ {/* eslint-disable-next-line react/no-unknown-property */}
+
{text}
+
+ );
+};
+
+export default Separator;
diff --git a/packages/webapp/src/components/common/separator/style.ts b/packages/webapp/src/components/common/separator/style.ts
new file mode 100644
index 00000000..cb95f61a
--- /dev/null
+++ b/packages/webapp/src/components/common/separator/style.ts
@@ -0,0 +1,73 @@
+import { css, SerializedStyles } from '@emotion/react';
+
+export const containerStyle = (
+ responsive: boolean,
+ maxWidth: number,
+ breakPointDownMd: string,
+): SerializedStyles => {
+ return css([
+ {
+ position: 'relative',
+ width: '100%',
+ height: '90%',
+ top: '5%',
+ display: 'inline-block',
+ },
+ responsive && {
+ [breakPointDownMd]: {
+ paddingTop: '25px',
+ paddingBottom: '25px',
+ },
+ },
+ !responsive && {
+ paddingTop: '25px',
+ paddingBottom: '25px',
+ },
+ maxWidth && {
+ maxWidth: maxWidth,
+ },
+ ]);
+};
+
+export const lineStyle = (responsive: boolean, breakPointUpMd: string): SerializedStyles => {
+ return css([
+ {
+ backgroundColor: '#dce2e6',
+ position: 'absolute',
+ left: '50%',
+ height: '1px',
+ width: '100%',
+ transform: 'translateX(-50%)',
+ },
+ responsive && {
+ [breakPointUpMd]: {
+ height: '100%',
+ width: '1px',
+ transform: 'translateX(0%) translateY(0%)',
+ },
+ },
+ ]);
+};
+
+export const textStyle = (responsive: boolean, breakPointUpMd: string): SerializedStyles => {
+ return css([
+ {
+ backgroundColor: '#DCE2E6',
+ padding: '5px 10px',
+ minWidth: '36px',
+ borderRadius: '18px',
+ fontSize: '18px',
+ color: 'white',
+ textAlign: 'center',
+ display: 'inline-block',
+ position: 'absolute',
+ transform: 'translateX(-50%) translateY(-50%)',
+ left: '50%',
+ },
+ responsive && {
+ [breakPointUpMd]: {
+ top: '15%',
+ },
+ },
+ ]);
+};
diff --git a/packages/webapp/src/components/forgot-password-page/index.tsx b/packages/webapp/src/components/forgot-password-page/index.tsx
index 1eae86a8..3840086c 100644
--- a/packages/webapp/src/components/forgot-password-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-page/index.tsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
-import Client, { ErrorInfo } from '../../classes/client';
+import Client, { ErrorInfo, ForgotPasswordResult } from '../../classes/client';
import Header from '../layout/header';
import Footer from '../layout/footer';
@@ -12,22 +12,28 @@ import Input from '../form/input';
import GlobalError from '../form/global-error';
import SubmitButton from '../form/submit-button';
import ReactGA from 'react-ga4';
+import { Link as RouterLink } from 'react-router-dom';
import Typography from '@mui/material/Typography';
import { getCsrfToken, getCsrfTokenParameter } from '../../utils';
import { useNavigate } from 'react-router-dom';
+import { Button } from '@mui/material';
const ForgotPassword = () => {
const [email, setEmail] = useState