Fix emoji and reaction css

DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.css

@@ -47,20 +47,20 @@ img {
 }
 
 .emoji {
-    width: 24px;
+    width: 1.45em;
-    height: 24px;
+    height: 1.45em;
     margin: 0 1px;
-    vertical-align: middle;
+    vertical-align: -0.4em;
 }
 
 .emoji--small {
-    width: 16px;
+    width: 1rem;
-    height: 16px;
+    height: 1rem;
 }
 
 .emoji--large {
-    width: 32px;
+    width: 2rem;
-    height: 32px;
+    height: 2rem;
 }
 
 /* === INFO === */
@@ -292,21 +292,19 @@ img {
 }
 
 .chatlog__reactions {
-    display: flex;    
+    display: flex;
 }
 
 .chatlog__reaction {
+    display: flex;
+    align-items: center;
     margin: 6px 2px 2px 2px;
-    padding: 2px 6px 2px 2px;
+    padding: 3px 6px;
     border-radius: 3px;
 }
 
-.chatlog__reaction-emoji {
-    margin-left: 3px;
-    vertical-align: middle;
-}
-
 .chatlog__reaction-count {
+    min-width: 9px;
+    margin-left: 6px;
     font-size: .875em;
-    vertical-align: middle;
 }

DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.html

@@ -195,9 +195,7 @@
                         <div class="chatlog__reactions">
                             {{~ for reaction in message.Reactions ~}}
                                 <div class="chatlog__reaction">
-                                    <span class="chatlog__reaction-emoji">
+                                    <img class="emoji emoji--small" title="{{ reaction.Emoji.Name }}" src="{{ reaction.Emoji.ImageUrl }}" />
-                                        <img class="emoji emoji--small" title="{{ reaction.Emoji.Name }}" src="{{ reaction.Emoji.ImageUrl }}" />
-                                    </span>
                                     <span class="chatlog__reaction-count">{{ reaction.Count }}</span>
                                 </div>
                             {{~ end ~}}