From c6d4c20982261b55b16dda59c3e657eb1feb0041 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 16:11:44 +0200
Subject: Made Select component to make using styled selects easier

---
 src/components/poll/poll_form.js  |  6 +++--
 src/components/poll/poll_form.vue | 51 ++++++++++++++-------------------------
 2 files changed, 22 insertions(+), 35 deletions(-)

(limited to 'src/components/poll')

diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index 1f8df3f9..e30645c3 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,19 +1,21 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
 import {
   faTimes,
-  faChevronDown,
   faPlus
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faTimes,
-  faChevronDown,
   faPlus
 )
 
 export default {
+  components: {
+    Select
+  },
   name: 'PollForm',
   props: ['visible'],
   data: () => ({
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index c4403210..f10d1550 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -46,23 +46,13 @@
         class="poll-type"
         :title="$t('polls.type')"
       >
-        <label
-          for="poll-type-selector"
-          class="select"
+        <Select
+          v-model="pollType"
+          @change="updatePollToParent"
         >
-          <select
-            v-model="pollType"
-            class="select"
-            @change="updatePollToParent"
-          >
-            <option value="single">{{ $t('polls.single_choice') }}</option>
-            <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+          <option value="single">{{ $t('polls.single_choice') }}</option>
+          <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
+        </Select>
       </div>
       <div
         class="poll-expiry"
@@ -76,24 +66,19 @@
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
         >
-        <label class="expiry-unit select">
-          <select
-            v-model="expiryUnit"
-            @change="expiryAmountChange"
+        <Select
+          v-model="expiryUnit"
+          class="expiry-unit"
+          @change="expiryAmountChange"
+        >
+          <option
+            v-for="unit in expiryUnits"
+            :key="unit"
+            :value="unit"
           >
-            <option
-              v-for="unit in expiryUnits"
-              :key="unit"
-              :value="unit"
-            >
-              {{ $t(`time.${unit}_short`, ['']) }}
-            </option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+            {{ $t(`time.${unit}_short`, ['']) }}
+          </option>
+        </Select>
       </div>
     </div>
   </div>
-- 
cgit v1.2.3-70-g09d2


From 5d3bf43fdc83efb0294229df63201877032a85ff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 16:19:11 +0200
Subject: ghost styles for poll form

---
 src/components/poll/poll_form.vue | 14 ++------------
 src/components/select/select.js   | 21 +++++++++++++++++++++
 src/components/select/select.vue  | 31 ++++++++++---------------------
 3 files changed, 33 insertions(+), 33 deletions(-)
 create mode 100644 src/components/select/select.js

(limited to 'src/components/poll')

diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index f10d1550..f2459e45 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -47,6 +47,7 @@
         :title="$t('polls.type')"
       >
         <Select
+          kind="ghost"
           v-model="pollType"
           @change="updatePollToParent"
         >
@@ -68,6 +69,7 @@
         >
         <Select
           v-model="expiryUnit"
+          kind="ghost"
           class="expiry-unit"
           @change="expiryAmountChange"
         >
@@ -132,12 +134,6 @@
   .poll-type {
     margin-right: 0.75em;
     flex: 1 1 60%;
-    .select {
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
-      padding-right: 0.75em;
-    }
   }
 
   .poll-expiry {
@@ -147,12 +143,6 @@
       width: 3em;
       text-align: right;
     }
-
-    .expiry-unit {
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
-    }
   }
 }
 </style>
diff --git a/src/components/select/select.js b/src/components/select/select.js
new file mode 100644
index 00000000..49535d07
--- /dev/null
+++ b/src/components/select/select.js
@@ -0,0 +1,21 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
+
+export default {
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: [
+    'value',
+    'disabled',
+    'unstyled',
+    'kind'
+  ]
+}
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index a27a2541..55474e1a 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -2,7 +2,7 @@
 <template>
   <label
     class="Select input"
-    :class="{ disabled }"
+    :class="[ kindClass, { disabled } ]"
   >
     <select
       :disabled="disabled"
@@ -18,26 +18,7 @@
   </label>
 </template>
 
-<script>
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
-export default {
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: [
-    'value',
-    'disabled'
-  ]
-}
-</script>
+<script src="./select.js"> </script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -45,6 +26,14 @@ export default {
 .Select {
   padding: 0;
 
+  /* Overriding input styles, probably should make proper Input component? */
+  &.-kind_ghost {
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    padding-right: 0.75em;
+  }
+
   select {
     -webkit-appearance: none;
     -moz-appearance: none;
-- 
cgit v1.2.3-70-g09d2


From 3870a30aeaeb9ed89e69610f2fc4ca6838fb1558 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 16:31:15 +0200
Subject: cleanup, fixes

---
 src/App.scss                                     | 13 -------------
 src/components/font_control/font_control.vue     |  3 ++-
 src/components/poll/poll_form.vue                |  9 +++++++--
 src/components/select/select.vue                 | 24 +++++++++++++++---------
 src/components/shadow_control/shadow_control.vue | 14 +++++++-------
 src/components/user_card/user_card.vue           | 10 ++--------
 6 files changed, 33 insertions(+), 40 deletions(-)

(limited to 'src/components/poll')

diff --git a/src/App.scss b/src/App.scss
index 77f2ea79..a537baed 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -222,19 +222,6 @@ input, textarea, .input {
     opacity: 0.5;
   }
 
-  .select-down-icon {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 5px;
-    height: 100%;
-    color: $fallback--text;
-    color: var(--inputText, $fallback--text);
-    line-height: 28px;
-    z-index: 0;
-    pointer-events: none;
-  }
-
   &[type=range] {
     background: none;
     border: none;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 996ff92c..29605084 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -55,7 +55,8 @@
     min-width: 10em;
   }
   &.custom {
-    .select {
+    /* TODO Should make proper joiners... */
+    .font-switcher {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index f2459e45..ecbfdf41 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -47,7 +47,8 @@
         :title="$t('polls.type')"
       >
         <Select
-          kind="ghost"
+          class="poll-type-select"
+          unstyled="true"
           v-model="pollType"
           @change="updatePollToParent"
         >
@@ -69,7 +70,7 @@
         >
         <Select
           v-model="expiryUnit"
-          kind="ghost"
+          unstyled="true"
           class="expiry-unit"
           @change="expiryAmountChange"
         >
@@ -134,6 +135,10 @@
   .poll-type {
     margin-right: 0.75em;
     flex: 1 1 60%;
+
+    .poll-type-select {
+      padding-right: 0.75em;
+    }
   }
 
   .poll-expiry {
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 55474e1a..5ade1fa6 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -2,7 +2,7 @@
 <template>
   <label
     class="Select input"
-    :class="[ kindClass, { disabled } ]"
+    :class="{ disabled, unstyled }"
   >
     <select
       :disabled="disabled"
@@ -26,14 +26,6 @@
 .Select {
   padding: 0;
 
-  /* Overriding input styles, probably should make proper Input component? */
-  &.-kind_ghost {
-    border: none;
-    box-shadow: none;
-    background-color: transparent;
-    padding-right: 0.75em;
-  }
-
   select {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -52,5 +44,19 @@
     height: 28px;
     line-height: 16px;
   }
+
+  .select-down-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 5px;
+    height: 100%;
+    color: $fallback--text;
+    color: var(--inputText, $fallback--text);
+    line-height: 28px;
+    z-index: 0;
+    pointer-events: none;
+  }
+
 }
 </style>
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 6b5acbdb..511e07f3 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -306,20 +306,20 @@
 
     .id-control {
       align-items: stretch;
-      .select, .btn {
+
+      .shadow-switcher {
+        flex: 1;
+      }
+
+      .shadow-switcher, .btn {
         min-width: 1px;
         margin-right: 5px;
       }
+
       .btn {
         padding: 0 .4em;
         margin: 0 .1em;
       }
-      .select {
-        flex: 1;
-        select {
-          align-self: initial;
-        }
-      }
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index c5b73fde..75c08f47 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -532,15 +532,11 @@
         flex: 1 0 auto;
       }
 
-      .userHighlightSel,
-      .userHighlightSel.select {
+      .userHighlightSel {
         padding-top: 0;
         padding-bottom: 0;
         flex: 1 0 auto;
       }
-      .userHighlightSel.select svg {
-        line-height: 22px;
-      }
 
       .userHighlightText {
         width: 70px;
@@ -549,9 +545,7 @@
 
       .userHighlightCl,
       .userHighlightText,
-      .userHighlightSel,
-      .userHighlightSel.select {
-        height: 22px;
+      .userHighlightSel {
         vertical-align: top;
         margin-right: .5em;
         margin-bottom: .25em;
-- 
cgit v1.2.3-70-g09d2


From c03965646027bc8ce2d4c083ea3fd0423233fa18 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 31 May 2021 14:02:36 +0300
Subject: fix warnings

---
 src/components/poll/poll_form.vue                    | 10 +++++++---
 src/components/settings_modal/tabs/filtering_tab.vue |  8 ++++----
 src/components/user_card/user_card.vue               | 16 ++++++++++++----
 3 files changed, 23 insertions(+), 11 deletions(-)

(limited to 'src/components/poll')

diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index ecbfdf41..3620075a 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -47,13 +47,17 @@
         :title="$t('polls.type')"
       >
         <Select
+          v-model="pollType"
           class="poll-type-select"
           unstyled="true"
-          v-model="pollType"
           @change="updatePollToParent"
         >
-          <option value="single">{{ $t('polls.single_choice') }}</option>
-          <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
+          <option value="single">
+            {{ $t('polls.single_choice') }}
+          </option>
+          <option value="multiple">
+            {{ $t('polls.multiple_choices') }}
+          </option>
         </Select>
       </div>
       <div
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index dbd8d9af..6fc9ceaa 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -37,10 +37,10 @@
         </ul>
       </div>
       <ChoiceSetting
-          id="replyVisibility"
-          path="replyVisibility"
-          :options="replyVisibilityOptions"
-        >
+        id="replyVisibility"
+        path="replyVisibility"
+        :options="replyVisibilityOptions"
+      >
         {{ $t('settings.replies_in_timeline') }}
       </ChoiceSetting>
       <div>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 75c08f47..53b55c01 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -137,10 +137,18 @@
               v-model="userHighlightType"
               class="userHighlightSel"
             >
-              <option value="disabled">{{ $t('user_card.highlight.disabled') }}</option>
-              <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
-              <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
-              <option value="side">{{ $t('user_card.highlight.side') }}</option>
+              <option value="disabled">
+                {{ $t('user_card.highlight.disabled') }}
+              </option>
+              <option value="solid">
+                {{ $t('user_card.highlight.solid') }}
+              </option>
+              <option value="striped">
+                {{ $t('user_card.highlight.striped') }}
+              </option>
+              <option value="side">
+                {{ $t('user_card.highlight.side') }}
+              </option>
             </Select>
           </div>
         </div>
-- 
cgit v1.2.3-70-g09d2


From 6c6df29ed3b76ee5f2e6ba43a6185ff66b91aace Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 13 Aug 2021 12:19:57 +0300
Subject: support richcontent in polls

---
 src/components/poll/poll.js                                 | 10 +++++++---
 src/components/poll/poll.vue                                |  6 ++----
 src/components/status_content/status_content.vue            |  2 +-
 src/services/entity_normalizer/entity_normalizer.service.js |  2 +-
 4 files changed, 11 insertions(+), 9 deletions(-)

(limited to 'src/components/poll')

diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index 98db5582..a69b7886 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -1,10 +1,14 @@
-import Timeago from '../timeago/timeago.vue'
+import Timeago from 'components/timeago/timeago.vue'
+import RichContent from 'components/rich_content/rich_content.jsx'
 import { forEach, map } from 'lodash'
 
 export default {
   name: 'Poll',
-  props: ['basePoll'],
-  components: { Timeago },
+  props: ['basePoll', 'emoji'],
+  components: {
+    Timeago,
+    RichContent
+  },
   data () {
     return {
       loading: false,
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 187d1829..6e0234b3 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -17,8 +17,7 @@
           <span class="result-percentage">
             {{ percentageForOption(option.votes_count) }}%
           </span>
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-html="option.title_html" />
+          <RichContent :html="option.title_html" :handle-links="false" :emoji="emoji" />
         </div>
         <div
           class="result-fill"
@@ -42,8 +41,7 @@
           :value="index"
         >
         <label class="option-vote">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <div v-html="option.title_html" />
+          <RichContent :html="option.title_html" :handle-links="false" :emoji="emoji" />
         </label>
       </div>
     </div>
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 23c90913..3f65e64a 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -7,7 +7,7 @@
       @parseReady="$emit('parseReady', $event)"
     >
       <div v-if="status.poll && status.poll.options">
-        <poll :base-poll="status.poll" />
+        <poll :base-poll="status.poll" :emoji="status.emojis" />
       </div>
 
       <div
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 477b861f..c80ea487 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -301,7 +301,7 @@ export const parseStatus = (data) => {
     if (output.poll) {
       output.poll.options = (output.poll.options || []).map(field => ({
         ...field,
-        title_html: addEmojis(escape(field.title), data.emojis)
+        title_html: escape(field.title)
       }))
     }
     output.pinned = data.pinned
-- 
cgit v1.2.3-70-g09d2


From 4c974f5ca21c6a514d0dfc09a0aeab7789da95c5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 13 Aug 2021 13:06:42 +0300
Subject: richcontent support in polls, user cards and user profiles

---
 src/components/basic_user_card/basic_user_card.js  |  4 +-
 src/components/basic_user_card/basic_user_card.vue | 12 ++---
 src/components/notification/notification.js        |  4 +-
 src/components/notification/notification.scss      |  2 +
 src/components/notification/notification.vue       | 14 ++---
 src/components/notifications/notifications.scss    |  7 ---
 src/components/poll/poll.vue                       | 12 ++++-
 src/components/rich_content/rich_content.scss      |  1 +
 src/components/status_content/status_content.vue   |  5 +-
 src/components/user_card/user_card.js              |  4 +-
 src/components/user_card/user_card.vue             | 61 +++++-----------------
 src/components/user_profile/user_profile.js        |  4 +-
 src/components/user_profile/user_profile.vue       | 20 ++++---
 .../entity_normalizer/entity_normalizer.service.js |  5 +-
 14 files changed, 69 insertions(+), 86 deletions(-)

(limited to 'src/components/poll')

diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index 87085a28..8f41e2fb 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -1,5 +1,6 @@
 import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const BasicUserCard = {
@@ -13,7 +14,8 @@ const BasicUserCard = {
   },
   components: {
     UserCard,
-    UserAvatar
+    UserAvatar,
+    RichContent
   },
   methods: {
     toggleUserExpanded () {
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index c53f6a9c..53deb1df 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -25,17 +25,11 @@
         :title="user.name"
         class="basic-user-card-user-name"
       >
-        <!-- eslint-disable vue/no-v-html -->
-        <span
-          v-if="user.name_html"
+        <RichContent
           class="basic-user-card-user-name-value"
-          v-html="user.name_html"
+          :html="user.name"
+          :emoji="user.emoji"
         />
-        <!-- eslint-enable vue/no-v-html -->
-        <span
-          v-else
-          class="basic-user-card-user-name-value"
-        >{{ user.name }}</span>
       </div>
       <div>
         <router-link
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 4aa9affd..398bb7a9 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -4,6 +4,7 @@ import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -44,7 +45,8 @@ const Notification = {
     UserAvatar,
     UserCard,
     Timeago,
-    Status
+    Status,
+    RichContent
   },
   methods: {
     toggleUserExpanded () {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index f5905560..ec291547 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -2,6 +2,8 @@
 
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
+  --emoji-size: 14px;
+
   &.-muted {
     padding: 0.25em 0.6em;
     height: 1.2em;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 0081dee4..634ec8ee 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -51,12 +51,14 @@
         <span class="notification-details">
           <div class="name-and-action">
             <!-- eslint-disable vue/no-v-html -->
-            <bdi
-              v-if="!!notification.from_profile.name_html"
-              class="username"
-              :title="'@'+notification.from_profile.screen_name_ui"
-              v-html="notification.from_profile.name_html"
-            />
+            <bdi v-if="!!notification.from_profile.name_html">
+              <RichContent
+                class="username"
+                :title="'@'+notification.from_profile.screen_name_ui"
+                :html="notification.from_profile.name_html"
+                :emoji="notification.from_profile.emoji"
+              />
+            </bdi>
             <!-- eslint-enable vue/no-v-html -->
             <span
               v-else
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 2bb627a8..77b3c438 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -148,13 +148,6 @@
       max-width: 100%;
       text-overflow: ellipsis;
       white-space: nowrap;
-
-      img {
-        width: 14px;
-        height: 14px;
-        vertical-align: middle;
-        object-fit: contain
-      }
     }
 
     .timeago {
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 6e0234b3..63b44e4f 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -17,7 +17,11 @@
           <span class="result-percentage">
             {{ percentageForOption(option.votes_count) }}%
           </span>
-          <RichContent :html="option.title_html" :handle-links="false" :emoji="emoji" />
+          <RichContent
+            :html="option.title_html"
+            :handle-links="false"
+            :emoji="emoji"
+          />
         </div>
         <div
           class="result-fill"
@@ -41,7 +45,11 @@
           :value="index"
         >
         <label class="option-vote">
-          <RichContent :html="option.title_html" :handle-links="false" :emoji="emoji" />
+          <RichContent
+            :html="option.title_html"
+            :handle-links="false"
+            :emoji="emoji"
+          />
         </label>
       </div>
     </div>
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 12cb9776..db08ef1e 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -49,6 +49,7 @@
   }
 
   .emoji {
+    display: inline-block;
     width: var(--emoji-size, 32px);
     height: var(--emoji-size, 32px);
   }
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 3f65e64a..5cebc697 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -7,7 +7,10 @@
       @parseReady="$emit('parseReady', $event)"
     >
       <div v-if="status.poll && status.poll.options">
-        <poll :base-poll="status.poll" :emoji="status.emojis" />
+        <Poll
+          :base-poll="status.poll"
+          :emoji="status.emojis"
+        />
       </div>
 
       <div
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index d9fb64d1..98e6c2f2 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -5,6 +5,7 @@ import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
 import Select from '../select/select.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -118,7 +119,8 @@ export default {
     AccountActions,
     ProgressButton,
     FollowButton,
-    Select
+    Select,
+    RichContent
   },
   methods: {
     muteUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index a16f7873..794a2350 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -38,21 +38,12 @@
           </router-link>
           <div class="user-summary">
             <div class="top-line">
-              <!-- eslint-disable vue/no-v-html -->
-              <div
-                v-if="user.name_html"
+              <RichContent
                 :title="user.name"
                 class="user-name"
-                v-html="user.name_html"
+                :html="user.name"
+                :emoji="user.emoji"
               />
-              <!-- eslint-enable vue/no-v-html -->
-              <div
-                v-else
-                :title="user.name"
-                class="user-name"
-              >
-                {{ user.name }}
-              </div>
               <button
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
@@ -255,20 +246,12 @@
           <span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
         </div>
       </div>
-      <!-- eslint-disable vue/no-v-html -->
-      <p
-        v-if="!hideBio && user.description_html"
+      <RichContent
+        v-if="!hideBio"
         class="user-card-bio"
-        @click.prevent="linkClicked"
-        v-html="user.description_html"
+        :html="user.description_html"
+        :emoji="user.emoji"
       />
-      <!-- eslint-enable vue/no-v-html -->
-      <p
-        v-else-if="!hideBio"
-        class="user-card-bio"
-      >
-        {{ user.description }}
-      </p>
     </div>
   </div>
 </template>
@@ -281,9 +264,10 @@
 .user-card {
   position: relative;
 
-  &:hover .Avatar {
+  &:hover {
     --_still-image-img-visibility: visible;
     --_still-image-canvas-visibility: hidden;
+    --_still-image-label-visibility: hidden;
   }
 
   .panel-heading {
@@ -327,12 +311,12 @@
     }
   }
 
-  p {
-    margin-bottom: 0;
-  }
-
   &-bio {
     text-align: center;
+    display: block;
+    line-height: 18px;
+    padding: 1em;
+    margin: 0;
 
     a {
       color: $fallback--link;
@@ -344,11 +328,6 @@
       vertical-align: middle;
       max-width: 100%;
       max-height: 400px;
-
-      &.emoji {
-        width: 32px;
-        height: 32px;
-      }
     }
   }
 
@@ -450,13 +429,6 @@
     // big one
     z-index: 1;
 
-    img {
-      width: 26px;
-      height: 26px;
-      vertical-align: middle;
-      object-fit: contain
-    }
-
     .top-line {
       display: flex;
     }
@@ -469,12 +441,7 @@
     margin-right: 1em;
     font-size: 15px;
 
-    img {
-      object-fit: contain;
-      height: 16px;
-      width: 16px;
-      vertical-align: middle;
-    }
+    --emoji-size: 14px;
   }
 
   .bottom-line {
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index c0b55a6c..7a475609 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -4,6 +4,7 @@ import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import Conversation from '../conversation/conversation.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -164,7 +165,8 @@ const UserProfile = {
     FriendList,
     FollowCard,
     TabSwitcher,
-    Conversation
+    Conversation,
+    RichContent
   }
 }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index aef897ae..726216ff 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -20,20 +20,24 @@
           :key="index"
           class="user-profile-field"
         >
-          <!-- eslint-disable vue/no-v-html -->
           <dt
             :title="user.fields_text[index].name"
             class="user-profile-field-name"
-            @click.prevent="linkClicked"
-            v-html="field.name"
-          />
+          >
+            <RichContent
+              :html="field.name"
+              :emoji="user.emoji"
+            />
+          </dt>
           <dd
             :title="user.fields_text[index].value"
             class="user-profile-field-value"
-            @click.prevent="linkClicked"
-            v-html="field.value"
-          />
-          <!-- eslint-enable vue/no-v-html -->
+          >
+            <RichContent
+              :html="field.value"
+              :emoji="user.emoji"
+            />
+          </dd>
         </dl>
       </div>
       <tab-switcher
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index c80ea487..d84e3422 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -56,10 +56,11 @@ export const parseUser = (data) => {
 
     output.emoji = data.emojis
     output.name = data.display_name
-    output.name_html = addEmojis(escape(data.display_name), data.emojis)
+    output.name_html = escape(data.display_name)
 
     output.description = data.note
-    output.description_html = addEmojis(data.note, data.emojis)
+    // TODO cleanup this shit, output.description is overriden with source data
+    output.description_html = data.note
 
     output.fields = data.fields
     output.fields_html = data.fields.map(field => {
-- 
cgit v1.2.3-70-g09d2