people autocomplete: Make users and user groups more uniform

In particular, the icon for user-group items and the avatar for user
items are now both 32px, and the horizontal padding for user-group
items is reduced from 16px to 8px to match user items.

Author: chrisbobbe

src/autocomplete/PeopleAutocomplete.js

@@ -86,6 +86,7 @@ export default function PeopleAutocomplete(props: Props): Node {
           user={item}
           showEmail
           onPress={handleUserItemAutocomplete}
+          size="medium"
         />
       ),
     }: Section<AutocompleteOption>),

src/common/Icons.js

@@ -92,7 +92,10 @@ export const IconRight: SpecificIconType = makeIcon(Feather, 'chevron-right');
 
 export const IconPlusCircle: SpecificIconType = makeIcon(Feather, 'plus-circle');
 export const IconLeft: SpecificIconType = makeIcon(Feather, 'chevron-left');
+
+// UserGroupItem depends on this being square.
 export const IconPeople: SpecificIconType = makeIcon(Feather, 'users');
+
 export const IconPerson: SpecificIconType = makeIcon(Feather, 'user');
 export const IconImage: SpecificIconType = makeIcon(Feather, 'image');
 export const IconCamera: SpecificIconType = makeIcon(Feather, 'camera');

src/user-groups/UserGroupItem.js

@@ -41,8 +41,7 @@ export default function UserGroupItem(props: Props): Node {
       wrapper: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 8,
-        paddingHorizontal: 16,
+        padding: 8,
       },
     }),
     [],
@@ -51,7 +50,13 @@ export default function UserGroupItem(props: Props): Node {
   return (
     <Touchable onPress={handlePress}>
       <View style={styles.wrapper}>
-        <IconPeople size={32} color={themeContext.color} />
+        <IconPeople
+          // Match the size of the avatar in UserItem, which also appears in
+          // the people autocomplete. We're counting on this icon being a
+          // square.
+          size={32}
+          color={themeContext.color}
+        />
         <View style={componentStyles.textWrapper}>
           <ZulipText
             style={componentStyles.text}