Merge branch '19-waveui' of fyindr/siimee into master

backend/.prettierrc

-trailingComma: "all"
-tabWidth: 4
-semi: false
-singleQuote: true
-bracketSpacing: true
-arrowParens: "avoid"
+{
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "arrowParens": "avoid"
+}

backend/lib/index.js

         await server.register(ProfilePlugin, {
             routes: { prefix: '/profile' },
         })
-        
+
         await server.register(NotificationPlugin, {
             routes: { prefix: '/notification' },
         })

backend/lib/plugins/survey.js

 
         await server.route(ResponseQuestionsRoute)
     },
-    models: { ReponseKeyModel }
+    models: { ReponseKeyModel },
 }

backend/lib/routes/membership/join.js

 
 const validators = {
     params: params.profileId,
-    payload: groupingSchema.single.append({
-        target_id: Joi.number().required(),
-        role: Joi.string(),
-    }).label('grouping_membership_single')
+    payload: groupingSchema.single
+        .append({
+            target_id: Joi.number().required(),
+            role: Joi.string(),
+        })
+        .label('grouping_membership_single'),
 }
 
 const responseSchemas = {
     response: Joi.object({
         memberships: Joi.array().items(),
-        hasMatch: Joi.boolean()
+        hasMatch: Joi.boolean(),
     }).label('grouping_membership_list'),
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {
         /** Validate based on validators object */
         validate: {
             ...validators,
-            failAction: 'log'
+            failAction: 'log',
         },
 
         /** Validate the server response */
         response: {
             status: {
-                200: apiSchema.single.append({
-                    data: responseSchemas.response,
-                }).label('join_grouping_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res'),
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.response,
+                    })
+                    .label('join_grouping_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/notification/index.js

 }
 
 const validators = {
-    params: params.profileId
+    params: params.profileId,
 }
 
 module.exports = {
             const input = new PassThrough({ objectMode: true })
             const eventType = 'stonk'
 
-            const msg = { profile_id, name: 'BDGRS', price: (500 + Math.floor(Math.random() * 100)).toString(), order: null }
+            const msg = {
+                profile_id,
+                name: 'BDGRS',
+                price: (500 + Math.floor(Math.random() * 100)).toString(),
+                order: null,
+            }
 
             // Write to the input stream
             setInterval(() => {
         /** Validate based on validators object */
         validate: {
             ...validators,
-            failAction: 'log'
+            failAction: 'log',
         },
-
     },
 }

backend/lib/routes/profile/get.js

 }
 
 const validators = {
-    params: params.profileId
+    params: params.profileId,
 }
 
 module.exports = {
         /** Validate the server response */
         response: {
             status: {
-                200: apiSchema.single.append({
-                    data: responseSchemas.profile,
-                }).label('profile_single_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res'),
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.profile,
+                    })
+                    .label('profile_single_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/profile/match.js

 const Joi = require('joi')
 const apiSchema = require('../../schemas/api')
 const errorSchema = require('../../schemas/errors')
-const surveyResponseSchema = require('../../schemas/responses') 
+const surveyResponseSchema = require('../../schemas/responses')
 
 const pluginConfig = {
     handlerType: 'match',
 
 const responseSchemas = {
     response: surveyResponseSchema.list,
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {
         /** Validate the server response */
         response: {
             status: {
-                200: apiSchema.single.append({
-                    data: responseSchemas.response,
-                }).label('response_list_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res')
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.response,
+                    })
+                    .label('response_list_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/profile/respond.js

 
 const responseSchemas = {
     response: surveyResponseSchema.list,
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 const validators = {
         /** Validate the server response */
         response: {
             status: {
-                201: apiSchema.single.append({
-                    data: responseSchemas.response,
-                }).label('response_list_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res')
+                201: apiSchema.single
+                    .append({
+                        data: responseSchemas.response,
+                    })
+                    .label('response_list_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/profile/update.js

 
 const responseSchemas = {
     response: surveyResponseSchema.list,
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 const validators = {
         /** Validate the server response */
         response: {
             status: {
-                200: apiSchema.single.append({
-                    data: responseSchemas.response,
-                }).label('response_list_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res')
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.response,
+                    })
+                    .label('response_list_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/survey/questions.js

 
         /** Validate the server response */
         response: {
-            schema: apiSchema.single.append({
-                data: responseSchemas.response
-            }).label('question_list_res'),
+            schema: apiSchema.single
+                .append({
+                    data: responseSchemas.response,
+                })
+                .label('question_list_res'),
             failAction: 'log',
         },
     },

backend/lib/routes/survey/responses.js

     // payload: true,
 }
 const responseSchemas = {
-    response: surveyResponseSchema.keys
+    response: surveyResponseSchema.keys,
 }
 
 module.exports = {
 
         /** Validate the server response */
         response: {
-            schema: apiSchema.single.append({
-                data: responseSchemas.response
-            }).label('response_list_res'),
+            schema: apiSchema.single
+                .append({
+                    data: responseSchemas.response,
+                })
+                .label('response_list_res'),
             failAction: 'log',
         },
     },

backend/lib/routes/user/create-profile.js

         user_id: Joi.number(),
         user_name: Joi.string(),
     }).label('created_profile'),
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {

backend/lib/routes/user/list-profiles.js

 
 const responseSchemas = {
     profilesList: profileSchema.list,
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {

backend/lib/routes/user/login.js

         payload: Joi.object({
             user: userSchema.single,
             error: errorSchema.single,
-        }).append().label('login_payload'),
+        })
+            .append()
+            .label('login_payload'),
     },
     user: userSchema.single,
 }

backend/lib/routes/user/signup.js

 
 const validators = {
     post: {
-        payload: userSchema.userSignup
-    }
+        payload: userSchema.userSignup,
+    },
 }
 
 const responseSchemas = {
         is_admin: Joi.number(),
         is_verified: Joi.number(),
     }).label('created_user'),
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {
                         is_poster: userType,
                         is_admin: 0,
                         is_verified: 0,
-                    }
+                    },
                 })
                 return h
                     .response({

backend/lib/services/matchqueue.js

         })
         return queueByProfileId
     }
+
     /**
      * Saves Scored Profile Ids to MatchQue IN ORDER
      * @param {number} profileId

backend/lib/services/notification.js

     const endl = '\r\n'
     for (const i in event) {
         let val = event[i]
-        if (val instanceof Buffer) { val = val.toString() }
-        if (typeof val === 'object') { val = JSON.stringify(val) }
+        if (val instanceof Buffer) {
+            val = val.toString()
+        }
+        if (typeof val === 'object') {
+            val = JSON.stringify(val)
+        }
         str += i + ': ' + val + endl
     }
     str += endl
  * Transform extension
  * ?: I don't really get what this is doing
  * @param {object} options
- * @param {object} objectMode 
+ * @param {object} objectMode
  */
 class Transformer extends Transform {
     constructor(options, objectMode) {
         options = options || {}
         this.counter = 1
         this.event = options.event || null
-        this.generateId = options.generateId ? options.generateId : () => {
-            return this.counter++
-        }
+        this.generateId = options.generateId
+            ? options.generateId
+            : () => {
+                  return this.counter++
+              }
     }
-    _transform (chunk, encoding, callback) {
+    _transform(chunk, encoding, callback) {
         const event = {
             id: this.generateId(chunk),
-            data: chunk
+            data: chunk,
+        }
+        if (this.event) {
+            event.event = this.event
         }
-        if (this.event) { event.event = this.event }
         this.push(stringifyEvent(event))
         callback()
     }
         this.push(stringifyEvent(ENDER))
         callback()
     }
-} 
+}
 
 /**
  * Take an event stream and write content to another stream
         //     event.pipe(stream)
         // }
         console.log('streamOptions :', streamOptions)
-        return h.response(active)
+        return h
+            .response(active)
             .header('content-type', 'text/event-stream')
             .header('content-encoding', 'identity')
     }
     // internals.writeEvent(event, active)
 }
 
-module.exports = { onEvent }
+module.exports = { onEvent }

backend/lib/services/profile/index.js

             // CHECKTHIS: Added this because we added user.user_name to CompleteProfile
             // so without this, we get undefined user_name
             .withGraphFetched('user')
-        
-        return profiler.makeCompleteProfilesFromProfile(profilesEntries, type, this.tagLookup)
+
+        return profiler.makeCompleteProfilesFromProfile(
+            profilesEntries,
+            type,
+            this.tagLookup,
+        )
     }
 
     async getProfilesFor(profileIdArray, type, includeResponses = true) {
             profilesEntries,
             type,
             includeResponses,
-            this.tagLookup
+            this.tagLookup,
         )
     }
 
              * Using using the input and converting to index
              * of the generated possible prescore array in config
              * DUPLICATE:See saveResponseForProfile() line 343
-             */ 
+             */
             let convertedResponse = responseToSave
-            if(scoring._isScorableResponse(responseToSave.response_key_id)) {
+            if (scoring._isScorableResponse(responseToSave.response_key_id)) {
                 // Convert -3 to 0, 0 to 3, 3 to 6
                 const offset = (config.scoreVals.length - 1) / 2
                 const indexFromInput = parseInt(responseToSave.val) + offset
-                convertedResponse.val = config.scoreVals[indexFromInput].toString()
+                convertedResponse.val =
+                    config.scoreVals[indexFromInput].toString()
             }
 
             const responseInfo = {
         )
         if (matchingResponses.length > 0) {
             const alreadyAnswered = matchingResponses.map(
-                matchingRes => matchingRes.response_key_id
+                matchingRes => matchingRes.response_key_id,
             )
             await Response.query()
                 .where({ profile_id: profileId })
          * Convert indexes to actual score values
          * Using using the input and converting to index
          * of the generated possible prescore array in config
-         */ 
+         */
         let convertedResponse = responseToSave
-        if(scoring._isScorableResponse(responseToSave.response_key_id)) {
+        if (scoring._isScorableResponse(responseToSave.response_key_id)) {
             // Convert -3 to 0, 0 to 3, 3 to 6
             const offset = (config.scoreVals.length - 1) / 2
             const indexFromInput = parseInt(responseToSave.val) + offset
             .findOne('profile_id', profileId)
             .withGraphFetched('responses')
             .withGraphFetched('user')
-        
+
         // Move unneeded responses
         const userZip = zipcoder.getZipCodeFromProfile(userProfile)
 
 
         // TODO: Let Objection optimize this
         const isPosterOpposite = userProfile.user.is_poster == 1 ? 0 : 1
-        profileIdsOfOppositeType = profileIdsOfOppositeType.filter(profile => {
-            return profile.user.is_poster == isPosterOpposite
-        }).filter(profile => {
-            // Only include profiles that included zipcode response
-            return zipcoder.getZipCodeFromProfile(profile) ? true : false
-        })
-        
+        profileIdsOfOppositeType = profileIdsOfOppositeType
+            .filter(profile => {
+                return profile.user.is_poster == isPosterOpposite
+            })
+            .filter(profile => {
+                // Only include profiles that included zipcode response
+                return zipcoder.getZipCodeFromProfile(profile) ? true : false
+            })
+
         const profilePlusDistance = await Promise.all(
             profileIdsOfOppositeType.map(async profile => {
                 const targetZip = zipcoder.getZipCodeFromProfile(profile)
             'zip_code_id',
             parseInt(zipCode),
         )
-        if (!zipInfo) { console.error('zip:', zipCode) }
+        if (!zipInfo) {
+            console.error('zip:', zipCode)
+        }
         return {
             latitude: parseFloat(zipInfo.latitude),
             longitude: parseFloat(zipInfo.longitude),

backend/lib/services/profile/profiler.js

             // [] of all "profile" responses
             this.responses = profile.responses
             // image, language, duration, presence, blurb, urgency, role, pronouns, distance
-            const prefs = ['zipcode', 'duration', 'presence', 'urgency', 'role', 'pronouns', 'distance']
+            const prefs = [
+                'zipcode',
+                'duration',
+                'presence',
+                'urgency',
+                'role',
+                'pronouns',
+                'distance',
+            ]
             const prefsKeys = config.prefKeys
             prefs.forEach((pref, i) => {
                 this.profile_prefs[pref] = this.responses.filter(
-                    r => r.response_key_id === prefsKeys[i]
+                    r => r.response_key_id === prefsKeys[i],
                 )[0]
             })
-            this.profile_description = this.responses.filter(r => r.response_key_id === config.blurbKey).map(r => r.val)[0]
-            this.profile_media = this.responses.filter(r => r.response_key_id === config.mediaKey).map(r => r.val)
-            this.profile_languages = this.responses.filter(r => r.response_key_id === config.langKey).map(r => r.val)
+            this.profile_description = this.responses
+                .filter(r => r.response_key_id === config.blurbKey)
+                .map(r => r.val)[0]
+            this.profile_media = this.responses
+                .filter(r => r.response_key_id === config.mediaKey)
+                .map(r => r.val)
+            this.profile_languages = this.responses
+                .filter(r => r.response_key_id === config.langKey)
+                .map(r => r.val)
         }
     }
 }
 
-const makeCompleteProfiles = (profileIdArray, profilesEntries, type, includeResponses, tagLookup) => {
+const makeCompleteProfiles = (
+    profileIdArray,
+    profilesEntries,
+    type,
+    includeResponses,
+    tagLookup,
+) => {
     const completeProfiles = []
     profileIdArray.forEach(pid => {
         profilesEntries.forEach(entry => {
             if (entry.profile_id == pid) {
-                const complete = new CompleteProfile(entry, type, includeResponses)
+                const complete = new CompleteProfile(
+                    entry,
+                    type,
+                    includeResponses,
+                )
                 tagger.setProfileTags(entry, complete, tagLookup)
                 completeProfiles.push(complete)
             }
     })
     return completeProfiles
 }
-const makeCompleteProfilesFromProfile = (profilesEntries, type, tagLookup)=> {
+const makeCompleteProfilesFromProfile = (profilesEntries, type, tagLookup) => {
     profilesEntries.forEach(profile => {
         tagger.setProfileTags(profile, profile, tagLookup)
     })
 module.exports = {
     CompleteProfile,
     makeCompleteProfiles,
-    makeCompleteProfilesFromProfile
-}
+    makeCompleteProfilesFromProfile,
+}

backend/lib/services/profile/scorer.js

 
 const _isScorableResponse = res_key_id => {
     let isScorable = false
-    if(config.resKeys.includes(res_key_id)) {
+    if (config.resKeys.includes(res_key_id)) {
         isScorable = true
     }
     return isScorable
             error: `complete responses for profile: ${seeker.profile_id} unqeual to profile: ${potentialMatch.profile_id} | ${seeker.responses.length}:${potentialMatch.responses.length}`,
         }
 
-    const aRes = seeker.responses.filter(
-        res =>  _isScorableResponse(res.response_key_id)
+    const aRes = seeker.responses.filter(res =>
+        _isScorableResponse(res.response_key_id),
     )
-    const bRes = potentialMatch.responses.filter(
-        res =>  _isScorableResponse(res.response_key_id)
+    const bRes = potentialMatch.responses.filter(res =>
+        _isScorableResponse(res.response_key_id),
     )
 
     const composite = []
     _isScorableResponse,
     scoreResponses,
     makeScoreLookup,
-    scoreAll
-}
+    scoreAll,
+}

backend/lib/services/profile/tagger.js

 }
 
 module.exports = {
-    setProfileTags
-}
+    setProfileTags,
+}

backend/lib/services/profile/zipcoder.js

 const getZipCodeFromProfile = profile => {
     // There should only be one zip code entry per profile
     let zipRes = profile.responses.find(
-        res => res.response_key_id == config.zipcodeKey
+        res => res.response_key_id == config.zipcodeKey,
     )
     return zipRes.val
 }
 
 module.exports = {
     getZipCodeFromProfile,
-    filterByDistance
-}
+    filterByDistance,
+}

backend/lib/services/user.js

      */
     async signup({ password, userInfo }, txn) {
         const { User } = this.server.models()
-        const matchingEmails = await User.query().where('user_email', userInfo.user_email)
+        const matchingEmails = await User.query().where(
+            'user_email',
+            userInfo.user_email,
+        )
 
-        if(matchingEmails.length > 0) { 
+        if (matchingEmails.length > 0) {
             throw `User ${userInfo.user_email} already exists: Cannot create a user without a unique email`
         }
         const user = await User.query(txn).insert(userInfo)

backend/server/index.js

 if (require.main === module) {
     exports.deployment({ start: true })
 
-    process.on('unhandledRejection', (err) => {
+    process.on('unhandledRejection', err => {
         throw err
     })
-}
+}

frontend/.prettierrc.json → frontend/.prettierrc

     "pugFramework": "vue",
     "pugSingleFileComponentIndentation": false,
     "pugClassNotation": "literal"
-}
+}

frontend/package.json

         "pubnub": "^5.0.0",
         "vue": "^3.2.31",
         "vue-eslint-parser": "^9.0.2",
-        "vue-router": "^4.0.14"
+        "vue-router": "^4.0.14",
+        "wave-ui": "^2.40.2"
     },
     "devDependencies": {
         "@prettier/plugin-pug": "^1.19.2",
         "@vitejs/plugin-vue": "^2.2.4",
         "@vue/compiler-sfc": "^3.2.31",
-        "autoprefixer": "^10.4.2",
         "cross-env": "^7.0.3",
         "eslint": "^8.11.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-vue": "^8.5.0",
-        "naive-ui": "^2.26.4",
-        "postcss": "^8.4.8",
-        "postcss-calc": "^8.2.4",
-        "postcss-import": "^14.0.2",
-        "precss": "^4.0.0",
         "pug": "^3.0.2",
         "pug-plain-loader": "^1.1.0",
-        "sugarss": "^4.0.1",
+        "sass": "^1.54.4",
+        "sass-loader": "^10.3.1",
         "vite": "^2.8.6",
         "vite-fs": "^0.0.2",
         "watch": "^1.0.2"

frontend/postcss.config.js

-module.exports = {
-    parser: 'sugarss',
-    plugins: [
-        require('postcss-import'),
-        require('postcss-calc'),
-        require('precss'),
-        require('autoprefixer'),
-    ],
-}

frontend/src/App.vue

 <template lang="pug">
-SideBar(
-    v-if="showSidebar"
-    :pid="getPid"
-    @updatePid="setPid"
-    @hide="showSidebar = false"
-)
-RouterView(
-    :pid="getPid"
-    @updatePid="setPid"
-    @show-sidebar="showSidebar = !showSidebar"
-)
+w-app
+    w-drawer(v-model="openDrawer")
+    w-flex.my12(:gap="3" align-center wrap)
+        w-button.ma1(@click="$waveui.notify('Information.')" bg-color="info") Notify info
+        w-button.ma1(@click="$waveui.notify('Success!', 'success')" bg-color="success") Notify success
+        w-button.ma1(@click="$waveui.notify('Warning!', 'warning')" bg-color="warning") Notify warning
+        w-button.ma1(@click="$waveui.notify('Error :(', 'error', 0)" bg-color="error") Permanent error
+    w-flex.my12(align-center wrap)
+        w-spinner(bounce)
+        w-input Label
+        w-checkbox Single option
+    w-flex.my12
+        w-button(@click="openDrawer = true" outline="")
+            | Open drawer
+    w-flex.my12(grow column)
+        w-slider(:model-value="40" thumb-label step-label :step="20" color="primary-light3").mt12
+        .mt4 v-model:
+            code.ml1 {{ sliderVal }}
+    w-flex.my12(:gap="3" align-center wrap)
+        | Show menu on:
+        w-menu
+            template(#activator="{ on }")
+                w-button(v-on="on") Show menu
+            | Menu content
+        w-badge.mr10(bg-color="error")
+            template(#badge) 3
+            w-icon(color="grey-light1" size="2.5em") mdi mdi-email
+    SideBar(
+        v-if="showSidebar"
+        :pid="getPid"
+        @updatePid="setPid"
+        @hide="showSidebar = false"
+    )
+    RouterView(
+        :pid="getPid"
+        @updatePid="setPid"
+        @show-sidebar="showSidebar = !showSidebar"
+    )
 </template>
 
 <script>
-import * as sss from '@/sss/import.css'
-
+import 'wave-ui/dist/wave-ui.css'
 import SideBar from './components/SideBar.vue'
 
 import { Chatter, currentProfile, StonkAlert } from './services'
 export default {
     components: { SideBar },
     data: () => ({
-        showSidebar: false
+        showSidebar: false,
+        sliderVal: 1,
+        openDrawer: false,
     }),
     computed: {
-        getPid: () => currentProfile.id.value
+        getPid: () => (currentProfile.id.value ? currentProfile.id.value : 999),
     },
     async created() {
         /** Get questions so we can compare against profile responses */
         await surveyFactory.getQuestions()
 
-        /** 
+        /**
          * Development mode turns router guards off so
-         * we hard set the profile id instead of 
+         * we hard set the profile id instead of
          * using the login form
-        */
-        if(DEV_MODE) { this.setPid(DEV_PID) }
+         */
+        if (DEV_MODE) {
+            this.setPid(DEV_PID)
+        }
 
-        if(currentProfile.isLoggedIn) {
+        if (currentProfile.isLoggedIn) {
             console.warn(`setting up Chatter and Toaster for ${this.getPid}...`)
             this.setupChatter()
             this.setupToaster()
     },
 }
 </script>
-
-<style lang="postcss">
-@import './sss/theme.sss'
-
-#app
-    display: flex
-    flex-direction: row
-    text-align: center
-    color: $primary
-    font-family: $sans
-    background-color: $dark
-    overflow-x: hidden
-    height: 100%
-    > main
-        position: relative
-        height: 100%
-        > header
-            h2
-                font-size: $ms-1
-        > article
-            height: 100%
-            width: 100%
-            flex-direction: column
-    
-    button
-        padding: $ms-0
-        background-color: $primary
-        border: 1px transparent solid
-        border-radius: $ms-1
-        transition: $transition
-        &:hover
-            background-color: $secondary
-            border: 1px transparent solid
-            border-radius: $ms-1
-            cursor: pointer
-            color: $primary
-        &:disabled
-            cursor: default
-            color: $primary
-            background-color: $light
-</style>

frontend/src/components/MainNav.vue

 <template lang="pug">
-nav#main-header.w-full.z-top.f-row.around.p-2
+nav#main-header
     button(@click="$emit('show-sidebar')") toggle sidebar
-    router-link.header__icon.mobile--only(:to="`/matches`") matches
-    router-link.header__icon(to='/') home
-    router-link.header__icon.mobile--only(:to="`/survey`") survey
+    router-link(:to="`/matches`") matches
+    router-link(to='/') home
+    router-link(:to="`/survey`") survey
 </template>
 
 <script>
     name: 'MainNav',
 }
 </script>
-
-<style lang="postcss">
-#main-header
-  position: absolute
-  bottom: 1vh
-  right: 0
-
-
-@media only screen and (min-width: 768px)
-  .mobile--only
-    /* display: none */
-    display: block
-</style>

frontend/src/components/Messages.vue

         :key='profile.profile_id' 
         :class="[pid == profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
     )
-    .f-row.start
-        img(:src='profile.avatar')
-        .message__right.f-col
-            h4.message__name {{ profile.name }}
-            p.message__content {{ profile.metadata.rawMetadata || "Hello I'm using tinder!" }}
+    img(:src='profile.avatar')
+    .message__right
+        h4.message__name {{ profile.name }}
+        p.message__content {{ profile.metadata.rawMetadata || "Hello I'm using tinder!" }}
 </template>
 
 <script>
 
 export default {
     name: 'ProfileMessages',
-    mixins: [ mixins.pidMixin ],
+    mixins: [mixins.pidMixin],
     props: {
         matches: {
             type: [Object, Array],
-            default: () => []
+            default: () => [],
         },
     },
 }
 </script>
-
-<style lang="postcss">
-
-.sidebar
-    &--messages
-        padding: 20px 10px
-        /* overflow-y: scroll */
-        text-align: left
-        a
-            color: black
-            text-decoration: none
-            &:hover
-                background: #f9f9ff
-                transition: 0.5s
-            &.active
-                background: #ececff
-                transition: 0.5s
-    &__message
-        display: flex
-        align-items: center
-        margin: 20px 0
-        img
-            object-fit: cover
-            width: 70px
-            height: 70px
-            border-radius: 50%
-
-.message
-    &__title
-        color: #fd5068
-        text-transform: uppercase
-        margin-bottom: 10px
-    &__right
-        margin-left: 10px
-    &__name
-        padding-top: 5px
-        font-weight: 600
-    &__content
-        padding-top: 10px
-        line-height: 1em
-        
-</style>

frontend/src/components/ProfileCardList.vue

 <template lang="pug">
-section.profile-card-list.w-full
+section.profile-card-list
     .swipe(
         v-if="!isGrid"
         :config="config"
         v-for="(profile, i) in loadedProfiles"
         :style="{ 'z-index': 1000-i }"
     )
-        .card.b-solid.bg-cover.randomize(
+        .card.randomize(
             :style="{ 'background-image': `url(${profile.avatar})`, 'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)` }"
         )
-            .card--content.f-col.between
-                p(style="color: magenta;").f-grow profile: {{ profile.pid }}
-                .card--content--lower.ph-1.w-full.f-col.between
-                    h4.w-full.pv-1 {{ profile.name }}
-                    nav.swipe_icons.pv-1.w-full.f-grow.f-row
+            .card--content
+                p(style="color: magenta;") profile: {{ profile.pid }}
+                .card--content--lower
+                    h4 {{ profile.name }}
+                    nav.swipe_icons
                         //- Accept
                         button(@click="accept") Accept
                         button(@click="view(profile.pid)") view
         v-else
         :key="profile.pid"
         v-for="(profile, i) in loadedProfiles"
-    ).f-row
-            .card.b-solid.bg-cover(
+    )
+            .card.bg-cover(
                 :style="{ 'background-image': `url(${profile.avatar})` }"
             )
-                .card--content.f-col.between
-                    p(style="color: magenta;").f-grow profile: {{ profile.pid }}
-                    .card--content--lower.ph-1.w-full.f-col.between
-                        h4.w-full.pv-1 {{ profile.name }}
-                        nav.swipe_icons.pv-1.w-full.f-grow.f-row
+                .card--content
+                    p(style="color: magenta;") profile: {{ profile.pid }}
+                    .card--content--lower
+                        h4 {{ profile.name }}
+                        nav.swipe_icons
                             button(@click="view(profile.pid)") view
 </template>
 
 // Copy profiles so we don't mutate the original
 const loadedProfiles = [...props.profiles]
 </script>
-
-<style lang="postcss">
-.profile-card-list
-    display: flex
-    justify-content: center
-
-.swipe
-    position: absolute
-.randomize
-    position: relative
-
-.card
-    position: relative
-    background-color: #fff
-    height: 60vw
-    width: 40vw
-    max-height: 600px
-    max-width: 400px
-    background-position: center
-    &--content
-        width: 100%
-        height: 100%
-        font-size: 3vw
-        &--lower
-            background-color: goldenrod
-            nav > button
-                font-size: 2vw
-
-
-</style>

frontend/src/components/SideBar.vue

 <template lang="pug">
-aside.sidebar.p-1.f-col.z-top
-    .temp-control-box.f-row.start.center
+aside.sidebar
+    .temp-control-box
         input(v-model="switchToPID")
-        button(@click="$emit('updatePid', switchToPID)").t-up.p-0 switch profile
+        button(@click="$emit('updatePid', switchToPID)") switch profile
     
     Messages(:matches="matches" :pid="pid")
-    
-    .spacer.f-grow
 </template>
 
 <script>
 import { mixins } from '../utils'
 
 export default {
-    components: { Messages }, 
-    mixins: [ mixins.pidMixin ],
+    components: { Messages },
+    mixins: [mixins.pidMixin],
     data: () => ({
         switchToPID: null,
         matches: [
     mounted() {
         // Set the form to display the default pid set in Home.vue
         this.switchToPID = this.pid
-    }
+    },
 }
 </script>
-
-<style lang="postcss">
-aside.sidebar
-    background-color: yellow
-    height: 100vh
-    position: fixed
-    h3
-        padding: 2vh
-
-.search
-    display: flex
-    flex-direction: row
-    input
-        border: 0
-
-</style>

frontend/src/main.js

 import { createApp } from 'vue'
-import router from './router'
+import { router } from './router'
 import { checkLoginStatus } from './router/guards'
 
+import WaveUI from '../node_modules/wave-ui/src/wave-ui/core'
+import components from './wave'
+
 import App from './App.vue'
 import MainNav from './components/MainNav.vue'
 
  */
 router.beforeEach((to, from, next) => {
     /**
-     * Skip any route guarding with `npm run dev`
-     */
-    if(DEV) { next() }
-
-    /**
+     * Skip any route guarding with `npm run dev` or
      * Use the loginService to deal with login details
-     * Activate with `npm run nodev`
+     * NOTE: Activate with `npm run nodev`
      */
-    else {
+    if (DEV) {
+        next()
+    } else {
         checkLoginStatus(to, next)
     }
 })
 
 const run = entry => {
-    const siimee = createApp(App).use(router)
+    const siimee = createApp(App)
+    siimee.use(WaveUI, { components })
+    new WaveUI(siimee)
+
+    siimee.use(router)
     siimee.component('MainNav', MainNav)
     siimee.mount(entry)
 }

frontend/src/router/index.js

     routes,
 })
 
-export default router
+export { router }

frontend/src/sss/_variables.sss

-@import './partials/_ratios.sss'
-
-/**
-  * Misc
-  */
-$transition: 300ms
-
-/**
-  * Page
-  */
-$max-width: 80vw
-
-
-/**
-  * Fonts
-  */
-$sans: 'helvetica', 'calibri', 'sans-serif'
-$serif: 'georgia', 'serif'
-$mono: 'input', 'consolas','monospace'
-
-
-/**
-  * Modular Scale
-  */
-$base: 0.7em
-$scale: $golden
-
-$ms-0: calc($base)
-$ms-1: calc($ms-0 * $scale)
-$ms-2: calc($ms-1 * $scale)
-$ms-3: calc($ms-2 * $scale)
-$ms-4: calc($ms-3 * $scale)
-$ms-5: calc($ms-4 * $scale)
-$ms-6: calc($ms-5 * $scale)
-$ms-7: calc($ms-6 * $scale)
-$ms-8: calc($ms-7 * $scale)
-$ms-9: calc($ms-8 * $scale)
-
-/**
-  * Color Scale
-  */
-$cbase: 0.3
-$cs-0: calc($cbase)
-$cs-1: calc($cs-0 * $scale)
-$cs-2: calc($cs-1 * $scale)
-$cs-3: calc($cs-2 * $scale)
-$cs-4: calc($cs-3 * $scale)
-$cs-5: calc($cs-4 * $scale)

frontend/src/sss/card.scss

-$n: 100;
-$cardbase: 2px;
-$cardtop: -1px;
-$index: 9999;
-
-@for $i from 0 through $n {
-  .swipe:nth-child(#{$i}) {
-    position: absolute;
-    left: calc($cardbase * $i);
-    top: calc($cardtop * $i);
-    z-index: calc($index - $i);
-  }
-}
-
-
-.swipe .card h3 {
-    color: blue!important;
-}

frontend/src/sss/import.css

-@import './partials/_reset.sss'
-@import './partials/_ratios.sss'
-@import './partials/_helpers.sss'
-@import './partials/_typography.sss'

frontend/src/sss/partials/_helpers.sss

-@import '../_variables.sss'
-@import '../theme.sss'
-
-.w
-    &-full
-        width: 100%
-    &-half
-        width: 50%
-    
-/* Flex box  */
-%flexy
-    display: flex
-    justify-content: center
-    align-items: center
-
-.f
-    &-row, &-col
-        @extend %flexy
-        &.start
-            align-items: flex-start
-            justify-content: flex-start
-        &.end 
-            align-items: flex-end
-            justify-content: flex-end
-        &.between
-            justify-content: space-between
-        &.around
-            justify-content: space-around
-        &.even
-            justify-content: space-evenly
-        &.stretch
-            align-content: stretch
-        &.baseline
-            align-items: baseline
-        &.center
-            align-items: flex-start
-            justify-content: flex-start
-        &.wrap
-            flex-wrap: wrap
-    &-row
-        flex-direction: row
-        &.reverse
-            flex-direction: row-reverse
-    &-col
-        flex-direction: column
-        &.reverse
-            flex-direction: column-reverse
-    &-grow
-        flex-grow: 1
-
-/* Borders */
-.b
-    &-none
-        border: none
-    &-solid
-        border: 1px solid $dark
-    &-dot
-        border: 1px dotted $dark
-    &-solid, &-dot
-        &.rounded
-            border-radius: $ms-0
-        &.invert
-            border-color: $light
-
-/* Backgrounds */
-.bg
-    &-none
-        background-color: none
-    &-primary
-        background-color: $primary
-    &-dark
-        background-color: $dark
-    &-light
-        background-color: $light
-    &-cover
-        background-size: cover
-    &-contain
-        background-size: contain
-    &-repeat
-        background-repeat: repeat
-
-/* Colors */
-.primary
-    color: $primary
-.dark
-    color: $dark
-.light
-    color: $light
-
-/* Padding */
-.p
-    &-none
-        padding: none
-    &-0
-        padding: $ms-0
-    &-1
-        padding: $ms-1
-    &-2
-        padding: $ms-2
-    &h
-        &-0
-            padding: 0 $ms-0
-        &-1
-            padding: 0 $ms-1
-        &-2
-            padding: 0 $ms-2
-    &v
-        &-0
-            padding: $ms-0 0
-        &-1
-            padding: $ms-1 0
-        &-2
-            padding: $ms-2 0
-    &t
-        &-0
-            padding-top: $ms-0
-        &-1
-            padding-top: $ms-1
-        &-2
-            padding-top: $ms-2
-    &b
-        &-0
-            padding-bottom: $ms-0
-        &-1
-            padding-bottom: $ms-1
-        &-2
-            padding-bottom: $ms-2
-    &l
-        &-0
-            padding-left: $ms-0
-        &-1
-            padding-left: $ms-1
-        &-2
-            padding-left: $ms-2
-    &r
-        &-0
-            padding-right: $ms-0
-        &-1
-            padding-right: $ms-1
-        &-2
-            padding-right: $ms-2
-
-/* Margin */
-.m
-    &-none
-        margin: none
-    &-0
-        margin: $ms-0
-    &-1
-        margin: $ms-1
-    &-2
-        margin: $ms-2
-    &h
-        &-0
-            margin: 0 $ms-0
-        &-1
-            margin: 0 $ms-1
-        &-2
-            margin: 0 $ms-2
-    &v
-        &-0
-            margin: $ms-0 0
-        &-1
-            margin: $ms-1 0
-        &-2
-            margin: $ms-2 0
-    &t
-        &-0
-            margin-top: $ms-0
-        &-1
-            margin-top: $ms-1
-        &-2
-            margin-top: $ms-2
-    &b
-        &-0
-            margin-bottom: $ms-0
-        &-1
-            margin-bottom: $ms-1
-        &-2
-            margin-bottom: $ms-2
-    &l
-        &-0
-            margin-left: $ms-0
-        &-1
-            margin-left: $ms-1
-        &-2
-            margin-left: $ms-2
-    &r
-        &-0
-            margin-right: $ms-0
-        &-1
-            margin-right: $ms-1
-        &-2
-            margin-right: $ms-2
-
-.z
-    &-bottom
-        position: relative
-        z-index: -1
-    &-10
-        position: relative
-        z-index: 10
-    &-20
-        position: relative
-        z-index: 20
-    &-30
-        position: relative
-        z-index: 30
-    &-40
-        position: relative
-        z-index: 40
-    &-50
-        position: relative
-        z-index: 50
-    &-top
-        position: relative
-        z-index: 10001

frontend/src/sss/partials/_ratios.sss

-$minor-second: 1.067
-$major-second: 1.125
-$minor-third: 1.2
-$major-third: 1.25
-$perfect-fourth: 1.333
-$augmented-fourth: 1.414
-$perfect-fifth: 1.5
-$minor-sixth: 1.6
-$golden: 1.618
-$major-sixth: 1.667
-$minor-seventh: 1.778
-$major-seventh: 1.875
-$octave: 2

frontend/src/sss/partials/_reset.sss

-@import '../_variables.sss'
-@import '../theme.sss'
-
-*
-    margin: 0
-    padding: 0
-    box-sizing: border-box
-    &:before, &:after
-        background-repeat: no-repeat
-        box-sizing: inherit
-    $:focus
-        outline: none !important
-
-::before, ::after
-    text-decoration: inherit
-    vertical-align: inherit
-
-html
-    cursor: default
-    font-family: system-ui
-    line-height: $ms-0
-    tab-size: 4
-
-body
-    margin: 0
-    font-size: $ms-1
-    font-family: $sans
-
-nav
-    ol, ul
-        list-style: none
-
-// Good for SPAs
-html, body
-    height: 100%
-
-button, input, select, textarea
-    font-family: inherit
-    font-size: inherit
-    line-height: inherit

frontend/src/sss/partials/_typography.sss

-@import '../_variables.sss'
-@import '../theme.sss'
-
-h1
-    font-size: $ms-5
-    line-height: $ms-5
-h2
-    font-size: $ms-3
-    line-height: $ms-3
-h3
-    font-size: $ms-2
-    line-height: $ms-2
-h4
-    font-size: $ms-1
-    line-height: $ms-2
-p
-    font-size: $ms-1
-    line-height: $ms-2
-
-.t
-    &-center
-        width: 100%
-        text-align: center
-    &-right
-        width: 100%
-        text-align: right
-    &-left
-        width: 100%
-        text-align: left
-    &-up
-        text-transform: uppercase
-    &-cap
-        text-transform: capitalize
-    &-sans
-        font-family: $sans
-    &-serif
-        font-family: $serif
-    &-mono
-        font-family: $mono
-
-a
-    &:hover
-        cursor: pointer

frontend/src/sss/theme.sss

-@import './_variables.sss'
-
-/**
- * Colors
- */
-$hue: 50
-$bg: calc($hue * $cs-5)
-$bright: 70%
-$opacity: 1
-
-$primary: hsla($hue, 80%, calc($bright * $cs-5), $opacity)
-$secondary: hsla($bg, 20%, calc($bright * $cs-0), $opacity)
-$hilite: hsla($hue, 80%, calc($bright * $cs-0), $opacity)
-
-$light: hsla(100, 100%, calc($bright * $cs-0), $opacity)
-$dark: hsla(001, 0%, 5%, $opacity)

frontend/src/views/HomeView.vue

 <template lang="pug">
-main.view--home.f-col.start.w-full
+main.view--home
     header
         h2 home - profile: {{ pid }}
-
+        
     article(v-if="cards.length && !loading")
         ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
 
 
 /** Callback used to format incoming into card */
 const convertToCard = profile => {
-    if(profile.type !== 'profile') {
+    if (profile.type !== 'profile') {
         console.error(`Cannot convert ${profile} to Card. Invalid entity.`)
     }
-    if(!profile.isValid()) {
+    if (!profile.isValid()) {
         console.warn(`Profile ${profile.profile_id} is not a valid profile.`)
     }
     return new Card({
 export default {
     name: 'HomeView',
     components: { ProfileCardList },
-    mixins: [ mixins.pidMixin, mixins.cardMixin ],
+    mixins: [mixins.pidMixin, mixins.cardMixin],
     methods: {
         /** Gets called from cardMixin */
         async getCards() {
             try {
                 const queueList = await fetchQueueByProfileId(this.pid)
                 this.cards = this._reformat(queueList, convertToCard)
-            } catch (err) { console.error(err) }
+            } catch (err) {
+                console.error(err)
+            }
             this.loading = false
         },
     },
 }
 </script>
-
-<style lang="postcss">
-main
-    position: relative
-    height: 100%
-    > article
-        height: 100%
-        width: 100%
-        flex-direction: column
-
-    input, button
-        position: relative
-        z-index: 1000
-</style>

frontend/src/views/LoginView.vue

 export default {
     data: () => ({
         form: {
-            profileId: null
+            profileId: null,
         },
     }),
     methods: {
         async onSubmit() {
-            if(!this.form.profileId) console.error('No profile in form')
-            
+            if (!this.form.profileId) console.error('No profile in form')
+
             /**
              * Default to the HomeView and alter as needed (side-effects!)
              */
             const toRoute = { name: 'HomeView' }
-            
+
             /**
              * Profile needs a complete survey and
              * alters the url if it's incomplete
              */
             const alreadyLoggedIn = await currentProfile.isLoggedIn
-            if(!alreadyLoggedIn) {
+            if (!alreadyLoggedIn) {
                 await currentProfile.login(this.form.profileId)
             }
 
     },
 }
 </script>
-
-<style lang="postcss">
-
-</style>

frontend/src/views/MatchesView.vue

 
 /** Callback used to format incoming into card */
 const convertToCard = grouping => {
-    if(grouping.type !== 'grouping') {
+    if (grouping.type !== 'grouping') {
         console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
     }
-    if(!grouping.profile.isValid()) {
+    if (!grouping.profile.isValid()) {
         console.warn(`Profile in ${grouping} is not a valid profile.`)
     }
     return new Card({
 export default {
     name: 'MatchView',
     components: { ProfileCardList },
-    mixins: [ mixins.pidMixin, mixins.cardMixin ],
+    mixins: [mixins.pidMixin, mixins.cardMixin],
     methods: {
         /** Gets called from cardMixin */
         async getCards() {
             try {
                 const matchList = await fetchMembershipsByProfileId(this.pid)
                 this.cards = this._reformat(matchList, convertToCard)
-            } catch (err) { console.error(err) }
+            } catch (err) {
+                console.error(err)
+            }
             this.loading = false
         },
     },
 }
 </script>
-
-<style lang="postcss">
-.row
-    display: flex
-    flex-direction: row
-</style>

frontend/src/views/ProfileView.vue

     },
 }
 </script>
-
-<style lang="postcss"></style>

frontend/src/views/SurveyView.vue

 import { surveyFactory, randomSurveyResponses } from '@/utils'
 import { allSteps, aspectResponses, possible } from '@/utils/lang'
 
-import { currentProfile, createProfileForUserId, fetchProfileByProfileId, scoreSurveyByProfileId, signupUser } from '@/services'
+import {
+    currentProfile,
+    createProfileForUserId,
+    fetchProfileByProfileId,
+    scoreSurveyByProfileId,
+    signupUser,
+} from '@/services'
 
 import { maxDistanceKey } from '../../../backend/db/data-generator/config.json'
 
 export default {
     props: {
         pid: {
-            type: Number,
+            type: String,
+            default: () => '1',
         },
     },
     data() {
                 honesty: 0,
                 respect: 0,
             },
-            aspectResponses: Object.values(aspectResponses.usa)
+            aspectResponses: Object.values(aspectResponses.usa),
         }
     },
     computed: {
             toGen.forEach(async () => {
                 const randRes = randomSurveyResponses(this.bypassCount)
                 randRes.forEach((tr, i) => {
-                    this.storeResponseLike(i, tr.idOrPrompt, tr.idOrPrompt, tr.val)
+                    this.storeResponseLike(
+                        i,
+                        tr.idOrPrompt,
+                        tr.idOrPrompt,
+                        tr.val,
+                    )
                 })
                 this.bypassCount++
                 await this.onSave()
             // Also update the form model state for now
             // We probably can refactor this out
             this.profile[prompt] = val
-            
+
             /**
              * If NO response id is present, that means the answer
              * is required and associated with a User and NOT a Profile
              **/
             this.responseLikes[`step-${step}`] = {
                 idOrPrompt: id ? id : prompt,
-                val: val.toString()
+                val: val.toString(),
             }
         },
         _formatIntoResponses(survey) {
         },
         /**
          * Survey responses have User information
-         * mixed in with scoring information so we 
+         * mixed in with scoring information so we
          * need to separate them
          * @param {array} responseLikes answered by the survey
          */
             let survey = []
             const user = {}
             responseLikes.forEach(resLike => {
-                if(resLike.idOrPrompt && Number.isFinite(parseInt(resLike.idOrPrompt))) {
+                if (
+                    resLike.idOrPrompt &&
+                    Number.isFinite(parseInt(resLike.idOrPrompt))
+                ) {
                     survey.push(resLike)
                 } else {
                     user[resLike.idOrPrompt] = resLike.val
         async _createUserProfileRel(user, survey) {
             /** A User is required before creating a profile */
             const createdUser = await signupUser(user)
-            if(!createdUser) return
+            if (!createdUser) return
 
-            const userProfileRel = await createProfileForUserId(createdUser.user_id, survey)
-            if(!userProfileRel) return 
+            const userProfileRel = await createProfileForUserId(
+                createdUser.user_id,
+                survey,
+            )
+            if (!userProfileRel) return
 
             return userProfileRel
         },
         async _getProfileWithScore(createdProfileId, maxDistance) {
             /** A Profile is associated with n:1 user and referenced by profile id */
-            const fetchedProfile = await fetchProfileByProfileId(createdProfileId)
-            if(!fetchedProfile) {
-                console.error(`Could not fetch Profile ${createdProfileId}. Please check that a User and Profile were created.`)
+            const fetchedProfile = await fetchProfileByProfileId(
+                createdProfileId,
+            )
+            if (!fetchedProfile) {
+                console.error(
+                    `Could not fetch Profile ${createdProfileId}. Please check that a User and Profile were created.`,
+                )
                 return
             }
 
             /** Use profile answers to compare against other profile answers */
-            const scored = await scoreSurveyByProfileId(createdProfileId, maxDistance)
-            if(!scored) {
+            const scored = await scoreSurveyByProfileId(
+                createdProfileId,
+                maxDistance,
+            )
+            if (!scored) {
                 console.error(`Could not score Profile ${createdProfileId}.`)
                 return
             }
         },
         async _setLoginForProfile(profile) {
             const currentId = currentProfile.login(profile.profile_id)
-            if(currentId && profile.responses.length) {
+            if (currentId && profile.responses.length) {
                 // Stores responses without fetching again
                 currentProfile.setResponses(profile.responses)
             }
-            if(!currentProfile.isComplete) {
-                console.error(`Profile ${currentProfile.id} is incomplete. Please make sure all survey questions have been answered.`)
+            if (!currentProfile.isComplete) {
+                console.error(
+                    `Profile ${currentProfile.id} is incomplete. Please make sure all survey questions have been answered.`,
+                )
                 return
             }
         },
         async onSave() {
-            const [ user, survey] = this._separateUserInfoFromResponses(Object.values(this.responseLikes))
-            const maxDistanceRes = survey.find(res => res.response_key_id == maxDistanceKey)
+            const [user, survey] = this._separateUserInfoFromResponses(
+                Object.values(this.responseLikes),
+            )
+            const maxDistanceRes = survey.find(
+                res => res.response_key_id == maxDistanceKey,
+            )
             /**
              * Creating a profile only returns the created
              * user id and profile id
              **/
-            const userProfileRel = await this._createUserProfileRel(user, survey)
+            const userProfileRel = await this._createUserProfileRel(
+                user,
+                survey,
+            )
             const createdProfileId = userProfileRel.profile_id
 
             /** A Profile is associated with n:1 user and referenced by profile id */
-            const fetchedProfile = await this._getProfileWithScore(createdProfileId, maxDistanceRes.val)
-            
-            /** 
+            const fetchedProfile = await this._getProfileWithScore(
+                createdProfileId,
+                maxDistanceRes.val,
+            )
+
+            /**
              * Login only after there is a user and
              * that user has a profile and all responses
-            */
+             */
             this._setLoginForProfile(fetchedProfile)
-            
+
             this.$router.push({ name: 'HomeView' })
         },
         back(prompt) {
     },
 }
 </script>
-
-<style lang="postcss">
-.slide-up
-    &-leave, &-enter
-        &-active
-            transition-delay: 500ms
-            transition-property: opacity, background-color, font-size, transform, color
-            transition-timing-function: cubic-bezier(1, 0.3, 0.5, 1)
-            transition-duration: 300ms
-    &-enter-from, &-leave-to
-        opacity: 0
-
-.fade
-    animation: fadeIn 1200ms ease-in
-
-@keyframes fadeIn
-    0%
-        opacity: 0
-    50%
-        opacity: 0.5
-    100%
-        opacity:1
-
-h1
-    color: white
-
-main
-    padding: 5vh
-    display: flex
-    header
-        p
-            color: #666
-            line-height: 1.3em
-        color: #ccc
-        font-style: italic
-        text-align: left
-
-article
-    height: 100%
-    width: 100%
-    flex-direction: column
-    ul
-        height: 100%
-        list-style: none
-        button
-            padding: 1em
-        p
-            padding: 1em
-            color: white
-.form
-    border: 1px solid #fff
-    width: 100%
-    header, footer, ul
-        padding: 1vh
-    ul
-        display: flex
-        width: 100%
-        > li
-            flex-direction: column
-            border: 0px solid yellow
-            width: 100%
-            padding: 0
-            text-align: left
-            label
-                margin-right: 1vh
-            > h3
-                text-transform: capitalize
-                padding: 1vh 0
-            > div > span
-                display: block
-                text-align: center
-</style>

frontend/src/wave.js

+/**
+ * We have to destructure the import for tree-shaking to work
+ */
+import {
+    WAlert,
+    WApp,
+    WBadge,
+    WButton,
+    WCard,
+    WCheckbox,
+    WDrawer,
+    WFlex,
+    WIcon,
+    WImage,
+    WInput,
+    WMenu,
+    WProgress,
+    WOverlay,
+    WSlider,
+    WSpinner,
+    WSteps,
+} from '../node_modules/wave-ui/src/wave-ui/components'
+
+export default {
+    WAlert,
+    WApp,
+    WBadge,
+    WButton,
+    WCard,
+    WCheckbox,
+    WDrawer,
+    WFlex,
+    WIcon,
+    WImage,
+    WInput,
+    WMenu,
+    WProgress,
+    WOverlay,
+    WSlider,
+    WSpinner,
+    WSteps,
+}

frontend/vite.config.js

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import ViteFS from 'vite-fs'
+
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue(), ViteFS()],
+    css: {
+        preprocessorOptions: {
+            scss: {
+                additionalData:
+                    '$use-layout-classes: false;@import "/src/../node_modules/wave-ui/src/wave-ui/scss/_variables.scss";',
+            },
+        },
+    },
+    plugins: [vue()],
     resolve: {
         alias: {
             '@': require('path').resolve(__dirname, 'src'),