Merge pull request #685 from gargshruti30/emailConfirmationFlowMigration

Email Confirmation Flow migrated to => Emotion

src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/EmailConfirmationFlow.jsx

@@ -4,25 +4,33 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import progress from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Images/img-Png/progressPage6.png';
 import newsletter from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Images/img-Png/newsletterAcceptIcon.png';
+import {
+  Paragraph,
+  Heading2,
+} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography';
+
+import * as T from '../../ignitus-WelcomeFlow/Styles/style';
+import * as C from '../Styles/style';
+
+import { RoundedPrimaryButton } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/buttons';
 import { withErrorBoundary } from '../../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary';
-import '../Styles/style.scss';
 
 const EmailConfirmationFlow = () => (
-  <div className="emailConfirm">
-    <img className="progressBarSignup" src={progress} alt="progress-bar" />
-    <div className="newsletter">
-      <img src={newsletter} alt="newsletter" />
-    </div>
-    <p className="welcome">Your email has been confirmed.</p>
-    <p className="paragraph">Your verified email is [email protected]</p>
-    <div className="text-center">
-      <button className="getStarted" type="button">
-        <Link to="/" className="saveText">
-          Get started
-        </Link>
-      </button>
-    </div>
-  </div>
+  <T.WelcomeContainer>
+    <T.TopSection>
+      <T.Progress src={progress} alt="progress-bar" />
+      <C.NewsletterImage src={newsletter} alt="newsletter" />
+      <C.TopMiddleSection>
+        <Heading2>Your email has been confirmed.</Heading2>
+        <Paragraph> Your verified email is [email protected]</Paragraph>
+      </C.TopMiddleSection>
+    </T.TopSection>
+    <C.BottomSection>
+      <RoundedPrimaryButton>
+        <Link to="/">Get started</Link>
+      </RoundedPrimaryButton>
+    </C.BottomSection>
+  </T.WelcomeContainer>
 );
 
 export default withErrorBoundary(EmailConfirmationFlow);

src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/index.ts

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export {default as EmailConfirmationFlow} from './EmailConfirmationFlow';

src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const NewsletterImage = styled.img``;
+
+export const BottomSection = styled.div`
+  margin-top: 3rem;
+`;
+
+export const TopMiddleSection = styled.div`
+  margin-top: 1rem;
+`;