Add close button to profile modal (#12203)

website/client/src/components/userMenu/profile.vue

@@ -4,6 +4,11 @@
     class="profile"
   >
     <div class="header">
+      <span
+        class="close-icon svg-icon inline icon-10"
+        @click="close()"
+        v-html="icons.close"
+      ></span>
       <div class="profile-actions">
         <router-link
           :to="{ path: '/private-messages', query: { uuid: user._id } }"
@@ -717,6 +722,7 @@ import lock from '@/assets/svg/lock.svg';
 import challenge from '@/assets/svg/challenge.svg';
 import member from '@/assets/svg/member-icon.svg';
 import staff from '@/assets/svg/tier-staff.svg';
+import svgClose from '@/assets/svg/close.svg';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
 
@@ -742,6 +748,7 @@ export default {
         lock,
         member,
         staff,
+        close: svgClose,
       }),
       adminToolsLoaded: false,
       userIdToMessage: '',
@@ -987,6 +994,9 @@ export default {
       const status = this.achievementsCategories[categoryKey].open;
       this.achievementsCategories[categoryKey].open = !status;
     },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'profile');
+    },
   },
 };
 </script>