Fix minor issues around the app related to #747

frontend/assets/style/_icons.scss

@@ -97,7 +97,7 @@ $icons: (
   }
 }
 
-.c-icon-round {
+.icon-round {
   width: 2rem;
   height: 2rem;
   margin-right: $spacer-sm*2;

frontend/views/components/ContributionItem.vue

@@ -133,7 +133,7 @@ export default {
           color: 'success'
         }
       }
-      return `icon-${style[this.type].icon} c-icon-round has-background-${style[this.type].color} has-text-${style[this.type].color}`
+      return `icon-${style[this.type].icon} icon-round has-background-${style[this.type].color} has-text-${style[this.type].color}`
     }
   }
 }

frontend/views/components/GroupWelcome.vue

@@ -1,9 +1,8 @@
 <template lang='pug'>
 .wrapper(data-test='welcome')
   avatar(
-    src='/assets/images/default-avatar.png'
-    :alt='groupSettings.groupName'
-    :blobURL='groupSettings.groupPicture'
+    :src='groupSettings.groupPicture'
+    :aria-label='L("{groupName}\'s avatar", { groupName: groupSettings.groupName })'
   )
 
   i18n(

frontend/views/containers/modals/CreateGroup.vue

@@ -130,7 +130,7 @@ export default {
           settings: {
             // authorizations: [contracts.CanModifyAuths.dummyAuth()], // TODO: this
             groupName: this.form.groupName,
-            groupPicture: this.form.groupPicture || '/assets/images/default-avatar.png',
+            groupPicture: this.form.groupPicture || `${window.location.origin}/assets/images/default-group-avatar.png`,
             sharedValues: this.form.sharedValues,
             mincomeAmount: +this.form.mincomeAmount, // ensure this is a number
             mincomeCurrency: this.form.mincomeCurrency,

frontend/views/containers/proposals/ProposalBox.vue

@@ -63,14 +63,14 @@ export default {
       if (isAnyOpen) {
         return isOwnProposal
           ? L('{strong_}You{_strong} are proposing:', this.LTags('strong'))
-          : L('{strong_}{username}{_strong} is proposing:', { username, ...this.LTags('strong') })
+          : L('{username} is proposing:', { username: `<strong>${username}</strong>` })
       }
 
       // Note: In English, no matter the subject, the wording is the same,
       // but in other languages the wording is different (ex: Portuguese)
       return isOwnProposal
         ? L('{strong_}You{_strong} proposed:', this.LTags('strong'))
-        : L('{strong_}{username}{_strong} proposed:', { username, ...this.LTags('strong') })
+        : L('{username} proposed:', { username: `<strong>${username}</strong>` })
     },
     humanDate () {
       const date = new Date(this.proposal.meta.createdDate)
@@ -97,12 +97,12 @@ export default {
         return `"${reason.substr(0, charToTruncate)}..."`
       }
 
-      return `"${reason}"`
+      return reason ? `"${reason}"` : ''
     }
   },
   methods: {
     toggleReason (e) {
-      e.target.blur() // so the button doesnt look black.
+      e.target.blur() // so the button doesnt remain focused (with black color).
       this.ephemeral.isReasonHidden = !this.ephemeral.isReasonHidden
     }
   }

frontend/views/containers/proposals/ProposalItem.vue

@@ -1,7 +1,7 @@
 <template lang='pug'>
   li.c-li(data-test='proposalItem')
     .c-item
-      i.c-icon-round(:class='iconClass')
+      i(:class='iconClass')
       .c-main
         p.has-text-bold(data-test='typeDescription') {{typeDescription}}
         p.has-text-1(
@@ -120,10 +120,10 @@ export default {
 
       if ([STATUS_PASSED, STATUS_FAILED].includes(this.proposal.status)) {
         // Show the status icon, no matter the proposal type
-        return `${status[this.proposal.status]} c-icon`
+        return `${status[this.proposal.status]} icon-round`
       }
 
-      return `${type[this.proposalType]} ${status[this.proposal.status]} c-icon`
+      return `${type[this.proposalType]} ${status[this.proposal.status]} icon-round`
     },
     invitationLink () {
       if (this.proposalType === PROPOSAL_INVITE_MEMBER &&
@@ -179,7 +179,7 @@ export default {
   }
 }
 
-.c-icon-round {
+.icon-round {
   @include phone {
     margin-left: $spacer-sm; // TODO: Suggest to @mmbotelho
   }

frontend/views/containers/proposals/ProposalVoteOptions.vue

@@ -102,7 +102,10 @@ export default {
         const proposalHash = this.proposalHash
         const payload = {}
         if (oneVoteToPass(proposalHash)) {
-          payload.passPayload = createInvite({ creator: this.proposal.data.proposalData.member })
+          payload.passPayload = createInvite({
+            invitee: this.proposal.data.proposalData.member,
+            creator: this.proposal.meta.username
+          })
         }
         const vote = await sbp('gi.contracts/group/proposalVote/create',
           {

frontend/views/containers/sidebar/GroupsList.vue

@@ -12,8 +12,7 @@ ul.c-group-list(v-if='groupsByName.length')
     )
       button.c-group-picture.is-unstyled(@click='handleMenuSelect(group.contractID)')
         avatar.c-avatar(
-          src='/assets/images/default-avatar.png'
-          :blobURL='$store.state[group.contractID].settings.groupPicture'
+          :src='$store.state[group.contractID].settings.groupPicture'
         )
 
   li.c-group-list-item

frontend/views/pages/DesignSystem.vue

@@ -223,9 +223,9 @@ page(
         tr
           td
             pre
-              | i.icon-angle-left.c-icon-round.has-background-success.has-text-success
+              | i.icon-angle-left.icon-round.has-background-success.has-text-success
           td
-            i.icon-angle-left.c-icon-round.has-background-success.has-text-success
+            i.icon-angle-left.icon-round.has-background-success.has-text-success
   article#spacing
     section.card
       i18n(tag='h2' class='card-header') Spacing

frontend/views/pages/Join.vue

@@ -35,16 +35,18 @@ div
     .c-broken(v-else-if='isStatus("INVALID") || isStatus("EXPIRED")')
       svg-broken-link.c-svg
       i18n.title.is-1(
-        v-if='isStatus("EXPIRED")'
+        v-if='isStatus("INVALID")'
         tag='h1'
+        data-test='pageTitle'
         :args='LTags()'
       ) Oh no! {br_}Something went wrong.
       i18n.title.is-1(
         v-else
         tag='h1'
+        data-test='pageTitle'
         :args='LTags()'
       ) Oh no! {br_}Your link has expired.
-      p.has-text-1 {{ ephemeral.errorMsg }}
+      p.has-text-1(data-test='helperText') {{ ephemeral.errorMsg }}
       i18n.c-goHome(tag='button' @click='goHome') Take me home
 </template>
 
@@ -136,7 +138,7 @@ export default {
       }
     } catch (e) {
       console.error(e)
-      this.ephemeral.errorMsg = `${L('Something went wrong.')} ${e.message}`
+      this.ephemeral.errorMsg = `${L('Something went wrong. Please, try again.')} ${e.message}`
       this.pageStatus = 'INVALID'
     }
   },