From 0c5d03044edb1b89afdc291bb02c39b08b474b72 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Tue, 7 Mar 2023 00:06:11 +0000
Subject: [PATCH] Fix vertical alignment of custom emojis in display name

---
 src/components/Post.vue               |  7 +++++--
 src/components/PostContent.vue        |  6 ++++--
 src/components/ProfileDisplayName.vue | 11 +++++++++--
 src/styles/_mixins.scss               |  8 --------
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/Post.vue b/src/components/Post.vue
index d750818..67c163f 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -607,11 +607,14 @@ async function onMintToken() {
   }
 
   .display-name-link {
-    color: $text-color;
-    font-weight: bold;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    .display-name {
+      color: $text-color;
+      font-weight: bold;
+    }
   }
 
   .actor-address {
diff --git a/src/components/PostContent.vue b/src/components/PostContent.vue
index a2edb91..3df6c4a 100644
--- a/src/components/PostContent.vue
+++ b/src/components/PostContent.vue
@@ -84,8 +84,6 @@ function getContent(): string {
 @import "../styles/mixins";
 
 .post-content {
-  @include ugc-emoji;
-
   color: $text-color;
   line-height: 1.5;
   padding: $block-inner-padding;
@@ -162,6 +160,10 @@ function getContent(): string {
   }
 
   :deep(.emoji) {
+    height: 24px;
+    vertical-align: text-bottom;
+    width: 24px;
+
     &:hover {
       height: 48px;
       transition: 100ms linear;
diff --git a/src/components/ProfileDisplayName.vue b/src/components/ProfileDisplayName.vue
index 8343b08..f5df056 100644
--- a/src/components/ProfileDisplayName.vue
+++ b/src/components/ProfileDisplayName.vue
@@ -23,10 +23,17 @@ function getDisplayNameHtml(): string {
 </script>
 
 <style scoped lang="scss">
-@import "../styles/mixins";
 @import "../styles/theme";
 
+$display-name-line-height: 1.4;
+
 .display-name {
-  @include ugc-emoji;
+  line-height: $display-name-line-height;
+
+  :deep(.emoji) {
+    height: $display-name-line-height * 0.8em;
+    vertical-align: text-bottom;
+    width: $display-name-line-height * 0.8em;
+  }
 }
 </style>
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index b64f6a8..be59fce 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -158,11 +158,3 @@
     color: $error-color;
   }
 }
-
-@mixin ugc-emoji {
-  :deep(.emoji) {
-    height: 24px;
-    vertical-align: text-bottom;
-    width: 24px;
-  }
-}