[Onboarding Flow]- Created two input fields, 'firstname' and 'lastname' in signup Details page

app/components/onboarding-card.hbs

@@ -1,3 +1,3 @@
-<div data-test-onboarding-card-modal class="onboarding-card">
+<div data-test-onboarding-card-modal class='onboarding-card'>
   {{yield}}
-</div>
+</div>

app/components/signup-steps/step-one.hbs

@@ -0,0 +1,28 @@
+<img
+  src='assets/icons/rds-logo.jpg'
+  alt='RDS-Logo'
+  class='signup-details__rds-logo'
+  data-test-rds-logo
+/>
+<h3 data-test-required-heading class='signup-page-heading'>
+  Sign up to your account
+</h3>
+
+<Reusables::InputBox
+  @field='First Name'
+  @name='firstname'
+  @placeHolder='Write your first name'
+  @type='text'
+  @required={{true}}
+  @value={{this.data.firstname}}
+  @onInput={{this.inputHandler}}
+/>
+<Reusables::InputBox
+  @field='Last Name'
+  @name='lastname'
+  @placeHolder='Write your last name'
+  @type='text'
+  @required={{true}}
+  @value={{this.data.lastname}}
+  @onInput={{this.inputHandler}}
+/>

app/components/signup-steps/step-one.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { debounce } from '@ember/runloop';
+import { JOIN_DEBOUNCE_TIME } from '../../constants/join';
+
+export default class SignupStepsStepOneComponent extends Component {
+  @action inputHandler(e) {
+    const { onChange } = this.args;
+    const passVal = () => {
+      onChange(e.target.name, e.target.value);
+    };
+
+    debounce(passVal, JOIN_DEBOUNCE_TIME);
+  }
+}

app/components/signup-steps/step-zero.hbs

@@ -0,0 +1,26 @@
+<div class='logos-container' data-test-logos-container>
+  <div class='logo logos-container__github' data-test-github-logo>
+    <img
+      src='assets/icons/onboarding-card-github-logo.png'
+      alt='GitHub-Logo'
+      class='logo__img--github'
+      data-test-github-logo-img
+    />
+  </div>
+  <div class='logo logos-container__link' data-test-link-logo>
+    <img
+      src='assets/icons/link-logo.png'
+      alt='Link-Logo'
+      class='logo__img--link'
+      data-test-link-logo-img
+    />
+  </div>
+  <div class='logo logos-container__rds' data-test-rds-logo>
+    <img
+      src='assets/icons/onboarding-card-rds-logo.png'
+      alt='RDS-Logo'
+      class='logo__img--rds'
+      data-test-rds-logo-img
+    />
+  </div>
+</div>

app/components/stepper-signup.hbs

@@ -0,0 +1,7 @@
+<OnboardingCard>
+  {{#if (eq this.currentStep 0)}}
+    <SignupSteps::StepZero />
+  {{else if (eq this.currentStep 1)}}
+    <SignupSteps::StepOne @onChange={{this.handleInputChange}} />
+  {{/if}}
+</OnboardingCard>

app/components/stepper-signup.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, set } from '@ember/object';
+
+export default class StepperSignupComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    this.currentStep = Number(
+      new URLSearchParams(window.location.search).get('step')
+    );
+  }
+
+  @tracked signupDetails = {
+    firstname: '',
+    lastname: '',
+  };
+
+  @action handleInputChange(key, value) {
+    set(this.signupDetails, key, value);
+  }
+}

app/controllers/join.js

@@ -4,5 +4,11 @@ import { inject as service } from '@ember/service';
 export default class JoinController extends Controller {
   @service router;
   @service login;
+  @service featureFlag;
+
   queryParams = ['step'];
+
+  get isDevMode() {
+    return this.featureFlag.isDevMode;
+  }
 }

app/services/feature-flag.js

@@ -0,0 +1,11 @@
+import Service from '@ember/service';
+import { inject as service } from '@ember/service';
+
+export default class FeatureFlagService extends Service {
+  @service router;
+
+  get isDevMode() {
+    const queryParams = this.router?.currentRoute?.queryParams;
+    return queryParams?.dev === 'true';
+  }
+}

app/styles/dropdown.module.css

@@ -1,18 +1,18 @@
 .select {
   font-weight: 300;
   font-size: 1rem;
-  width: 35.875rem;
+  width: 31rem;
   height: 3.125rem;
   display: flex;
   justify-content: space-between;
   line-height: 32px;
-  border-radius: 9px;
   margin-top: 0.2rem;
   padding: 0 0.5rem;
-  background-color: var(--color-white);
-  border: 3px solid var(--color-navyblue);
   outline: none;
   transition: all 0.1s;
+  border-radius: 8px;
+  border: 1px solid var(--neutral-neutral-500, #ABABAB);
+  background: var(--White, #FFF);
 }
 
 .select:focus {

app/styles/input.module.css

@@ -6,15 +6,15 @@
 .user-input {
   font-weight: 300;
   font-size: 1rem;
-  width: 34.5rem;
+  width: 30rem;
   line-height: 32px;
-  border-radius: 10px;
   margin-top: 0.5rem;
   padding: 0 0.5rem;
-  background-color: var(--color-white);
-  border: 3px solid var(--color-navyblue);
   outline: none;
   transition: all 0.1s;
+  border-radius: 8px;
+  border: 1px solid var(--neutral-neutral-500, #ABABAB);
+  background: var(--White, #FFF);
 }
 
 .user-input:focus {

app/styles/onboarding-card.module.css

@@ -1,19 +1,95 @@
 .onboarding-card{
-    min-height: 60vh;
+    min-height: 55vh;
     min-width: 40vw;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border: 2px solid var(--color-lightgrey);
-    background-color: var(--color-cultured);
-    border-radius: 10px;
-    margin-top: 80px;
+    background-color: #FFF;
+    border-radius: 24px;
+    position: relative;
+    padding: 0 1rem;
+    box-shadow: 0px 4px 10px -2px rgba(16, 24, 40, 0.06), 0px 6px 15px -2px rgba(16, 24, 40, 0.10);
 }
-@media screen and (max-width: 625px) {
+
+.signup-details__rds-logo{
+    display: block;
+    position: absolute;
+    transform: translateX(-50%);
+    left: 50%;
+    top: -10%;
+}
+
+.logos-container{
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    transform: translateX(-50%);
+    left: 50%;
+    top: 3%;
+}
+.logos-container__github{
+    padding: 0.5rem;
+}
+
+.logos-container__link{
+    position: absolute;
+    top: 35%;
+    left: 42%;
+    width: 20%;
+    height: 30%;
+}
+
+.logos-container__rds{
+    margin-left: 1rem;
+    padding: 0.5rem;
+}
+
+.logo__img--link{
+    width: 3.2rem;
+    height: 3.2rem;
+}
+
+.signup-page-heading{
+    color: var(--neutral-neutral-700, #272626);
+    text-align: center;
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px; 
+}
+@media (max-width: 800px) {
     .onboarding-card{
-        min-height: 50vh;
-        max-width: 90vw;
-        margin: 40px auto;
+        min-width: 60vh;
+    }
+}
+
+
+@media (max-width: 625px) {
+    .onboarding-card{
+        min-height: 30vh;
+        min-width: 75vw;
+        padding: 3.5rem 1rem;
+        margin-top: -5rem;
+    }
+    .signup-details__rds-logo{
+        width: 5rem;
+        height: 5rem;
+    }
+
+    .logo__img--github{
+        height: 5rem;
+        width: 5rem;
+    }
+
+    .logo__img--rds{
+        width: 5rem;
+        height: 5rem;
+    }
+
+    .logo__img--link{
+        width: 2.8rem;
+        height: 2.5rem;
     }
   }

app/styles/stepper.module.css

@@ -27,14 +27,15 @@
 }
 
 .label {
-  color: var(--color-black);
-  font-weight: 700;
-  font-size: 1.25rem;
-  margin: 0 0 2px 2px;
+  color: var(--neutral-neutral-800, #1F1F1F);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 550;
+  line-height: 20px;
 }
 
 .required {
-  font-size: 1.5rem;
+  font-size: 1rem;
   margin: 0;
   padding: 0;
   color: var(--color-pink);

app/templates/join.hbs

@@ -1,16 +1,20 @@
 {{page-title 'Join'}}
-<section class="join__container">
-{{#if this.login.isLoading}}
-<div data-test-loading class='intro__loading'>
-    <Fa-Icon @size='2x' @icon='circle-notch' @spin={{true}} />
-</div>
-{{else}}
-{{#if this.login.userData.roles.archived}}
-<OnboardingCard>
-<h3 class="archived__heading">Archived User</h3>
-</OnboardingCard>
-{{else}}
- <Stepper />
-{{/if}}
-{{/if}}
+<section class='join__container'>
+  {{#if this.login.isLoading}}
+    <div data-test-loading class='intro__loading'>
+      <Fa-Icon @size='2x' @icon='circle-notch' @spin={{true}} />
+    </div>
+  {{else}}
+    {{#if this.login.userData.roles.archived}}
+      <OnboardingCard>
+        <h3 class='archived__heading'>Archived User</h3>
+      </OnboardingCard>
+    {{else}}
+      {{#if this.isDevMode}}
+        <StepperSignup />
+      {{else}}
+        <Stepper />
+      {{/if}}
+    {{/if}}
+  {{/if}}
 </section>