From 666f2d8d4a21010fd21cb0b7ee929b80a5935ba9 Mon Sep 17 00:00:00 2001
From: Alexey Golub <Tyrrrrrr@gmail.com>
Date: Sun, 3 Mar 2019 20:47:24 +0200
Subject: [PATCH] Fix emoji and reaction css

---
 .../ExportTemplates/HtmlShared/Main.css       | 28 +++++++++----------
 .../ExportTemplates/HtmlShared/Main.html      |  4 +--
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.css b/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.css
index 6228a1a..3ba1b8d 100644
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.css
+++ b/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.css
@@ -47,20 +47,20 @@ img {
 }
 
 .emoji {
-    width: 24px;
-    height: 24px;
+    width: 1.45em;
+    height: 1.45em;
     margin: 0 1px;
-    vertical-align: middle;
+    vertical-align: -0.4em;
 }
 
 .emoji--small {
-    width: 16px;
-    height: 16px;
+    width: 1rem;
+    height: 1rem;
 }
 
 .emoji--large {
-    width: 32px;
-    height: 32px;
+    width: 2rem;
+    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;
 }
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.html b/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.html
index 999714e..2319057 100644
--- a/DiscordChatExporter.Core/Resources/ExportTemplates/HtmlShared/Main.html
+++ b/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 }}" />
-                                    </span>
+                                    <img class="emoji emoji--small" title="{{ reaction.Emoji.Name }}" src="{{ reaction.Emoji.ImageUrl }}" />
                                     <span class="chatlog__reaction-count">{{ reaction.Count }}</span>
                                 </div>
                             {{~ end ~}}