Fixed block icon not showing in profile modal. (#9667)

* Fixed block and add icon not showing and the ordering of the buttons. Also fixed and added tooltips for buttons.

* Changed unnecessary change of color in svg icon files and changed tooltip attribute to not be empty

website/client/assets/svg/gift.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
-    <path fill="#686274" fill-rule="evenodd" d="M8 8.807h4v-3H8v3zm0 5h4v-3H8v3zm-6-5h4v-3H2v3zm0 5h4v-3H2v3zm10-12h-2V.501a.5.5 0 0 0-.658-.475L7 .807 4.658.027A.5.5 0 0 0 4 .5v1.306H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-10a2 2 0 0 0-2-2z"/>
+    <path fill-rule="evenodd" d="M8 8.807h4v-3H8v3zm0 5h4v-3H8v3zm-6-5h4v-3H2v3zm0 5h4v-3H2v3zm10-12h-2V.501a.5.5 0 0 0-.658-.475L7 .807 4.658.027A.5.5 0 0 0 4 .5v1.306H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-10a2 2 0 0 0-2-2z"/>
 </svg>

website/client/assets/svg/remove.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#878190" fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
+    <path fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
 </svg>

website/client/components/userMenu/profile.vue

@@ -3,18 +3,16 @@ div
   b-modal#profile(title="Profile", size='lg', :hide-footer="true")
     div(slot='modal-header')
       .profile-actions
-        button.btn.btn-secondary(@click='sendMessage()')
+        button.btn.btn-secondary.message-icon(@click='sendMessage()', v-b-tooltip.hover.left="$t('sendMessage')")
           .svg-icon.message-icon(v-html="icons.message")
-        button.btn.btn-secondary(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1', :tooltip="$t('unblock')",
-          @click="blockUser()", tooltip-placement='right')
-          span.glyphicon.glyphicon-plus
-          | {{$t('block')}}
-        button.btn.btn-secondary(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
-          :tooltip="$t('unblock')", @click="unblockUser()", tooltip-placement='right')
-          span.glyphicon.glyphicon-ban-circle
-          | {{$t('unblock')}}
-        button.btn.btn-secondary(@click='openSendGemsModal()')
+        button.btn.btn-secondary.gift-icon(@click='openSendGemsModal()', v-b-tooltip.hover.bottom="$t('sendGems')")
           .svg-icon.gift-icon(v-html="icons.gift")
+        button.btn.btn-secondary.remove-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1',
+          @click="blockUser()", v-b-tooltip.hover.right="$t('block')")
+          .svg-icon.remove-icon(v-html="icons.remove")
+        button.btn.btn-secondary.positive-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
+          @click="unblockUser()", v-b-tooltip.hover.right="$t('unblock')")
+          .svg-icon.positive-icon(v-html="icons.positive")
       .row
         .col-12
           member-details(:member="user")
@@ -307,17 +305,31 @@ div
     button {
       width: 40px;
       height: 40px;
-      padding: .8em;
+      padding: .7em;
       margin-right: .5em;
     }
   }
 
+
   .message-icon {
     width: 16px;
+    color: #686274;
   }
 
   .gift-icon {
     width: 14px;
+    padding: 0 0 0 1px;
+    color: #686274;
+  }
+
+  .remove-icon {
+    width:16px;
+    color: #686274;
+  }
+
+  .positive-icon {
+    width: 14px;
+    color: #686274;
   }
 
   .pet-mount-row {
@@ -573,6 +585,8 @@ const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
 
 import message from 'assets/svg/message.svg';
 import gift from 'assets/svg/gift.svg';
+import remove from 'assets/svg/remove.svg';
+import positive from 'assets/svg/positive.svg';
 import dots from 'assets/svg/dots.svg';
 
 export default {
@@ -588,6 +602,8 @@ export default {
     return {
       icons: Object.freeze({
         message,
+        remove,
+        positive,
         gift,
         dots,
       }),