Merge pull request #1187 from dev-launchers/saraphamlee/1180-update-i…

…ntial-page Style and Text Changes for Initial Onboarding
dev-launchers · Jul 2, 2023 · c4b5d6c · c4b5d6c
2 parents 0ef30ab + a5f267d
commit c4b5d6c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 32 deletions.
diff --git a/apps/user-profile/src/components/modules/UserOnboarding/OnboardingForm/OnboardingForm.js b/apps/user-profile/src/components/modules/UserOnboarding/OnboardingForm/OnboardingForm.js
@@ -1,19 +1,23 @@
 import React from 'react'
 import PageBody from '../../../common/PageBody'
-import OnboardingFormSection from './StyledOnboardingForm'
+import OnboardingFormSection, { StepperContainer } from './StyledOnboardingForm'
 import { Typography } from '@devlaunchers/components/components/atoms'
 
 const OnboardingForm = ({ children }) => {
     return (
-        <OnboardingFormSection>
-            <PageBody width='40%'>
-                <div className='form-title-mb'>
-                    <Typography type='h2'>Let's Get to know each other</Typography>
-                </div>
-                {children}
-            </PageBody>
-        </OnboardingFormSection>
-
+			<>
+				<StepperContainer></StepperContainer>
+				<div className="stepper-container"></div>
+				<OnboardingFormSection>
+					<PageBody width='40%' style={{backgroundColor: 'inherit'}}>
+						<div className='form-title-mb'>
+								<Typography type='h1'>First Let's Set Up Your Profile</Typography>
+								<Typography type='h2'>A complete profile will help to match you with the perfect opportunity</Typography>
+						</div>
+						{children}
+					</PageBody>
+				</OnboardingFormSection>			
+			</>
     )
 }
 

diff --git a/...user-profile/src/components/modules/UserOnboarding/OnboardingForm/StyledOnboardingForm.js b/...user-profile/src/components/modules/UserOnboarding/OnboardingForm/StyledOnboardingForm.js
@@ -1,20 +1,22 @@
 import styled from "styled-components";
 
 const OnboardingFormSection = styled.section`
-    position: relative;
-    padding: 2rem;
-    margin-bottom: 2rem;
-    
-    .separator {
-        height: 2rem;
-    }
-    .continue-btn {
-        position: absolute;
-        bottom: 0;
-        right: 4rem;
-    }
-    .form-title-mb {
-        margin-bottom: 2.5rem;
-    }
-`
+	position: relative;
+	padding: 2rem;
+	margin-bottom: 2rem;
+	background-color: ${({ theme }) => theme.colors.White};
+	.separator {
+			height: 2rem;
+	}
+	.continue-btn {
+			float: right;
+	}
+	.form-title-mb {
+			margin-bottom: 2.5rem;
+	}
+`;
+
+export const StepperContainer = styled.div`
+	height: 152px;
+`;
 export default OnboardingFormSection;
diff --git a/apps/user-profile/src/components/modules/UserOnboarding/UserOnboarding.js b/apps/user-profile/src/components/modules/UserOnboarding/UserOnboarding.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { useRouter } from 'next/router'
-
 import { Checkbox, Link } from '@devlaunchers/components/components/atoms'
 import Button from '@devlaunchers/components/components/atoms/Button'
 import OpenResponse from '@devlaunchers/components/components/organisms/OpenResponse'
@@ -113,13 +112,15 @@ export default function UserOnboarding() {
                 <div className='separator'></div>
 
                 <Button
-                    className='continue-btn'
-                    buttonSize="standard"
-                    buttonType="primary"
-                    onClick={handleContinueClick}
+									buttonSize="standard"
+									buttonType="primary"
+									className="continue-btn"
+									onClick={handleContinueClick}
                 >
-                    Continue
+                  Save and Continue
                 </Button>
+
+								<div className='separator'></div>
             </form>
         </OnboardingForm>
     )