From f96484eed55c8d1074841afeca1c080af832da07 Mon Sep 17 00:00:00 2001
From: Jitendra Kumar <36557466+jitendra-ky@users.noreply.github.com>
Date: Sat, 18 Jan 2025 14:16:47 +0000
Subject: [PATCH] =?UTF-8?q?style:=20Center=20the=20=E2=8C=98=20symbol=20by?=
 =?UTF-8?q?=20replacing=20it=20with=20an=20icon.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit updates the keyboard shortcuts UI by replacing
the ⌘ symbol with a more symmetrically aligned icon.

Fixes: #32926
---
 web/src/common.ts             |  8 ++++++++
 web/styles/app_components.css | 12 +++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/src/common.ts b/web/src/common.ts
index 491f35cc18..2ad5cfc246 100644
--- a/web/src/common.ts
+++ b/web/src/common.ts
@@ -58,6 +58,14 @@ export function adjust_mac_kbd_tags(kbd_elem_class: string): void {
             const $kbd_elem = $("<kbd>").text(following_key);
             $(this).after($("<span>").text(" + ").contents(), $kbd_elem);
         }
+
+        // The ⌘ symbol isn't vertically centered, so we use an icon.
+        if (key_text === "⌘") {
+            const $icon = $("<i>")
+                .addClass("zulip-icon zulip-icon-mac-command")
+                .attr("aria-label", key_text);
+            $(this).empty().append($icon); // Use .append() to safely add the icon
+        }
     });
 }
 
diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 9a4b429973..6cd9083c9b 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -32,10 +32,20 @@ kbd {
     background-color: var(--color-kbd-background);
     color: var(--color-kbd-text);
     margin: 0.25em 0.1em;
-    padding: 0.1em 0.4em;
+    padding: 0.2em 0.4em;
     text-shadow: 0 1px 0 hsl(0deg 0% 100%);
     /* Prevent selection */
     user-select: none;
+    position: relative;
+    min-height: 1em;
+    min-width: 1em;
+
+    .zulip-icon::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
 }
 
 @media (width < $sm_min) {