mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Narrowed down avatar sizes

Browse source
This commit is contained in:
Alvaro 2022-12-09 13:37:45 -07:00 • committed by GitHub
parent 07f7fa93d6
commit 3a246656e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 61 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

4
stylesheets/components/LeftPaneSearchInput.scss
View file

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

4
stylesheets/components/StoriesSettingsModal.scss
View file

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

2
ts/components/Avatar.stories.tsx
View file

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

6
ts/components/Avatar.tsx
View file

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

1
ts/components/AvatarPopup.stories.tsx
View file

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

6
ts/components/AvatarPopup.tsx
View file

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

4
ts/components/CallNeedPermissionScreen.tsx
View file

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

6
ts/components/CallScreen.tsx
View file

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

4
ts/components/CallingParticipantsList.tsx
View file

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

4
ts/components/CallingPipRemoteVideo.tsx
View file

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

2
ts/components/CallingPreCallInfo.tsx
View file

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

4
ts/components/DirectCallRemoteParticipant.tsx
View file

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

8
ts/components/GroupCallRemoteParticipant.tsx
View file

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

4
ts/components/IncomingCallBar.tsx
View file

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

2
ts/components/LeftPaneSearchInput.tsx
View file

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

5
ts/components/MainHeader.tsx
View file

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

4
ts/components/SafetyNumberChangeDialog.tsx
View file

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

6
ts/components/SendStoryModal.tsx
View file

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

12
ts/components/StoriesSettingsModal.tsx
View file

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

4
ts/components/StoryDetailsModal.tsx
View file

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

4
ts/components/conversation/ContactModal.tsx
View file

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

2
ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx
View file

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

4
ts/components/conversation/ConversationHero.tsx
View file

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

2
ts/components/conversation/MessageDetail.tsx
View file

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

4
ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx
View file

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

4
ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
View file

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

4
ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx
View file

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

8
ts/components/conversation/conversation-details/PendingInvites.tsx
View file

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

2
ts/components/conversationList/GroupListItem.tsx
View file

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

4
ts/quill/mentions/completion.tsx
View file

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