From 3a246656e3dc3b9b01d3c0a162a23a423afee43b Mon Sep 17 00:00:00 2001 From: Alvaro <110414366+alvaro-signal@users.noreply.github.com> Date: Fri, 9 Dec 2022 13:37:45 -0700 Subject: [PATCH] Narrowed down avatar sizes --- stylesheets/components/LeftPaneSearchInput.scss | 4 ++-- stylesheets/components/StoriesSettingsModal.scss | 4 ++-- ts/components/Avatar.stories.tsx | 2 +- ts/components/Avatar.tsx | 6 +----- ts/components/AvatarPopup.stories.tsx | 1 - ts/components/AvatarPopup.tsx | 6 +++--- ts/components/CallNeedPermissionScreen.tsx | 4 ++-- ts/components/CallScreen.tsx | 6 +++--- ts/components/CallingParticipantsList.tsx | 4 ++-- ts/components/CallingPipRemoteVideo.tsx | 4 ++-- ts/components/CallingPreCallInfo.tsx | 2 +- ts/components/DirectCallRemoteParticipant.tsx | 4 ++-- ts/components/GroupCallRemoteParticipant.tsx | 8 +++----- ts/components/IncomingCallBar.tsx | 4 ++-- ts/components/LeftPaneSearchInput.tsx | 2 +- ts/components/MainHeader.tsx | 5 ++--- ts/components/SafetyNumberChangeDialog.tsx | 4 ++-- ts/components/SendStoryModal.tsx | 6 +++--- ts/components/StoriesSettingsModal.tsx | 12 ++++++------ ts/components/StoryDetailsModal.tsx | 4 ++-- ts/components/conversation/ContactModal.tsx | 4 ++-- .../ContactSpoofingReviewDialogPerson.tsx | 2 +- ts/components/conversation/ConversationHero.tsx | 4 ++-- ts/components/conversation/MessageDetail.tsx | 2 +- .../ConversationDetailsGroups.tsx | 4 ++-- .../ConversationDetailsHeader.tsx | 4 ++-- .../ConversationDetailsMembershipList.tsx | 4 ++-- .../conversation-details/PendingInvites.tsx | 8 ++++---- ts/components/conversationList/GroupListItem.tsx | 2 +- ts/quill/mentions/completion.tsx | 4 ++-- 30 files changed, 61 insertions(+), 69 deletions(-) diff --git a/stylesheets/components/LeftPaneSearchInput.scss b/stylesheets/components/LeftPaneSearchInput.scss index 4f829be8a..9ffc117d6 100644 --- a/stylesheets/components/LeftPaneSearchInput.scss +++ b/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; diff --git a/stylesheets/components/StoriesSettingsModal.scss b/stylesheets/components/StoriesSettingsModal.scss index b3db8f9f6..b56dc5918 100644 --- a/stylesheets/components/StoriesSettingsModal.scss +++ b/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 { diff --git a/ts/components/Avatar.stories.tsx b/ts/components/Avatar.stories.tsx index d904c22ca..d8d8edfc0 100644 --- a/ts/components/Avatar.stories.tsx +++ b/ts/components/Avatar.stories.tsx @@ -113,7 +113,7 @@ const Template: Story = args => ( // eslint-disable-next-line react/function-component-definition const TemplateSingle: Story = args => ( - + ); export const Default = Template.bind({}); diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index 8dfc9042c..a6324b0b6 100644 --- a/ts/components/Avatar.tsx +++ b/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 }; diff --git a/ts/components/AvatarPopup.stories.tsx b/ts/components/AvatarPopup.stories.tsx index 7e4d68fae..2caf3c046 100644 --- a/ts/components/AvatarPopup.stories.tsx +++ b/ts/components/AvatarPopup.stories.tsx @@ -50,7 +50,6 @@ const useProps = (overrideProps: Partial = {}): Props => ({ phoneNumber: text('phoneNumber', overrideProps.phoneNumber || ''), profileName: text('profileName', overrideProps.profileName || ''), sharedGroupNames: [], - size: 80, startUpdate: action('startUpdate'), style: {}, theme: React.useContext(StorybookThemeContext), diff --git a/ts/components/AvatarPopup.tsx b/ts/components/AvatarPopup.tsx index fa986bf15..9dbc8e305 100644 --- a/ts/components/AvatarPopup.tsx +++ b/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; style: React.CSSProperties; name?: string; -} & Omit; +} & Omit; export function AvatarPopup(props: Props): JSX.Element { const { @@ -58,7 +58,7 @@ export function AvatarPopup(props: Props): JSX.Element { ref={focusRef} type="button" > - +
diff --git a/ts/components/CallNeedPermissionScreen.tsx b/ts/components/CallNeedPermissionScreen.tsx index db8f1d810..d7d01ca94 100644 --- a/ts/components/CallNeedPermissionScreen.tsx +++ b/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} />

diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx index cb2ed6c60..d4a5d2b62 100644 --- a/ts/components/CallScreen.tsx +++ b/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 `` needs it // to determine blurring. sharedGroupNames={[]} - size={80} + size={AvatarSize.EIGHTY} />

{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} /> ); diff --git a/ts/components/CallingParticipantsList.tsx b/ts/components/CallingParticipantsList.tsx index dbe0bb499..09fbbd31e 100644 --- a/ts/components/CallingParticipantsList.tsx +++ b/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 ? ( diff --git a/ts/components/CallingPipRemoteVideo.tsx b/ts/components/CallingPipRemoteVideo.tsx index 588906d85..bb3c2f3b3 100644 --- a/ts/components/CallingPipRemoteVideo.tsx +++ b/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} />
diff --git a/ts/components/CallingPreCallInfo.tsx b/ts/components/CallingPreCallInfo.tsx index d70530f36..c98e71cc4 100644 --- a/ts/components/CallingPreCallInfo.tsx +++ b/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} diff --git a/ts/components/DirectCallRemoteParticipant.tsx b/ts/components/DirectCallRemoteParticipant.tsx index 80d114517..b88ab9b24 100644 --- a/ts/components/DirectCallRemoteParticipant.tsx +++ b/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} />
); diff --git a/ts/components/GroupCallRemoteParticipant.tsx b/ts/components/GroupCallRemoteParticipant.tsx index e68c33937..e95ec79e9 100644 --- a/ts/components/GroupCallRemoteParticipant.tsx +++ b/ts/components/GroupCallRemoteParticipant.tsx @@ -215,17 +215,15 @@ export const GroupCallRemoteParticipant: React.FC = 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 = { diff --git a/ts/components/IncomingCallBar.tsx b/ts/components/IncomingCallBar.tsx index 297582a60..9e80a33b4 100644 --- a/ts/components/IncomingCallBar.tsx +++ b/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} />
diff --git a/ts/components/LeftPaneSearchInput.tsx b/ts/components/LeftPaneSearchInput.tsx index f9ad3c45c..564a114d8 100644 --- a/ts/components/LeftPaneSearchInput.tsx +++ b/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} /> diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index a4e9749d1..d26fd3e29 100644 --- a/ts/components/MainHeader.tsx +++ b/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 { // `sharedGroupNames` makes no sense for yourself, but // `` 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 { theme={theme} title={title} avatarPath={avatarPath} - size={28} hasPendingUpdate={hasPendingUpdate} startUpdate={startUpdate} // See the comment above about `sharedGroupNames`. diff --git a/ts/components/SafetyNumberChangeDialog.tsx b/ts/components/SafetyNumberChangeDialog.tsx index 319ea0511..8d2561b49 100644 --- a/ts/components/SafetyNumberChangeDialog.tsx +++ b/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} />
diff --git a/ts/components/SendStoryModal.tsx b/ts/components/SendStoryModal.tsx index 335e41de6..79b4df365 100644 --- a/ts/components/SendStoryModal.tsx +++ b/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} /> diff --git a/ts/components/StoriesSettingsModal.tsx b/ts/components/StoriesSettingsModal.tsx index c86f44366..79b6d1ecf 100644 --- a/ts/components/StoriesSettingsModal.tsx +++ b/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} /> @@ -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} /> {group.title} @@ -1287,7 +1287,7 @@ export function GroupStorySettingsModal({ i18n={i18n} isMe={false} sharedGroupNames={[]} - size={AvatarSize.THIRTY_SIX} + size={AvatarSize.THIRTY_TWO} title={member.title} />

diff --git a/ts/components/StoryDetailsModal.tsx b/ts/components/StoryDetailsModal.tsx index f60350b4b..7af1945c8 100644 --- a/ts/components/StoryDetailsModal.tsx +++ b/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} /> diff --git a/ts/components/conversation/ContactModal.tsx b/ts/components/conversation/ContactModal.tsx index c6bde322f..8fc6cbd5d 100644 --- a/ts/components/conversation/ContactModal.tsx +++ b/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} diff --git a/ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx b/ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx index fbd846fb1..f2ef4b968 100644 --- a/ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx +++ b/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} diff --git a/ts/components/conversation/ConversationHero.tsx b/ts/components/conversation/ConversationHero.tsx index 7b4129de0..bcb0d81a2 100644 --- a/ts/components/conversation/ConversationHero.tsx +++ b/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} diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx index 93e604128..784f94331 100644 --- a/ts/components/conversation/MessageDetail.tsx +++ b/ts/components/conversation/MessageDetail.tsx @@ -156,7 +156,7 @@ export class MessageDetail extends React.Component { theme={theme} title={title} sharedGroupNames={sharedGroupNames} - size={AvatarSize.THIRTY_SIX} + size={AvatarSize.THIRTY_TWO} unblurredAvatarPath={unblurredAvatarPath} /> ); diff --git a/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx b/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx index 2db16f07a..57818f5cd 100644 --- a/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx +++ b/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} /> } diff --git a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx index 9866fe447..78d0cac5a 100644 --- a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx +++ b/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={() => { diff --git a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx index 0f0ff819e..068616a01 100644 --- a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx +++ b/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} /> diff --git a/ts/components/conversation/conversation-details/PendingInvites.tsx b/ts/components/conversation/conversation-details/PendingInvites.tsx index ca5ecd1a9..26526d7f5 100644 --- a/ts/components/conversation/conversation-details/PendingInvites.tsx +++ b/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({