From dab75e49902efaf015047baaab3d6c01213e9631 Mon Sep 17 00:00:00 2001
From: Akash Nimare <svnitakash@gmail.com>
Date: Fri, 17 Aug 2018 03:08:15 +0530
Subject: [PATCH] help: Fix styling of emoticons on help pages.

---
 static/styles/portico.scss                          | 13 +++++++++++++
 .../zerver/help/enable-emoticon-translations.md     |  4 ++--
 .../lib/bugdown/help_emoticon_translations_table.py |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/static/styles/portico.scss b/static/styles/portico.scss
index 3a8b654140..ec85e2d2ba 100644
--- a/static/styles/portico.scss
+++ b/static/styles/portico.scss
@@ -1620,6 +1620,19 @@ input.new-organization-button {
     box-shadow: none;
 }
 
+.markdown img.emoji-small {
+    width: 20px;
+    box-shadow: none;
+    border: none;
+    vertical-align: sub;
+}
+
+.markdown img.emoji-big {
+    width: 25px;
+    box-shadow: none;
+    border: none;
+}
+
 .integration-instructions .tip,
 .markdown .warn,
 .markdown .tip,
diff --git a/templates/zerver/help/enable-emoticon-translations.md b/templates/zerver/help/enable-emoticon-translations.md
index d56867c297..ffb68b0028 100644
--- a/templates/zerver/help/enable-emoticon-translations.md
+++ b/templates/zerver/help/enable-emoticon-translations.md
@@ -5,13 +5,13 @@ emoji equivalents like
 <img
     src="/static/generated/emoji/images-google-64/1f642.png"
     alt="slight_smile"
-    style="width: 3%;"
+    class="emoji-small"
 />
 or
 <img
     src="/static/generated/emoji/images-google-64/1f641.png"
     alt="slight_frown"
-    style="width: 3%;"
+    class="emoji-small"
 />
 automatically by Zulip.
 
diff --git a/zerver/lib/bugdown/help_emoticon_translations_table.py b/zerver/lib/bugdown/help_emoticon_translations_table.py
index 69bf0516a8..e52c82faa5 100644
--- a/zerver/lib/bugdown/help_emoticon_translations_table.py
+++ b/zerver/lib/bugdown/help_emoticon_translations_table.py
@@ -29,7 +29,7 @@ ROW_HTML = """
         <img
             src="/static/generated/emoji/images-google-64/{codepoint}.png"
             alt="{name}"
-            style="width: 30%;">
+            class="emoji-big">
     </td>
 </tr>
 """