autocomplete: Update emoji-results style to follow design

This follows the new design for user-mention results, but adapted
for emoji based on the design for the emoji picker.  See comment
for details.

Author: gnprice

lib/widgets/autocomplete.dart

@@ -287,13 +287,13 @@ class _EmojiAutocompleteItem extends StatelessWidget {
 
   final EmojiAutocompleteResult option;
 
-  // TODO adjust sizes to match _MentionAutocompleteItem avatar
-  static const _size = 32.0;
-  static const _notoColorEmojiTextSize = 25.7;
+  static const _size = 24.0;
+  static const _notoColorEmojiTextSize = 19.3;
 
   @override
   Widget build(BuildContext context) {
     final store = PerAccountStoreWidget.of(context);
+    final designVariables = DesignVariables.of(context);
     final candidate = option.candidate;
 
     final emojiDisplay = candidate.emojiDisplay.resolve(store.userSettings);
@@ -311,16 +311,31 @@ class _EmojiAutocompleteItem extends StatelessWidget {
       ? candidate.emojiName
       : [candidate.emojiName, ...candidate.aliases].join(", "); // TODO(#1080)
 
+    // TODO(design): emoji autocomplete results
+    // There's no design in Figma for emoji autocomplete results.
+    // Instead we adapt the design for the emoji picker to the
+    // context of autocomplete results as exemplified by _MentionAutocompleteItem.
+    // That means: emoji size, text size, text line-height from emoji picker;
+    // text color (for contrast with background) and outer padding
+    // from _MentionAutocompleteItem; padding around emoji glyph
+    // to bring it to same size as avatar in _MentionAutocompleteItem.
     return Padding(
       padding: const EdgeInsetsDirectional.fromSTEB(4, 4, 8, 4),
       child: Row(children: [
         if (glyph != null) ...[
-          glyph,
+          Padding(padding: const EdgeInsets.all(6),
+            child: glyph),
           const SizedBox(width: 6),
         ],
-        // TODO adjust text style to match _MentionAutocompleteItem
         Expanded(
           child: Text(
+            // The Figma design for the emoji picker actually calls for the
+            // line-height to be 24px when the label fits on one line,
+            // and 18px when it wraps.  But whether it'll wrap is something we
+            // don't know at build time, so make it always 18px.  Discussion:
+            //   https://github.com/zulip/zulip-flutter/pull/995#discussion_r1868352275
+            style: TextStyle(fontSize: 17, height: 18 / 17,
+              color: designVariables.contextMenuItemLabel),
             maxLines: 2,
             overflow: TextOverflow.ellipsis,
             label)),