diff --git a/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css new file mode 100644 index 0000000000..917381ef01 --- /dev/null +++ b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css @@ -0,0 +1,68 @@ +.wrapper { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; +} + +.infoWrapper { + width: 340px; +} + +.header { + margin-bottom: 16px; + font-size: var(--size-medium-l); + font-weight: var(--weight-bold); + line-height: 24px; + color: var(--dark); + letter-spacing: var(--spacing-medium); +} + +.description { + font-size: var(--size-normal); + font-weight: var(--weight-normal); + line-height: 18px; + color: var(--dark); + letter-spacing: 0.1px; +} + +.buttonWrapper { + display: flex; + justify-content: flex-end; + margin-top: 32px; +} + +.buttonLink { + composes: main themePrimary sizeLarge from '~core/Button/Button.css'; + display: flex; + justify-content: center; + align-items: center; + padding: 0; + height: 44px; + width: 160px; + letter-spacing: var(--spacing-normal); +} + +.contactInfo { + margin-top: 28px; + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + line-height: 18px; + color: var(--dark); + letter-spacing: var(--spacing-medium); +} + +.emailTab { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; + padding: 0 21px; + height: 72px; + width: 100%; + border-radius: 15px; + background-color: var(--colony-white); + font-size: var(--size-small); + box-shadow: 0px 2px 11px rgba(62, 118, 244, 0.14); +} diff --git a/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css.d.ts b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css.d.ts new file mode 100644 index 0000000000..a011a392bb --- /dev/null +++ b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css.d.ts @@ -0,0 +1,8 @@ +export const wrapper: string; +export const infoWrapper: string; +export const header: string; +export const description: string; +export const buttonWrapper: string; +export const buttonLink: string; +export const contactInfo: string; +export const emailTab: string; diff --git a/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.tsx b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.tsx new file mode 100644 index 0000000000..f7c4c2af0c --- /dev/null +++ b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import ExternalLink from '~core/ExternalLink'; +import Link from '~core/Link'; + +import styles from './ConfirmationPage.css'; + +const MSG = defineMessages({ + submitted: { + id: 'dashboard.VerificationPage.ConfirmationPage.submitted', + defaultMessage: 'Verification submitted!', + }, + description: { + id: 'dashboard.VerificationPage.ConfirmationPage.submitted', + defaultMessage: `Look out for an email from Korporatio. The verification process can take a few days to process.`, + }, + buttonText: { + id: 'dashboard.VerificationPage.ConfirmationPage.buttonText', + defaultMessage: 'Got it, take me back', + }, + questions: { + id: 'dashboard.VerificationPage.ConfirmationPage.about', + defaultMessage: 'Questions? Contact Korporatio directly', + }, + email: { + id: 'dashboard.VerificationPage.ConfirmationPage.email', + defaultMessage: 'Email {email}', + }, +}); + +const displayName = 'dashboard.VerificationPage.ConfirmationPage'; + +const ConfirmationPage = () => { + return ( +