diff --git a/dev/icons.scss.hbs b/dev/icons.scss.hbs index 1a730fed5..16e1ab94c 100644 --- a/dev/icons.scss.hbs +++ b/dev/icons.scss.hbs @@ -3,11 +3,17 @@ .icon-char::before { font-family: Roboto, "Helvetica Neue", sans-serif; content: attr(data-char); - width: 1.5rem; + width: 1em; text-align: center; display: block; } +.icon-placeholder::before { + content: ''; + display: block; + width: 1em; +} + @mixin icon { /* use !important to prevent issues with browser extensions that change fonts */ /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ diff --git a/src/components/calls/group/GroupCall.tsx b/src/components/calls/group/GroupCall.tsx index 889524364..e3b77e852 100644 --- a/src/components/calls/group/GroupCall.tsx +++ b/src/components/calls/group/GroupCall.tsx @@ -30,6 +30,7 @@ import useOldLang from '../../../hooks/useOldLang'; import { useFullscreenStatus } from '../../../hooks/window/useFullscreen'; import useGroupCallVideoLayout from './hooks/useGroupCallVideoLayout'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import Checkbox from '../../ui/Checkbox'; import FloatingActionButton from '../../ui/FloatingActionButton'; @@ -278,10 +279,7 @@ const GroupCall: FC = ({ className={buildClassName(styles.headerButton, styles.firstButton)} ariaLabel={lang(isFullscreen ? 'AccExitFullscreen' : 'AccSwitchToFullscreen')} > - + )} @@ -298,7 +296,7 @@ const GroupCall: FC = ({ onClick={handleToggleSidebar} ariaLabel={lang('AccDescrExpandPanel')} > - + )} @@ -328,7 +326,7 @@ const GroupCall: FC = ({ onClick={handleToggleFullscreen} ariaLabel={lang('AccSwitchToFullscreen')} > - + )} @@ -341,10 +339,7 @@ const GroupCall: FC = ({ className={buildClassName(styles.headerButton, styles.firstButton)} ariaLabel={lang('Close')} > - + )} @@ -361,7 +356,7 @@ const GroupCall: FC = ({ onClick={handleToggleSidebar} ariaLabel={lang('AccDescrCollapsePanel')} > - + )} @@ -389,7 +384,7 @@ const GroupCall: FC = ({ onClick={handleInviteMember} ariaLabel={lang('VoipGroupInviteMember')} > - + )} @@ -438,7 +433,7 @@ const GroupCall: FC = ({ className={styles.addParticipantButton} ariaLabel={lang('VoipGroupInviteMember')} > - + @@ -482,7 +477,7 @@ const GroupCall: FC = ({ ariaLabel={lang(hasVideo ? 'VoipStopVideo' : 'VoipStartVideo')} disabled={isConnecting} > - + @@ -518,7 +510,7 @@ const GroupCall: FC = ({ ariaLabel={lang('lng_group_call_settings')} disabled > - + diff --git a/src/components/calls/group/GroupCallParticipant.tsx b/src/components/calls/group/GroupCallParticipant.tsx index 59c74ea07..a56d80a89 100644 --- a/src/components/calls/group/GroupCallParticipant.tsx +++ b/src/components/calls/group/GroupCallParticipant.tsx @@ -19,6 +19,7 @@ import useOldLang from '../../../hooks/useOldLang'; import Avatar from '../../common/Avatar'; import FullNameTitle from '../../common/FullNameTitle'; +import Icon from '../../common/icons/Icon'; import ListItem from '../../ui/ListItem'; import GroupCallParticipantMenu from './GroupCallParticipantMenu'; import OutlinedMicrophoneIcon from './OutlinedMicrophoneIcon'; @@ -128,9 +129,9 @@ const GroupCallParticipant: FC = ({ > - {hasPresentationStream && } - {hasVideoStream && } - {hasCustomVolume && } + {hasPresentationStream && } + {hasVideoStream && } + {hasCustomVolume && } {renderText(aboutText)} = ({ ariaLabel={lang(isPinned ? 'lng_group_call_context_unpin_camera' : 'lng_group_call_context_pin_camera')} onClick={handleClickPin} > - + )}
diff --git a/src/components/calls/phone/PhoneCall.tsx b/src/components/calls/phone/PhoneCall.tsx index 13e08b52a..5eba9b199 100644 --- a/src/components/calls/phone/PhoneCall.tsx +++ b/src/components/calls/phone/PhoneCall.tsx @@ -31,6 +31,7 @@ import useOldLang from '../../../hooks/useOldLang'; import AnimatedIcon from '../../common/AnimatedIcon'; import Avatar from '../../common/Avatar'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import Modal from '../../ui/Modal'; import PhoneCallButton from './PhoneCallButton'; @@ -273,7 +274,7 @@ const PhoneCall: FC = ({ onClick={handleToggleFullscreen} ariaLabel={lang(isFullscreen ? 'AccExitFullscreen' : 'AccSwitchToFullscreen')} > - + )} @@ -284,7 +285,7 @@ const PhoneCall: FC = ({ onClick={handleClose} className={styles.closeButton} > - +
= ({ onClick={onClick} disabled={isDisabled} > - {customIcon || } + {customIcon || }
{label}
diff --git a/src/components/calls/phone/RatePhoneCallModal.tsx b/src/components/calls/phone/RatePhoneCallModal.tsx index ea7e7e8fe..7dc7bdb67 100644 --- a/src/components/calls/phone/RatePhoneCallModal.tsx +++ b/src/components/calls/phone/RatePhoneCallModal.tsx @@ -8,6 +8,7 @@ import buildClassName from '../../../util/buildClassName'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import InputText from '../../ui/InputText'; import Modal from '../../ui/Modal'; @@ -54,10 +55,9 @@ const RatePhoneCallModal: FC = ({ {new Array(5).fill(undefined).map((_, i) => { const isFilled = rating !== undefined && rating >= i; return ( - = ({
{isSelectable && (
- {isSelected && } + {isSelected && }
)} {renderTooglePlayWrapper()} @@ -448,7 +448,7 @@ const Audio: FC = ({ ariaLabel={isDownloading ? 'Cancel download' : 'Download'} onClick={handleDownloadClick} > - + )} {origin === AudioOrigin.Search && renderWithTitle()} @@ -589,12 +589,12 @@ function renderVoice( } }} > - {isTranscribing && ( diff --git a/src/components/common/CalendarModal.tsx b/src/components/common/CalendarModal.tsx index 0f7bea477..8e312d7b4 100644 --- a/src/components/common/CalendarModal.tsx +++ b/src/components/common/CalendarModal.tsx @@ -15,6 +15,7 @@ import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; import Button from '../ui/Button'; import Modal from '../ui/Modal'; +import Icon from './icons/Icon'; import './CalendarModal.scss'; @@ -258,7 +259,7 @@ const CalendarModal: FC = ({ color="translucent" onClick={onClose} > - +

@@ -274,7 +275,7 @@ const CalendarModal: FC = ({ disabled={shouldDisablePrevMonth} onClick={!shouldDisablePrevMonth ? handlePrevMonth : undefined} > - +

diff --git a/src/components/common/File.tsx b/src/components/common/File.tsx index 28d107729..654ab260a 100644 --- a/src/components/common/File.tsx +++ b/src/components/common/File.tsx @@ -20,6 +20,7 @@ import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated import Link from '../ui/Link'; import ProgressSpinner from '../ui/ProgressSpinner'; +import Icon from './icons/Icon'; import './File.scss'; @@ -103,7 +104,7 @@ const File: FC = ({
{isSelectable && (
- {isSelected && } + {isSelected && }
)}
@@ -141,13 +142,9 @@ const File: FC = ({
)} {onClick && ( - )}
diff --git a/src/components/common/GifButton.tsx b/src/components/common/GifButton.tsx index 3771b79e4..5188af4b0 100644 --- a/src/components/common/GifButton.tsx +++ b/src/components/common/GifButton.tsx @@ -24,6 +24,7 @@ import Menu from '../ui/Menu'; import MenuItem from '../ui/MenuItem'; import OptimizedVideo from '../ui/OptimizedVideo'; import Spinner from '../ui/Spinner'; +import Icon from './icons/Icon'; import './GifButton.scss'; @@ -141,7 +142,7 @@ const GifButton: FC = ({ noFastClick onClick={handleUnsaveClick} > - + )} {withThumb && ( diff --git a/src/components/common/LinkField.tsx b/src/components/common/LinkField.tsx index e5d70ff76..76a1d6bee 100644 --- a/src/components/common/LinkField.tsx +++ b/src/components/common/LinkField.tsx @@ -69,7 +69,7 @@ const InviteLink: FC = ({ onClick={onTrigger} ariaLabel={lang('AccDescrOpenMenu2')} > - + ); }, [isMobile, lang]); diff --git a/src/components/common/PasswordForm.tsx b/src/components/common/PasswordForm.tsx index ad5b17424..67dc352c4 100644 --- a/src/components/common/PasswordForm.tsx +++ b/src/components/common/PasswordForm.tsx @@ -15,6 +15,7 @@ import useAppLayout from '../../hooks/useAppLayout'; import useOldLang from '../../hooks/useOldLang'; import Button from '../ui/Button'; +import Icon from './icons/Icon'; type OwnProps = { submitLabel?: string; @@ -149,7 +150,7 @@ const PasswordForm: FC = ({ title="Toggle password visibility" aria-label="Toggle password visibility" > - + {description &&

{description}

} diff --git a/src/components/common/SliderDots.tsx b/src/components/common/SliderDots.tsx index 56a35f061..0174aead4 100644 --- a/src/components/common/SliderDots.tsx +++ b/src/components/common/SliderDots.tsx @@ -5,6 +5,7 @@ import buildClassName from '../../util/buildClassName'; import { IS_TOUCH_ENV } from '../../util/windowEnvironment'; import Button from '../ui/Button'; +import Icon from './icons/Icon'; import styles from './SliderDots.module.scss'; @@ -46,7 +47,7 @@ const SliderDots: FC = ({ round onClick={handleGoBack} > - + )}
@@ -81,7 +82,7 @@ const SliderDots: FC = ({ disabled={active === length - 1} onClick={handleGoForward} > - + )}
diff --git a/src/components/common/StickerSetModal.tsx b/src/components/common/StickerSetModal.tsx index 7da2e4632..c89920657 100644 --- a/src/components/common/StickerSetModal.tsx +++ b/src/components/common/StickerSetModal.tsx @@ -37,6 +37,7 @@ import DropdownMenu from '../ui/DropdownMenu'; import Loading from '../ui/Loading'; import MenuItem from '../ui/MenuItem'; import Modal from '../ui/Modal'; +import Icon from './icons/Icon'; import StickerButton from './StickerButton'; import './StickerSetModal.scss'; @@ -183,7 +184,7 @@ const StickerSetModal: FC = ({ onClick={onTrigger} ariaLabel="More actions" > - + ); }, [isMobile]); @@ -194,7 +195,7 @@ const StickerSetModal: FC = ({ return (
{renderingStickerSet ? renderText(renderingStickerSet.title, ['emoji', 'links']) : lang('AccDescrStickerSet')} diff --git a/src/components/common/TopicChip.tsx b/src/components/common/TopicChip.tsx index c52b73b76..c72e2b768 100644 --- a/src/components/common/TopicChip.tsx +++ b/src/components/common/TopicChip.tsx @@ -10,6 +10,7 @@ import renderText from './helpers/renderText'; import useOldLang from '../../hooks/useOldLang'; +import Icon from './icons/Icon'; import TopicIcon from './TopicIcon'; import styles from './TopicChip.module.scss'; @@ -40,8 +41,8 @@ const TopicChip: FC = ({ ? : } {topic?.title ? renderText(topic.title) : lang('Loading')} - {topic?.isClosed && } - + {topic?.isClosed && } +
); }; diff --git a/src/components/common/TopicDefaultIcon.tsx b/src/components/common/TopicDefaultIcon.tsx index 0713662bd..1b0daffbf 100644 --- a/src/components/common/TopicDefaultIcon.tsx +++ b/src/components/common/TopicDefaultIcon.tsx @@ -7,6 +7,8 @@ import { getTopicDefaultIcon } from '../../util/forumColors'; import { getFirstLetters } from '../../util/textFormat'; import renderText from './helpers/renderText'; +import Icon from './icons/Icon'; + import styles from './TopicDefaultIcon.module.scss'; type OwnProps = { @@ -30,8 +32,9 @@ const TopicDefaultIcon: FC = ({ if (topicId === GENERAL_TOPIC_ID) { return ( - ); diff --git a/src/components/common/code/CodeOverlay.tsx b/src/components/common/code/CodeOverlay.tsx index 1bba85530..5815048cd 100644 --- a/src/components/common/code/CodeOverlay.tsx +++ b/src/components/common/code/CodeOverlay.tsx @@ -11,6 +11,8 @@ import { areLinesWrapping } from '../helpers/renderText'; import useOldLang from '../../../hooks/useOldLang'; import useWindowSize from '../../../hooks/window/useWindowSize'; +import Icon from '../icons/Icon'; + import styles from './CodeOverlay.module.scss'; export type OwnProps = { @@ -63,12 +65,12 @@ const CodeOverlay: FC = ({
{withWordWrapButton && (
- +
)} {!noCopy && (
- +
)}
diff --git a/src/components/common/icons/Icon.tsx b/src/components/common/icons/Icon.tsx index ef84d79fe..a529bd710 100644 --- a/src/components/common/icons/Icon.tsx +++ b/src/components/common/icons/Icon.tsx @@ -11,23 +11,29 @@ type OwnProps = { style?: string; role?: AriaRole; ariaLabel?: string; + character?: string; + ref?: React.RefObject; onClick?: (e: React.MouseEvent) => void; }; const Icon = ({ name, + ref, className, style, role, ariaLabel, + character, onClick, }: OwnProps) => { return ( diff --git a/src/components/common/pickers/ChatOrUserPicker.tsx b/src/components/common/pickers/ChatOrUserPicker.tsx index f40f55806..176cd8e45 100644 --- a/src/components/common/pickers/ChatOrUserPicker.tsx +++ b/src/components/common/pickers/ChatOrUserPicker.tsx @@ -33,6 +33,7 @@ import Modal from '../../ui/Modal'; import Transition from '../../ui/Transition'; import Avatar from '../Avatar'; import FullNameTitle from '../FullNameTitle'; +import Icon from '../icons/Icon'; import TopicIcon from '../TopicIcon'; import PickerItem from './PickerItem'; @@ -231,7 +232,7 @@ const ChatOrUserPicker: FC = ({ <>
= ({ ariaLabel={lang('Close')} onClick={onClose} > - + = ({ if (shouldReplaceWithHeartIcon) { return ( - + ); } diff --git a/src/components/left/ArchivedChats.tsx b/src/components/left/ArchivedChats.tsx index 6e41cc7b6..91437067d 100644 --- a/src/components/left/ArchivedChats.tsx +++ b/src/components/left/ArchivedChats.tsx @@ -17,6 +17,7 @@ import useOldLang from '../../hooks/useOldLang'; import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import useLeftHeaderButtonRtlForumTransition from './main/hooks/useLeftHeaderButtonRtlForumTransition'; +import Icon from '../common/icons/Icon'; import StoryRibbon from '../story/StoryRibbon'; import StoryToggler from '../story/StoryToggler'; import Button from '../ui/Button'; @@ -103,7 +104,7 @@ const ArchivedChats: FC = ({ )} onTransitionEnd={handleDropdownMenuTransitionEnd} > - + {shouldRenderTitle &&

{lang('ArchivedChats')}

}
diff --git a/src/components/left/ConnectionStatusOverlay.tsx b/src/components/left/ConnectionStatusOverlay.tsx index 77304eaf6..531e522a4 100644 --- a/src/components/left/ConnectionStatusOverlay.tsx +++ b/src/components/left/ConnectionStatusOverlay.tsx @@ -5,6 +5,7 @@ import type { ConnectionStatus } from '../../hooks/useConnectionStatus'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import Spinner from '../ui/Spinner'; import Transition from '../ui/Transition'; @@ -37,7 +38,7 @@ const ConnectionStatusOverlay: FC = ({ size="tiny" color="translucent-black" > - +
); diff --git a/src/components/left/NewChatButton.tsx b/src/components/left/NewChatButton.tsx index 7b4dcbb8a..349a4975e 100644 --- a/src/components/left/NewChatButton.tsx +++ b/src/components/left/NewChatButton.tsx @@ -7,6 +7,7 @@ import buildClassName from '../../util/buildClassName'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import Menu from '../ui/Menu'; import MenuItem from '../ui/MenuItem'; @@ -68,8 +69,8 @@ const NewChatButton: FC = ({ ariaLabel={lang(isMenuOpen ? 'Close' : 'NewMessageTitle')} tabIndex={-1} > - - + + = ({ isSavedDialog={isSavedDialog} observeIntersection={observeIntersection} /> - {isMuted && !isSavedDialog && } + {isMuted && !isSavedDialog && }
{lastMessage && ( = ({ function renderContent() { const unreadReactionsElement = unreadReactionsCount && (
- +
); const unreadMentionsElement = unreadMentionsCount && (
- +
); @@ -132,7 +133,7 @@ const ChatBadge: FC = ({ const pinnedElement = isPinned && (
- +
); diff --git a/src/components/left/main/ContactList.tsx b/src/components/left/main/ContactList.tsx index 9bdae448d..4b02162f0 100644 --- a/src/components/left/main/ContactList.tsx +++ b/src/components/left/main/ContactList.tsx @@ -12,6 +12,7 @@ import useHistoryBack from '../../../hooks/useHistoryBack'; import useInfiniteScroll from '../../../hooks/useInfiniteScroll'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import PrivateChatInfo from '../../common/PrivateChatInfo'; import FloatingActionButton from '../../ui/FloatingActionButton'; import InfiniteScroll from '../../ui/InfiniteScroll'; @@ -100,7 +101,7 @@ const ContactList: FC = ({ onClick={openNewContactDialog} ariaLabel={lang('CreateNewContact')} > - + ); diff --git a/src/components/left/main/EmptyFolder.tsx b/src/components/left/main/EmptyFolder.tsx index 3b40e26d0..8f39df226 100644 --- a/src/components/left/main/EmptyFolder.tsx +++ b/src/components/left/main/EmptyFolder.tsx @@ -12,6 +12,7 @@ import useAppLayout from '../../../hooks/useAppLayout'; import useOldLang from '../../../hooks/useOldLang'; import AnimatedIconFromSticker from '../../common/AnimatedIconFromSticker'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import styles from './EmptyFolder.module.scss'; @@ -59,7 +60,7 @@ const EmptyFolder: FC = ({ size="smaller" isRtl={lang.isRtl} > - +
{lang('ChatList.EmptyChatListEditFilter')}
diff --git a/src/components/left/main/ForumPanel.tsx b/src/components/left/main/ForumPanel.tsx index 6a3c47f3d..be49b3af3 100644 --- a/src/components/left/main/ForumPanel.tsx +++ b/src/components/left/main/ForumPanel.tsx @@ -39,6 +39,7 @@ import useOrderDiff from './hooks/useOrderDiff'; import GroupCallTopPane from '../../calls/group/GroupCallTopPane'; import GroupChatInfo from '../../common/GroupChatInfo'; +import Icon from '../../common/icons/Icon'; import HeaderActions from '../../middle/HeaderActions'; import Button from '../../ui/Button'; import InfiniteScroll from '../../ui/InfiniteScroll'; @@ -234,7 +235,7 @@ const ForumPanel: FC = ({ onClick={handleClose} ariaLabel={lang('Close')} > - + {chat && ( diff --git a/src/components/left/main/LeftMainHeader.tsx b/src/components/left/main/LeftMainHeader.tsx index bf616476f..2e48e8aeb 100644 --- a/src/components/left/main/LeftMainHeader.tsx +++ b/src/components/left/main/LeftMainHeader.tsx @@ -36,6 +36,7 @@ import useOldLang from '../../../hooks/useOldLang'; import { useFullscreenStatus } from '../../../hooks/window/useFullscreen'; import useLeftHeaderButtonRtlForumTransition from './hooks/useLeftHeaderButtonRtlForumTransition'; +import Icon from '../../common/icons/Icon'; import PeerChip from '../../common/PeerChip'; import StoryToggler from '../../story/StoryToggler'; import Button from '../../ui/Button'; @@ -310,7 +311,7 @@ const LeftMainHeader: FC = ({ onClick={handleLockScreen} className={buildClassName(!isCurrentUserPremium && 'extra-spacing')} > - + )} = ({

{renderText(topic.title)}

- {topic.isMuted && } + {topic.isMuted && }
{isClosed && ( - + )} {lastMessage && ( : )} - {!isSavedDialog && lastMessage.forwardInfo && ()} - {lastMessage.replyInfo?.type === 'story' && ()} + {!isSavedDialog && lastMessage.forwardInfo && ()} + {lastMessage.replyInfo?.type === 'story' && ()} {renderSummary(lastMessage, observeIntersection, mediaBlobUrl || mediaThumbnail, isRoundVideo)}

); @@ -279,7 +280,7 @@ function renderSummary( } draggable={false} /> - {getMessageVideo(message) && } + {getMessageVideo(message) && } {messageSummary} ); diff --git a/src/components/left/newChat/NewChatStep1.tsx b/src/components/left/newChat/NewChatStep1.tsx index 60ea238b1..7ef6a5016 100644 --- a/src/components/left/newChat/NewChatStep1.tsx +++ b/src/components/left/newChat/NewChatStep1.tsx @@ -10,6 +10,7 @@ import sortChatIds from '../../common/helpers/sortChatIds'; import useHistoryBack from '../../../hooks/useHistoryBack'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import PeerPicker from '../../common/pickers/PeerPicker'; import Button from '../../ui/Button'; import FloatingActionButton from '../../ui/FloatingActionButton'; @@ -94,7 +95,7 @@ const NewChatStep1: FC = ({ onClick={onReset} ariaLabel="Return to Chat List" > - +

{lang('GroupAddMembers')}

@@ -120,7 +121,7 @@ const NewChatStep1: FC = ({ onClick={handleNextStep} ariaLabel={isChannel ? 'Continue To Channel Info' : 'Continue To Group Info'} > - +
diff --git a/src/components/left/newChat/NewChatStep2.tsx b/src/components/left/newChat/NewChatStep2.tsx index 6a1a3efc2..ef2715218 100644 --- a/src/components/left/newChat/NewChatStep2.tsx +++ b/src/components/left/newChat/NewChatStep2.tsx @@ -13,6 +13,7 @@ import { selectTabState } from '../../../global/selectors'; import useHistoryBack from '../../../hooks/useHistoryBack'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import PrivateChatInfo from '../../common/PrivateChatInfo'; import AvatarEditable from '../../ui/AvatarEditable'; import Button from '../../ui/Button'; @@ -157,7 +158,7 @@ const NewChatStep2: FC = ({ onClick={() => onReset()} ariaLabel="Return to member selection" > - +

{lang(isChannel ? 'NewChannel' : 'NewGroup')}

@@ -211,7 +212,7 @@ const NewChatStep2: FC = ({ {isLoading ? ( ) : ( - + )} diff --git a/src/components/left/search/ChatMessage.tsx b/src/components/left/search/ChatMessage.tsx index 52741b439..106a1170b 100644 --- a/src/components/left/search/ChatMessage.tsx +++ b/src/components/left/search/ChatMessage.tsx @@ -30,6 +30,7 @@ import useSelectWithEnter from '../../../hooks/useSelectWithEnter'; import Avatar from '../../common/Avatar'; import FullNameTitle from '../../common/FullNameTitle'; +import Icon from '../../common/icons/Icon'; import Link from '../../ui/Link'; import ListItem from '../../ui/ListItem'; @@ -129,7 +130,7 @@ function renderSummary( } draggable={false} /> - {getMessageVideo(message) && } + {getMessageVideo(message) && } {renderMessageSummary(lang, message, true, searchQuery)} ); diff --git a/src/components/left/search/DateSuggest.tsx b/src/components/left/search/DateSuggest.tsx index 0c64aeae1..cb64c0005 100644 --- a/src/components/left/search/DateSuggest.tsx +++ b/src/components/left/search/DateSuggest.tsx @@ -3,6 +3,8 @@ import React, { memo, useMemo } from '../../../lib/teact/teact'; import { formatDateToString } from '../../../util/dates/dateFormat'; +import Icon from '../../common/icons/Icon'; + import './DateSuggest.scss'; const SUGGESTION_COUNT = 8; @@ -25,7 +27,7 @@ const DateSuggest: FC = ({ className="date-item" key={text} > - + {text} ); diff --git a/src/components/left/search/RecentContacts.tsx b/src/components/left/search/RecentContacts.tsx index a7ab29092..fcbf55f62 100644 --- a/src/components/left/search/RecentContacts.tsx +++ b/src/components/left/search/RecentContacts.tsx @@ -16,6 +16,7 @@ import useHorizontalScroll from '../../../hooks/useHorizontalScroll'; import useOldLang from '../../../hooks/useOldLang'; import Avatar from '../../common/Avatar'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import LeftSearchResultChat from './LeftSearchResultChat'; @@ -113,7 +114,7 @@ const RecentContacts: FC = ({ onClick={handleClearRecentlyFoundChats} isRtl={lang.isRtl} > - + {recentlyFoundChatIds.map((id) => ( diff --git a/src/components/left/settings/SettingsActiveSession.tsx b/src/components/left/settings/SettingsActiveSession.tsx index 7c54d5baf..7dc315149 100644 --- a/src/components/left/settings/SettingsActiveSession.tsx +++ b/src/components/left/settings/SettingsActiveSession.tsx @@ -11,6 +11,7 @@ import getSessionIcon from './helpers/getSessionIcon'; import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import ListItem from '../../ui/ListItem'; import Modal from '../../ui/Modal'; @@ -63,7 +64,7 @@ const SettingsActiveSession: FC = ({ return (
{lang('SessionPreview.Title')}
{lang('WebSessionsTitle')}
diff --git a/src/components/left/settings/SettingsHeader.tsx b/src/components/left/settings/SettingsHeader.tsx index 9b7b251fe..447bca784 100644 --- a/src/components/left/settings/SettingsHeader.tsx +++ b/src/components/left/settings/SettingsHeader.tsx @@ -11,6 +11,7 @@ import useLang from '../../../hooks/useLang'; import useMultiClick from '../../../hooks/useMultiClick'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import ConfirmDialog from '../../ui/ConfirmDialog'; import DropdownMenu from '../../ui/DropdownMenu'; @@ -71,7 +72,7 @@ const SettingsHeader: FC = ({ onClick={onTrigger} ariaLabel="More actions" > - + ); }, [isMobile]); @@ -269,7 +270,7 @@ const SettingsHeader: FC = ({ onClick={() => onScreenSelect(SettingsScreens.EditProfile)} ariaLabel={oldLang('lng_settings_information')} > - + = ({ onClick={onReset} ariaLabel={oldLang('AccDescrGoBack')} > - + {renderHeaderContent()} = ({ onClick={openBlockUserModal} ariaLabel={lang('BlockContact')} > - + = ({ onClick={handleSubmit} ariaLabel={isAllowList ? oldLang('AlwaysAllow') : oldLang('NeverAllow')} > - + ); diff --git a/src/components/left/settings/folders/SettingsFoldersEdit.tsx b/src/components/left/settings/folders/SettingsFoldersEdit.tsx index ee9c1ba8e..72e632a23 100644 --- a/src/components/left/settings/folders/SettingsFoldersEdit.tsx +++ b/src/components/left/settings/folders/SettingsFoldersEdit.tsx @@ -25,6 +25,7 @@ import useOldLang from '../../../../hooks/useOldLang'; import AnimatedIcon from '../../../common/AnimatedIcon'; import GroupChatInfo from '../../../common/GroupChatInfo'; +import Icon from '../../../common/icons/Icon'; import PrivateChatInfo from '../../../common/PrivateChatInfo'; import FloatingActionButton from '../../../ui/FloatingActionButton'; import InputText from '../../../ui/InputText'; @@ -386,7 +387,7 @@ const SettingsFoldersEdit: FC = ({ {state.isLoading ? ( ) : ( - + )} diff --git a/src/components/left/settings/folders/SettingsFoldersMain.tsx b/src/components/left/settings/folders/SettingsFoldersMain.tsx index 3e44a6798..aac8fca66 100644 --- a/src/components/left/settings/folders/SettingsFoldersMain.tsx +++ b/src/components/left/settings/folders/SettingsFoldersMain.tsx @@ -310,10 +310,10 @@ const SettingsFoldersMain: FC = ({ entities: folder.title.entities, noCustomEmojiPlayback: folder.noTitleAnimations, })} - {isBlocked && } + {isBlocked && } - {folder.isChatList && } + {folder.isChatList && } {folder.subtitle} diff --git a/src/components/left/settings/folders/SettingsShareChatlist.tsx b/src/components/left/settings/folders/SettingsShareChatlist.tsx index a27274c77..ae90ea97f 100644 --- a/src/components/left/settings/folders/SettingsShareChatlist.tsx +++ b/src/components/left/settings/folders/SettingsShareChatlist.tsx @@ -24,6 +24,7 @@ import useLastCallback from '../../../../hooks/useLastCallback'; import useOldLang from '../../../../hooks/useOldLang'; import AnimatedIcon from '../../../common/AnimatedIcon'; +import Icon from '../../../common/icons/Icon'; import LinkField from '../../../common/LinkField'; import PeerPicker from '../../../common/pickers/PeerPicker'; import FloatingActionButton from '../../../ui/FloatingActionButton'; @@ -201,7 +202,7 @@ const SettingsShareChatlist: FC = ({ {isLoading ? ( ) : ( - + )} diff --git a/src/components/main/premium/PremiumFeatureItem.tsx b/src/components/main/premium/PremiumFeatureItem.tsx index 6cc4cea7f..c16e61037 100644 --- a/src/components/main/premium/PremiumFeatureItem.tsx +++ b/src/components/main/premium/PremiumFeatureItem.tsx @@ -1,25 +1,31 @@ import React, { memo } from '../../../lib/teact/teact'; -import buildClassName from '../../../util/buildClassName'; +import type { IconName } from '../../../types/icons'; + import { hexToRgb, lerpRgb } from '../../../util/switchTheme'; import renderText from '../../common/helpers/renderText'; import useLastCallback from '../../../hooks/useLastCallback'; +import Icon from '../../common/icons/Icon'; import ListItem from '../../ui/ListItem'; import styles from './PremiumFeatureItem.module.scss'; type OwnProps = { - icon: string; - isFontIcon?: boolean; title: string; text: string; index: number; count: number; section: T; onClick?: (section: T) => void; -}; +} & ({ + icon: IconName; + isFontIcon: true; +} | { + icon: string; + isFontIcon?: false; +}); const COLORS = [ '#F2862D', '#EB7B4D', '#E46D72', '#DD6091', '#CC5FBA', '#B464E7', @@ -49,11 +55,7 @@ const PremiumFeatureItem = ({ return ( {isFontIcon ? ( - + ) : ( )} diff --git a/src/components/main/premium/PremiumFeatureModal.tsx b/src/components/main/premium/PremiumFeatureModal.tsx index 7bedbc47d..4832a2104 100644 --- a/src/components/main/premium/PremiumFeatureModal.tsx +++ b/src/components/main/premium/PremiumFeatureModal.tsx @@ -24,6 +24,7 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; +import Icon from '../../common/icons/Icon'; import SliderDots from '../../common/SliderDots'; import Button from '../../ui/Button'; import PremiumLimitPreview from './common/PremiumLimitPreview'; @@ -221,7 +222,7 @@ const PremiumFeatureModal: FC = ({ onClick={onBack} ariaLabel={lang('Back')} > - +
diff --git a/src/components/main/premium/common/PremiumLimitsCompare.tsx b/src/components/main/premium/common/PremiumLimitsCompare.tsx index 020cc2344..1f04cdd4d 100644 --- a/src/components/main/premium/common/PremiumLimitsCompare.tsx +++ b/src/components/main/premium/common/PremiumLimitsCompare.tsx @@ -7,6 +7,8 @@ import buildClassName from '../../../../util/buildClassName'; import useOldLang from '../../../../hooks/useOldLang'; +import Icon from '../../../common/icons/Icon'; + import styles from './PremiumLimitsCompare.module.scss'; type OwnProps = { @@ -30,7 +32,7 @@ const PremiumLimitsCompare: FC = ({
{floatingBadgeIcon && (
- +
{leftValue}
diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewStories.tsx b/src/components/main/premium/previews/PremiumFeaturePreviewStories.tsx index af885d748..2f3baaed8 100644 --- a/src/components/main/premium/previews/PremiumFeaturePreviewStories.tsx +++ b/src/components/main/premium/previews/PremiumFeaturePreviewStories.tsx @@ -2,6 +2,7 @@ import React, { memo, useLayoutEffect, useRef } from '../../../../lib/teact/teac import { withGlobal } from '../../../../global'; import type { ApiUser } from '../../../../api/types'; +import type { IconName } from '../../../../types/icons'; import { selectUser } from '../../../../global/selectors'; import buildClassName from '../../../../util/buildClassName'; @@ -41,7 +42,7 @@ const STORY_FEATURE_DESCRIPTIONS = { stories_link: 'PremiumStoriesFormattingDescription', }; -const STORY_FEATURE_ICONS = { +const STORY_FEATURE_ICONS: Record = { stories_order: 'story-priority', stories_stealth: 'eye-closed-outline', stories_views: 'eye-outline', diff --git a/src/components/mediaViewer/MediaViewer.tsx b/src/components/mediaViewer/MediaViewer.tsx index 47df0f51f..08b314fe1 100644 --- a/src/components/mediaViewer/MediaViewer.tsx +++ b/src/components/mediaViewer/MediaViewer.tsx @@ -53,6 +53,7 @@ import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; import { dispatchPriorityPlaybackEvent } from '../../hooks/usePriorityPlaybackCheck'; import { useMediaProps } from './hooks/useMediaProps'; +import Icon from '../common/icons/Icon'; import ReportAvatarModal from '../common/ReportAvatarModal'; import Button from '../ui/Button'; import ShowTransition from '../ui/ShowTransition'; @@ -426,7 +427,7 @@ const MediaViewer = ({ ariaLabel={lang('Close')} onClick={handleClose} > - + )} diff --git a/src/components/mediaViewer/MediaViewerActions.tsx b/src/components/mediaViewer/MediaViewerActions.tsx index 1169f693a..382c5cd00 100644 --- a/src/components/mediaViewer/MediaViewerActions.tsx +++ b/src/components/mediaViewer/MediaViewerActions.tsx @@ -3,6 +3,7 @@ import React, { memo, useMemo } from '../../lib/teact/teact'; import { getActions, withGlobal } from '../../global'; import type { ActiveDownloads, MediaViewerOrigin, MessageListType } from '../../types'; +import type { IconName } from '../../types/icons'; import type { MenuItemProps } from '../ui/MenuItem'; import type { MediaViewerItem } from './helpers/getViewableMedia'; @@ -31,6 +32,7 @@ import useOldLang from '../../hooks/useOldLang'; import useZoomChange from './hooks/useZoomChangeSignal'; import DeleteProfilePhotoModal from '../common/DeleteProfilePhotoModal'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import DropdownMenu from '../ui/DropdownMenu'; import MenuItem from '../ui/MenuItem'; @@ -158,7 +160,7 @@ const MediaViewerActions: FC = ({ onClick={onTrigger} ariaLabel="More actions" > - + ); }, []); @@ -191,7 +193,7 @@ const MediaViewerActions: FC = ({ {isDownloading ? ( ) : ( - + )} ) : ( @@ -203,7 +205,7 @@ const MediaViewerActions: FC = ({ color="translucent-white" ariaLabel={lang('AccActionDownload')} > - + )); } @@ -286,7 +288,7 @@ const MediaViewerActions: FC = ({ }) => ( = ({ ariaLabel={lang('Forward')} onClick={onForward} > - + )} {renderDownloadButton()} @@ -323,7 +325,7 @@ const MediaViewerActions: FC = ({ ariaLabel={lang('MediaZoomOut')} onClick={handleZoomOut} > - + {canReportAvatar && ( )} {canUpdate && ( @@ -353,7 +355,7 @@ const MediaViewerActions: FC = ({ ariaLabel={lang('ProfilePhoto.SetMainPhoto')} onClick={handleUpdate} > - + )} {canDelete && ( @@ -364,7 +366,7 @@ const MediaViewerActions: FC = ({ ariaLabel={lang('Delete')} onClick={openDeleteModalHandler} > - + )} {canDelete && renderDeleteModal()}
diff --git a/src/components/mediaViewer/VideoPlayer.tsx b/src/components/mediaViewer/VideoPlayer.tsx index 973c18262..3d631e255 100644 --- a/src/components/mediaViewer/VideoPlayer.tsx +++ b/src/components/mediaViewer/VideoPlayer.tsx @@ -23,6 +23,7 @@ import useFullscreen from '../../hooks/window/useFullscreen'; import useControlsSignal from './hooks/useControlsSignal'; import useVideoWaitingSignal from './hooks/useVideoWaitingSignal'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import ProgressSpinner from '../ui/ProgressSpinner'; import VideoPlayerControls from './VideoPlayerControls'; @@ -327,7 +328,7 @@ const VideoPlayer: FC = ({
{shouldRenderPlayButton && ( )} {shouldRenderSpinner && ( diff --git a/src/components/mediaViewer/VideoPlayerControls.tsx b/src/components/mediaViewer/VideoPlayerControls.tsx index 02e1c5867..472b8e0bc 100644 --- a/src/components/mediaViewer/VideoPlayerControls.tsx +++ b/src/components/mediaViewer/VideoPlayerControls.tsx @@ -7,6 +7,7 @@ import React, { import type { ApiDimensions } from '../../api/types'; import type { BufferedRange } from '../../hooks/useBuffering'; +import type { IconName } from '../../types/icons'; import buildClassName from '../../util/buildClassName'; import { formatMediaDuration } from '../../util/dates/dateFormat'; @@ -21,6 +22,7 @@ import useLastCallback from '../../hooks/useLastCallback'; import useOldLang from '../../hooks/useOldLang'; import useControlsSignal from './hooks/useControlsSignal'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import Menu from '../ui/Menu'; import MenuItem from '../ui/MenuItem'; @@ -147,11 +149,11 @@ const VideoPlayerControls: FC = ({ setIsSeeking(true); }); - const volumeIcon = useMemo(() => { - if (volume === 0 || isMuted) return 'icon-muted'; - if (volume < 0.3) return 'icon-volume-1'; - if (volume < 0.6) return 'icon-volume-2'; - return 'icon-volume-3'; + const volumeIcon: IconName = useMemo(() => { + if (volume === 0 || isMuted) return 'muted'; + if (volume < 0.3) return 'volume-1'; + if (volume < 0.6) return 'volume-2'; + return 'volume-3'; }, [volume, isMuted]); return ( @@ -182,7 +184,7 @@ const VideoPlayerControls: FC = ({ round onClick={onPlayPause} > - + {!IS_IOS && ( @@ -223,7 +225,7 @@ const VideoPlayerControls: FC = ({ round onClick={onPictureInPictureChange} > - + )} {isFullscreenSupported && ( @@ -235,7 +237,7 @@ const VideoPlayerControls: FC = ({ round onClick={onChangeFullscreen} > - + )}
diff --git a/src/components/middle/HeaderActions.tsx b/src/components/middle/HeaderActions.tsx index 08d4e6c2f..35020abbe 100644 --- a/src/components/middle/HeaderActions.tsx +++ b/src/components/middle/HeaderActions.tsx @@ -37,6 +37,7 @@ import { useHotkeys } from '../../hooks/useHotkeys'; import useLastCallback from '../../hooks/useLastCallback'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import DropdownMenu from '../ui/DropdownMenu'; import MenuItem from '../ui/MenuItem'; @@ -290,7 +291,7 @@ const HeaderActions: FC = ({ onClick={onTrigger} ariaLabel={lang('TranslateMessage')} > - + ); }, [isRightColumnShown, lang]); @@ -376,7 +377,7 @@ const HeaderActions: FC = ({ onClick={handleSearchClick} ariaLabel={lang('Conversation.SearchPlaceholder')} > - + )} {canCall && ( @@ -387,7 +388,7 @@ const HeaderActions: FC = ({ onClick={handleRequestCall} ariaLabel="Call" > - + )} @@ -402,7 +403,7 @@ const HeaderActions: FC = ({ onClick={handleJoinRequestsClick} ariaLabel={isChannel ? lang('SubscribeRequests') : lang('MemberRequests')} > - +
{pendingJoinRequests}
)} @@ -417,7 +418,7 @@ const HeaderActions: FC = ({ ariaLabel="More actions" onClick={handleHeaderMenuOpen} > - + {menuAnchor && ( = ({ title={label} aria-label={label} > - +
); }; @@ -157,7 +158,7 @@ const MessageSelectToolbar: FC = ({ onClick={handleExitMessageSelectMode} ariaLabel="Exit select mode" > - + {formattedMessagesCount} diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index 4bc64bddf..0e1124aa0 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -80,6 +80,7 @@ import useWindowSize from '../../hooks/window/useWindowSize'; import usePinnedMessage from './hooks/usePinnedMessage'; import Composer from '../common/Composer'; +import Icon from '../common/icons/Icon'; import PrivacySettingsNoticeModal from '../common/PrivacySettingsNoticeModal.async'; import SeenByModal from '../common/SeenByModal.async'; import UnpinAllMessagesModal from '../common/UnpinAllMessagesModal.async'; @@ -573,7 +574,7 @@ function MiddleColumn({ className="composer-button unpin-all-button" onClick={handleOpenUnpinModal} > - + {lang('Chat.Pinned.UnpinAll', pinnedMessagesCount, 'i')} diff --git a/src/components/middle/NoMessages.tsx b/src/components/middle/NoMessages.tsx index 70fd8c273..ef93eb8bc 100644 --- a/src/components/middle/NoMessages.tsx +++ b/src/components/middle/NoMessages.tsx @@ -10,6 +10,7 @@ import renderText from '../common/helpers/renderText'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; import TopicIcon from '../common/TopicIcon'; import './NoMessages.scss'; @@ -79,7 +80,7 @@ function renderSavedMessages(lang: OldLangFn) { return (
- +

{lang('Conversation.CloudStorageInfo.Title')}

  • {lang('Conversation.ClousStorageInfo.Description1')}
    • diff --git a/src/components/middle/ReactorListModal.tsx b/src/components/middle/ReactorListModal.tsx index e25288f1a..f6379e171 100644 --- a/src/components/middle/ReactorListModal.tsx +++ b/src/components/middle/ReactorListModal.tsx @@ -25,6 +25,7 @@ import useOldLang from '../../hooks/useOldLang'; import Avatar from '../common/Avatar'; import FullNameTitle from '../common/FullNameTitle'; +import Icon from '../common/icons/Icon'; import PrivateChatInfo from '../common/PrivateChatInfo'; import ReactionStaticEmoji from '../common/reactions/ReactionStaticEmoji'; import Button from '../ui/Button'; @@ -154,7 +155,7 @@ const ReactorListModal: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => setChosenTab(undefined)} > - + {Boolean(reactors?.count) && formatIntegerCompact(reactors.count)} {allReactions.map((reaction) => { @@ -210,7 +211,7 @@ const ReactorListModal: FC = ({
    - + {formatDateAtTime(lang, r.addedDate * 1000)}
    diff --git a/src/components/middle/ScrollDownButton.tsx b/src/components/middle/ScrollDownButton.tsx index a3d220516..a2cef4c9b 100644 --- a/src/components/middle/ScrollDownButton.tsx +++ b/src/components/middle/ScrollDownButton.tsx @@ -9,6 +9,7 @@ import { formatIntegerCompact } from '../../util/textFormat'; import useContextMenuHandlers from '../../hooks/useContextMenuHandlers'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import Menu from '../ui/Menu'; import MenuItem from '../ui/MenuItem'; @@ -53,7 +54,7 @@ const ScrollDownButton: FC = ({ onContextMenu={handleContextMenu} ariaLabel={lang(ariaLabelLang)} > - + {Boolean(unreadCount) &&
    {formatIntegerCompact(unreadCount)}
    } {onReadAll && ( diff --git a/src/components/middle/composer/AttachmentModal.tsx b/src/components/middle/composer/AttachmentModal.tsx index c27a4315b..0543a0302 100644 --- a/src/components/middle/composer/AttachmentModal.tsx +++ b/src/components/middle/composer/AttachmentModal.tsx @@ -45,6 +45,7 @@ import useCustomEmojiTooltip from './hooks/useCustomEmojiTooltip'; import useEmojiTooltip from './hooks/useEmojiTooltip'; import useMentionTooltip from './hooks/useMentionTooltip'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import DropdownMenu from '../../ui/DropdownMenu'; import MenuItem from '../../ui/MenuItem'; @@ -438,7 +439,7 @@ const AttachmentModal: FC = ({ onClick={onTrigger} ariaLabel="More actions" > - + ); }, [isMobile]); @@ -498,7 +499,7 @@ const AttachmentModal: FC = ({ return (
    {title}
    {notEditingFile && !isInAlbum diff --git a/src/components/middle/composer/AttachmentModalItem.tsx b/src/components/middle/composer/AttachmentModalItem.tsx index dbfffb2d5..88b074b29 100644 --- a/src/components/middle/composer/AttachmentModalItem.tsx +++ b/src/components/middle/composer/AttachmentModalItem.tsx @@ -12,6 +12,7 @@ import { REM } from '../../common/helpers/mediaDimensions'; import useLastCallback from '../../../hooks/useLastCallback'; import File from '../../common/File'; +import Icon from '../../common/icons/Icon'; import MediaSpoiler from '../../common/MediaSpoiler'; import styles from './AttachmentModalItem.module.scss'; @@ -84,8 +85,10 @@ const AttachmentModalItem: FC = ({ smaller /> {onDelete && ( - onDelete(index)} /> )} @@ -113,19 +116,14 @@ const AttachmentModalItem: FC = ({ /> {shouldRenderOverlay && (
    - {onDelete && ( - onDelete(index)} - /> + // eslint-disable-next-line react/jsx-no-bind + onDelete(index)} /> )}
    )} diff --git a/src/components/middle/composer/BotMenuButton.tsx b/src/components/middle/composer/BotMenuButton.tsx index 15845bf14..7542fa51b 100644 --- a/src/components/middle/composer/BotMenuButton.tsx +++ b/src/components/middle/composer/BotMenuButton.tsx @@ -4,6 +4,7 @@ import React, { memo, useEffect, useRef } from '../../../lib/teact/teact'; import buildClassName from '../../../util/buildClassName'; import renderText from '../../common/helpers/renderText'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; type OwnProps = { @@ -52,7 +53,7 @@ const BotMenuButton: FC = ({ onClick={onClick} ariaLabel="Open bot command keyboard" > - + {renderText(text)} ); diff --git a/src/components/middle/composer/ComposerEmbeddedMessage.scss b/src/components/middle/composer/ComposerEmbeddedMessage.scss index a8ede1041..82fbb5fa6 100644 --- a/src/components/middle/composer/ComposerEmbeddedMessage.scss +++ b/src/components/middle/composer/ComposerEmbeddedMessage.scss @@ -59,10 +59,6 @@ .bubble { width: auto; } - - .icon-placeholder { - width: 1.5rem; - } } .quote-reply { diff --git a/src/components/middle/composer/ComposerEmbeddedMessage.tsx b/src/components/middle/composer/ComposerEmbeddedMessage.tsx index 9c2b38977..b1c3e8b06 100644 --- a/src/components/middle/composer/ComposerEmbeddedMessage.tsx +++ b/src/components/middle/composer/ComposerEmbeddedMessage.tsx @@ -280,7 +280,7 @@ const ComposerEmbeddedMessage: FC = ({ ariaLabel={oldLang('Cancel')} onClick={handleClearClick} > - + {(isShowingReply || isForwarding) && !isContextMenuDisabled && ( = ({ <> : undefined} + customIcon={noAuthors ? : undefined} // eslint-disable-next-line react/jsx-no-bind onClick={() => setForwardNoAuthors({ noAuthors: false, @@ -307,7 +307,7 @@ const ComposerEmbeddedMessage: FC = ({ : undefined} + customIcon={!noAuthors ? : undefined} // eslint-disable-next-line react/jsx-no-bind onClick={() => setForwardNoAuthors({ noAuthors: true, @@ -320,7 +320,7 @@ const ComposerEmbeddedMessage: FC = ({ : undefined} + customIcon={noCaptions ? : undefined} // eslint-disable-next-line react/jsx-no-bind onClick={() => setForwardNoCaptions({ noCaptions: false, @@ -330,7 +330,7 @@ const ComposerEmbeddedMessage: FC = ({ : undefined} + customIcon={!noCaptions ? : undefined} // eslint-disable-next-line react/jsx-no-bind onClick={() => setForwardNoCaptions({ noCaptions: true, diff --git a/src/components/middle/composer/DropTarget.tsx b/src/components/middle/composer/DropTarget.tsx index 9aedc7f2a..b0e656c26 100644 --- a/src/components/middle/composer/DropTarget.tsx +++ b/src/components/middle/composer/DropTarget.tsx @@ -8,6 +8,8 @@ import useFlag from '../../../hooks/useFlag'; import useLastCallback from '../../../hooks/useLastCallback'; import useResizeObserver from '../../../hooks/useResizeObserver'; +import Icon from '../../common/icons/Icon'; + import './DropTarget.scss'; export type OwnProps = { @@ -68,7 +70,7 @@ const DropTarget: FC = ({ isQuick, isGeneric, onFileSelect }) => {
    -
    +
    Drop files here to send them
    {!isGeneric &&
    {isQuick ? 'in a quick way' : 'without compression'}
    }
    diff --git a/src/components/middle/composer/EmojiPicker.tsx b/src/components/middle/composer/EmojiPicker.tsx index ae3f7db80..5b566902e 100644 --- a/src/components/middle/composer/EmojiPicker.tsx +++ b/src/components/middle/composer/EmojiPicker.tsx @@ -6,6 +6,7 @@ import React, { import { withGlobal } from '../../../global'; import type { GlobalState } from '../../../global/types'; +import type { IconName } from '../../../types/icons'; import type { EmojiData, EmojiModule, @@ -30,6 +31,7 @@ import useOldLang from '../../../hooks/useOldLang'; import useScrolledState from '../../../hooks/useScrolledState'; import useAsyncRendering from '../../right/hooks/useAsyncRendering'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import Loading from '../../ui/Loading'; import EmojiCategory from './EmojiCategory'; @@ -45,16 +47,16 @@ type StateProps = Pick; type EmojiCategoryData = { id: string; name: string; emojis: string[] }; -const ICONS_BY_CATEGORY: Record = { - recent: 'icon-recent', - people: 'icon-smile', - nature: 'icon-animals', - foods: 'icon-eats', - activity: 'icon-sport', - places: 'icon-car', - objects: 'icon-lamp', - symbols: 'icon-language', - flags: 'icon-flag', +const ICONS_BY_CATEGORY: Record = { + recent: 'recent', + people: 'smile', + nature: 'animals', + foods: 'eats', + activity: 'sport', + places: 'car', + objects: 'lamp', + symbols: 'language', + flags: 'flag', }; const OPEN_ANIMATION_DELAY = 200; @@ -200,7 +202,7 @@ const EmojiPicker: FC = ({ onClick={() => selectCategory(index)} ariaLabel={category.name} > - + ); } diff --git a/src/components/middle/composer/MessageInput.tsx b/src/components/middle/composer/MessageInput.tsx index 705b20a68..0b4ddb067 100644 --- a/src/components/middle/composer/MessageInput.tsx +++ b/src/components/middle/composer/MessageInput.tsx @@ -33,6 +33,7 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import useInputCustomEmojis from './hooks/useInputCustomEmojis'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import TextTimer from '../../ui/TextTimer'; import TextFormatter from './TextFormatter.async'; @@ -597,7 +598,7 @@ const MessageInput: FC = ({ dir="auto" > {!isAttachmentModalInput && !canSendPlainText - && } + && } {shouldDisplayTimer ? ( ) : placeholder} diff --git a/src/components/middle/composer/PollModal.tsx b/src/components/middle/composer/PollModal.tsx index 5fc16c941..18d569696 100644 --- a/src/components/middle/composer/PollModal.tsx +++ b/src/components/middle/composer/PollModal.tsx @@ -13,6 +13,7 @@ import parseHtmlAsFormattedText from '../../../util/parseHtmlAsFormattedText'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import Checkbox from '../../ui/Checkbox'; import InputText from '../../ui/InputText'; @@ -245,7 +246,7 @@ const PollModal: FC = ({ return (
    {lang('NewPoll')}
    )}
    diff --git a/src/components/middle/composer/SendAsMenu.tsx b/src/components/middle/composer/SendAsMenu.tsx index 82798e548..f275445c4 100644 --- a/src/components/middle/composer/SendAsMenu.tsx +++ b/src/components/middle/composer/SendAsMenu.tsx @@ -15,6 +15,7 @@ import { useKeyboardNavigation } from './hooks/useKeyboardNavigation'; import Avatar from '../../common/Avatar'; import FullNameTitle from '../../common/FullNameTitle'; +import Icon from '../../common/icons/Icon'; import ListItem from '../../ui/ListItem'; import Menu from '../../ui/Menu'; @@ -123,7 +124,7 @@ const SendAsMenu: FC = ({ onClick={handleClick} focus={selectedSendAsIndex === index} rightElement={!isCurrentUserPremium && isPremium - && } + && } > = ({ onClick={() => selectStickerSet(index)} > {stickerSet.id === RECENT_SYMBOL_SET_ID ? ( - + ) : stickerSet.id === FAVORITE_SYMBOL_SET_ID ? ( - + ) : stickerSet.id === CHAT_STICKER_SET_ID ? ( ) : ( diff --git a/src/components/middle/composer/SymbolMenu.tsx b/src/components/middle/composer/SymbolMenu.tsx index 6118e234d..b2d1773e7 100644 --- a/src/components/middle/composer/SymbolMenu.tsx +++ b/src/components/middle/composer/SymbolMenu.tsx @@ -21,6 +21,7 @@ import useOldLang from '../../../hooks/useOldLang'; import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import CustomEmojiPicker from '../../common/CustomEmojiPicker'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import Menu from '../../ui/Menu'; import Portal from '../../ui/Portal'; @@ -270,7 +271,7 @@ const SymbolMenu: FC = ({ size="tiny" onClick={onClose} > - + )} = ({ onClick={isSymbolMenuOpen ? closeSymbolMenu : handleSymbolMenuOpen} ariaLabel="Choose emoji, sticker or GIF" > - - + + {isSymbolMenuOpen && !isSymbolMenuLoaded && } ) : ( @@ -163,7 +164,7 @@ const SymbolMenuButton: FC = ({ ariaLabel="Choose emoji, sticker or GIF" >
    - + )} diff --git a/src/components/middle/composer/SymbolMenuFooter.tsx b/src/components/middle/composer/SymbolMenuFooter.tsx index de01197bc..305bd0468 100644 --- a/src/components/middle/composer/SymbolMenuFooter.tsx +++ b/src/components/middle/composer/SymbolMenuFooter.tsx @@ -6,6 +6,7 @@ import buildClassName from '../../../util/buildClassName'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; type OwnProps = { @@ -80,7 +81,7 @@ const SymbolMenuFooter: FC = ({ color="translucent" onClick={handleSearchOpen} > - + )} @@ -98,7 +99,7 @@ const SymbolMenuFooter: FC = ({ faded color="translucent" > - + )}
    diff --git a/src/components/middle/composer/TextFormatter.tsx b/src/components/middle/composer/TextFormatter.tsx index fdb9a26c4..85646e864 100644 --- a/src/components/middle/composer/TextFormatter.tsx +++ b/src/components/middle/composer/TextFormatter.tsx @@ -20,6 +20,7 @@ import useOldLang from '../../../hooks/useOldLang'; import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useVirtualBackdrop from '../../../hooks/useVirtualBackdrop'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import './TextFormatter.scss'; @@ -421,7 +422,7 @@ const TextFormatter: FC = ({ className={getFormatButtonClassName('spoiler')} onClick={handleSpoilerText} > - +
    @@ -502,7 +503,7 @@ const TextFormatter: FC = ({ className="color-primary" onClick={handleLinkUrlConfirm} > - +
    diff --git a/src/components/middle/composer/WebPagePreview.scss b/src/components/middle/composer/WebPagePreview.scss index f55849844..b6caa6769 100644 --- a/src/components/middle/composer/WebPagePreview.scss +++ b/src/components/middle/composer/WebPagePreview.scss @@ -37,10 +37,6 @@ .bubble { width: auto; } - - .icon-placeholder { - width: 1.5rem; - } } & &-left-icon { diff --git a/src/components/middle/composer/WebPagePreview.tsx b/src/components/middle/composer/WebPagePreview.tsx index 77ddfd3f1..0e8a14fb9 100644 --- a/src/components/middle/composer/WebPagePreview.tsx +++ b/src/components/middle/composer/WebPagePreview.tsx @@ -25,6 +25,7 @@ import useOldLang from '../../../hooks/useOldLang'; import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useSyncEffect from '../../../hooks/useSyncEffect'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import Menu from '../../ui/Menu'; import MenuItem from '../../ui/MenuItem'; @@ -219,7 +220,7 @@ const WebPagePreview: FC = ({
    - +
    = ({ ariaLabel="Clear Webpage Preview" onClick={handleClearWebpagePreview} > - + {!isEditing && renderContextMenu()}
    diff --git a/src/components/middle/message/BaseStory.tsx b/src/components/middle/message/BaseStory.tsx index f60bc9f17..265146086 100644 --- a/src/components/middle/message/BaseStory.tsx +++ b/src/components/middle/message/BaseStory.tsx @@ -16,6 +16,7 @@ import useMedia from '../../../hooks/useMedia'; import useOldLang from '../../../hooks/useOldLang'; import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; +import Icon from '../../common/icons/Icon'; import MediaAreaOverlay from '../../story/mediaArea/MediaAreaOverlay'; import styles from './BaseStory.module.scss'; @@ -99,7 +100,7 @@ function BaseStory({ )} {isExpired && ( - + {lang('StoryExpiredSubtitle')} )} diff --git a/src/components/middle/message/CommentButton.tsx b/src/components/middle/message/CommentButton.tsx index 5a9014322..22a278c71 100644 --- a/src/components/middle/message/CommentButton.tsx +++ b/src/components/middle/message/CommentButton.tsx @@ -14,6 +14,7 @@ import useAsyncRendering from '../../right/hooks/useAsyncRendering'; import AnimatedCounter from '../../common/AnimatedCounter'; import Avatar from '../../common/Avatar'; +import Icon from '../../common/icons/Icon'; import Spinner from '../../ui/Spinner'; import './CommentButton.scss'; @@ -105,14 +106,14 @@ const CommentButton: FC = ({ role="button" tabIndex={0} > - - {!recentRepliers?.length && } + {!recentRepliers?.length && } {renderRecentRepliers()}
    {messagesCount ? commentsText : lang('LeaveAComment')} @@ -127,12 +128,12 @@ const CommentButton: FC = ({ color={isCustomShape ? 'white' : 'blue'} /> ) } -
    diff --git a/src/components/middle/message/InvoiceMediaPreview.tsx b/src/components/middle/message/InvoiceMediaPreview.tsx index 2dd453c97..e5df0bcde 100644 --- a/src/components/middle/message/InvoiceMediaPreview.tsx +++ b/src/components/middle/message/InvoiceMediaPreview.tsx @@ -13,6 +13,7 @@ import useInterval from '../../../hooks/schedulers/useInterval'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import MediaSpoiler from '../../common/MediaSpoiler'; import styles from './InvoiceMediaPreview.module.scss'; @@ -73,7 +74,7 @@ const InvoiceMediaPreview: FC = ({ /> {Boolean(duration) &&
    {formatMediaDuration(duration)}
    }
    - + {lang('Checkout.PayPrice', formatCurrencyAsString(amount, currency))}
    diff --git a/src/components/middle/message/MessagePhoneCall.tsx b/src/components/middle/message/MessagePhoneCall.tsx index c5c8e9335..273bed0c9 100644 --- a/src/components/middle/message/MessagePhoneCall.tsx +++ b/src/components/middle/message/MessagePhoneCall.tsx @@ -11,6 +11,7 @@ import { ARE_CALLS_SUPPORTED } from '../../../util/windowEnvironment'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import styles from './MessagePhoneCall.module.scss'; @@ -70,15 +71,14 @@ const MessagePhoneCall: FC = ({ disabled={!ARE_CALLS_SUPPORTED} ariaLabel={lang(isOutgoing ? 'CallAgain' : 'CallBack')} > - +
    {lang(reasonText)}
    - ({
    )} - {shouldRenderDownloadButton && } + {shouldRenderDownloadButton && } = ({ onClick={showSolution} ariaLabel="Show Solution" > - + )}
    diff --git a/src/components/middle/message/RoundVideo.tsx b/src/components/middle/message/RoundVideo.tsx index 97bc574ca..a8c46a21a 100644 --- a/src/components/middle/message/RoundVideo.tsx +++ b/src/components/middle/message/RoundVideo.tsx @@ -319,7 +319,7 @@ const RoundVideo: FC = ({ )} {shouldRenderSpoiler && !shouldRenderSpinner && renderPlayWrapper()} {!mediaData && !isLoadAllowed && ( - + )} {!isInOneTimeModal && (
    diff --git a/src/components/middle/message/SimilarChannels.tsx b/src/components/middle/message/SimilarChannels.tsx index 01cf4540e..d590246f5 100644 --- a/src/components/middle/message/SimilarChannels.tsx +++ b/src/components/middle/message/SimilarChannels.tsx @@ -183,7 +183,7 @@ function SimilarChannel({ channel }: { channel: ApiChat }) {
    openChat({ id: channel.id })}>
    - + {formatIntegerCompact(channel?.membersCount || 0)}
    diff --git a/src/components/middle/message/Video.tsx b/src/components/middle/message/Video.tsx index 6f35fa64f..94ae9bdd9 100644 --- a/src/components/middle/message/Video.tsx +++ b/src/components/middle/message/Video.tsx @@ -26,6 +26,7 @@ import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; import useShowTransition from '../../../hooks/useShowTransition'; import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef'; +import Icon from '../../common/icons/Icon'; import MediaSpoiler from '../../common/MediaSpoiler'; import OptimizedVideo from '../../ui/OptimizedVideo'; import ProgressSpinner from '../../ui/ProgressSpinner'; @@ -271,7 +272,7 @@ const Video = ({ )} {isProtected && } - + ({
    )} {!isLoadAllowed && !fullMediaData && ( - + )} {isTransferring && (!isUnsupported || isDownloading) ? ( @@ -298,7 +299,7 @@ const Video = ({ ) : (
    {!isPaidPreview && video.isGif ? 'GIF' : formatMediaDuration(Math.max(duration - playProgress, 0))} - {isUnsupported && } + {isUnsupported && }
    )}
    diff --git a/src/components/middle/message/hocs/withSelectControl.tsx b/src/components/middle/message/hocs/withSelectControl.tsx index a4b003bc6..aeca27754 100644 --- a/src/components/middle/message/hocs/withSelectControl.tsx +++ b/src/components/middle/message/hocs/withSelectControl.tsx @@ -14,6 +14,8 @@ import buildClassName from '../../../../util/buildClassName'; import useLastCallback from '../../../../hooks/useLastCallback'; +import Icon from '../../../common/icons/Icon'; + type OwnProps = (PhotoProps | VideoProps) & { clickArg: number; @@ -65,7 +67,7 @@ export default function withSelectControl(WrappedComponent: FC) { {isInSelectMode && (
    {isSelected && ( - + )}
    )} diff --git a/src/components/middle/message/reactions/ReactionSelector.tsx b/src/components/middle/message/reactions/ReactionSelector.tsx index ebb801e87..08d4d849d 100644 --- a/src/components/middle/message/reactions/ReactionSelector.tsx +++ b/src/components/middle/message/reactions/ReactionSelector.tsx @@ -20,6 +20,7 @@ import buildClassName, { createClassNameBuilder } from '../../../../util/buildCl import useLastCallback from '../../../../hooks/useLastCallback'; import useOldLang from '../../../../hooks/useOldLang'; +import Icon from '../../../common/icons/Icon'; import Button from '../../../ui/Button'; import Link from '../../../ui/Link'; import ReactionSelectorCustomReaction from './ReactionSelectorCustomReaction'; @@ -228,7 +229,7 @@ const ReactionSelector: FC = ({ className={cn('show-more')} onClick={handleShowMoreClick} > - + )}
    diff --git a/src/components/middle/panes/AudioPlayer.scss b/src/components/middle/panes/AudioPlayer.scss index 176914d82..2e5fb461e 100644 --- a/src/components/middle/panes/AudioPlayer.scss +++ b/src/components/middle/panes/AudioPlayer.scss @@ -225,7 +225,6 @@ .icon-check, .icon-placeholder { margin-left: 0.25rem; margin-right: 0.25rem; - width: 1.5rem; } } } diff --git a/src/components/middle/panes/AudioPlayer.tsx b/src/components/middle/panes/AudioPlayer.tsx index 79aa403fc..a1a9dabb8 100644 --- a/src/components/middle/panes/AudioPlayer.tsx +++ b/src/components/middle/panes/AudioPlayer.tsx @@ -6,6 +6,7 @@ import type { ApiAudio, ApiChat, ApiMessage, ApiPeer, MediaContent, } from '../../../api/types'; +import type { IconName } from '../../../types/icons'; import { PLAYBACK_RATE_FOR_AUDIO_MIN_DURATION } from '../../../config'; import { @@ -31,6 +32,7 @@ import useOldLang from '../../../hooks/useOldLang'; import useShowTransition from '../../../hooks/useShowTransition'; import useHeaderPane, { type PaneState } from '../hooks/useHeaderPane'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import DropdownMenu from '../../ui/DropdownMenu'; import MenuItem from '../../ui/MenuItem'; @@ -242,11 +244,11 @@ const AudioPlayer: FC = ({ ); }); - const volumeIcon = useMemo(() => { - if (volume === 0 || isMuted) return 'icon-muted'; - if (volume < 0.3) return 'icon-volume-1'; - if (volume < 0.6) return 'icon-volume-2'; - return 'icon-volume-3'; + const volumeIcon: IconName = useMemo(() => { + if (volume === 0 || isMuted) return 'muted'; + if (volume < 0.3) return 'volume-1'; + if (volume < 0.6) return 'volume-2'; + return 'volume-3'; }, [volume, isMuted]); if (noUi || !shouldRender) { @@ -274,7 +276,7 @@ const AudioPlayer: FC = ({ onClick={requestPreviousTrack} ariaLabel="Previous track" > - +
    @@ -311,7 +313,7 @@ const AudioPlayer: FC = ({ onClick={handleVolumeClick} ripple={!isMobile} > - + {!IS_IOS && ( @@ -349,7 +351,7 @@ const AudioPlayer: FC = ({ onClick={handleClose} ariaLabel="Close player" > - +
    ); @@ -389,7 +391,7 @@ function renderPlaybackRateMenuItem( // eslint-disable-next-line react/jsx-no-bind onClick={() => onClick(rate)} icon={isSelected ? 'check' : undefined} - customIcon={!isSelected ? : undefined} + customIcon={!isSelected ? : undefined} > {rate}X diff --git a/src/components/modals/inviteViaLink/InviteViaLinkModal.tsx b/src/components/modals/inviteViaLink/InviteViaLinkModal.tsx index e38042576..bcdcf4f50 100644 --- a/src/components/modals/inviteViaLink/InviteViaLinkModal.tsx +++ b/src/components/modals/inviteViaLink/InviteViaLinkModal.tsx @@ -19,6 +19,7 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import AvatarList from '../../common/AvatarList'; +import Icon from '../../common/icons/Icon'; import PeerPicker from '../../common/pickers/PeerPicker'; import Button from '../../ui/Button'; import Modal from '../../ui/Modal'; @@ -133,7 +134,7 @@ const InviteViaLinkModal: FC = ({ ariaLabel={lang('Close')} onClick={handleClose} > - + {premiumSectionText && ( <> diff --git a/src/components/modals/stars/gift/StarsGiftModal.tsx b/src/components/modals/stars/gift/StarsGiftModal.tsx index 3595ad248..3f16bd8d7 100644 --- a/src/components/modals/stars/gift/StarsGiftModal.tsx +++ b/src/components/modals/stars/gift/StarsGiftModal.tsx @@ -23,6 +23,7 @@ import useLastCallback from '../../../../hooks/useLastCallback'; import useOldLang from '../../../../hooks/useOldLang'; import Avatar from '../../../common/Avatar'; +import Icon from '../../../common/icons/Icon'; import SafeLink from '../../../common/SafeLink'; import Button from '../../../ui/Button'; import Modal from '../../../ui/Modal'; @@ -165,7 +166,7 @@ const StarsGiftModal: FC = ({ onClick={() => closeStarsGiftModal()} ariaLabel={oldLang('Close')} > - +

    diff --git a/src/components/payment/PaymentModal.tsx b/src/components/payment/PaymentModal.tsx index 5322b4204..014678275 100644 --- a/src/components/payment/PaymentModal.tsx +++ b/src/components/payment/PaymentModal.tsx @@ -27,6 +27,7 @@ import useLastCallback from '../../hooks/useLastCallback'; import useOldLang from '../../hooks/useOldLang'; import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import Modal from '../ui/Modal'; import Spinner from '../ui/Spinner'; @@ -573,10 +574,7 @@ const PaymentModal: FC = ({ onClick={step === PaymentStep.Checkout ? closeModal : handleBackClick} ariaLabel="Close" > - +

    {modalHeader}

    diff --git a/src/components/payment/ReceiptModal.tsx b/src/components/payment/ReceiptModal.tsx index c870709d7..ebf3054b1 100644 --- a/src/components/payment/ReceiptModal.tsx +++ b/src/components/payment/ReceiptModal.tsx @@ -10,6 +10,7 @@ import useFlag from '../../hooks/useFlag'; import useLang from '../../hooks/useLang'; import usePrevious from '../../hooks/usePrevious'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import Modal from '../ui/Modal'; import Checkout from './Checkout'; @@ -66,7 +67,7 @@ const ReceiptModal: FC = ({ onClick={closeModal} ariaLabel="Close" > - +

    {lang('PaymentReceipt')}

    diff --git a/src/components/right/AddChatMembers.tsx b/src/components/right/AddChatMembers.tsx index b9ee283f1..f37ee1a38 100644 --- a/src/components/right/AddChatMembers.tsx +++ b/src/components/right/AddChatMembers.tsx @@ -20,6 +20,7 @@ import useHistoryBack from '../../hooks/useHistoryBack'; import useOldLang from '../../hooks/useOldLang'; import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; +import Icon from '../common/icons/Icon'; import PeerPicker from '../common/pickers/PeerPicker'; import FloatingActionButton from '../ui/FloatingActionButton'; import Spinner from '../ui/Spinner'; @@ -142,7 +143,7 @@ const AddChatMembers: FC = ({ {isLoading ? ( ) : ( - + )}
    diff --git a/src/components/right/CreateTopic.tsx b/src/components/right/CreateTopic.tsx index 12963b45b..e2906f293 100644 --- a/src/components/right/CreateTopic.tsx +++ b/src/components/right/CreateTopic.tsx @@ -18,6 +18,7 @@ import useHistoryBack from '../../hooks/useHistoryBack'; import useOldLang from '../../hooks/useOldLang'; import CustomEmojiPicker from '../common/CustomEmojiPicker'; +import Icon from '../common/icons/Icon'; import TopicIcon from '../common/TopicIcon'; import FloatingActionButton from '../ui/FloatingActionButton'; import InputText from '../ui/InputText'; @@ -160,7 +161,7 @@ const CreateTopic: FC = ({ {isLoading ? ( ) : ( - + )}
diff --git a/src/components/right/EditTopic.tsx b/src/components/right/EditTopic.tsx index 864b50344..9794ec018 100644 --- a/src/components/right/EditTopic.tsx +++ b/src/components/right/EditTopic.tsx @@ -18,6 +18,7 @@ import useHistoryBack from '../../hooks/useHistoryBack'; import useOldLang from '../../hooks/useOldLang'; import CustomEmojiPicker from '../common/CustomEmojiPicker'; +import Icon from '../common/icons/Icon'; import TopicIcon from '../common/TopicIcon'; import FloatingActionButton from '../ui/FloatingActionButton'; import InputText from '../ui/InputText'; @@ -176,7 +177,7 @@ const EditTopic: FC = ({ {isLoading ? ( ) : ( - + )}
diff --git a/src/components/right/Profile.tsx b/src/components/right/Profile.tsx index a0e56eeba..5e13dceb7 100644 --- a/src/components/right/Profile.tsx +++ b/src/components/right/Profile.tsx @@ -83,6 +83,7 @@ import Audio from '../common/Audio'; import Document from '../common/Document'; import UserGift from '../common/gift/UserGift'; import GroupChatInfo from '../common/GroupChatInfo'; +import Icon from '../common/icons/Icon'; import Media from '../common/Media'; import NothingFound from '../common/NothingFound'; import PreviewMedia from '../common/PreviewMedia'; @@ -721,7 +722,7 @@ const Profile: FC = ({ {/* eslint-disable-next-line react/jsx-no-bind */}
{renderText(oldLang('MoreSimilarText', limitSimilarPeers), ['simple_markdown'])} @@ -760,7 +761,7 @@ const Profile: FC = ({ {/* eslint-disable-next-line react/jsx-no-bind */}
{renderText(lang('MoreSimilarBotsText', { count: limitSimilarPeers }, { @@ -829,7 +830,7 @@ const Profile: FC = ({ onClick={handleNewMemberDialogOpen} ariaLabel={oldLang('lng_channel_add_users')} > - + )} {canDeleteMembers && ( diff --git a/src/components/right/RightHeader.tsx b/src/components/right/RightHeader.tsx index 69be19608..2e0b5460c 100644 --- a/src/components/right/RightHeader.tsx +++ b/src/components/right/RightHeader.tsx @@ -378,7 +378,7 @@ const RightHeader: FC = ({ ariaLabel={lang('Edit')} onClick={handleEditInviteClick} > - + )} {currentInviteInfo && currentInviteInfo.isRevoked && ( @@ -390,7 +390,7 @@ const RightHeader: FC = ({ ariaLabel={lang('Delete')} onClick={openDeleteDialog} > - + = ({ ariaLabel={lang('AddContact')} onClick={handleAddContact} > - + )} {canManage && !isInsideTopic && ( @@ -486,7 +486,7 @@ const RightHeader: FC = ({ ariaLabel={lang('Edit')} onClick={handleToggleManagement} > - + )} {canEditBot && ( @@ -508,7 +508,7 @@ const RightHeader: FC = ({ ariaLabel={lang('EditTopic')} onClick={toggleEditTopic} > - + )} {canViewStatistics && ( @@ -519,7 +519,7 @@ const RightHeader: FC = ({ ariaLabel={lang('Statistics')} onClick={handleToggleStatistics} > - + )} diff --git a/src/components/right/management/ManageChannel.tsx b/src/components/right/management/ManageChannel.tsx index 352d9bcfd..ba1ed2c51 100644 --- a/src/components/right/management/ManageChannel.tsx +++ b/src/components/right/management/ManageChannel.tsx @@ -20,6 +20,7 @@ import useHistoryBack from '../../../hooks/useHistoryBack'; import useMedia from '../../../hooks/useMedia'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import AvatarEditable from '../../ui/AvatarEditable'; import ConfirmDialog from '../../ui/ConfirmDialog'; import FloatingActionButton from '../../ui/FloatingActionButton'; @@ -331,7 +332,7 @@ const ManageChannel: FC = ({ {isLoading ? ( ) : ( - + )} = ({ onClick={handleAddAdminClick} ariaLabel={lang('Channel.Management.AddModerator')} > - +
diff --git a/src/components/right/management/ManageChatPrivacyType.tsx b/src/components/right/management/ManageChatPrivacyType.tsx index a2a7cdf63..5741952a5 100644 --- a/src/components/right/management/ManageChatPrivacyType.tsx +++ b/src/components/right/management/ManageChatPrivacyType.tsx @@ -21,6 +21,7 @@ import useHistoryBack from '../../../hooks/useHistoryBack'; import useOldLang from '../../../hooks/useOldLang'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; +import Icon from '../../common/icons/Icon'; import ManageUsernames from '../../common/ManageUsernames'; import SafeLink from '../../common/SafeLink'; import UsernameInput from '../../common/UsernameInput'; @@ -281,7 +282,7 @@ const ManageChatPrivacyType: FC = ({ {isLoading ? ( ) : ( - + )} = ({ onClick={openRemoveUserModal} ariaLabel={lang('Channel.EditAdmin.Permission.BanUsers')} > - + )} {chat && canDeleteMembers && ( diff --git a/src/components/right/management/ManageGroup.tsx b/src/components/right/management/ManageGroup.tsx index 1a57f8947..df171e3af 100644 --- a/src/components/right/management/ManageGroup.tsx +++ b/src/components/right/management/ManageGroup.tsx @@ -28,6 +28,7 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useMedia from '../../../hooks/useMedia'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import AvatarEditable from '../../ui/AvatarEditable'; import Checkbox from '../../ui/Checkbox'; import ConfirmDialog from '../../ui/ConfirmDialog'; @@ -469,7 +470,7 @@ const ManageGroup: FC = ({ {isLoading ? ( ) : ( - + )} = ({ {isLoading ? ( ) : ( - + )} diff --git a/src/components/right/management/ManageGroupPermissions.tsx b/src/components/right/management/ManageGroupPermissions.tsx index fb7759bf8..883211996 100644 --- a/src/components/right/management/ManageGroupPermissions.tsx +++ b/src/components/right/management/ManageGroupPermissions.tsx @@ -14,6 +14,7 @@ import useHistoryBack from '../../../hooks/useHistoryBack'; import useOldLang from '../../../hooks/useOldLang'; import useManagePermissions from '../hooks/useManagePermissions'; +import Icon from '../../common/icons/Icon'; import PrivateChatInfo from '../../common/PrivateChatInfo'; import PermissionCheckboxList from '../../main/PermissionCheckboxList'; import FloatingActionButton from '../../ui/FloatingActionButton'; @@ -244,7 +245,7 @@ const ManageGroupPermissions: FC = ({ {isLoading ? ( ) : ( - + )}
diff --git a/src/components/right/management/ManageGroupUserPermissions.tsx b/src/components/right/management/ManageGroupUserPermissions.tsx index 23d99660a..dafe1fbe2 100644 --- a/src/components/right/management/ManageGroupUserPermissions.tsx +++ b/src/components/right/management/ManageGroupUserPermissions.tsx @@ -16,6 +16,7 @@ import useLang from '../../../hooks/useLang'; import useOldLang from '../../../hooks/useOldLang'; import useManagePermissions from '../hooks/useManagePermissions'; +import Icon from '../../common/icons/Icon'; import PrivateChatInfo from '../../common/PrivateChatInfo'; import PermissionCheckboxList from '../../main/PermissionCheckboxList'; import ConfirmDialog from '../../ui/ConfirmDialog'; @@ -180,7 +181,7 @@ const ManageGroupUserPermissions: FC = ({ {isLoading ? ( ) : ( - + )} diff --git a/src/components/right/management/ManageInvite.tsx b/src/components/right/management/ManageInvite.tsx index 7c4caf39a..4afeebb34 100644 --- a/src/components/right/management/ManageInvite.tsx +++ b/src/components/right/management/ManageInvite.tsx @@ -16,6 +16,7 @@ import useOldLang from '../../../hooks/useOldLang'; import useSyncEffect from '../../../hooks/useSyncEffect'; import CalendarModal from '../../common/CalendarModal'; +import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import Checkbox from '../../ui/Checkbox'; import FloatingActionButton from '../../ui/FloatingActionButton'; @@ -249,7 +250,7 @@ const ManageInvite: FC = ({ disabled={isSubmitBlocked} ariaLabel={editingInvite ? lang('SaveLink') : lang('CreateLink')} > - + = ({ {(!temporalInvites || !temporalInvites.length) && } {temporalInvites?.map((invite) => ( } + leftElement={} secondaryIcon="more" multiline // eslint-disable-next-line react/jsx-no-bind @@ -327,7 +328,7 @@ const ManageInvites: FC = ({ {revokedExportedInvites?.map((invite) => ( } + leftElement={} secondaryIcon="more" multiline // eslint-disable-next-line react/jsx-no-bind diff --git a/src/components/right/management/ManageReactions.tsx b/src/components/right/management/ManageReactions.tsx index 544451866..a9957ca79 100644 --- a/src/components/right/management/ManageReactions.tsx +++ b/src/components/right/management/ManageReactions.tsx @@ -18,6 +18,7 @@ import { selectChat, selectChatFullInfo } from '../../../global/selectors'; import useHistoryBack from '../../../hooks/useHistoryBack'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import ReactionStaticEmoji from '../../common/reactions/ReactionStaticEmoji'; import Checkbox from '../../ui/Checkbox'; import FloatingActionButton from '../../ui/FloatingActionButton'; @@ -259,7 +260,7 @@ const ManageReactions: FC = ({ {isLoading ? ( ) : ( - + )} diff --git a/src/components/right/management/ManageUser.tsx b/src/components/right/management/ManageUser.tsx index 8a72907a7..3329289ca 100644 --- a/src/components/right/management/ManageUser.tsx +++ b/src/components/right/management/ManageUser.tsx @@ -24,6 +24,7 @@ import useHistoryBack from '../../../hooks/useHistoryBack'; import useOldLang from '../../../hooks/useOldLang'; import Avatar from '../../common/Avatar'; +import Icon from '../../common/icons/Icon'; import PrivateChatInfo from '../../common/PrivateChatInfo'; import Checkbox from '../../ui/Checkbox'; import ConfirmDialog from '../../ui/ConfirmDialog'; @@ -262,7 +263,7 @@ const ManageUser: FC = ({ {isLoading ? ( ) : ( - + )} - +
- +
{lang('StealthMode')}
@@ -93,7 +94,7 @@ const StealthModeModal = ({ isOpen, stealthMode, isCurrentUserPremium } : StateP className={buildClassName(styles.listItem, 'smaller-icon')} multiline inactive - leftElement={} + leftElement={} > {lang('HideRecentViews')} {lang('HideRecentViewsDescription')} @@ -102,7 +103,7 @@ const StealthModeModal = ({ isOpen, stealthMode, isCurrentUserPremium } : StateP className={buildClassName(styles.listItem, 'smaller-icon')} multiline inactive - leftElement={} + leftElement={} > {lang('HideNextViews')} {lang('HideNextViewsDescription')} diff --git a/src/components/story/Story.tsx b/src/components/story/Story.tsx index eabf95c9e..c36d6c8b8 100644 --- a/src/components/story/Story.tsx +++ b/src/components/story/Story.tsx @@ -10,6 +10,7 @@ import type { ApiPeer, ApiStealthMode, ApiStory, ApiTypeStory, } from '../../api/types'; import type { IDimensions } from '../../types'; +import type { IconName } from '../../types/icons'; import type { Signal } from '../../util/signals'; import { MAIN_THREAD_ID } from '../../api/types'; @@ -558,7 +559,7 @@ function Story({ className={buildClassName(styles.button, isOpen && 'active')} ariaLabel={lang('AccDescrOpenMenu2')} > - + ); }; @@ -585,7 +586,7 @@ function Story({ function renderStoryPrivacyButton() { if (!isUserStory) return undefined; - let privacyIcon = 'channel-filled'; + let privacyIcon: IconName = 'channel-filled'; const gradient: Record = { 'channel-filled': ['#50ABFF', '#007AFF'], 'user-filled': ['#C36EFF', '#8B60FA'], @@ -625,8 +626,8 @@ function Story({ onClick={isOut ? handleInfoPrivacyEdit : handleInfoPrivacyClick} style={`--color-from: ${gradient[privacyIcon][0]}; --color-to: ${gradient[privacyIcon][1]}`} > - - {isOut && } + + {isOut && }
); } @@ -702,13 +703,7 @@ function Story({ onClick={handleVolumeMuted} ariaLabel={lang('Volume')} > - + )} - + diff --git a/src/components/story/StorySettings.tsx b/src/components/story/StorySettings.tsx index 10b4e2744..c9a3bd223 100644 --- a/src/components/story/StorySettings.tsx +++ b/src/components/story/StorySettings.tsx @@ -17,6 +17,7 @@ import useFlag from '../../hooks/useFlag'; import useLastCallback from '../../hooks/useLastCallback'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import ListItem from '../ui/ListItem'; import Modal from '../ui/Modal'; @@ -323,7 +324,7 @@ function StorySettings({ className={styles.icon} style={`--color-from: ${option.color[0]}; --color-to: ${option.color[1]}`} > - +
{lang(option.name)} @@ -336,7 +337,7 @@ function StorySettings({ onClick={(e) => { handleActionClick(e, option.actions!); }} > {renderActionName(option.actions)} - +
)} diff --git a/src/components/story/StoryViewModal.tsx b/src/components/story/StoryViewModal.tsx index 18736a52d..7bb538683 100644 --- a/src/components/story/StoryViewModal.tsx +++ b/src/components/story/StoryViewModal.tsx @@ -26,6 +26,7 @@ import useLastCallback from '../../hooks/useLastCallback'; import useOldLang from '../../hooks/useOldLang'; import useScrolledState from '../../hooks/useScrolledState'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import DropdownMenu from '../ui/DropdownMenu'; import InfiniteScroll from '../ui/InfiniteScroll'; @@ -129,13 +130,8 @@ function StoryViewModal({ onClick={onTrigger} ariaLabel={lang('SortBy')} > - - + + ); }, [areReactionsFirst, lang]); @@ -181,13 +177,13 @@ function StoryViewModal({ {lang('SortByReactions')} {areReactionsFirst && ( - + )} {lang('SortByTime')} {!areReactionsFirst && ( - + )} diff --git a/src/components/story/StoryViewer.tsx b/src/components/story/StoryViewer.tsx index b185afa94..ab472d667 100644 --- a/src/components/story/StoryViewer.tsx +++ b/src/components/story/StoryViewer.tsx @@ -14,7 +14,6 @@ import { selectPerformanceSettingsValue, selectTabState, } from '../../global/selectors'; -import buildClassName from '../../util/buildClassName'; import captureEscKeyListener from '../../util/captureEscKeyListener'; import { disableDirectTextInput, enableDirectTextInput } from '../../util/directInputManager'; import { animateClosing, animateOpening } from './helpers/ghostAnimation'; @@ -27,6 +26,7 @@ import { dispatchPriorityPlaybackEvent } from '../../hooks/usePriorityPlaybackCh import useSlideSizes from './hooks/useSlideSizes'; import useStoryProps from './hooks/useStoryProps'; +import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import ShowTransition from '../ui/ShowTransition'; import StealthModeModal from './StealthModeModal'; @@ -158,7 +158,7 @@ function StoryViewer({ ariaLabel={lang('Close')} onClick={handleClose} > - + - + diff --git a/src/components/ui/AvatarEditable.tsx b/src/components/ui/AvatarEditable.tsx index 40c47de63..40442c183 100644 --- a/src/components/ui/AvatarEditable.tsx +++ b/src/components/ui/AvatarEditable.tsx @@ -6,6 +6,7 @@ import React, { import buildClassName from '../../util/buildClassName'; +import Icon from '../common/icons/Icon'; import CropModal from './CropModal'; import './AvatarEditable.scss'; @@ -76,7 +77,7 @@ const AvatarEditable: FC = ({ onChange={handleSelectFile} accept="image/png, image/jpeg" /> - + {croppedBlobUrl && Avatar} diff --git a/src/components/ui/CropModal.tsx b/src/components/ui/CropModal.tsx index 6ed2d5d68..20f5162e9 100644 --- a/src/components/ui/CropModal.tsx +++ b/src/components/ui/CropModal.tsx @@ -8,6 +8,7 @@ import { blobToDataUri, blobToFile } from '../../util/files'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; import Button from './Button'; import Loading from './Loading'; import Modal from './Modal'; @@ -126,7 +127,7 @@ const CropModal: FC = ({ file, onChange, onClose }: OwnProps) => { onClick={handleCropClick} ariaLabel={lang('CropImage')} > - + ); diff --git a/src/components/ui/Draggable.tsx b/src/components/ui/Draggable.tsx index 7dacc83e4..9f61b748f 100644 --- a/src/components/ui/Draggable.tsx +++ b/src/components/ui/Draggable.tsx @@ -8,6 +8,8 @@ import buildStyle from '../../util/buildStyle'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; + import styles from './Draggable.module.scss'; type TPoint = { @@ -162,7 +164,7 @@ const Draggable: FC = ({ onTouchStart={handleMouseDown} style={knobStyle} > - + )} diff --git a/src/components/ui/DropdownMenu.tsx b/src/components/ui/DropdownMenu.tsx index ab85f320e..afcc3aab1 100644 --- a/src/components/ui/DropdownMenu.tsx +++ b/src/components/ui/DropdownMenu.tsx @@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useRef, useState, } from '../../lib/teact/teact'; +import Icon from '../common/icons/Icon'; import Button from './Button'; import Menu from './Menu'; @@ -87,7 +88,7 @@ const DropdownMenu: FC = ({ onClick={onTrigger} ariaLabel="More actions" > - + ); }, [trigger]); diff --git a/src/components/ui/MenuItem.tsx b/src/components/ui/MenuItem.tsx index 1e95bc009..cf28d4acb 100644 --- a/src/components/ui/MenuItem.tsx +++ b/src/components/ui/MenuItem.tsx @@ -10,11 +10,11 @@ import useAppLayout from '../../hooks/useAppLayout'; import useLastCallback from '../../hooks/useLastCallback'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; + import './MenuItem.scss'; export type MenuItemProps = { - icon?: IconName | 'A' | 'K'; - isCharIcon?: boolean; customIcon?: React.ReactNode; className?: string; children: React.ReactNode; @@ -28,7 +28,13 @@ export type MenuItemProps = { ariaLabel?: string; withWrap?: boolean; withPreventDefaultOnMouseDown?: boolean; -}; +} & ({ + icon: 'A' | 'K'; + isCharIcon: true; +} | { + icon?: IconName; + isCharIcon?: false; +}); const MenuItem: FC = (props) => { const { @@ -89,10 +95,7 @@ const MenuItem: FC = (props) => { const content = ( <> {!customIcon && icon && ( - + )} {customIcon} {children} diff --git a/src/components/ui/ShowMoreButton.tsx b/src/components/ui/ShowMoreButton.tsx index 1f9d65d03..9a7dfddb3 100644 --- a/src/components/ui/ShowMoreButton.tsx +++ b/src/components/ui/ShowMoreButton.tsx @@ -3,6 +3,7 @@ import React from '../../lib/teact/teact'; import useOldLang from '../../hooks/useOldLang'; +import Icon from '../common/icons/Icon'; import Button from './Button'; import './ShowMoreButton.scss'; @@ -34,7 +35,7 @@ const ShowMoreButton: FC = ({ isRtl={lang.isRtl} onClick={onClick} > - + Show {count} more {count > 1 ? itemPluralName || `${itemName}s` : itemName} ); diff --git a/src/components/ui/Tab.tsx b/src/components/ui/Tab.tsx index 9ba1dcfd9..f6bb1cc91 100644 --- a/src/components/ui/Tab.tsx +++ b/src/components/ui/Tab.tsx @@ -13,6 +13,7 @@ import useContextMenuHandlers from '../../hooks/useContextMenuHandlers'; import { useFastClick } from '../../hooks/useFastClick'; import useLastCallback from '../../hooks/useLastCallback'; +import Icon from '../common/icons/Icon'; import Menu from './Menu'; import MenuItem from './MenuItem'; import MenuSeparator from './MenuSeparator'; @@ -143,7 +144,7 @@ const Tab: FC = ({ {Boolean(badgeCount) && ( {badgeCount} )} - {isBlocked && } + {isBlocked && } diff --git a/src/styles/icons.scss b/src/styles/icons.scss index c2b8571ca..9b6bfa377 100644 --- a/src/styles/icons.scss +++ b/src/styles/icons.scss @@ -3,11 +3,17 @@ .icon-char::before { font-family: Roboto, "Helvetica Neue", sans-serif; content: attr(data-char); - width: 1.5rem; + width: 1em; text-align: center; display: block; } +.icon-placeholder::before { + content: ''; + display: block; + width: 1em; +} + @mixin icon { /* use !important to prevent issues with browser extensions that change fonts */ /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ diff --git a/src/types/icons/index.ts b/src/types/icons/index.ts index 6c37deaa2..dd8daed85 100644 --- a/src/types/icons/index.ts +++ b/src/types/icons/index.ts @@ -1,4 +1,7 @@ import type { DeviceIconName } from './device'; import type { FontIconName } from './font'; -export type IconName = FontIconName | DeviceIconName; +export type CharacterIconName = 'char'; +export type PlaceholderIconName = 'placeholder'; + +export type IconName = FontIconName | DeviceIconName | CharacterIconName | PlaceholderIconName;