From d81fe3ec96fd88fe63fd0ae7c3b8a4fb4a425495 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sat, 22 Nov 2025 12:54:16 +0100 Subject: [PATCH] Button Icons: Migrate button icons to new api (#6505) --- src/components/auth/AuthPhoneNumber.tsx | 12 +++-- src/components/auth/AuthQrCode.tsx | 12 +++-- src/components/calls/group/GroupCall.tsx | 51 +++++++----------- .../calls/group/GroupCallParticipantVideo.tsx | 6 +-- src/components/calls/phone/PhoneCall.tsx | 11 ++-- src/components/common/Audio.tsx | 5 +- src/components/common/CalendarModal.tsx | 16 +++--- src/components/common/Composer.tsx | 25 ++++----- src/components/common/CountryPickerModal.tsx | 6 +-- src/components/common/GifButton.tsx | 7 ++- src/components/common/LinkField.tsx | 11 ++-- .../common/PrivacySettingsNoticeModal.tsx | 6 +-- src/components/common/SliderDots.tsx | 11 ++-- src/components/common/StickerButton.tsx | 5 +- src/components/common/StickerSet.tsx | 5 +- src/components/common/StickerSetModal.tsx | 17 +++--- .../common/pickers/ChatOrUserPicker.tsx | 17 +++--- src/components/left/ArchivedChats.tsx | 6 +-- .../left/ConnectionStatusOverlay.tsx | 6 +-- src/components/left/main/EmptyFolder.tsx | 3 +- src/components/left/main/LeftMainHeader.tsx | 5 +- src/components/left/main/forum/ForumPanel.tsx | 6 +-- src/components/left/newChat/NewChatStep1.tsx | 6 +-- src/components/left/newChat/NewChatStep2.tsx | 7 +-- src/components/left/search/RecentContacts.tsx | 6 +-- .../left/settings/SettingsActiveSession.tsx | 5 +- .../left/settings/SettingsActiveWebsite.tsx | 5 +- .../left/settings/SettingsHeader.tsx | 17 +++--- .../settings/folders/SettingsFoldersMain.tsx | 3 +- src/components/main/FoldersSidebar.tsx | 13 +++-- src/components/main/premium/GiveawayModal.tsx | 5 +- .../main/premium/PremiumFeatureModal.tsx | 6 +-- .../main/premium/PremiumMainModal.tsx | 6 +-- .../PremiumLimitReachedModal.module.scss | 1 - .../common/PremiumLimitReachedModal.tsx | 5 +- src/components/mediaViewer/MediaViewer.tsx | 6 +-- .../mediaViewer/MediaViewerActions.tsx | 45 +++++++--------- src/components/mediaViewer/VideoPlayer.tsx | 5 +- .../mediaViewer/VideoPlayerControls.tsx | 21 +++----- src/components/middle/HeaderActions.tsx | 23 ++++---- .../middle/MessageSelectToolbar.tsx | 5 +- src/components/middle/MiddleColumn.tsx | 3 +- src/components/middle/ReactorListModal.tsx | 3 +- src/components/middle/ScrollDownButton.tsx | 7 ++- .../middle/composer/AttachmentModal.tsx | 17 +++--- .../composer/ComposerEmbeddedMessage.tsx | 5 +- .../middle/composer/EmojiPicker.tsx | 7 +-- src/components/middle/composer/PollModal.tsx | 18 ++++--- src/components/middle/composer/SymbolMenu.tsx | 6 +-- .../middle/composer/SymbolMenuFooter.tsx | 11 ++-- .../middle/composer/TextFormatter.tsx | 54 +++++++++---------- .../middle/composer/ToDoListModal.tsx | 17 +++--- .../middle/composer/WebPagePreview.tsx | 5 +- src/components/middle/message/Message.tsx | 10 ++-- .../middle/message/MessagePhoneCall.tsx | 5 +- src/components/middle/message/Poll.tsx | 6 +-- src/components/middle/message/RoundVideo.tsx | 5 +- .../middle/message/SimilarChannels.tsx | 5 +- .../middle/message/SponsoredMessage.tsx | 13 +++-- .../message/reactions/ReactionSelector.tsx | 6 +-- src/components/middle/panes/AudioPlayer.tsx | 20 +++---- .../middle/panes/ChatReportPane.tsx | 6 +-- .../middle/panes/HeaderPinnedMessage.tsx | 5 +- src/components/middle/search/MiddleSearch.tsx | 23 +++----- .../modals/aboutAds/AboutAdsModal.tsx | 6 +-- .../collectible/CollectibleInfoModal.tsx | 6 +-- .../gift/info/GiftInfoModal.module.scss | 1 - .../modals/gift/info/GiftInfoModal.tsx | 32 +++++++---- .../preparedMessage/PreparedMessageModal.tsx | 6 +-- .../ProfileRatingModal.module.scss | 1 - .../profileRating/ProfileRatingModal.tsx | 4 +- .../quickPreview/QuickPreviewModalHeader.tsx | 11 ++-- .../modals/reportAd/ReportAdModal.tsx | 6 +-- .../modals/reportModal/ReportModal.tsx | 11 ++-- .../modals/stars/StarsBalanceModal.tsx | 6 +-- .../modals/stars/gift/StarsGiftModal.tsx | 7 +-- .../modals/webApp/MinimizedWebAppModal.tsx | 13 +++-- src/components/modals/webApp/WebAppModal.tsx | 35 ++++++------ src/components/payment/PaymentModal.tsx | 6 +-- src/components/payment/ReceiptModal.tsx | 6 +-- src/components/right/Profile.scss | 4 -- src/components/right/Profile.tsx | 14 ++--- src/components/right/RightHeader.tsx | 46 +++++++--------- src/components/story/Story.tsx | 15 +++--- src/components/story/StoryFooter.tsx | 10 ++-- src/components/story/StoryViewer.tsx | 6 +-- src/components/ui/Button.scss | 2 + src/components/ui/Button.tsx | 8 ++- src/components/ui/DropdownMenu.tsx | 6 +-- src/components/ui/ImageCropper.tsx | 12 +++-- src/components/ui/ListItem.tsx | 5 +- src/components/ui/Modal.tsx | 6 +-- src/components/ui/SearchInput.tsx | 15 +++--- src/components/ui/ShowMoreButton.tsx | 3 +- 94 files changed, 429 insertions(+), 576 deletions(-) diff --git a/src/components/auth/AuthPhoneNumber.tsx b/src/components/auth/AuthPhoneNumber.tsx index babcc1c0b..0af688101 100644 --- a/src/components/auth/AuthPhoneNumber.tsx +++ b/src/components/auth/AuthPhoneNumber.tsx @@ -26,7 +26,6 @@ import useLangString from '../../hooks/useLangString'; import useLastCallback from '../../hooks/useLastCallback'; import useMultiaccountInfo from '../../hooks/useMultiaccountInfo'; -import Icon from '../common/icons/Icon'; import Button from '../ui/Button'; import Checkbox from '../ui/Checkbox'; import InputText from '../ui/InputText'; @@ -241,9 +240,14 @@ const AuthPhoneNumber: FC = ({ return (
{hasActiveAccount && ( - + + + iconName={isFullscreen ? 'smallscreen' : 'fullscreen'} + /> )}

@@ -290,9 +288,8 @@ const GroupCall: FC = ({ className={buildClassName(styles.headerButton, styles.videosHeaderLastButton)} onClick={handleToggleSidebar} ariaLabel={lang('AccDescrExpandPanel')} - > - - + iconName="sidebar" + /> )}

@@ -320,9 +317,8 @@ const GroupCall: FC = ({ )} onClick={handleToggleFullscreen} ariaLabel={lang('AccSwitchToFullscreen')} - > - - + iconName="fullscreen" + /> )} {isMobile && ( @@ -333,9 +329,8 @@ const GroupCall: FC = ({ onClick={handleToggleGroupCallPanel} className={buildClassName(styles.headerButton, styles.firstButton)} ariaLabel={lang('Close')} - > - - + iconName="close" + /> )} {isLandscapeWithVideos && ( @@ -350,9 +345,8 @@ const GroupCall: FC = ({ color="translucent" onClick={handleToggleSidebar} ariaLabel={lang('AccDescrCollapsePanel')} - > - - + iconName="sidebar" + /> )}
@@ -378,9 +372,8 @@ const GroupCall: FC = ({ color="translucent" onClick={handleInviteMember} ariaLabel={lang('VoipGroupInviteMember')} - > - - + iconName="add-user" + /> )}
@@ -470,9 +463,8 @@ const GroupCall: FC = ({ onClick={handleClickVideo} ariaLabel={lang(hasVideo ? 'VoipStopVideo' : 'VoipStartVideo')} disabled={isConnecting} - > - - + iconName={!hasVideo ? 'video-stop' : 'video'} + /> + iconName={!hasPresentation ? 'share-screen-stop' : 'share-screen'} + /> @@ -503,9 +494,8 @@ const GroupCall: FC = ({ )} ariaLabel={lang('lng_group_call_settings')} disabled - > - - + iconName="settings-filled" + /> + iconName="close" + /> = ({ className={styles.pinButton} ariaLabel={lang(isPinned ? 'lng_group_call_context_unpin_camera' : 'lng_group_call_context_pin_camera')} onClick={handleClickPin} - > - - + iconName={isPinned ? 'unpin' : 'pin'} + /> )}
diff --git a/src/components/calls/phone/PhoneCall.tsx b/src/components/calls/phone/PhoneCall.tsx index 852c98b04..25a7a4a31 100644 --- a/src/components/calls/phone/PhoneCall.tsx +++ b/src/components/calls/phone/PhoneCall.tsx @@ -32,7 +32,6 @@ 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'; @@ -271,22 +270,20 @@ const PhoneCall: FC = ({ round size="smaller" color="translucent" + iconName={isFullscreen ? 'smallscreen' : 'fullscreen'} onClick={handleToggleFullscreen} ariaLabel={lang(isFullscreen ? 'AccExitFullscreen' : 'AccSwitchToFullscreen')} - > - - + /> )} + />
- - + iconName={isDownloading ? 'close' : 'arrow-down'} + /> )} {origin === AudioOrigin.Search && renderWithTitle()} {origin !== AudioOrigin.Search && audio && renderAudio( diff --git a/src/components/common/CalendarModal.tsx b/src/components/common/CalendarModal.tsx index a6ab3e6c4..ed1e16bd9 100644 --- a/src/components/common/CalendarModal.tsx +++ b/src/components/common/CalendarModal.tsx @@ -16,7 +16,6 @@ import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; import Button from '../ui/Button'; import Modal from '../ui/Modal'; -import Icon from './icons/Icon'; import './CalendarModal.scss'; @@ -265,10 +264,9 @@ const CalendarModal: FC = ({ round size="smaller" color="translucent" + iconName="close" onClick={onClose} - > - - + />

{lang(`lng_month${currentMonth + 1}`)} @@ -280,21 +278,19 @@ const CalendarModal: FC = ({ round size="smaller" color="translucent" + iconName="previous" disabled={shouldDisablePrevMonth} onClick={!shouldDisablePrevMonth ? handlePrevMonth : undefined} - > - - + /> + />

diff --git a/src/components/common/Composer.tsx b/src/components/common/Composer.tsx index ac4d07b44..5de433aa0 100644 --- a/src/components/common/Composer.tsx +++ b/src/components/common/Composer.tsx @@ -2216,9 +2216,8 @@ const Composer: FC = ({ ariaLabel={lang( isSilentPosting ? 'AriaComposerSilentPostingDisable' : 'AriaComposerSilentPostingEnable', )} - > - - + iconName={isSilentPosting ? 'mute' : 'unmute'} + /> )} {withScheduledButton && ( @@ -2229,9 +2228,8 @@ const Composer: FC = ({ color="translucent" onClick={handleAllScheduledClick} ariaLabel={lang('AriaComposerOpenScheduled')} - > - - + iconName="scheduled" + /> )} {shouldShowGiftButton && ( + iconName="gift" + /> )} {shouldShowSuggestedPostButton && ( + iconName="cash-circle" + /> )} {Boolean(botKeyboardMessageId) && !activeVoiceRecording && !editingMessage && ( = ({ className="cancel" onClick={stopRecordingVoice} ariaLabel="Cancel voice recording" - > - - + iconName="delete" + /> )} {isInStoryViewer && !activeVoiceRecording && ( + iconName="close" + />

{lang('BoostingSelectCountry')} diff --git a/src/components/common/GifButton.tsx b/src/components/common/GifButton.tsx index c4f958cb1..3c2018a11 100644 --- a/src/components/common/GifButton.tsx +++ b/src/components/common/GifButton.tsx @@ -25,7 +25,6 @@ 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'; @@ -139,11 +138,11 @@ const GifButton: FC = ({ className="gif-unsave-button" color="dark" pill + iconName="close" + iconClassName="gif-unsave-button-icon" noFastClick onClick={handleUnsaveClick} - > - - + /> )} {withThumb && ( = ({ size="smaller" color="translucent" className={isOpen ? 'active' : ''} + iconName="more" onClick={onTrigger} ariaLabel={lang('AriaLabelOpenMenu')} - > - - + /> ); }, [isMobile, lang]); @@ -94,11 +92,10 @@ const InviteLink: FC = ({ className={styles.copy} size="smaller" round + iconName="copy" disabled={isDisabled} onClick={handleCopyClick} - > - - + /> ) : ( - - + iconName="close" + /> = ({ disabled={active === 0} round onClick={handleGoBack} - > - - + iconName="previous" + /> )}
{Array(length).fill(undefined).map((_, i) => { @@ -81,9 +79,8 @@ const SliderDots: FC = ({ round disabled={active === length - 1} onClick={handleGoForward} - > - - + iconName="next" + /> )}
); diff --git a/src/components/common/StickerButton.tsx b/src/components/common/StickerButton.tsx index 77c1b6809..a6fd46e80 100644 --- a/src/components/common/StickerButton.tsx +++ b/src/components/common/StickerButton.tsx @@ -329,9 +329,8 @@ const StickerButton = - - + iconName="close" + /> )} {Boolean(contextMenuItems.length) && ( = ({ color="translucent" onClick={handleDefaultStatusIconClick} key="default-status-icon" - > - - + iconName="star" + /> )} {shouldRender && stickerSet.reactions?.map((reaction) => { const reactionId = getReactionKey(reaction); diff --git a/src/components/common/StickerSetModal.tsx b/src/components/common/StickerSetModal.tsx index edfb8c575..f31e0243c 100644 --- a/src/components/common/StickerSetModal.tsx +++ b/src/components/common/StickerSetModal.tsx @@ -39,7 +39,6 @@ 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,9 +182,8 @@ const StickerSetModal: FC = ({ className={isMenuOpen ? 'active' : ''} onClick={onTrigger} ariaLabel="More actions" - > - - + iconName="more" + /> ); }, [isMobile]); @@ -194,9 +192,14 @@ const StickerSetModal: FC = ({ return (
- + + + iconName="close" + /> = ({ shouldDisableDropdownMenuTransitionRef.current && lang.isRtl && 'disable-transition', )} onTransitionEnd={handleDropdownMenuTransitionEnd} - > - - + iconName="arrow-left" + /> {shouldRenderTitle &&

{lang('ArchivedChats')}

}
diff --git a/src/components/left/ConnectionStatusOverlay.tsx b/src/components/left/ConnectionStatusOverlay.tsx index d45009422..e85f5e5f3 100644 --- a/src/components/left/ConnectionStatusOverlay.tsx +++ b/src/components/left/ConnectionStatusOverlay.tsx @@ -5,7 +5,6 @@ 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,9 +36,8 @@ const ConnectionStatusOverlay: FC = ({ round size="tiny" color="translucent-black" - > - - + iconName="close" + />
); }; diff --git a/src/components/left/main/EmptyFolder.tsx b/src/components/left/main/EmptyFolder.tsx index c1684808e..ee9c0fc9e 100644 --- a/src/components/left/main/EmptyFolder.tsx +++ b/src/components/left/main/EmptyFolder.tsx @@ -12,7 +12,6 @@ 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'; @@ -56,10 +55,10 @@ const EmptyFolder: FC = ({ ripple={!isMobile} fluid pill + iconName="settings" onClick={handleEditFolder} isRtl={lang.isRtl} > -
{lang('ChatList.EmptyChatListEditFilter')}
diff --git a/src/components/left/main/LeftMainHeader.tsx b/src/components/left/main/LeftMainHeader.tsx index 908404c0d..38e5203e9 100644 --- a/src/components/left/main/LeftMainHeader.tsx +++ b/src/components/left/main/LeftMainHeader.tsx @@ -297,9 +297,8 @@ const LeftMainHeader = ({ ariaLabel={`${oldLang('ShortcutsController.Others.LockByPasscode')} (Ctrl+Shift+L)`} onClick={handleLockScreen} className={buildClassName(!isCurrentUserPremium && 'extra-spacing')} - > - - + iconName="lock" + /> )} - - + iconName="close" + /> {isUserId(chat.id) ? ( = ({ color="translucent" onClick={onReset} ariaLabel="Return to Chat List" - > - - + iconName="arrow-left" + />

{lang('GroupAddMembers')}

diff --git a/src/components/left/newChat/NewChatStep2.tsx b/src/components/left/newChat/NewChatStep2.tsx index 8c253e140..10e94d50c 100644 --- a/src/components/left/newChat/NewChatStep2.tsx +++ b/src/components/left/newChat/NewChatStep2.tsx @@ -14,7 +14,6 @@ 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'; @@ -155,12 +154,10 @@ const NewChatStep2: FC = ({ round size="smaller" color="translucent" - onClick={() => onReset()} ariaLabel="Return to member selection" - > - - + iconName="arrow-left" + />

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

diff --git a/src/components/left/search/RecentContacts.tsx b/src/components/left/search/RecentContacts.tsx index 68b52bd29..4e7ca7731 100644 --- a/src/components/left/search/RecentContacts.tsx +++ b/src/components/left/search/RecentContacts.tsx @@ -16,7 +16,6 @@ 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'; @@ -112,9 +111,8 @@ const RecentContacts: FC = ({ ariaLabel={lang('Clear')} onClick={handleClearRecentlyFoundChats} isRtl={lang.isRtl} - > - - + iconName="close" + />

{recentlyFoundChatIds.map((id) => ( = ({ function renderHeader() { return (
- + + + iconName="more" + /> ); }, [isMobile]); @@ -268,12 +266,10 @@ const SettingsHeader: FC = ({ ripple={!isMobile} size="smaller" color="translucent" - onClick={() => openSettingsScreen({ screen: SettingsScreens.EditProfile })} ariaLabel={oldLang('lng_settings_information')} - > - - + iconName="edit" + /> = ({ color="translucent" onClick={onReset} ariaLabel={oldLang('AccDescrGoBack')} - > - - + iconName="arrow-left" + /> {renderHeaderContent()} = ({ {canCreateNewFolder && ( )} diff --git a/src/components/main/FoldersSidebar.tsx b/src/components/main/FoldersSidebar.tsx index 128aa7ae2..45cbb8b6f 100644 --- a/src/components/main/FoldersSidebar.tsx +++ b/src/components/main/FoldersSidebar.tsx @@ -16,7 +16,6 @@ import useLastCallback from '../../hooks/useLastCallback'; import useScrolledState from '../../hooks/useScrolledState'; import FolderIcon from '../common/FolderIcon'; -import Icon from '../common/icons/Icon'; import MainMenuDropdown from '../common/MainMenuDropdown'; import Button from '../ui/Button'; import Folder from '../ui/Folder'; @@ -122,9 +121,9 @@ const FoldersSidebar = ({ className={buildClassName(isOpen ? 'active' : '', styles.menuButton)} onClick={onTrigger} ariaLabel={lang('AriaLabelOpenMenu')} - > - - + iconName="menu" + iconClassName={styles.icon} + /> ); }, [lang]); @@ -175,9 +174,9 @@ const FoldersSidebar = ({ color="translucent" className={buildClassName(styles.menuButton, styles.settingsButton)} onClick={handleSettingsClick} - > - - + iconName="tools" + iconClassName={styles.icon} + />
); }; diff --git a/src/components/main/premium/GiveawayModal.tsx b/src/components/main/premium/GiveawayModal.tsx index f001a266a..e741c1b6b 100644 --- a/src/components/main/premium/GiveawayModal.tsx +++ b/src/components/main/premium/GiveawayModal.tsx @@ -698,9 +698,8 @@ const GiveawayModal: FC = ({ color="translucent" onClick={handleClose} ariaLabel={lang('Close')} - > - - + iconName="close" + />

{renderText(lang('BoostingBoostsViaGifts'))} diff --git a/src/components/main/premium/PremiumFeatureModal.tsx b/src/components/main/premium/PremiumFeatureModal.tsx index 1af9facb2..6474d6661 100644 --- a/src/components/main/premium/PremiumFeatureModal.tsx +++ b/src/components/main/premium/PremiumFeatureModal.tsx @@ -27,7 +27,6 @@ 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'; @@ -233,9 +232,8 @@ const PremiumFeatureModal: FC = ({ color={hasHeaderBackdrop ? 'translucent-white' : 'translucent'} onClick={onBack} ariaLabel={oldLang('Back')} - > - - + iconName="arrow-left" + />
diff --git a/src/components/main/premium/PremiumMainModal.tsx b/src/components/main/premium/PremiumMainModal.tsx index b2adfdce5..00cd03d3b 100644 --- a/src/components/main/premium/PremiumMainModal.tsx +++ b/src/components/main/premium/PremiumMainModal.tsx @@ -38,7 +38,6 @@ import useOldLang from '../../../hooks/useOldLang'; import useSyncEffect from '../../../hooks/useSyncEffect'; import CustomEmoji from '../../common/CustomEmoji'; -import Icon from '../../common/icons/Icon'; import ParticlesHeader from '../../modals/common/ParticlesHeader.tsx'; import Button from '../../ui/Button'; import Modal from '../../ui/Modal'; @@ -440,9 +439,8 @@ const PremiumMainModal: FC = ({ color="translucent" onClick={() => closePremiumModal()} ariaLabel={oldLang('Close')} - > - - + iconName="close" + /> {renderHeader()} {!isPremium && !isGift && renderSubscriptionOptions()}
diff --git a/src/components/main/premium/common/PremiumLimitReachedModal.module.scss b/src/components/main/premium/common/PremiumLimitReachedModal.module.scss index b0f735b14..ddcfd73b1 100644 --- a/src/components/main/premium/common/PremiumLimitReachedModal.module.scss +++ b/src/components/main/premium/common/PremiumLimitReachedModal.module.scss @@ -48,7 +48,6 @@ } .x2 { - margin-inline-start: 0.25rem; font-size: 1.25rem; } diff --git a/src/components/main/premium/common/PremiumLimitReachedModal.tsx b/src/components/main/premium/common/PremiumLimitReachedModal.tsx index b57a42f4f..54142378c 100644 --- a/src/components/main/premium/common/PremiumLimitReachedModal.tsx +++ b/src/components/main/premium/common/PremiumLimitReachedModal.tsx @@ -17,7 +17,6 @@ import useFlag from '../../../../hooks/useFlag'; import useLang from '../../../../hooks/useLang'; import useOldLang from '../../../../hooks/useOldLang'; -import Icon from '../../../common/icons/Icon'; import Button from '../../../ui/Button'; import Modal from '../../../ui/Modal'; import PremiumLimitsCompare from './PremiumLimitsCompare'; @@ -213,9 +212,11 @@ const PremiumLimitReachedModal: FC = ({ isText onClick={handleClick} color="primary" + iconName="double-badge" + iconClassName={styles.x2} + iconAlignment="end" > {lang('IncreaseLimit')} - )}
diff --git a/src/components/mediaViewer/MediaViewer.tsx b/src/components/mediaViewer/MediaViewer.tsx index e9fb45c31..40a834221 100644 --- a/src/components/mediaViewer/MediaViewer.tsx +++ b/src/components/mediaViewer/MediaViewer.tsx @@ -59,7 +59,6 @@ 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'; @@ -433,11 +432,10 @@ const MediaViewer = ({ round size="smaller" color="translucent-white" + iconName="close" ariaLabel={lang('Close')} onClick={handleClose} - > - - + /> )} = ({ className={isOpen ? 'active' : undefined} onClick={onTrigger} ariaLabel="More actions" - > - - + iconName="more" + /> ); }, []); @@ -209,9 +208,8 @@ const MediaViewerActions: FC = ({ size="smaller" color="translucent-white" ariaLabel={lang('AccActionDownload')} - > - - + iconName="download" + /> )); } @@ -319,9 +317,8 @@ const MediaViewerActions: FC = ({ color="translucent-white" ariaLabel={lang('Forward')} onClick={onForward} - > - - + iconName="forward" + /> )} {renderDownloadButton()} + iconName="zoom-out" + /> + iconName="zoom-in" + /> {canReportAvatar && ( + iconName="flag" + /> )} {canUpdate && ( + iconName="copy-media" + /> )} {canDelete && ( + iconName="delete" + /> )} + iconName="close" + /> {canDelete && renderDeleteModal()}
); diff --git a/src/components/mediaViewer/VideoPlayer.tsx b/src/components/mediaViewer/VideoPlayer.tsx index 4ead7829c..2a17085b0 100644 --- a/src/components/mediaViewer/VideoPlayer.tsx +++ b/src/components/mediaViewer/VideoPlayer.tsx @@ -25,7 +25,6 @@ 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'; @@ -365,9 +364,7 @@ const VideoPlayer: FC = ({ /> {shouldRenderPlayButton && ( - + + iconName={isPlaying ? 'pause' : 'play'} + /> + iconName={volumeIcon} + /> {!IS_IOS && ( )} @@ -231,9 +228,8 @@ const VideoPlayerControls: FC = ({ className="fullscreen" round onClick={onPictureInPictureChange} - > - - + iconName="pip" + /> )} {isFullscreenSupported && ( + iconName={isFullscreen ? 'smallscreen' : 'fullscreen'} + /> )} = ({ className={isOpen ? 'active' : ''} onClick={onTrigger} ariaLabel={lang('TranslateMessage')} - > - - + iconName="language" + /> ); }, [isRightColumnShown, lang]); @@ -382,9 +380,8 @@ const HeaderActions: FC = ({ size="smaller" onClick={handleSearchClick} ariaLabel={lang('Conversation.SearchPlaceholder')} - > - - + iconName="search" + /> )} {canCall && ( + iconName="phone" + /> )} )} @@ -406,10 +402,10 @@ const HeaderActions: FC = ({ ripple={isRightColumnShown} color="translucent" size="smaller" + iconName="user" onClick={handleJoinRequestsClick} ariaLabel={isChannel ? lang('SubscribeRequests') : lang('MemberRequests')} > -
{pendingJoinRequests}
)} @@ -423,9 +419,8 @@ const HeaderActions: FC = ({ disabled={noMenu} ariaLabel="More actions" onClick={handleHeaderMenuOpen} - > - - + iconName="more" + /> {menuAnchor && ( = ({ round onClick={handleExitMessageSelectMode} ariaLabel="Exit select mode" - > - - + iconName="close" + /> {formattedMessagesCount} diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index c0763a22c..de5cc0a9d 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -82,7 +82,6 @@ import usePinnedMessage from './hooks/usePinnedMessage'; import useFluidBackgroundFilter from './message/hooks/useFluidBackgroundFilter'; 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'; @@ -609,8 +608,8 @@ function MiddleColumn({ color="secondary" className="composer-button unpin-all-button" onClick={handleOpenUnpinModal} + iconName="unpin" > - {oldLang('Chat.Pinned.UnpinAll', pinnedMessagesCount, 'i')} diff --git a/src/components/middle/ReactorListModal.tsx b/src/components/middle/ReactorListModal.tsx index f451764f4..94d91067d 100644 --- a/src/components/middle/ReactorListModal.tsx +++ b/src/components/middle/ReactorListModal.tsx @@ -155,10 +155,9 @@ const ReactorListModal: FC = ({ className={buildClassName(!chosenTab && 'chosen')} size="tiny" ripple - + iconName="heart" onClick={() => setChosenTab(undefined)} > - {Boolean(reactors?.count) && formatIntegerCompact(lang, reactors.count)} {allReactions.map((reaction) => { diff --git a/src/components/middle/ScrollDownButton.tsx b/src/components/middle/ScrollDownButton.tsx index f5e356a87..3ea1aeb74 100644 --- a/src/components/middle/ScrollDownButton.tsx +++ b/src/components/middle/ScrollDownButton.tsx @@ -10,7 +10,6 @@ import useContextMenuHandlers from '../../hooks/useContextMenuHandlers'; import useLang from '../../hooks/useLang'; 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'; @@ -54,9 +53,9 @@ const ScrollDownButton: FC = ({ onClick={onClick} onContextMenu={handleContextMenu} ariaLabel={oldLang(ariaLabelLang)} - > - - + iconName={icon} + iconClassName={styles.icon} + /> {Boolean(unreadCount) &&
{formatIntegerCompact(lang, unreadCount)}
} {onReadAll && ( = ({ className={isMenuOpen ? 'active' : ''} onClick={onTrigger} ariaLabel="More actions" - > - - + iconName="more" + /> ); }, [isMobile]); @@ -533,9 +531,14 @@ const AttachmentModal: FC = ({ return (
- + + iconName="close" + /> {(isShowingReply || isForwarding) && !isContextMenuDisabled && ( = ({ round faded color="translucent" - onClick={() => selectCategory(index)} ariaLabel={category.name} - > - - + iconName={icon} + /> ); } diff --git a/src/components/middle/composer/PollModal.tsx b/src/components/middle/composer/PollModal.tsx index 6c69f6aed..22c62090f 100644 --- a/src/components/middle/composer/PollModal.tsx +++ b/src/components/middle/composer/PollModal.tsx @@ -13,7 +13,6 @@ 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'; @@ -249,9 +248,14 @@ const PollModal = ({ function renderHeader() { return (
- + + iconName="close" + /> )}
)); diff --git a/src/components/middle/composer/SymbolMenu.tsx b/src/components/middle/composer/SymbolMenu.tsx index 27ad3e09a..e5500a0e3 100644 --- a/src/components/middle/composer/SymbolMenu.tsx +++ b/src/components/middle/composer/SymbolMenu.tsx @@ -23,7 +23,6 @@ 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'; @@ -273,9 +272,8 @@ const SymbolMenu: FC = ({ className="symbol-close-button" size="tiny" onClick={onClose} - > - - + iconName="close" + /> )} = ({ faded color="translucent" onClick={handleSearchOpen} - > - - + iconName="search" + /> )} {canSendPlainText && renderTabButton(SymbolMenuTabs.Emoji)} @@ -98,9 +96,8 @@ const SymbolMenuFooter: FC = ({ round faded color="translucent" - > - - + iconName="delete-left" + /> )}
); diff --git a/src/components/middle/composer/TextFormatter.tsx b/src/components/middle/composer/TextFormatter.tsx index 4fd95ee35..d76343cf1 100644 --- a/src/components/middle/composer/TextFormatter.tsx +++ b/src/components/middle/composer/TextFormatter.tsx @@ -22,7 +22,6 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useVirtualBackdrop from '../../../hooks/useVirtualBackdrop'; -import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import './TextFormatter.scss'; @@ -422,61 +421,61 @@ const TextFormatter: FC = ({ ariaLabel={lang('FormattingSpoilerAria')} className={getFormatButtonClassName('spoiler')} onClick={handleSpoilerText} - > - - + iconName="eye-crossed" + />
+ iconName="bold" + /> + iconName="italic" + /> + iconName="underlined" + /> + iconName="strikethrough" + /> + iconName="monospace" + />
- +
- + + iconName="check" + />
diff --git a/src/components/middle/composer/ToDoListModal.tsx b/src/components/middle/composer/ToDoListModal.tsx index a5ab5cb1f..2f3e2ef79 100644 --- a/src/components/middle/composer/ToDoListModal.tsx +++ b/src/components/middle/composer/ToDoListModal.tsx @@ -19,7 +19,6 @@ import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev'; import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; -import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import Checkbox from '../../ui/Checkbox'; import InputText from '../../ui/InputText'; @@ -291,9 +290,14 @@ const ToDoListModal = ({ : editingMessage ? 'TitleEditToDoList' : 'TitleNewToDoList'; return (
- + + iconName="close" + /> )}
); diff --git a/src/components/middle/composer/WebPagePreview.tsx b/src/components/middle/composer/WebPagePreview.tsx index 567f6f9b1..6aa753962 100644 --- a/src/components/middle/composer/WebPagePreview.tsx +++ b/src/components/middle/composer/WebPagePreview.tsx @@ -236,9 +236,8 @@ const WebPagePreview = ({ color="translucent" ariaLabel={lang('AccLinkRemovePreview')} onClick={handleClearWebpagePreview} - > - - + iconName="close" + /> {!isEditing && renderContextMenu()} diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index bd8ae743e..43e58c6df 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -1823,9 +1823,8 @@ const Message = ({ size="tiny" ariaLabel={oldLang('lng_context_forward_msg')} onClick={isLastInDocumentGroup ? handleGroupForward : handleForward} - > - - + iconName="share-filled" + /> )} {canFocus && ( + iconName="arrow-right" + /> )} )} diff --git a/src/components/middle/message/MessagePhoneCall.tsx b/src/components/middle/message/MessagePhoneCall.tsx index c908a48db..2510ac640 100644 --- a/src/components/middle/message/MessagePhoneCall.tsx +++ b/src/components/middle/message/MessagePhoneCall.tsx @@ -59,9 +59,8 @@ const MessagePhoneCall: FC = ({ className={styles.button} disabled={!ARE_CALLS_SUPPORTED} ariaLabel={lang(isOutgoing ? 'CallAgain' : 'CallBack')} - > - - + iconName={isVideo ? 'video-outlined' : 'phone'} + />
{lang(getCallMessageKey(phoneCall, message.isOutgoing))}
diff --git a/src/components/middle/message/Poll.tsx b/src/components/middle/message/Poll.tsx index 21d12f222..89e2a6a11 100644 --- a/src/components/middle/message/Poll.tsx +++ b/src/components/middle/message/Poll.tsx @@ -26,7 +26,6 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import AvatarList from '../../common/AvatarList'; -import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import CheckboxGroup from '../../ui/CheckboxGroup'; import RadioGroup from '../../ui/RadioGroup'; @@ -263,9 +262,8 @@ const Poll: FC = ({ className="poll-quiz-help" onClick={showSolution} ariaLabel="Show Solution" - > - - + iconName="lamp" + /> )}
{canVote && ( diff --git a/src/components/middle/message/RoundVideo.tsx b/src/components/middle/message/RoundVideo.tsx index 423ddfeb5..e50304cf2 100644 --- a/src/components/middle/message/RoundVideo.tsx +++ b/src/components/middle/message/RoundVideo.tsx @@ -245,9 +245,8 @@ const RoundVideo: FC = ({ size="smaller" className="play" nonInteractive - > - - + iconName="play" + />
); diff --git a/src/components/middle/message/SimilarChannels.tsx b/src/components/middle/message/SimilarChannels.tsx index f9af8b9af..bd411f1e7 100644 --- a/src/components/middle/message/SimilarChannels.tsx +++ b/src/components/middle/message/SimilarChannels.tsx @@ -175,9 +175,8 @@ const SimilarChannels = ({ className={styles.close} color="translucent" onClick={handleToggle} - > - - + iconName="close" + />
{firstSimilarChannels?.map((channel, i) => { diff --git a/src/components/middle/message/SponsoredMessage.tsx b/src/components/middle/message/SponsoredMessage.tsx index c773e7c6d..c36a3385b 100644 --- a/src/components/middle/message/SponsoredMessage.tsx +++ b/src/components/middle/message/SponsoredMessage.tsx @@ -33,7 +33,6 @@ import useOldLang from '../../../hooks/useOldLang'; import Avatar from '../../common/Avatar'; import BadgeButton from '../../common/BadgeButton'; -import Icon from '../../common/icons/Icon'; import PeerColorWrapper from '../../common/PeerColorWrapper'; import Button from '../../ui/Button'; import MessageAppendix from './MessageAppendix'; @@ -300,23 +299,23 @@ const SponsoredMessage: FC = ({ color="translucent-white" round size="tiny" + iconName="close" + iconClassName="sponsored-action-icon" ariaLabel={lang('Close')} onClick={handleHideSponsoredMessage} - > - - + /> {message.canReport && ( + /> )}
diff --git a/src/components/middle/message/reactions/ReactionSelector.tsx b/src/components/middle/message/reactions/ReactionSelector.tsx index 5d01a594c..f9ca9bce2 100644 --- a/src/components/middle/message/reactions/ReactionSelector.tsx +++ b/src/components/middle/message/reactions/ReactionSelector.tsx @@ -20,7 +20,6 @@ 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'; @@ -227,9 +226,8 @@ const ReactionSelector: FC = ({ color="translucent" className={cn('show-more')} onClick={handleShowMoreClick} - > - - + iconName="down" + /> )} diff --git a/src/components/middle/panes/AudioPlayer.tsx b/src/components/middle/panes/AudioPlayer.tsx index 1e80fa8fc..44e59e191 100644 --- a/src/components/middle/panes/AudioPlayer.tsx +++ b/src/components/middle/panes/AudioPlayer.tsx @@ -295,9 +295,8 @@ const AudioPlayer: FC = ({ disabled={isFirst?.()} onClick={requestPreviousTrack} ariaLabel="Previous track" - > - - + iconName="skip-previous" + /> + iconName="skip-next" + />
+ iconName={volumeIcon} + /> {!IS_IOS && (
@@ -370,9 +367,8 @@ const AudioPlayer: FC = ({ size="smaller" onClick={handleClose} ariaLabel="Close player" - > - - + iconName="close" + />
); }; diff --git a/src/components/middle/panes/ChatReportPane.tsx b/src/components/middle/panes/ChatReportPane.tsx index b0ff7095b..c917fadd2 100644 --- a/src/components/middle/panes/ChatReportPane.tsx +++ b/src/components/middle/panes/ChatReportPane.tsx @@ -17,7 +17,6 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import useHeaderPane, { type PaneState } from '../hooks/useHeaderPane'; -import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import Checkbox from '../../ui/Checkbox'; import ConfirmDialog from '../../ui/ConfirmDialog'; @@ -175,9 +174,8 @@ const ChatReportPane: FC = ({ color="translucent" onClick={handleCloseReportPane} ariaLabel={lang('Close')} - > - - + iconName="close" + /> - - + iconName="close" + /> )} = ({ round size="smaller" color="translucent" - onClick={() => openHistoryCalendar({ selectedAt: getDayStartAt(Date.now()) })} ariaLabel={oldLang('JumpToDate')} - > - - + iconName="calendar" + />
)} @@ -713,12 +710,10 @@ const MiddleSearch: FC = ({ round size="smaller" color="translucent" - onClick={() => openHistoryCalendar({ selectedAt: getDayStartAt(Date.now()) })} ariaLabel={oldLang('JumpToDate')} - > - - + iconName="calendar" + />
{hasQueryData && ( foundIds?.length ? ( @@ -750,9 +745,8 @@ const MiddleSearch: FC = ({ onClick={handleFocusOlder} nonInteractive={!canFocusOlder} ariaLabel={lang('AriaSearchOlderResult')} - > - - + iconName="up" + /> + iconName="down" + />
)} diff --git a/src/components/modals/aboutAds/AboutAdsModal.tsx b/src/components/modals/aboutAds/AboutAdsModal.tsx index 6fd3d87d1..17d2d2069 100644 --- a/src/components/modals/aboutAds/AboutAdsModal.tsx +++ b/src/components/modals/aboutAds/AboutAdsModal.tsx @@ -12,7 +12,6 @@ import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; -import Icon from '../../common/icons/Icon'; import SafeLink from '../../common/SafeLink'; import SponsoredMessageContextMenuContainer from '../../middle/message/SponsoredContextMenuContainer'; import Button from '../../ui/Button'; @@ -91,9 +90,8 @@ const AboutAdsModal = ({ modal, minLevelToRestrictAds }: OwnProps & StateProps) color="translucent" className={styles.moreButton} onClick={handleContextMenu} - > - - + iconName="more" + /> ); diff --git a/src/components/modals/collectible/CollectibleInfoModal.tsx b/src/components/modals/collectible/CollectibleInfoModal.tsx index d67b840d0..ae35b981a 100644 --- a/src/components/modals/collectible/CollectibleInfoModal.tsx +++ b/src/components/modals/collectible/CollectibleInfoModal.tsx @@ -20,7 +20,6 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import AnimatedIconWithPreview from '../../common/AnimatedIconWithPreview'; -import Icon from '../../common/icons/Icon'; import PeerChip from '../../common/PeerChip'; import Button from '../../ui/Button'; import Modal from '../../ui/Modal'; @@ -110,9 +109,8 @@ const CollectibleInfoModal: FC = ({ className={styles.closeButton} ariaLabel={lang('Close')} onClick={handleClose} - > - - + iconName="close" + />
+ ); } if (canManage && savedGift?.canUpgrade && !savedGift.upgradeMsgId) { return ( - ); } if (savedGift?.prepaidUpgradeHash) { return ( - ); } @@ -804,9 +819,8 @@ const GiftInfoModal = ({ color="translucent" ariaLabel="Delete original details" onClick={handleRemoveMessage} - > - - + iconName="delete" + /> )}
, ]); diff --git a/src/components/modals/preparedMessage/PreparedMessageModal.tsx b/src/components/modals/preparedMessage/PreparedMessageModal.tsx index 5ae5eafa3..816efdc7f 100644 --- a/src/components/modals/preparedMessage/PreparedMessageModal.tsx +++ b/src/components/modals/preparedMessage/PreparedMessageModal.tsx @@ -18,7 +18,6 @@ import useCustomBackground from '../../../hooks/useCustomBackground'; import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; -import Icon from '../../common/icons/Icon'; import Message from '../../middle/message/Message'; import Button from '../../ui/Button'; import Modal from '../../ui/Modal'; @@ -95,9 +94,8 @@ const PreparedMessageModal: FC = ({ size="smaller" ariaLabel={lang('Close')} onClick={handleCloseClick} - > - - + iconName="close" + />

{lang('BotShareMessage')}

diff --git a/src/components/modals/profileRating/ProfileRatingModal.module.scss b/src/components/modals/profileRating/ProfileRatingModal.module.scss index 6ad392e2e..04d775f64 100644 --- a/src/components/modals/profileRating/ProfileRatingModal.module.scss +++ b/src/components/modals/profileRating/ProfileRatingModal.module.scss @@ -112,7 +112,6 @@ } .understoodIcon { - margin-right: 0.25rem; font-size: 1.1875rem; } diff --git a/src/components/modals/profileRating/ProfileRatingModal.tsx b/src/components/modals/profileRating/ProfileRatingModal.tsx index d44469c38..77738bffd 100644 --- a/src/components/modals/profileRating/ProfileRatingModal.tsx +++ b/src/components/modals/profileRating/ProfileRatingModal.tsx @@ -12,7 +12,6 @@ import { formatShortDuration } from '../../../util/dates/dateFormat'; import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; -import Icon from '../../common/icons/Icon'; import PremiumProgress, { type AnimationDirection } from '../../common/PremiumProgress'; import Button from '../../ui/Button'; import Transition from '../../ui/Transition'; @@ -219,8 +218,9 @@ const ProfileRatingModal = ({
diff --git a/src/components/modals/quickPreview/QuickPreviewModalHeader.tsx b/src/components/modals/quickPreview/QuickPreviewModalHeader.tsx index efc16a461..a92f27542 100644 --- a/src/components/modals/quickPreview/QuickPreviewModalHeader.tsx +++ b/src/components/modals/quickPreview/QuickPreviewModalHeader.tsx @@ -16,7 +16,6 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import GroupChatInfo from '../../common/GroupChatInfo'; -import Icon from '../../common/icons/Icon'; import PrivateChatInfo from '../../common/PrivateChatInfo'; import Button from '../../ui/Button'; @@ -79,9 +78,8 @@ const QuickPreviewModalHeader: FC = ({ ariaLabel={lang('ChatListContextMaskAsRead')} onClick={handleMarkAsRead} className={styles.markAsReadButton} - > - - + iconName="readchats" + /> )} + iconName="close" + />
{isUserId(displayChatId) ? ( diff --git a/src/components/modals/reportAd/ReportAdModal.tsx b/src/components/modals/reportAd/ReportAdModal.tsx index f8cf15134..20fc077c5 100644 --- a/src/components/modals/reportAd/ReportAdModal.tsx +++ b/src/components/modals/reportAd/ReportAdModal.tsx @@ -11,7 +11,6 @@ import buildClassName from '../../../util/buildClassName'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; -import Icon from '../../common/icons/Icon'; import SafeLink from '../../common/SafeLink'; import Button from '../../ui/Button'; import ListItem from '../../ui/ListItem'; @@ -86,9 +85,8 @@ const ReportAdModal = ({ size="smaller" ariaLabel={lang(renderingDepth ? 'Back' : 'Close')} onClick={handleBackClick} - > - - + iconName={renderingDepth ? 'arrow-left' : 'close'} + />

{lang('ReportAd')}

{hasSubtitle && ( diff --git a/src/components/modals/reportModal/ReportModal.tsx b/src/components/modals/reportModal/ReportModal.tsx index 717515b39..11306ed83 100644 --- a/src/components/modals/reportModal/ReportModal.tsx +++ b/src/components/modals/reportModal/ReportModal.tsx @@ -14,7 +14,6 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import AnimatedIconWithPreview from '../../common/AnimatedIconWithPreview'; -import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import ListItem from '../../ui/ListItem'; import Modal from '../../ui/Modal'; @@ -90,9 +89,8 @@ const ReportModal = ({ size="smaller" ariaLabel={lang('Back')} onClick={handleBackClick} - > - - + iconName="arrow-left" + /> ) : ( + iconName="close" + /> )}

diff --git a/src/components/modals/stars/StarsBalanceModal.tsx b/src/components/modals/stars/StarsBalanceModal.tsx index d2fb56e23..c3c45c156 100644 --- a/src/components/modals/stars/StarsBalanceModal.tsx +++ b/src/components/modals/stars/StarsBalanceModal.tsx @@ -312,12 +312,10 @@ const StarsBalanceModal = ({ size="smaller" className={styles.closeButton} color="translucent" - onClick={() => closeStarsBalanceModal()} ariaLabel={lang('Close')} - > - - + iconName="close" + /> {currency !== TON_CURRENCY_CODE && }

diff --git a/src/components/modals/stars/gift/StarsGiftModal.tsx b/src/components/modals/stars/gift/StarsGiftModal.tsx index 9aa063997..6f47c35f0 100644 --- a/src/components/modals/stars/gift/StarsGiftModal.tsx +++ b/src/components/modals/stars/gift/StarsGiftModal.tsx @@ -24,7 +24,6 @@ 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'; @@ -162,12 +161,10 @@ const StarsGiftModal: FC = ({ size="smaller" className={styles.closeButton} color="translucent" - onClick={() => closeStarsGiftModal()} ariaLabel={oldLang('Close')} - > - - + iconName="close" + />

{user ? oldLang('GiftStarsTitle') : oldLang('Star.List.GetStars')} diff --git a/src/components/modals/webApp/MinimizedWebAppModal.tsx b/src/components/modals/webApp/MinimizedWebAppModal.tsx index 5ef531cac..ba325b8e2 100644 --- a/src/components/modals/webApp/MinimizedWebAppModal.tsx +++ b/src/components/modals/webApp/MinimizedWebAppModal.tsx @@ -16,7 +16,6 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import AvatarList from '../../common/AvatarList'; -import Icon from '../../common/icons/Icon'; import Button from '../../ui/Button'; import styles from './MinimizedWebAppModal.module.scss'; @@ -97,11 +96,11 @@ const MinimizedWebAppModal = ({ round color="translucent" size="tiny" + iconName="close" + iconClassName={styles.icon} ariaLabel={oldLang('Close')} onClick={handleCloseClick} - > - - + /> {renderTitle()} + />

); }; diff --git a/src/components/modals/webApp/WebAppModal.tsx b/src/components/modals/webApp/WebAppModal.tsx index 9ccbd8129..bceee5949 100644 --- a/src/components/modals/webApp/WebAppModal.tsx +++ b/src/components/modals/webApp/WebAppModal.tsx @@ -350,9 +350,8 @@ const WebAppModal: FC = ({ color="translucent" onClick={onTrigger} ariaLabel="More actions" - > - - + iconName="more" + /> ); }, [isMobile, supportMultiTabMode]); @@ -479,11 +478,11 @@ const WebAppModal: FC = ({ round color="translucent" size="tiny" + iconName="close" + iconClassName={styles.tabCloseIcon} ariaLabel={oldLang('Close')} onClick={handleTabClose} - > - - + />

{renderTabCurveBorder(styles.tabButtonRightCurve)}

@@ -509,11 +508,11 @@ const WebAppModal: FC = ({ round color="translucent" size="tiny" + iconName="close" + iconClassName={styles.tabCloseIcon} ariaLabel={oldLang('Close')} onClick={handleCloseMoreAppsTab} - > - - + />
{renderTabCurveBorder(styles.tabButtonRightCurve)}
@@ -531,9 +530,9 @@ const WebAppModal: FC = ({ color="translucent" size="tiny" onClick={handleOpenMoreAppsTabClick} - > - - + iconName="add" + iconClassName={styles.icon} + /> ); } @@ -614,9 +613,9 @@ const WebAppModal: FC = ({ color="translucent" size="tiny" onClick={handleFullscreenClick} - > - - + iconName="expand-modal" + iconClassName={styles.stateIcon} + /> )} + iconClassName={styles.stateIcon} + iconName="collapse-modal" + />
); diff --git a/src/components/payment/PaymentModal.tsx b/src/components/payment/PaymentModal.tsx index 163bdc760..b595714f2 100644 --- a/src/components/payment/PaymentModal.tsx +++ b/src/components/payment/PaymentModal.tsx @@ -27,7 +27,6 @@ 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'; @@ -567,11 +566,10 @@ const PaymentModal: FC = ({ color="translucent" round size="smaller" + iconName={step === PaymentStep.Checkout ? 'close' : 'arrow-left'} onClick={step === PaymentStep.Checkout ? closeModal : handleBackClick} ariaLabel={lang('Close')} - > - - + />

{modalHeader}

{step !== undefined ? ( diff --git a/src/components/payment/ReceiptModal.tsx b/src/components/payment/ReceiptModal.tsx index 4cf31e06f..b641e6d99 100644 --- a/src/components/payment/ReceiptModal.tsx +++ b/src/components/payment/ReceiptModal.tsx @@ -10,7 +10,6 @@ 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,9 +65,8 @@ const ReceiptModal: FC = ({ size="smaller" onClick={closeModal} ariaLabel="Close" - > - - + iconName="close" + />

{' '} {lang('PaymentReceipt')} diff --git a/src/components/right/Profile.scss b/src/components/right/Profile.scss index e14b4feb5..85fc4675d 100644 --- a/src/components/right/Profile.scss +++ b/src/components/right/Profile.scss @@ -216,10 +216,6 @@ border-radius: var(--border-radius-default-small); box-shadow: -1rem 0 1rem 1rem var(--color-background), -1rem 0 1rem 0.3125rem var(--color-background); - - .icon { - margin-left: 0.625rem; - } } .more-similar { diff --git a/src/components/right/Profile.tsx b/src/components/right/Profile.tsx index ec4179bc2..3c0d3de85 100644 --- a/src/components/right/Profile.tsx +++ b/src/components/right/Profile.tsx @@ -102,7 +102,6 @@ import Audio from '../common/Audio'; import Document from '../common/Document'; import SavedGift from '../common/gift/SavedGift'; 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'; @@ -1022,10 +1021,13 @@ const Profile = ({ ))} {!isCurrentUserPremium && ( <> - {} -
{renderText(oldLang('MoreSimilarText', limitSimilarPeers), ['simple_markdown'])} @@ -1054,10 +1056,8 @@ const Profile = ({ ))} {!isCurrentUserPremium && ( <> - {} -
{renderText(lang('MoreSimilarBotsDescription', { count: limitSimilarPeers }, { diff --git a/src/components/right/RightHeader.tsx b/src/components/right/RightHeader.tsx index 393fe0a09..9f157137f 100644 --- a/src/components/right/RightHeader.tsx +++ b/src/components/right/RightHeader.tsx @@ -40,7 +40,6 @@ import useLang from '../../hooks/useLang'; import useLastCallback from '../../hooks/useLastCallback'; 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'; @@ -385,9 +384,8 @@ const RightHeader: FC = ({ className={isOpen ? 'active' : ''} onClick={onTrigger} ariaLabel={lang('AriaLabelOpenMenu')} - > - - + iconName="more" + /> ); }, [isMobile, lang]); @@ -441,9 +439,8 @@ const RightHeader: FC = ({ size="smaller" ariaLabel={oldLang('Edit')} onClick={handleEditInviteClick} - > - - + iconName="edit" + /> )} {currentInviteInfo && currentInviteInfo.isRevoked && ( <> @@ -453,9 +450,8 @@ const RightHeader: FC = ({ size="smaller" ariaLabel={oldLang('Delete')} onClick={openDeleteDialog} - > - - + iconName="delete" + /> = ({ size="smaller" ariaLabel={oldLang('AddContact')} onClick={handleAddContact} - > - - + iconName="add-user" + /> )} {canManage && !isInsideTopic && ( + iconName="edit" + /> )} {canEditBot && ( + iconName="edit" + /> )} {canEditTopic && ( + iconName="edit" + /> )} {canViewStatistics && ( + iconName="stats" + /> )} {isOwnProfile && ( + iconName="edit" + /> )} diff --git a/src/components/story/Story.tsx b/src/components/story/Story.tsx index a7374af70..527c4fab5 100644 --- a/src/components/story/Story.tsx +++ b/src/components/story/Story.tsx @@ -572,9 +572,8 @@ function Story({ onClick={onTrigger} className={buildClassName(styles.button, isOpen && 'active')} ariaLabel={lang('AriaLabelOpenMenu')} - > - - + iconName="more" + /> ); }; }, [isMobile, lang]); @@ -716,9 +715,8 @@ function Story({ disabled={!hasFullData} onClick={handleVolumeMuted} ariaLabel={oldLang('Volume')} - > - - + iconName={(isMuted || noSound) ? 'speaker-muted-story' : 'speaker-story'} + /> )} - - + iconName="close" + />
); diff --git a/src/components/story/StoryFooter.tsx b/src/components/story/StoryFooter.tsx index 04c5c69e2..8f8fb1e67 100644 --- a/src/components/story/StoryFooter.tsx +++ b/src/components/story/StoryFooter.tsx @@ -126,9 +126,8 @@ const StoryFooter = ({ onClick={handleForwardClick} ariaLabel={lang('Forward')} className={styles.footerItem} - > - - + iconName="forward" + /> )} {isChannel && ( <> @@ -140,9 +139,8 @@ const StoryFooter = ({ size="smaller" nonInteractive ariaLabel={lang('PublicShares')} - > - - + iconName="loop" + /> {forwardsCount} )} diff --git a/src/components/story/StoryViewer.tsx b/src/components/story/StoryViewer.tsx index eca27fa64..57e5e59eb 100644 --- a/src/components/story/StoryViewer.tsx +++ b/src/components/story/StoryViewer.tsx @@ -26,7 +26,6 @@ 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 StoryDeleteConfirmModal from './StoryDeleteConfirmModal'; @@ -156,9 +155,8 @@ function StoryViewer({ color="translucent-white" ariaLabel={lang('Close')} onClick={handleClose} - > - - + iconName="close" + /> ; type?: 'button' | 'submit' | 'reset'; - children: React.ReactNode; + children?: React.ReactNode; size?: 'default' | 'smaller' | 'tiny'; color?: ( 'primary' | 'secondary' | 'gray' | 'danger' | 'translucent' | 'translucent-white' | 'translucent-black' @@ -160,7 +160,7 @@ const Button: FC = ({ isRectangular && 'rectangular', noForcedUpperCase && 'no-upper-case', inline && 'inline', - iconAlignment && iconName && `content-with-icon-${iconAlignment}`, + Boolean(iconName && children) && `content-with-icon-${iconAlignment}`, ); const handleClick = useLastCallback((e: ReactMouseEvent) => { @@ -209,6 +209,10 @@ const Button: FC = ({ return children; } + if (!children) { + return icon; + } + return (
{icon} diff --git a/src/components/ui/DropdownMenu.tsx b/src/components/ui/DropdownMenu.tsx index c7805884f..113fdcb00 100644 --- a/src/components/ui/DropdownMenu.tsx +++ b/src/components/ui/DropdownMenu.tsx @@ -4,7 +4,6 @@ import { useCallback, useMemo, useRef, useState, } from '../../lib/teact/teact'; -import Icon from '../common/icons/Icon'; import Button from './Button'; import Menu from './Menu'; @@ -89,11 +88,10 @@ const DropdownMenu: FC = ({ size="smaller" color="translucent" className={isMenuOpen ? 'active' : ''} + iconName="more" onClick={onTrigger} ariaLabel="More actions" - > - - + /> ); }, [trigger]); diff --git a/src/components/ui/ImageCropper.tsx b/src/components/ui/ImageCropper.tsx index 750f45261..4dffefc9a 100644 --- a/src/components/ui/ImageCropper.tsx +++ b/src/components/ui/ImageCropper.tsx @@ -9,7 +9,6 @@ import { REM } from '../common/helpers/mediaDimensions'; import useLastCallback from '../../hooks/useLastCallback'; import useWindowSize from '../../hooks/window/useWindowSize'; -import Icon from '../common/icons/Icon'; import Button from './Button'; import RangeSlider from './RangeSlider'; @@ -201,9 +200,14 @@ const ImageCropper = ({ value={zoom} onChange={handleZoomChange} /> - +
); diff --git a/src/components/ui/ListItem.tsx b/src/components/ui/ListItem.tsx index 6e3564471..89ac0b8df 100644 --- a/src/components/ui/ListItem.tsx +++ b/src/components/ui/ListItem.tsx @@ -264,9 +264,8 @@ const ListItem = ({ size="smaller" onClick={handleSecondaryIconClick} onMouseDown={handleSecondaryIconMouseDown} - > - - + iconName={secondaryIcon} + /> )} {rightElement} diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx index 1ce3094cb..92bedc0e6 100644 --- a/src/components/ui/Modal.tsx +++ b/src/components/ui/Modal.tsx @@ -16,7 +16,6 @@ import useLayoutEffectWithPrevDeps from '../../hooks/useLayoutEffectWithPrevDeps import useOldLang from '../../hooks/useOldLang'; import useShowTransition from '../../hooks/useShowTransition'; -import Icon from '../common/icons/Icon'; import Button, { type OwnProps as ButtonProps } from './Button'; import ModalStarBalanceBar from './ModalStarBalanceBar'; import Portal from './Portal'; @@ -151,11 +150,10 @@ const Modal: FC = ({ round color={absoluteCloseButtonColor} size="smaller" + iconName="close" ariaLabel={lang('Close')} onClick={onClose} - > - - + /> ) : undefined; return title ? ( diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx index 7515215f1..1c07c80f6 100644 --- a/src/components/ui/SearchInput.tsx +++ b/src/components/ui/SearchInput.tsx @@ -198,24 +198,22 @@ const SearchInput: FC = ({ round size="tiny" color="translucent" + iconName="up" onClick={onUpClick} disabled={!onUpClick} ariaLabel={lang('AriaSearchOlderResult')} - > - - + /> )} {hasDownButton && ( + /> )} = ({ round size="tiny" color="translucent" + iconName="close" onClick={onReset} - > - - + /> ) )} diff --git a/src/components/ui/ShowMoreButton.tsx b/src/components/ui/ShowMoreButton.tsx index 030fbcafc..0ad8754e1 100644 --- a/src/components/ui/ShowMoreButton.tsx +++ b/src/components/ui/ShowMoreButton.tsx @@ -2,7 +2,6 @@ import type { FC } from '../../lib/teact/teact'; import useOldLang from '../../hooks/useOldLang'; -import Icon from '../common/icons/Icon'; import Button from './Button'; import './ShowMoreButton.scss'; @@ -32,8 +31,8 @@ const ShowMoreButton: FC = ({ isLoading={isLoading} isRtl={lang.isRtl} onClick={onClick} + iconName="down" > - Show {' '} {count}