Narrowed down avatar sizes

stylesheets/components/LeftPaneSearchInput.scss

@@ -14,9 +14,9 @@
     display: flex;
     flex-direction: row;
     left: 3px;
-    padding: 1px 3px 1px 4px;
+    padding: 0 3px 0 0;
     position: absolute;
-    top: 3px;
+    top: 5px;
 
     @include light-theme {
       background-color: $color-gray-25;

stylesheets/components/StoriesSettingsModal.scss

@@ -107,8 +107,8 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        width: 36px;
-        height: 36px;
+        width: 32px;
+        height: 32px;
         background: $color-gray-75;
 
         &::after {

ts/components/Avatar.stories.tsx

@@ -113,7 +113,7 @@ const Template: Story<Props> = args => (
 
 // eslint-disable-next-line react/function-component-definition
 const TemplateSingle: Story<Props> = args => (
-  <Avatar {...args} size={AvatarSize.ONE_HUNDRED_TWELVE} />
+  <Avatar {...args} size={AvatarSize.EIGHTY} />
 );
 
 export const Default = Template.bind({});

ts/components/Avatar.tsx

@@ -28,15 +28,11 @@ export enum AvatarBlur {
 }
 
 export enum AvatarSize {
-  SIXTEEN = 16,
+  TWENTY = 20,
   TWENTY_EIGHT = 28,
   THIRTY_TWO = 32,
-  THIRTY_SIX = 36,
   FORTY_EIGHT = 48,
-  FIFTY_TWO = 52,
   EIGHTY = 80,
-  NINETY_SIX = 96,
-  ONE_HUNDRED_TWELVE = 112,
 }
 
 type BadgePlacementType = { bottom: number; right: number };

ts/components/AvatarPopup.stories.tsx

@@ -50,7 +50,6 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   phoneNumber: text('phoneNumber', overrideProps.phoneNumber || ''),
   profileName: text('profileName', overrideProps.profileName || ''),
   sharedGroupNames: [],
-  size: 80,
   startUpdate: action('startUpdate'),
   style: {},
   theme: React.useContext(StorybookThemeContext),

ts/components/AvatarPopup.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import type { Props as AvatarProps } from './Avatar';
-import { Avatar } from './Avatar';
+import { Avatar, AvatarSize } from './Avatar';
 import { useRestoreFocus } from '../hooks/useRestoreFocus';
 
 import type { LocalizerType, ThemeType } from '../types/Util';
@@ -26,7 +26,7 @@ export type Props = {
   innerRef?: React.Ref<HTMLDivElement>;
   style: React.CSSProperties;
   name?: string;
-} & Omit<AvatarProps, 'onClick'>;
+} & Omit<AvatarProps, 'onClick' | 'size'>;
 
 export function AvatarPopup(props: Props): JSX.Element {
   const {
@@ -58,7 +58,7 @@ export function AvatarPopup(props: Props): JSX.Element {
         ref={focusRef}
         type="button"
       >
-        <Avatar {...props} size={52} />
+        <Avatar {...props} size={AvatarSize.FORTY_EIGHT} />
         <div className="module-avatar-popup__profile__text">
           <div className="module-avatar-popup__profile__name">
             <Emojify text={profileName || title} />

ts/components/CallNeedPermissionScreen.tsx

@@ -4,7 +4,7 @@
 import React, { useRef, useEffect } from 'react';
 import type { LocalizerType } from '../types/Util';
 import { AvatarColors } from '../types/Colors';
-import { Avatar } from './Avatar';
+import { Avatar, AvatarSize } from './Avatar';
 import { Intl } from './Intl';
 import { ContactName } from './conversation/ContactName';
 import type { ConversationType } from '../state/ducks/conversations';
@@ -57,7 +57,7 @@ export function CallNeedPermissionScreen({
         profileName={conversation.profileName}
         title={conversation.title}
         sharedGroupNames={conversation.sharedGroupNames}
-        size={112}
+        size={AvatarSize.EIGHTY}
       />
 
       <p className="module-call-need-permission-screen__text">

ts/components/CallScreen.tsx

@@ -13,7 +13,7 @@ import type {
   SetLocalVideoType,
   SetRendererCanvasType,
 } from '../state/ducks/calling';
-import { Avatar } from './Avatar';
+import { Avatar, AvatarSize } from './Avatar';
 import { CallingHeader } from './CallingHeader';
 import { CallingPreCallInfo, RingMode } from './CallingPreCallInfo';
 import { CallingButton, CallingButtonType } from './CallingButton';
@@ -358,7 +358,7 @@ export function CallScreen({
               // `sharedGroupNames` makes no sense for yourself, but `<Avatar>` needs it
               //   to determine blurring.
               sharedGroupNames={[]}
-              size={80}
+              size={AvatarSize.EIGHTY}
             />
             <div className="module-calling__camera-is-off">
               {i18n('calling__your-video-is-off')}
@@ -394,7 +394,7 @@ export function CallScreen({
           title={me.title}
           // See comment above about `sharedGroupNames`.
           sharedGroupNames={[]}
-          size={80}
+          size={AvatarSize.EIGHTY}
         />
       </CallBackgroundBlur>
     );

ts/components/CallingParticipantsList.tsx

@@ -7,7 +7,7 @@ import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import FocusTrap from 'focus-trap-react';
 
-import { Avatar } from './Avatar';
+import { Avatar, AvatarSize } from './Avatar';
 import { ContactName } from './conversation/ContactName';
 import { InContactsIcon } from './InContactsIcon';
 import type { LocalizerType } from '../types/Util';
@@ -119,7 +119,7 @@ export const CallingParticipantsList = React.memo(
                         profileName={participant.profileName}
                         title={participant.title}
                         sharedGroupNames={participant.sharedGroupNames}
-                        size={32}
+                        size={AvatarSize.THIRTY_TWO}
                       />
                       {ourUuid && participant.uuid === ourUuid ? (
                         <span className="module-calling-participants-list__name">

ts/components/CallingPipRemoteVideo.tsx

@@ -4,7 +4,7 @@
 import React, { useMemo, useEffect } from 'react';
 import { clamp, maxBy } from 'lodash';
 import type { VideoFrameSource } from 'ringrtc';
-import { Avatar } from './Avatar';
+import { Avatar, AvatarSize } from './Avatar';
 import { CallBackgroundBlur } from './CallBackgroundBlur';
 import { DirectCallRemoteParticipant } from './DirectCallRemoteParticipant';
 import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';
@@ -61,7 +61,7 @@ function NoVideo({
             phoneNumber={phoneNumber}
             profileName={profileName}
             title={title}
-            size={52}
+            size={AvatarSize.FORTY_EIGHT}
             sharedGroupNames={sharedGroupNames}
           />
         </div>

ts/components/CallingPreCallInfo.tsx

@@ -171,7 +171,7 @@ export function CallingPreCallInfo({
         phoneNumber={conversation.phoneNumber}
         profileName={conversation.profileName}
         sharedGroupNames={conversation.sharedGroupNames}
-        size={AvatarSize.ONE_HUNDRED_TWELVE}
+        size={AvatarSize.EIGHTY}
         title={conversation.title}
         unblurredAvatarPath={conversation.unblurredAvatarPath}
         i18n={i18n}

ts/components/DirectCallRemoteParticipant.tsx

@@ -6,7 +6,7 @@ import type { SetRendererCanvasType } from '../state/ducks/calling';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
 import { AvatarColors } from '../types/Colors';
-import { Avatar } from './Avatar';
+import { Avatar, AvatarSize } from './Avatar';
 
 type PropsType = {
   conversation: ConversationType;
@@ -78,7 +78,7 @@ function renderAvatar(
         profileName={profileName}
         title={title}
         sharedGroupNames={sharedGroupNames}
-        size={112}
+        size={AvatarSize.EIGHTY}
       />
     </div>
   );

ts/components/GroupCallRemoteParticipant.tsx

@@ -215,17 +215,15 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
 
     if (props.isInPip) {
       containerStyles = canvasStyles;
-      avatarSize = AvatarSize.FIFTY_TWO;
+      avatarSize = AvatarSize.FORTY_EIGHT;
     } else {
       const { width, height } = props;
       const shorterDimension = Math.min(width, height);
 
-      if (shorterDimension >= 240) {
-        avatarSize = AvatarSize.ONE_HUNDRED_TWELVE;
-      } else if (shorterDimension >= 180) {
+      if (shorterDimension >= 180) {
         avatarSize = AvatarSize.EIGHTY;
       } else {
-        avatarSize = AvatarSize.FIFTY_TWO;
+        avatarSize = AvatarSize.FORTY_EIGHT;
       }
 
       containerStyles = {

ts/components/IncomingCallBar.tsx

@@ -3,7 +3,7 @@
 
 import type { ReactChild } from 'react';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { Avatar } from './Avatar';
+import { Avatar, AvatarSize } from './Avatar';
 import { Tooltip } from './Tooltip';
 import { Intl } from './Intl';
 import { Theme } from '../util/theme';
@@ -260,7 +260,7 @@ export function IncomingCallBar(props: PropsType): JSX.Element | null {
               profileName={profileName}
               title={title}
               sharedGroupNames={sharedGroupNames}
-              size={52}
+              size={AvatarSize.FORTY_EIGHT}
             />
           </div>
           <div className="IncomingCallBar__conversation--name">

ts/components/LeftPaneSearchInput.tsx

@@ -144,7 +144,7 @@ export function LeftPaneSearchInput({
             isMe={searchConversation.isMe}
             noteToSelf={searchConversation.isMe}
             sharedGroupNames={searchConversation.sharedGroupNames}
-            size={AvatarSize.SIXTEEN}
+            size={AvatarSize.TWENTY}
             title={searchConversation.title}
             unblurredAvatarPath={searchConversation.unblurredAvatarPath}
           />

ts/components/MainHeader.tsx

@@ -6,7 +6,7 @@ import { Manager, Popper, Reference } from 'react-popper';
 import { createPortal } from 'react-dom';
 
 import { showSettings } from '../shims/Whisper';
-import { Avatar } from './Avatar';
+import { Avatar, AvatarSize } from './Avatar';
 import { AvatarPopup } from './AvatarPopup';
 import type { LocalizerType, ThemeType } from '../types/Util';
 import type { AvatarColorType } from '../types/Colors';
@@ -175,7 +175,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
                   // `sharedGroupNames` makes no sense for yourself, but
                   // `<Avatar>` needs it to determine blurring.
                   sharedGroupNames={[]}
-                  size={28}
+                  size={AvatarSize.TWENTY_EIGHT}
                   innerRef={ref}
                   onClick={this.showAvatarPopup}
                 />
@@ -204,7 +204,6 @@ export class MainHeader extends React.Component<PropsType, StateType> {
                       theme={theme}
                       title={title}
                       avatarPath={avatarPath}
-                      size={28}
                       hasPendingUpdate={hasPendingUpdate}
                       startUpdate={startUpdate}
                       // See the comment above about `sharedGroupNames`.

ts/components/SafetyNumberChangeDialog.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { noop } from 'lodash';
 import classNames from 'classnames';
 
-import { Avatar } from './Avatar';
+import { Avatar, AvatarSize } from './Avatar';
 import type { ActionSpec } from './ConfirmationDialog';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { InContactsIcon } from './InContactsIcon';
@@ -456,7 +456,7 @@ function ContactRow({
         theme={theme}
         title={contact.title}
         sharedGroupNames={contact.sharedGroupNames}
-        size={36}
+        size={AvatarSize.THIRTY_TWO}
         unblurredAvatarPath={contact.unblurredAvatarPath}
       />
       <div className="module-SafetyNumberChangeDialog__row--wrapper">

ts/components/SendStoryModal.tsx

@@ -558,7 +558,7 @@ export function SendStoryModal({
                       i18n={i18n}
                       isMe={false}
                       sharedGroupNames={[]}
-                      size={AvatarSize.THIRTY_SIX}
+                      size={AvatarSize.THIRTY_TWO}
                       title={group.title}
                     />
 
@@ -708,7 +708,7 @@ export function SendStoryModal({
                     i18n={i18n}
                     isMe
                     sharedGroupNames={me.sharedGroupNames}
-                    size={AvatarSize.THIRTY_SIX}
+                    size={AvatarSize.THIRTY_TWO}
                     title={me.title}
                   />
                 ) : (
@@ -822,7 +822,7 @@ export function SendStoryModal({
                   i18n={i18n}
                   isMe={false}
                   sharedGroupNames={[]}
-                  size={AvatarSize.THIRTY_SIX}
+                  size={AvatarSize.THIRTY_TWO}
                   title={group.title}
                 />
 

ts/components/StoriesSettingsModal.tsx

@@ -164,7 +164,7 @@ function DistributionListItem({
             i18n={i18n}
             isMe
             sharedGroupNames={me.sharedGroupNames}
-            size={AvatarSize.THIRTY_SIX}
+            size={AvatarSize.THIRTY_TWO}
             title={me.title}
           />
         ) : (
@@ -218,7 +218,7 @@ function GroupStoryItem({
           i18n={i18n}
           isMe={false}
           sharedGroupNames={[]}
-          size={AvatarSize.THIRTY_SIX}
+          size={AvatarSize.THIRTY_TWO}
           title={groupStory.title}
         />
         <span className="StoriesSettingsModal__list__title">
@@ -676,7 +676,7 @@ export function DistributionListSettingsModal({
                   i18n={i18n}
                   isMe
                   sharedGroupNames={member.sharedGroupNames}
-                  size={AvatarSize.THIRTY_SIX}
+                  size={AvatarSize.THIRTY_TWO}
                   theme={ThemeType.dark}
                   title={member.title}
                 />
@@ -1077,7 +1077,7 @@ export function EditDistributionListModal({
                 i18n={i18n}
                 isMe
                 sharedGroupNames={contact.sharedGroupNames}
-                size={AvatarSize.THIRTY_SIX}
+                size={AvatarSize.THIRTY_TWO}
                 theme={ThemeType.dark}
                 title={contact.title}
               />
@@ -1260,7 +1260,7 @@ export function GroupStorySettingsModal({
           i18n={i18n}
           isMe={false}
           sharedGroupNames={[]}
-          size={AvatarSize.THIRTY_SIX}
+          size={AvatarSize.THIRTY_TWO}
           title={group.title}
         />
         <span className="GroupStorySettingsModal__title">{group.title}</span>
@@ -1287,7 +1287,7 @@ export function GroupStorySettingsModal({
               i18n={i18n}
               isMe={false}
               sharedGroupNames={[]}
-              size={AvatarSize.THIRTY_SIX}
+              size={AvatarSize.THIRTY_TWO}
               title={member.title}
             />
             <p className="GroupStorySettingsModal__members_item__name">

ts/components/StoryDetailsModal.tsx

@@ -132,7 +132,7 @@ export function StoryDetailsModal({
                       phoneNumber={contact.phoneNumber}
                       profileName={contact.profileName}
                       sharedGroupNames={contact.sharedGroupNames}
-                      size={AvatarSize.THIRTY_SIX}
+                      size={AvatarSize.THIRTY_TWO}
                       theme={ThemeType.dark}
                       title={contact.title}
                       unblurredAvatarPath={contact.unblurredAvatarPath}
@@ -174,7 +174,7 @@ export function StoryDetailsModal({
               isMe={sender.isMe}
               profileName={sender.profileName}
               sharedGroupNames={sender.sharedGroupNames}
-              size={AvatarSize.THIRTY_SIX}
+              size={AvatarSize.THIRTY_TWO}
               theme={ThemeType.dark}
               title={sender.title}
             />

ts/components/conversation/ContactModal.tsx

@@ -15,7 +15,7 @@ import type { ViewUserStoriesActionCreatorType } from '../../state/ducks/stories
 import { StoryViewModeType } from '../../types/Stories';
 import * as log from '../../logging/log';
 import { About } from './About';
-import { Avatar } from '../Avatar';
+import { Avatar, AvatarSize } from '../Avatar';
 import { AvatarLightbox } from '../AvatarLightbox';
 import { BadgeDialog } from '../BadgeDialog';
 import { ConfirmationDialog } from '../ConfirmationDialog';
@@ -196,7 +196,7 @@ export function ContactModal({
               onClickBadge={() => setView(ContactModalView.ShowingBadges)}
               profileName={contact.profileName}
               sharedGroupNames={contact.sharedGroupNames}
-              size={96}
+              size={AvatarSize.EIGHTY}
               storyRing={hasStories}
               theme={theme}
               title={contact.title}

ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx

@@ -41,7 +41,7 @@ export function ContactSpoofingReviewDialogPerson({
         {...conversation}
         badge={getPreferredBadge(conversation.badges)}
         conversationType={conversation.type}
-        size={AvatarSize.FIFTY_TWO}
+        size={AvatarSize.FORTY_EIGHT}
         className="module-ContactSpoofingReviewDialogPerson__avatar"
         i18n={i18n}
         theme={theme}

ts/components/conversation/ConversationHero.tsx

@@ -3,7 +3,7 @@
 
 import React, { useEffect, useState } from 'react';
 import type { Props as AvatarProps } from '../Avatar';
-import { Avatar, AvatarBlur } from '../Avatar';
+import { Avatar, AvatarSize, AvatarBlur } from '../Avatar';
 import { ContactName } from './ContactName';
 import { About } from './About';
 import { GroupDescription } from './GroupDescription';
@@ -180,7 +180,7 @@ export function ConversationHero({
           onClick={avatarOnClick}
           profileName={profileName}
           sharedGroupNames={sharedGroupNames}
-          size={112}
+          size={AvatarSize.EIGHTY}
           // user may have stories, but we don't show that on Note to Self conversation
           storyRing={isMe ? undefined : hasStories}
           theme={theme}

ts/components/conversation/MessageDetail.tsx

@@ -156,7 +156,7 @@ export class MessageDetail extends React.Component<Props> {
         theme={theme}
         title={title}
         sharedGroupNames={sharedGroupNames}
-        size={AvatarSize.THIRTY_SIX}
+        size={AvatarSize.THIRTY_TWO}
         unblurredAvatarPath={unblurredAvatarPath}
       />
     );

ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx

@@ -7,7 +7,7 @@ import type {
   ShowConversationType,
 } from '../../../state/ducks/conversations';
 import type { LocalizerType } from '../../../types/Util';
-import { Avatar } from '../../Avatar';
+import { Avatar, AvatarSize } from '../../Avatar';
 import { ConversationDetailsIcon, IconType } from './ConversationDetailsIcon';
 import { PanelRow } from './PanelRow';
 import { PanelSection } from './PanelSection';
@@ -60,7 +60,7 @@ export function ConversationDetailsGroups({
               conversationType="group"
               badge={undefined}
               i18n={i18n}
-              size={32}
+              size={AvatarSize.THIRTY_TWO}
               {...group}
             />
           }

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -4,7 +4,7 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
 
-import { Avatar } from '../../Avatar';
+import { Avatar, AvatarSize } from '../../Avatar';
 import { AvatarLightbox } from '../../AvatarLightbox';
 import type { ConversationType } from '../../../state/ducks/conversations';
 import { Emojify } from '../Emojify';
@@ -89,7 +89,7 @@ export function ConversationDetailsHeader({
       badge={preferredBadge}
       conversationType={conversation.type}
       i18n={i18n}
-      size={80}
+      size={AvatarSize.EIGHTY}
       {...conversation}
       noteToSelf={isMe}
       onClick={() => {

ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import type { LocalizerType, ThemeType } from '../../../types/Util';
 
-import { Avatar } from '../../Avatar';
+import { Avatar, AvatarSize } from '../../Avatar';
 import { Emojify } from '../Emojify';
 
 import { ConversationDetailsIcon, IconType } from './ConversationDetailsIcon';
@@ -115,7 +115,7 @@ export function ConversationDetailsMembershipList({
               conversationType="direct"
               badge={getPreferredBadge(member.badges)}
               i18n={i18n}
-              size={32}
+              size={AvatarSize.THIRTY_TWO}
               theme={theme}
               {...member}
             />

ts/components/conversation/conversation-details/PendingInvites.tsx

@@ -9,7 +9,7 @@ import type { ConversationType } from '../../../state/ducks/conversations';
 import type { LocalizerType, ThemeType } from '../../../types/Util';
 import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges';
 import type { UUIDStringType } from '../../../types/UUID';
-import { Avatar } from '../../Avatar';
+import { Avatar, AvatarSize } from '../../Avatar';
 import { ConfirmationDialog } from '../../ConfirmationDialog';
 import { PanelSection } from './PanelSection';
 import { PanelRow } from './PanelRow';
@@ -361,7 +361,7 @@ function MembersPendingAdminApproval({
             <Avatar
               badge={getPreferredBadge(membership.member.badges)}
               conversationType="direct"
-              size={32}
+              size={AvatarSize.THIRTY_TWO}
               i18n={i18n}
               theme={theme}
               {...membership.member}
@@ -460,7 +460,7 @@ function MembersPendingProfileKey({
                 <Avatar
                   badge={getPreferredBadge(membership.member.badges)}
                   conversationType="direct"
-                  size={32}
+                  size={AvatarSize.THIRTY_TWO}
                   i18n={i18n}
                   theme={theme}
                   {...membership.member}
@@ -496,7 +496,7 @@ function MembersPendingProfileKey({
                 <Avatar
                   badge={getPreferredBadge(member.badges)}
                   conversationType="direct"
-                  size={32}
+                  size={AvatarSize.THIRTY_TWO}
                   i18n={i18n}
                   theme={theme}
                   {...member}

ts/components/conversationList/GroupListItem.tsx

@@ -54,7 +54,7 @@ export function GroupListItem({
       disabled={group.disabledReason !== undefined}
       conversationType="group"
       title={group.title}
-      avatarSize={AvatarSize.THIRTY_SIX}
+      avatarSize={AvatarSize.THIRTY_TWO}
       avatarPath={group.avatarPath}
       acceptedMessageRequest
       isMe={false}

ts/quill/mentions/completion.tsx

@@ -11,7 +11,7 @@ import { Popper } from 'react-popper';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import type { ConversationType } from '../../state/ducks/conversations';
-import { Avatar } from '../../components/Avatar';
+import { Avatar, AvatarSize } from '../../components/Avatar';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { MemberRepository } from '../memberRepository';
 import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
@@ -268,7 +268,7 @@ export class MentionCompletion {
                     i18n={this.options.i18n}
                     isMe={member.isMe}
                     sharedGroupNames={member.sharedGroupNames}
-                    size={28}
+                    size={AvatarSize.TWENTY_EIGHT}
                     theme={theme}
                     title={member.title}
                     unblurredAvatarPath={member.unblurredAvatarPath}