Merge branch 'profile-styles' of fyindr/siimee into dev

frontend/src/components/AspectBar.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
 figure.w-flex.column
     figcaption.w-flex.xs12.justify-space-between.align-center
-        p(v-for="label in labels" :key="label").text-upper {{ label }}
-    w-progress(v-model="percentage" size="0.5em" round).mt4
+        p(v-for="(label, index) in labels" :key="label" :class="{ 'main': index === 1 }")  {{ label }}
+    w-progress(v-model="percentage" size="0.5em" round).mb7
 </template>
 
 <script>
@@ -21,3 +21,20 @@ export default {
     data: () => ({}),
 }
 </script>
+<style lang="sass">
+    figure
+        figcaption
+            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+            text-transform: capitalize
+            .main
+                color: #4D9127
+                font-weight: bold
+                text-transform: uppercase
+
+
+        .w-progress
+            background-color: #4C5264
+            .w-progress__progress
+                color: #4D9127
+        
+</style>

frontend/src/components/NamePlate.vue

@@ -5,8 +5,8 @@
             h1.text-capitalize {{ name }}
                 span O
             p.text-capitalize {{role}} 
-                span.text-capitalize(v-if="isList") | 
-                    span.text-capitalize location, st
+                span.text-capitalize(v-if="isList")
+                    span.text-capitalize Registered Nurse | Los Angeles, CA.
             p.text-capitalize(v-if="!isList") {{ pronouns }} 
                 span.text-capitalize | ethnicity
 </template>
@@ -42,12 +42,32 @@ export default {
         flex-direction: column
         align-items: center
         justify-content: center
-        padding: 15px 15px
+        padding: 15px
         min-height: 10vh
         width: 100%
         &.box
-            border: 1px black solid
+            background-color: #D5D5D5
+            border-radius: 6px
             height: 15vw
             width: 15vw
             text-align: center
+            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+            h1
+                font-weight: bold
+                font-size: 1.619em
+                color: #183770
+            p
+                font-weight: bolder
+                font-size: 0.8095em
+                color: #183770
+        h1
+            font-weight: bold
+            font-size: 1.619em
+            color: #F7F5A6
+            text-align: center
+        p
+            font-weight: bolder
+            font-size: 1em
+            color: #F7F5A6
+            text-align: center
 </style>

frontend/src/components/PairingButton.vue

@@ -1,16 +1,28 @@
 <template lang="pug">
 .pairing-button.w-flex.row
-    w-button.xs6.mt4.mb4(@click='pass' bg-color='red' color='white' xl)
-        p.pa4.text-upper pass
-    w-button.xs6.mt4.mb4(@click='pair' bg-color='green' color='mint-green' xl)
-        p.pa4.text-upper pair
+    template(v-if='status == "pristine"')
+        w-button(:class='status')(@click='pass')
+            p.pa4.text-upper pass
+        w-button(:class='status')(@click='pair')
+            p.pa4.text-upper pair
+    template(v-else-if='status == "pending"')
+        w-button(:class='status')
+            p.pa4.text-upper pending
+    template(v-else)
+        w-button(:class='status')
+            p.pa4.text-upper paired
 </template>
 
 <script>
 export default {
-    props: {},
+    props: {
+        status: {
+            required: false,
+            type: String,
+            default: 'pristine',
+        },
+    },
     emits: ['pair', 'pass'],
-    data: () => ({}),
     methods: {
         pair() {
             this.$emit('pair')
@@ -21,3 +33,29 @@ export default {
     },
 }
 </script>
+
+<style lang="sass">
+.w-button
+    p
+        font-size: 1.6em
+        font-weight: bold
+    &.pristine
+        background-color: #000
+        border: 2px solid #4D9127
+        max-width: 350px
+        width: 50%
+        margin: 11px 0
+        padding: 22px
+    &.pending
+        background-image: linear-gradient(to right, #4C5264, #A8A8A8)
+        min-width: 350px
+        width: 100%
+        margin: 11px 0
+        padding: 22px
+    &.paired
+        background: #8168F8
+        min-width: 350px
+        width: 100%
+        margin: 11px 0
+        padding: 22px
+</style>

frontend/src/components/PairsList.vue

@@ -37,6 +37,11 @@ const props = defineProps({
 
 <style lang="sass">
 .pairs-list
+    background-color:#000
+    max-width: 450px
+    width: 100%
+    height: 100vh
+    margin: 0 auto
     article
         .dot--icon
             width:3vw

frontend/src/components/ProfileCard.vue

@@ -32,8 +32,8 @@ w-card.profile-card-list--card.xs12
             v-if='!isPaired || isList'
         )
 
-    footer
-        .pa12(v-if='!isPaired && !isList')
+    footer(v-if='!isList && !isPaired')
+        .px3
             p {{ card.summary.about.tab }}
         PairingButton(@pair='onPair' @pass='onPass' v-if='!isPaired')
         w-button.text-upper.xs12.pa6(v-else-if='currentTab != 0')
@@ -120,7 +120,17 @@ const onPass = async () => {
 .profile-card-list--card
     background-color: #000
     color: #fff
+    width: 100%
+    max-width: 450px
+    margin: 11px auto
     header > .w-button
         background-color: #116006
         color: #fff
+    footer
+        margin-bottom: 22px
+        p
+            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+            margin: 11px auto
+            padding: 0 7px
+            line-height: 1.619em
 </style>

frontend/src/components/SummaryBar.vue

@@ -54,8 +54,9 @@ section.w-flex.column.pb5
                 li.w-flex.row(v-if='item !== "about"')
                     w-icon.mr1(xl) mdi mdi-heart
                     .w-flex.column.justify-start
-                        p {{ tabContent[item].matchPerc }}%
-                        p {{ item }}
+                        p 
+                            span {{ tabContent[item].matchPerc }}%
+                        p.text-capitalize {{ item }}
 </template>
 
 <script>
@@ -95,3 +96,17 @@ export default {
     },
 }
 </script>
+<style lang="sass">
+    section
+        font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+        ul
+            margin: 11px 0
+            li
+                margin: 0 7px
+                font-size: .8em
+                p > span
+                    font-weight: bold
+                    font-size: 1em
+            li:not(:last-child)
+                border-right: 1px solid #fff
+</style>

frontend/src/components/TagList.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
-section.w-flex.row.pb5
-    w-tag(v-for="tag in tags" color="pink-light1" bg-color="pink-light5").w-flex.grow.mr12.pa12
-        w-icon(v-if="icon" class="mr1" sm) {{ icon.family }} {{ icon.family }}-{{ icon.shape }}
+section.w-flex.row.wrap.pb5.justify-space-between
+    w-tag(v-for="tag in tags")
         p {{ tag }}
 </template>
 
@@ -12,9 +11,12 @@ export default {
             required: true,
             type: Array,
             default: () => [
-                'tag one',
-                'tag another thing',
-                'tag something long',
+                'California RN License',
+                'BSN',
+                'Patient Happiness',
+                'ACLS',
+                'Strong Communication',
+                'High Volume',
             ],
         },
         icon: {
@@ -24,3 +26,17 @@ export default {
     data: () => ({}),
 }
 </script>
+
+<style lang="sass">
+    section
+        min-height: 100%
+        .w-tag
+            background-color: #F7F5A6
+            margin: 3px 0
+            p
+                color: #183770
+                padding: 5px
+                font-size: 12px
+                font-weight: bolder
+                text-align: center
+</style>

frontend/src/entities/card/card.js

@@ -1,10 +1,10 @@
 /** @module card/card */
 
 const DEFAULT_ABOUT =
-    'A really really really really really. Really really really really really really really really really really really long bio.'
+    'Hello! My name is L.L. and I am a nurse from New York. I have been in the healthcare industry for over 6 years.'
 
 class SummaryGroup {
-    constructor() {
+    constructor () {
         this.about = {
             tab: null,
             matchPerc: null,
@@ -40,7 +40,7 @@ class SummaryGroup {
 }
 
 class Aspect {
-    constructor({ name, labels, percentage = 50 }) {
+    constructor ({ name, labels, percentage = 50 }) {
         this.name = name
         this.labels = labels
         this.percentage = percentage
@@ -54,7 +54,7 @@ class Aspect {
  * card facade
  */
 class Card {
-    constructor({ pid, name, role }) {
+    constructor ({ pid, name, role }) {
         this.pid = pid
 
         /**  Fields */

frontend/src/views/PairsView.vue

@@ -72,24 +72,20 @@ export default {
 }
 </script>
 
-<style>
-.select--matches {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 25px;
-}
-.select--matches > div {
-    width: 100%;
-    text-align: center;
-    font-size: 16px;
-    line-height: 40px;
-}
-.active {
-    border-bottom: 3px solid #f2cd5c;
-    color: #f2cd5c;
-}
-.idle {
-    color: #bcc5d3;
-}
+<style lang="sass">
+.select--matches 
+    display: flex
+    justify-content: space-between
+    margin: 0 25px
+.select--matches > div 
+    width: 100%
+    text-align: center
+    font-size: 16px
+    line-height: 40px
+.active 
+    border-bottom: 3px solid #f2cd5c
+    color: #f2cd5c
+.idle 
+    color: #bcc5d3
+
 </style>
-s