Various improvements after revisions

src/App.vue

@@ -1,7 +1,12 @@
 <template lang="pug">
 div
   #q-app(:class="{ 'banner-offset': !!alert }")
-    .banner.q-pa-xs(v-if="alert" :class="getBannerClass()") {{ alert.content }}
+    .banner.q-pa-sm(v-if="alert" :class="getBannerClass()")
+      q-icon.q-mr-xs(v-if="alert.level === 'success'" name="fas fa-check-square")
+      q-icon.q-mr-xs(v-if="alert.level === 'info'" name="fas fa-info-circle")
+      q-icon.q-mr-xs(v-if="alert.level === 'warning'" name="fas fa-exclamation-triangle")
+      q-icon.q-mr-xs(v-if="alert.level === 'danger'" name="fas fa-radiation")
+      | {{ alert.content }}
       q-btn.float-right(flat dense color="white" label="Dismiss" @click="dismissAlert")
     router-view
 </template>
@@ -40,7 +45,7 @@ export default {
 <style lang="sass">
 .banner-offset
   /deep/.q-header
-    margin-top: 25px
+    margin-top: 35px
 .banner
   text-align: center
   color: white

src/mixins/format.js

@@ -34,6 +34,12 @@ export const format = {
     },
     toAsset (amount) {
       return new Intl.NumberFormat(navigator.language, { style: 'currency', currency: 'USD', currencyDisplay: 'code' }).format(amount).replace(/[a-z]{3}/i, '').trim()
+    },
+    async toSHA256 (message) {
+      const msgBuffer = new TextEncoder('utf-8').encode(message)
+      const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer)
+      const hashArray = Array.from(new Uint8Array(hashBuffer))
+      return hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join('')
     }
   }
 }

src/pages/payouts/components/payout-form.vue

@@ -213,7 +213,7 @@ export default {
       | Please enter the USD equivalent and % deferral for this contribution – the more you defer to a later date, the higher the bonus will be (see actual salary calculation below or use our 
       a(href="https://drive.google.com/open?id=1xngcdfqhoqE9uCUURybUDU5pCYrI3UjY6aIgf1auD38" target="_blank" style="text-decoration:none") calculator
       |). The bottom fields compute the actual payout in SEEDS, HVOICE, HYPHA and HUSD.
-    .row.q-col-gutter-xs
+    .row.q-col-gutter-xs(v-if="!manualInput")
       .col-xs-12.col-md-6
         q-input(
           ref="amount"

src/pages/payouts/components/payout-proposal-view.vue

@@ -228,7 +228,7 @@ export default {
   fieldset.q-mt-sm
     legend Payout
     p Fields below display the payout for this contribution as well as % deferred salary. The payout is shown as USD equivalent and the corresponding amounts received in SEEDS, HVOICE, HYPHA and HUSD.
-    .row.q-col-gutter-xs
+    .row.q-col-gutter-xs(v-if="parseFloat(amount) > 0 || parseFloat(deferred) > 0")
       .col-xs-12.col-md-6
         q-input.bg-grey-4.text-black(
           v-model="amount"

src/pages/proposals/components/proposal-card.vue

@@ -24,7 +24,8 @@ export default {
       canCloseProposal: false,
       voting: false,
       userVote: null,
-      role: null
+      role: null,
+      titleHash: null
     }
   },
   computed: {
@@ -142,6 +143,14 @@ export default {
           ballot: this.ballot.ballot_name
         })
       }
+    },
+    title: {
+      immediate: true,
+      async handler (val) {
+        if (val) {
+          this.titleHash = await this.toSHA256(val)
+        }
+      }
     }
   },
   methods: {
@@ -235,7 +244,7 @@ q-card.proposal(v-if="isFiltered")
   q-card-section.text-center.q-pb-sm.cursor-pointer.relative-position(@click="showCardFullContent")
     q-img.owner-avatar(
       v-if="origin === 'role' || type === 'role'"
-      :src="`https://api.adorable.io/avatars/100/${proposal.id}`"
+      :src="`https://api.adorable.io/avatars/100/${titleHash}`"
     )
     q-img.owner-avatar(
       v-if="origin !== 'role' && type !== 'role' && profile && profile.publicData && profile.publicData.avatar"
@@ -364,7 +373,7 @@ q-card.proposal(v-if="isFiltered")
   text-align center
   font-size 20px
   color $grey-6
-  line-height 22px
+  line-height 1.0
 .icon
   position absolute
   right 10px

src/pages/roles/components/role-card.vue

@@ -14,7 +14,8 @@ export default {
     return {
       loading: true,
       countdown: '',
-      timeout: null
+      timeout: null,
+      titleHash: null
     }
   },
   computed: {
@@ -179,6 +180,14 @@ export default {
           clearTimeout(this.timeout)
         }
       }
+    },
+    title: {
+      immediate: true,
+      async handler (val) {
+        if (val) {
+          this.titleHash = await this.toSHA256(val)
+        }
+      }
     }
   }
 }
@@ -241,7 +250,7 @@ q-card.role
     div
       q-card-section.text-center.q-pb-sm.relative-position(@click="showCardFullContent")
         q-img.owner-avatar(
-          :src="`https://api.adorable.io/avatars/100/${role.id}`"
+          :src="`https://api.adorable.io/avatars/100/${titleHash}`"
         )
         .salary-bucket.bg-proposal(v-if="salaryBucket") {{ salaryBucket }}
       q-card-section
@@ -302,7 +311,7 @@ q-card.role
   font-size 24px
   margin-top 10px
   color $grey-6
-  line-height 22px
+  line-height 1.0
 .icon
   position absolute
   right 40px