icon initials of name

Step/wwwroot/assets/styles/base/colors.less

@@ -39,6 +39,7 @@
 @color-label-grey: #979797;
 @color-input-background: #f8f8f8;
 @color-squash : #f5a623;
+@color-harmonies: #f4bf7e;
 @color-scarlet:#d0021b;
 @color-faded-red:#d84b5c;
 @color-sandy: #f3d39d;

Step/wwwroot/assets/styles/base/maintenance-card.less

@@ -221,6 +221,15 @@
                             margin-left: 16px;
                             margin-top: 8px;
                             float: left;
+                            background-color: @color-harmonies;
+                            color: black;
+                            line-height: 40px;
+                            border-radius: 20px;
+                            text-align: center;
+                            font-family: Arial, sans-serif;
+                            font-size: 15px;
+                            font-weight: bold;
+                            text-transform: uppercase;
                         }
                         .text-message{
                             margin-left: 8px;

Step/wwwroot/assets/styles/style.css

@@ -8182,6 +8182,15 @@ footer .container button.big:before {
   margin-left: 16px;
   margin-top: 8px;
   float: left;
+  background-color: #f4bf7e;
+  color: black;
+  line-height: 40px;
+  border-radius: 20px;
+  text-align: center;
+  font-family: Arial, sans-serif;
+  font-size: 15px;
+  font-weight: bold;
+  text-transform: uppercase;
 }
 .accordion-maintenance section .dropdown .all-message-box .message-box .message-box-header .text-message {
   margin-left: 8px;

Step/wwwroot/src/modules/base-components/cards/maintenance-card.vue

@@ -51,7 +51,7 @@
                         <div class="all-message-box scrollable">
                             <div class="message-box" v-for="(n, index) in noteMaintenance" :key="index" v-if="noteMaintenance && noteMaintenance.length > 0 && index < limitationList" :class="{selected: selectedNoteMaintenance == n}" @click="onClickSelectNote(n)">
                                 <div class="message-box-header">
-                                    <img class="avatar"/>
+                                    <div v-if="n.user.username == currentUser.username" class="avatar">{{n.user.firstName.split(' ').map(function (s) { return s.charAt(0); }).join('')}}{{n.user.lastName.split(' ').map(function (s) { return s.charAt(0); }).join('')}}</div>
                                     <textarea :disabled="isDisabled(n)" class="text-message" v-model="n.message"></textarea>
                                 </div>
                                 <div v-if="selectedNoteMaintenance == n && enableModifyNote" class="message-box-body">
@@ -107,7 +107,7 @@ export default {
         expiration: {default: ""},
         selectedMaintenance: {default: {}},
         noteMaintenance: {default: []},
-        canEdit:{ default: false }
+        canEdit:{ default: false },
         // enableModifyNote: {default: true}
     },
     data(){
@@ -122,6 +122,11 @@ export default {
     components: { 
         cardmaintenancewizard, accordionMaintenance
     },
+    computed:{
+        currentUser: function(){
+            return this.$store.state.currentUser;
+        }
+    },
     methods:{
       onClick(){
         this.$emit("click");