diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss index 21fcea36ae98..8594ddf32644 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss @@ -33,6 +33,17 @@ flex: 0 0 82px; } -.warning { - color: colors.$red-400; +.resendEmailLink { + text-decoration: underline; + cursor: pointer; + padding: 0; + color: colors.$dark-blue; + border: none; + background-color: transparent; + font-size: inherit; + + &:hover, + &:active { + color: colors.$blue; + } } diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx index 1bcff7d2ec5a..050c85c0a60b 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx @@ -1,7 +1,10 @@ +import { faWarning } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React, { useEffect, useRef, useState } from "react"; import { FormattedMessage } from "react-intl"; import { Button } from "components/ui/Button"; +import { Callout } from "components/ui/Callout"; import { FlexContainer, FlexItem } from "components/ui/Flex"; import { Heading } from "components/ui/Heading"; import { ModalFooter } from "components/ui/Modal/ModalFooter"; @@ -64,27 +67,23 @@ export const EnrollmentModalContent: React.FC = ({ }; }, []); - const EnrollmentCta = () => - emailVerified ? ( - - ) : ( - - ); - const EnrollmentEmailVerificationWarning = () => { const WarningContent = () => ( - - - - - - + + + + ( + + ), + }} + /> - + ); return <>{!emailVerified && }; @@ -146,7 +145,9 @@ export const EnrollmentModalContent: React.FC = ({ - + diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json index 4f01682c68f2..3ec79839f85c 100644 --- a/airbyte-webapp/src/packages/cloud/locales/en.json +++ b/airbyte-webapp/src/packages/cloud/locales/en.json @@ -187,7 +187,7 @@ "freeConnectorProgram.enrollmentModal.free": "Alpha and Beta Connectors are free while you're in the program.The whole Connection is free until both Connectors have move into General Availability (GA)", "freeConnectorProgram.enrollmentModal.emailNotification": "We will let you know through email before a Connector you use moves to GA", "freeConnectorProgram.enrollmentModal.cardOnFile": "When both Connectors are in GA, the Connection will no longer be free. You'll need to have a credit card on file to enroll so Airbyte can handle a Connection's transition to paid service.", - "freeConnectorProgram.enrollmentModal.unvalidatedEmailWarning": "You must verify your email address to enroll in the Free connector program. Please check your inbox for a verification link, and try again after you've verified your address.", + "freeConnectorProgram.enrollmentModal.unvalidatedEmailWarning": "You need to verify your email address before you can enroll in the Free Connector Program. Re-send verification email.", "freeConnectorProgram.enrollmentModal.cancelButtonText": "Cancel", "freeConnectorProgram.enrollmentModal.enrollButtonText": "Enroll now!", "freeConnectorProgram.enrollmentModal.unvalidatedEmailButtonText": "Resend email validation",