Switch to native emojies

matrixgw_frontend/src/widgets/EmojiIcon.tsx

@@ -19,6 +19,6 @@ function emojiUnicode(emoji: string): string {
 export function EmojiIcon(p: { emojiKey: string }): React.ReactElement {
   const unified = emojiUnicode(p.emojiKey);
   return (
-    <Emoji unified={unified ?? ""} emojiStyle={EmojiStyle.GOOGLE} size={18} />
+    <Emoji unified={unified ?? ""} emojiStyle={EmojiStyle.NATIVE} size={18} />
   );
 }

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -379,7 +379,7 @@ function RoomMessage(p: {
                       flexDirection: "row",
                     }}
                   >
-                    <div style={{ margin: "3px 3px" }}>
+                    <div style={{ margin: "0px 3px" }}>
                       <EmojiIcon emojiKey={r} />
                     </div>
                     <div style={{ height: "2em", marginLeft: "2px" }}>
@@ -407,7 +407,7 @@ function RoomMessage(p: {
       {/* Pick reaction dialog */}
       <Dialog open={pickReaction} onClose={handleCancelAddReaction}>
         <EmojiPicker
-          emojiStyle={EmojiStyle.GOOGLE}
+          emojiStyle={EmojiStyle.NATIVE}
           theme={Theme.AUTO}
           onEmojiClick={(emoji) => handleSelectEmoji(emoji.emoji)}
         />
@@ -475,7 +475,14 @@ function ReactionButton(p: {
     return <></>;
 
   return (
-    <Button onClick={sendEmoji}>
+    <Button
+      onClick={sendEmoji}
+      sx={{
+        paddingTop: "1px !important",
+        display: "inline-flex",
+        alignItems: "start",
+      }}
+    >
       <EmojiIcon {...p} />
     </Button>
   );