Merge branch 'onboarding-style' of fyindr/siimee into dev

frontend/src/components/onboarding/AccountType.vue

 <template lang="pug">
-.account-typpe
-    h3 {{ question }}
-    //- w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") CANDIDATES
-    w-button.ma1.grow(@click='handleSubmit("Recruiter")') CANDIDATES
-    w-button.ma1.grow(@click='handleSubmit("Jobseeker")') JOBS
+w-card.w-flex.column
+    p {Name}, let's get started on your profile while we verify your account
+    w-button.search-type(@click='handleSubmit("Recruiter")')
+        w-icon.mr1 mdi mdi-account-multiple
+        | CANDIDATES
+    w-button.search-type(@click='handleSubmit("Jobseeker")')
+        w-icon.mr1 mdi mdi-bookmark-box-multiple
+        | JOBS
 </template>
+
 <script>
 export default {
     name: 'AccountType',

frontend/src/components/onboarding/Aspects.vue

 <template lang="pug">
-.aspects
+w-card.aspects.w-flex.column
     form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
         QuestionResponse(
             :question='question'
             w-icon.mr1 wi-check
             | SUBMIT ANSWERS
 </template>
+
 <script>
 import QuestionResponse from './QuestionResponse.vue'
 const answered = [null, null, null, null, null, null]
     },
     emits: ['handle-submit', 'update-answers'],
     async created() {
-        this.aspectQuestions.forEach((q,i) => {
-            console.log(`Aspect #${i}: ${JSON.stringify(q)}`) 
+        this.aspectQuestions.forEach((q, i) => {
+            console.log(`Aspect #${i}: ${JSON.stringify(q)}`)
         })
     },
     methods: {
         updateRadio(onRadioSelect) {
-            answered[onRadioSelect.id-1] = onRadioSelect.answer
+            answered[onRadioSelect.id - 1] = onRadioSelect.answer
             this.$emit('update-answers', {
                 key: 'Aspects',
                 question: {
-                    response_key_prompt: 'aspects'
+                    response_key_prompt: 'aspects',
                 },
                 answer: answered,
             })

frontend/src/components/onboarding/CompanyID.vue

 <template lang="pug">
-.company-id
+w-card.company-id.w-flex.column
     h3 Company ID
     p {{ question }}
     input(
         type='text'
         v-model='companyID'
     )
-    w-button.ma1.grow(@click='handleSubmit') NEXT
+    w-button.next-btn(@click='handleSubmit') Next
 </template>
+
 <script>
 export default {
     name: 'CompanyID',

frontend/src/components/onboarding/Interests.vue

 <template lang="pug">
-.interests
+w-card.interests.w-flex.column
     h3 Interests
     p {{ question }}
-    DynamicTagList(:placeholder='"interest"' :tags='interests')
-    w-button.ma1.grow(@click='handleSubmit') NEXT
+    w-button.next-btn(@click='handleSubmit') NEXT
 </template>
 
 <script>
 import DynamicTagList from '../DynamicTagList.vue'
+
 export default {
     name: 'Interests',
     components: {

frontend/src/components/onboarding/LicensesAndCertifications.vue

 <template lang="pug">
-.licenses-certifications
-    h3 Licenses &amp; Certifications
+w-card.licenses-certifications.w-flex.column
+    h3 Licenses & Certifications
     p {{ question }}
     DynamicTagList(
         :placeholder='"requirement"'
         :tags='licensesAndCertifications'
     )
-    w-button.ma1.grow(@click='handleSubmit') NEXT
+    w-button.next-btn(@click='handleSubmit') NEXT
 </template>
+
 <script>
 import DynamicTagList from '../DynamicTagList.vue'
+
 export default {
     name: 'LicensesAndCertifications',
     components: {

frontend/src/components/onboarding/Location.vue

 <template lang="pug">
-.location
+w-card.location.w-flex.column
     h3 Location
     p {{ question }}
     DynamicTagList(:placeholder='"location"' :tags='locations')
-    w-button.ma1.grow(@click='handleSubmit') NEXT
+    w-button.next-btn(@click='handleSubmit') NEXT
 </template>
+
 <script>
 import DynamicTagList from '../DynamicTagList.vue'
 export default {

frontend/src/components/onboarding/QuestionResponse.vue

 <template lang="pug">
-.question.pa12
-    header.w-flex.row.justify-space-between.pb6
-        label {{question.question}}
+w-card.question
+    p {{question.question}} 
     section.radio-buttons.w-flex.row.justify-space-between
-        h3(v-for="label in question.labels") {{label}}
-    w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems")
+        p(v-for="label in question.labels") {{label}}
+    w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems" color="red")
 </template>
 
 <script>

frontend/src/components/onboarding/Role.vue

 <template lang="pug">
-.role
-    h3 ACTIVELY SEARCHING
+w-card.role.w-flex.column
+    h3 Actively Searching
     p {{ question }}
     w-select.mt4(:items='items' placeholder='i am' v-model='selectedRole')
-    w-button.ma1.grow(@click='handleSubmit') NEXT
+    w-button.next-btn(@click='handleSubmit') NEXT
 </template>
 
 <script>

frontend/src/components/onboarding/Skills.vue

 <template lang="pug">
-.skills
-    h3 RECRUITER
+w-card.skills.w-flex.column
+    h3 Recruiter
     p {{ question }}
     DynamicTagList(:placeholder='"skill"' :tags='skills')
-    w-button.ma1.grow(@click='handleSubmit') NEXT
+    w-button.next-btn(@click='handleSubmit') NEXT
 </template>
+
 <script>
 import DynamicTagList from '../DynamicTagList.vue'
+
 export default {
     name: 'Skills',
     components: {

frontend/src/components/onboarding/Splash.vue

 <template lang="pug">
-.splash
-    .splash--icon(style='width: 347px; height: 347px; background-color: red')
-    div(style='text-align: center')
-        w-button.ma1.grow(@click='handleSubmit') GET STARTED
-
+w-flex.column
+    w-image.splash-logo(
+        :height='300'
+        :src='`/assets/logos/siimee_logo.jpg`'
+        :width='300'
+    )
+    w-button.ma1.grow.next-btn(
+        :height='50'
+        :width='315'
+        @click='this.$emit("go-to-step", currentStep + 1)'
+        bg-color='success'
+        shadow
+        text
+        xl
+    ) GET STARTED
 </template>
 
 <script>
             this.$emit('update-answers', null)
         },
     },
-
 }
 </script>
+
+<style lang="sass">
+.w-button
+    &.next-btn
+        background-color: #5BA626
+</style>

frontend/src/views/OnboardingView.vue

         },
         updateAnswers(payload) {
             // null payload is passed on splash page
-            if(payload){
+            if (payload) {
                 const k = payload.question.response_key_prompt
                 this.answered[k] = payload.answer
                 console.log(`${k}:`, this.answered[k])
                 console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
-                if(k === 'aspects') return
+                if (k === 'aspects') return
             }
             this.goToStep(this.currentStep + 1)
         },
     },
 }
 </script>
+
+<style lang="sass">
+.view--onboarding
+    width: 100%
+    max-width: 428px
+    background-color: #fff
+    color: #1F2024
+    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif
+    margin: 0 auto
+
+    article
+        height: 100vh
+
+    .w-button
+            display: flex
+            width: 315px
+            height: 60px
+            border-radius: 6
+            background-color: #D5D5D5
+            color: #1F2024
+            margin: 11px auto
+            font-weight: bold
+            font-size: 16px
+            text-transform: uppercase
+            &.next-btn
+                border-radius: 6px
+                background-color: #5BA626
+                color: #1F2024
+                height: 50px
+                width: 315px
+                font-size: 18px
+                padding: 7px
+
+    .w-card
+        background-color: #1F2024
+        justify-content: center
+        align-items: center
+        width: 100%
+
+
+        h3
+            text-transform: uppercase
+            text-align: center
+            font-size: 28px
+            font-weight: bold
+            color: white
+            margin-top: 88px
+
+        p
+            color: white
+            font-size: 18px
+            padding: 11px
+            text-align: center
+            margin: 22px auto
+            font-weight: bold
+
+        input
+            display: flex
+            width: 315px
+            height: 60px
+            padding: 11px
+            border-radius: 6
+            background-color: #D5D5D5
+            color: #1F2024
+            margin: 11px auto
+            font-weight: bold
+            font-size: 16px
+
+            .w-select
+                padding: 11px
+                color: #1F2024
+
+            .search-type
+                color: #1F2024
+                height: 50px
+
+        &.question
+            p
+                font-size: 18px
+                text-align: left
+                margin: 7px auto
+                font-weight: normal
+            section
+                p
+                    margin: 0
+                    font-weight: bold
+                    text-transform: capitalize
+    .w-radio__input
+
+        &.primary
+            background-color: #FFFFFF
+            border: #BCC5D3 1px solid
+
+    .w-card__content
+        .w-button
+            height: 50px
+            background-color: #5BA626
+</style>