@@ -327,12 +327,13 @@ class _EmojiAutocompleteItem extends StatelessWidget {
327327
328328 final EmojiAutocompleteResult option;
329329
330- static const _size = 32 .0 ;
331- static const _notoColorEmojiTextSize = 25.7 ;
330+ static const _size = 24 .0 ;
331+ static const _notoColorEmojiTextSize = 19.3 ;
332332
333333 @override
334334 Widget build (BuildContext context) {
335335 final store = PerAccountStoreWidget .of (context);
336+ final designVariables = DesignVariables .of (context);
336337 final candidate = option.candidate;
337338
338339 // TODO deduplicate this logic with [EmojiPickerListEntry]
@@ -351,15 +352,26 @@ class _EmojiAutocompleteItem extends StatelessWidget {
351352 ? candidate.emojiName
352353 : [candidate.emojiName, ...candidate.aliases].join (", " ); // TODO(#1080)
353354
355+ // TODO(design): emoji autocomplete results
356+ // There's no design in Figma for emoji autocomplete results.
357+ // Instead we adapt the design for the emoji picker to the
358+ // context of autocomplete results as exemplified by _MentionAutocompleteItem.
359+ // That means: emoji size, text size, text line-height, and font weight
360+ // from emoji picker; text color (for contrast with background) and
361+ // outer padding from _MentionAutocompleteItem; padding around emoji glyph
362+ // to bring it to same size as avatar in _MentionAutocompleteItem.
354363 return Padding (
355364 padding: const EdgeInsets .symmetric (horizontal: 16.0 , vertical: 8.0 ),
356365 child: Row (children: [
357366 if (glyph != null ) ...[
358- glyph,
359- const SizedBox (width: 8 ),
367+ Padding (padding: const EdgeInsets .all (6 ),
368+ child: glyph),
369+ const SizedBox (width: 6 ),
360370 ],
361371 Expanded (
362372 child: Text (
373+ style: TextStyle (fontSize: 17 , height: 18 / 17 ,
374+ color: designVariables.contextMenuItemLabel),
363375 maxLines: 2 ,
364376 overflow: TextOverflow .ellipsis,
365377 label)),
0 commit comments