:sparkles: onboarding styles added all the way to the questionnaire #TODO style questionResponse.vue

frontend/src/components/onboarding/AccountType.vue

@@ -1,10 +1,14 @@
 <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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.aspects
+w-card.aspects.w-flex.column
     form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
         QuestionResponse(
             :question='question'
@@ -10,6 +10,7 @@
             w-icon.mr1 wi-check
             | SUBMIT ANSWERS
 </template>
+
 <script>
 import QuestionResponse from './QuestionResponse.vue'
 const answered = [null, null, null, null, null, null]
@@ -27,17 +28,17 @@ export default {
     },
     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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.company-id
+w-card.company-id.w-flex.column
     h3 Company ID
     p {{ question }}
     input(
@@ -7,8 +7,9 @@
         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

@@ -1,13 +1,13 @@
 <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

@@ -1,15 +1,17 @@
 <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

@@ -1,9 +1,16 @@
 <template lang="pug">
+<<<<<<< HEAD
 .location
     h3 Location
     p {{ question }}
     DynamicTagList(:placeholder='"location"' :tags='locations')
     w-button.ma1.grow(@click='handleSubmit') NEXT
+=======
+w-card.w-flex.column
+    h3 Location
+    p Where would you like to select your candidates from?
+    w-button.next-btn(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+>>>>>>> 59a1766 (:sparkles: onboarding styles added all the way to the questionnaire #TODO style questionResponse.vue)
 </template>
 <script>
 import DynamicTagList from '../DynamicTagList.vue'

frontend/src/components/onboarding/Role.vue

@@ -1,9 +1,9 @@
 <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

@@ -1,12 +1,14 @@
 <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

@@ -1,6 +1,10 @@
 <template lang="pug">
 w-flex.column
-    w-image.splash-logo(:height='300' :src='`/assets/logos/siimee_logo.jpg`' :width='300')
+    w-image.splash-logo(
+        :height='300'
+        :src='`/assets/logos/siimee_logo.jpg`'
+        :width='300'
+    )
     w-button.ma1.grow.next-btn(
         :height='50'
         :width='315'

frontend/src/views/OnboardingView.vue

@@ -45,15 +45,89 @@ export default {
         },
         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
+    height: 100vh
+    background-color: #fff
+    color: #1F2024
+    font-family: 'Century Gothic'
+    margin: 0 auto
+
+    .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
+        font-family: 'Century Gothic' sans-serif
+        min-height: 100vh
+        height: 100%
+        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
+</style>