avatar initials maximum 2

frontend/src/components/Contributions/ContributionListItem.vue

@@ -8,7 +8,8 @@
         <b-col cols="2">
           <avatar
             v-if="firstName"
-            :username="username"
+            :username="username.username"
+            :initials="username.initials"
             color="#fff"
             class="font-weight-bold"
           ></avatar>
@@ -269,7 +270,10 @@ export default {
       return 'collapse' + String(this.id)
     },
     username() {
-      return `${this.firstName} ${this.lastName}`
+      return {
+        username: `${this.firstName} ${this.lastName}`,
+        initials: `${this.firstName[0]}${this.lastName[0]}`,
+      }
     },
   },
   methods: {

frontend/src/components/Menu/Navbar.vue

@@ -21,10 +21,15 @@
               <div>
                 <div class="d-flex align-items-center">
                   <div class="mr-3">
-                    <avatar :username="username" :color="'#fff'" :size="81"></avatar>
+                    <avatar
+                      :username="username.username"
+                      :initials="username.initials"
+                      :color="'#fff'"
+                      :size="81"
+                    ></avatar>
                   </div>
                   <div>
-                    <div data-test="navbar-item-username">{{ username }}</div>
+                    <div data-test="navbar-item-username">{{ username.username }}</div>
 
                     <div class="text-right">
                       {{ $store.state.email }}
@@ -64,7 +69,10 @@ export default {
   },
   computed: {
     username() {
-      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
+      return {
+        username: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
+        initials: `${this.$store.state.firstName[0]}${this.$store.state.lastName[0]}`,
+      }
     },
   },
 }

frontend/src/components/Template/RightSide/LastTransactions.vue

@@ -6,7 +6,7 @@
         <b-icon icon="three-dots-vertical"></b-icon>
       </b-col> -->
     </b-row>
-    <!-- <b-list-group class="mt-5"> -->
+
     <div v-for="(transaction, index) in transactions" :key="transaction.id">
       <b-row
         align-v="center"
@@ -24,6 +24,7 @@
               :size="72"
               :color="'#fff'"
               :username="`${transaction.linkedUser.firstName} ${transaction.linkedUser.lastName}`"
+              :initials="`${transaction.linkedUser.firstName[0]}${transaction.linkedUser.lastName[0]}`"
             ></avatar>
           </div>
         </b-col>
@@ -49,27 +50,7 @@
           </b-row>
         </b-col>
       </b-row>
-      <!-- <b-list-group-item
-          class="border-0"
-          v-if="
-            index <= 7 &&
-            transaction.typeId !== 'DECAY' &&
-            transaction.typeId !== 'LINK_SUMMARY' &&
-            transaction.typeId !== 'CREATION'
-          "
-        >
-          <div class="d-flex align-items-center">
-            <avatar
-              :username="`${transaction.linkedUser.firstName} ${transaction.linkedUser.lastName}`"
-            ></avatar>
-            <span>
-              <name :linkedUser="transaction.linkedUser" @set-tunneled-email="setTunneledEmail" />
-            </span>
-            <b-badge>{{ transaction.amount | GDD }}</b-badge>
-          </div>
-        </b-list-group-item> -->
     </div>
-    <!-- </b-list-group> -->
   </div>
 </template>
 <script>

frontend/src/components/Transactions/TransactionReceive.vue

@@ -3,7 +3,12 @@
     <b-row @click="visible = !visible" class="align-items-center">
       <b-col cols="2">
         <!-- <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar> -->
-        <avatar :username="username" :color="'#fff'" size="42"></avatar>
+        <avatar
+          :username="username.username"
+          :initials="username.initials"
+          :color="'#fff'"
+          size="42"
+        ></avatar>
       </b-col>
       <b-col>
         <div>
@@ -104,7 +109,10 @@ export default {
   },
   computed: {
     username() {
-      return `${this.linkedUser.firstName} ${this.linkedUser.lastName}`
+      return {
+        username: `${this.linkedUser.firstName} ${this.linkedUser.lastName}`,
+        initials: `${this.linkedUser.firstName[0]}${this.linkedUser.lastName[0]}`,
+      }
     },
   },
 }

frontend/src/components/Transactions/TransactionSend.vue

@@ -2,7 +2,12 @@
   <div class="transaction-slot-send">
     <b-row @click="visible = !visible" class="align-items-center">
       <b-col cols="2">
-        <avatar :username="username" :color="'#fff'" size="42"></avatar>
+        <avatar
+          :username="username.username"
+          :initials="username.initials"
+          :color="'#fff'"
+          size="42"
+        ></avatar>
       </b-col>
       <b-col>
         <div>
@@ -104,7 +109,10 @@ export default {
   },
   computed: {
     username() {
-      return `${this.linkedUser.firstName} ${this.linkedUser.lastName}`
+      return {
+        username: `${this.linkedUser.firstName} ${this.linkedUser.lastName}`,
+        initials: `${this.linkedUser.firstName[0]}${this.linkedUser.lastName[0]}`,
+      }
     },
   },
 }

frontend/src/components/UserSettings/UserCard.vue

@@ -2,7 +2,12 @@
   <div class="userdata-card">
     <b-row>
       <b-col class="centerPerMargin">
-        <avatar :username="username" :color="'#fff'" :size="90"></avatar>
+        <avatar
+          :username="username.username"
+          :initials="username.initials"
+          :color="'#fff'"
+          :size="90"
+        ></avatar>
       </b-col>
     </b-row>
     <b-card class="border-0">
@@ -53,13 +58,16 @@ export default {
   },
   computed: {
     username() {
-      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
+      return {
+        username: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
+        initials: `${this.$store.state.firstName[0]}${this.$store.state.lastName[0]}`,
+      }
     },
   },
 }
 </script>
 <style scoped>
 .centerPerMargin {
-  padding-left: 38%;
+  padding-left: 44%;
 }
 </style>