ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button Icons: Migrate button icons to new api (#6505)

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-11-22 12:54:16 +01:00
parent 281a95d0a0
commit d81fe3ec96
94 changed files with 429 additions and 576 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/auth/AuthPhoneNumber.tsx
View File

@ -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<StateProps> = ({
return (
<div id="auth-phone-number-form" className="custom-scroll">
{hasActiveAccount && (
<Button size="smaller" round color="translucent" className="auth-close" onClick={handleBackNavigation}>
<Icon name="close" />
</Button>
<Button
size="smaller"
round
color="translucent"
className="auth-close"
iconName="close"
onClick={handleBackNavigation}
/>
)}
<div className="auth-form">
<div id="logo" />

12
src/components/auth/AuthQrCode.tsx
View File

@ -23,7 +23,6 @@ import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecat
import useMultiaccountInfo from '../../hooks/useMultiaccountInfo';
import AnimatedIcon from '../common/AnimatedIcon';
import Icon from '../common/icons/Icon';
import Button from '../ui/Button';
import Loading from '../ui/Loading';
@ -157,9 +156,14 @@ const AuthCode = ({
return (
<div id="auth-qr-form" className="custom-scroll">
{hasActiveAccount && (
<Button size="smaller" round color="translucent" className="auth-close" onClick={handleBackNavigation}>
<Icon name="close" />
</Button>
<Button
size="smaller"
round
color="translucent"
className="auth-close"
iconName="close"
onClick={handleBackNavigation}
/>
)}
<div className="auth-form qr">
<div className="qr-outer">

51
src/components/calls/group/GroupCall.tsx
View File

@ -30,7 +30,6 @@ 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';
@ -273,9 +272,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
onClick={handleToggleFullscreen}
className={buildClassName(styles.headerButton, styles.firstButton)}
ariaLabel={lang(isFullscreen ? 'AccExitFullscreen' : 'AccSwitchToFullscreen')}
>
<Icon name={isFullscreen ? 'smallscreen' : 'fullscreen'} />
</Button>
iconName={isFullscreen ? 'smallscreen' : 'fullscreen'}
/>
)}
<h3 className={buildClassName(styles.title, styles.bigger)}>
@ -290,9 +288,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
className={buildClassName(styles.headerButton, styles.videosHeaderLastButton)}
onClick={handleToggleSidebar}
ariaLabel={lang('AccDescrExpandPanel')}
>
<Icon name="sidebar" />
</Button>
iconName="sidebar"
/>
)}
</div>
@ -320,9 +317,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
)}
onClick={handleToggleFullscreen}
ariaLabel={lang('AccSwitchToFullscreen')}
>
<Icon name="fullscreen" />
</Button>
iconName="fullscreen"
/>
)}
{isMobile && (
@ -333,9 +329,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
onClick={handleToggleGroupCallPanel}
className={buildClassName(styles.headerButton, styles.firstButton)}
ariaLabel={lang('Close')}
>
<Icon name="close" />
</Button>
iconName="close"
/>
)}
{isLandscapeWithVideos && (
@ -350,9 +345,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
color="translucent"
onClick={handleToggleSidebar}
ariaLabel={lang('AccDescrCollapsePanel')}
>
<Icon name="sidebar" />
</Button>
iconName="sidebar"
/>
)}
<div className={styles.panelHeaderText}>
@ -378,9 +372,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
color="translucent"
onClick={handleInviteMember}
ariaLabel={lang('VoipGroupInviteMember')}
>
<Icon name="add-user" />
</Button>
iconName="add-user"
/>
)}
</div>
@ -470,9 +463,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
onClick={handleClickVideo}
ariaLabel={lang(hasVideo ? 'VoipStopVideo' : 'VoipStartVideo')}
disabled={isConnecting}
>
<Icon name={!hasVideo ? 'video-stop' : 'video'} />
</Button>
iconName={!hasVideo ? 'video-stop' : 'video'}
/>
<Button
round
@ -486,9 +478,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
onClick={handleToggleGroupCallPresentation}
ariaLabel={lang(hasPresentation ? 'lng_group_call_screen_share_stop' : 'lng_group_call_tooltip_screen')}
disabled={isConnecting || !IS_SCREENSHARE_SUPPORTED}
>
<Icon name={!hasPresentation ? 'share-screen-stop' : 'share-screen'} />
</Button>
iconName={!hasPresentation ? 'share-screen-stop' : 'share-screen'}
/>
<MicrophoneButton className={styles.actionButton} />
@ -503,9 +494,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
)}
ariaLabel={lang('lng_group_call_settings')}
disabled
>
<Icon name="settings-filled" />
</Button>
iconName="settings-filled"
/>
<Button
round
@ -517,9 +507,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
)}
onClick={handleLeaveGroupCall}
ariaLabel={lang('lng_group_call_leave')}
>
<Icon name="close" />
</Button>
iconName="close"
/>
</div>
<Modal

6
src/components/calls/group/GroupCallParticipantVideo.tsx
View File

@ -25,7 +25,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
import useOldLang from '../../../hooks/useOldLang';
import FullNameTitle from '../../common/FullNameTitle';
import Icon from '../../common/icons/Icon';
import Button from '../../ui/Button';
import Skeleton from '../../ui/placeholder/Skeleton';
import GroupCallParticipantMenu from './GroupCallParticipantMenu';
@ -287,9 +286,8 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
className={styles.pinButton}
ariaLabel={lang(isPinned ? 'lng_group_call_context_unpin_camera' : 'lng_group_call_context_pin_camera')}
onClick={handleClickPin}
>
<Icon name={isPinned ? 'unpin' : 'pin'} />
</Button>
iconName={isPinned ? 'unpin' : 'pin'}
/>
)}
<div className={styles.bottomPanel}>
<div className={styles.info}>

11
src/components/calls/phone/PhoneCall.tsx
View File

@ -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<StateProps> = ({
round
size="smaller"
color="translucent"
iconName={isFullscreen ? 'smallscreen' : 'fullscreen'}
onClick={handleToggleFullscreen}
ariaLabel={lang(isFullscreen ? 'AccExitFullscreen' : 'AccSwitchToFullscreen')}
>
<Icon name={isFullscreen ? 'smallscreen' : 'fullscreen'} />
</Button>
/>
)}
<Button
round
size="smaller"
color="translucent"
iconName="close"
onClick={handleClose}
className={styles.closeButton}
>
<Icon name="close" />
</Button>
/>
</div>
<div
className={buildClassName(styles.emojisBackdrop, isEmojiOpen && styles.open)}

5
src/components/common/Audio.tsx
View File

@ -457,9 +457,8 @@ const Audio = ({
className="download-button"
ariaLabel={isDownloading ? 'Cancel download' : 'Download'}
onClick={handleDownloadClick}
>
<Icon name={isDownloading ? 'close' : 'arrow-down'} />
</Button>
iconName={isDownloading ? 'close' : 'arrow-down'}
/>
)}
{origin === AudioOrigin.Search && renderWithTitle()}
{origin !== AudioOrigin.Search && audio && renderAudio(

16
src/components/common/CalendarModal.tsx
View File

@ -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<OwnProps> = ({
round
size="smaller"
color="translucent"
iconName="close"
onClick={onClose}
>
<Icon name="close" />
</Button>
/>
<h4>
{lang(`lng_month${currentMonth + 1}`)}
@ -280,21 +278,19 @@ const CalendarModal: FC<OwnProps> = ({
round
size="smaller"
color="translucent"
iconName="previous"
disabled={shouldDisablePrevMonth}
onClick={!shouldDisablePrevMonth ? handlePrevMonth : undefined}
>
<Icon name="previous" />
</Button>
/>
<Button
round
size="smaller"
color="translucent"
iconName="next"
disabled={shouldDisableNextMonth}
onClick={!shouldDisableNextMonth ? handleNextMonth : undefined}
>
<Icon name="next" />
</Button>
/>
</div>
</div>

25
src/components/common/Composer.tsx
View File

@ -2216,9 +2216,8 @@ const Composer: FC<OwnProps & StateProps> = ({
ariaLabel={lang(
isSilentPosting ? 'AriaComposerSilentPostingDisable' : 'AriaComposerSilentPostingEnable',
)}
>
<Icon name={isSilentPosting ? 'mute' : 'unmute'} />
</Button>
iconName={isSilentPosting ? 'mute' : 'unmute'}
/>
</Transition>
)}
{withScheduledButton && (
@ -2229,9 +2228,8 @@ const Composer: FC<OwnProps & StateProps> = ({
color="translucent"
onClick={handleAllScheduledClick}
ariaLabel={lang('AriaComposerOpenScheduled')}
>
<Icon name="scheduled" />
</Button>
iconName="scheduled"
/>
)}
{shouldShowGiftButton && (
<Button
@ -2240,9 +2238,8 @@ const Composer: FC<OwnProps & StateProps> = ({
className="composer-action-button"
color="translucent"
onClick={handleGiftClick}
>
<Icon name="gift" />
</Button>
iconName="gift"
/>
)}
{shouldShowSuggestedPostButton && (
<Button
@ -2251,9 +2248,8 @@ const Composer: FC<OwnProps & StateProps> = ({
className="composer-action-button"
color="translucent"
onClick={handleSuggestPostClick}
>
<Icon name="cash-circle" />
</Button>
iconName="cash-circle"
/>
)}
{Boolean(botKeyboardMessageId) && !activeVoiceRecording && !editingMessage && (
<ResponsiveHoverButton
@ -2367,9 +2363,8 @@ const Composer: FC<OwnProps & StateProps> = ({
className="cancel"
onClick={stopRecordingVoice}
ariaLabel="Cancel voice recording"
>
<Icon name="delete" />
</Button>
iconName="delete"
/>
)}
{isInStoryViewer && !activeVoiceRecording && (
<Button

6
src/components/common/CountryPickerModal.tsx
View File

@ -14,7 +14,6 @@ import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
import Button from '../ui/Button';
import Modal from '../ui/Modal';
import Icon from './icons/Icon';
import ItemPicker from './pickers/ItemPicker';
import styles from './CountryPickerModal.module.scss';
@ -85,9 +84,8 @@ const CountryPickerModal: FC<OwnProps> = ({
size="smaller"
color="translucent"
onClick={onClose}
>
<Icon name="close" />
</Button>
iconName="close"
/>
<h4 className={styles.pickerTitle}>
{lang('BoostingSelectCountry')}

7
src/components/common/GifButton.tsx
View File

@ -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<OwnProps> = ({
className="gif-unsave-button"
color="dark"
pill
iconName="close"
iconClassName="gif-unsave-button-icon"
noFastClick
onClick={handleUnsaveClick}
>
<Icon name="close" className="gif-unsave-button-icon" />
</Button>
/>
)}
{withThumb && (
<canvas

11
src/components/common/LinkField.tsx
View File

@ -13,7 +13,6 @@ import useOldLang from '../../hooks/useOldLang';
import Button from '../ui/Button';
import DropdownMenu from '../ui/DropdownMenu';
import MenuItem from '../ui/MenuItem';
import Icon from './icons/Icon';
import styles from './LinkField.module.scss';
@ -68,11 +67,10 @@ const InviteLink: FC<OwnProps> = ({
size="smaller"
color="translucent"
className={isOpen ? 'active' : ''}
iconName="more"
onClick={onTrigger}
ariaLabel={lang('AriaLabelOpenMenu')}
>
<Icon name="more" />
</Button>
/>
);
}, [isMobile, lang]);
@ -94,11 +92,10 @@ const InviteLink: FC<OwnProps> = ({
className={styles.copy}
size="smaller"
round
iconName="copy"
disabled={isDisabled}
onClick={handleCopyClick}
>
<Icon name="copy" />
</Button>
/>
) : (
<DropdownMenu
className={styles.moreMenu}

6
src/components/common/PrivacySettingsNoticeModal.tsx
View File

@ -17,7 +17,6 @@ import Button from '../ui/Button';
import Modal, { ANIMATION_DURATION } from '../ui/Modal';
import Separator from '../ui/Separator';
import AnimatedIconWithPreview from './AnimatedIconWithPreview';
import Icon from './icons/Icon';
import styles from './PrivacySettingsNoticeModal.module.scss';
@ -91,9 +90,8 @@ const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & Sta
size="smaller"
onClick={handleClose}
ariaLabel="Close"
>
<Icon name="close" />
</Button>
iconName="close"
/>
<AnimatedIconWithPreview
tgsUrl={isReadDate ? LOCAL_TGS_URLS.ReadTime : LOCAL_TGS_URLS.LastSeen}
size={84}

11
src/components/common/SliderDots.tsx
View File

@ -5,7 +5,6 @@ import { IS_TOUCH_ENV } from '../../util/browser/windowEnvironment';
import buildClassName from '../../util/buildClassName';
import Button from '../ui/Button';
import Icon from './icons/Icon';
import styles from './SliderDots.module.scss';
@ -46,9 +45,8 @@ const SliderDots: FC<OwnProps> = ({
disabled={active === 0}
round
onClick={handleGoBack}
>
<Icon name="previous" />
</Button>
iconName="previous"
/>
)}
<div className={styles.root} style={`--start-from: ${startFrom}; --length: ${length}; --count: ${count};`}>
{Array(length).fill(undefined).map((_, i) => {
@ -81,9 +79,8 @@ const SliderDots: FC<OwnProps> = ({
round
disabled={active === length - 1}
onClick={handleGoForward}
>
<Icon name="next" />
</Button>
iconName="next"
/>
)}
</div>
);

5
src/components/common/StickerButton.tsx
View File

@ -329,9 +329,8 @@ const StickerButton = <T extends number | ApiSticker | ApiBotInlineMediaResult |
round
noFastClick
onClick={handleRemoveClick}
>
<Icon name="close" />
</Button>
iconName="close"
/>
)}
{Boolean(contextMenuItems.length) && (
<Menu

5
src/components/common/StickerSet.tsx
View File

@ -347,9 +347,8 @@ const StickerSet: FC<OwnProps & StateProps> = ({
color="translucent"
onClick={handleDefaultStatusIconClick}
key="default-status-icon"
>
<Icon name="star" />
</Button>
iconName="star"
/>
)}
{shouldRender && stickerSet.reactions?.map((reaction) => {
const reactionId = getReactionKey(reaction);

17
src/components/common/StickerSetModal.tsx
View File

@ -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<OwnProps & StateProps> = ({
className={isMenuOpen ? 'active' : ''}
onClick={onTrigger}
ariaLabel="More actions"
>
<Icon name="more" />
</Button>
iconName="more"
/>
);
}, [isMobile]);
@ -194,9 +192,14 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
return (
<div className={fullClassName} dir={lang.isRtl ? 'rtl' : undefined}>
<Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose}>
<Icon name="close" />
</Button>
<Button
round
color="translucent"
size="smaller"
ariaLabel={lang('Close')}
onClick={onClose}
iconName="close"
/>
<div className="modal-title">
{renderingStickerSet ? renderText(renderingStickerSet.title, ['emoji', 'links']) : lang('AccDescrStickerSet')}
</div>

17
src/components/common/pickers/ChatOrUserPicker.tsx
View File

@ -35,7 +35,6 @@ 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';
@ -247,9 +246,14 @@ const ChatOrUserPicker: FC<OwnProps> = ({
return (
<>
<div className="modal-header modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
<Button round color="translucent" size="smaller" ariaLabel={oldLang('Back')} onClick={handleHeaderBackClick}>
<Icon name="arrow-left" />
</Button>
<Button
round
color="translucent"
size="smaller"
ariaLabel={oldLang('Back')}
onClick={handleHeaderBackClick}
iconName="arrow-left"
/>
<InputText
ref={topicSearchRef}
value={topicSearch}
@ -300,9 +304,8 @@ const ChatOrUserPicker: FC<OwnProps> = ({
size="smaller"
ariaLabel={oldLang('Close')}
onClick={onClose}
>
<Icon name="close" />
</Button>
iconName="close"
/>
<InputText
ref={searchRef}
value={search}

6
src/components/left/ArchivedChats.tsx
View File

@ -16,7 +16,6 @@ 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';
@ -98,9 +97,8 @@ const ArchivedChats: FC<OwnProps> = ({
shouldDisableDropdownMenuTransitionRef.current && lang.isRtl && 'disable-transition',
)}
onTransitionEnd={handleDropdownMenuTransitionEnd}
>
<Icon name="arrow-left" />
</Button>
iconName="arrow-left"
/>
{shouldRenderTitle && <h3 className={titleClassNames}>{lang('ArchivedChats')}</h3>}
<div className="story-toggler-wrapper">
<StoryToggler canShow isArchived />

6
src/components/left/ConnectionStatusOverlay.tsx
View File

@ -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<OwnProps> = ({
round
size="tiny"
color="translucent-black"
>
<Icon name="close" />
</Button>
iconName="close"
/>
</div>
);
};

3
src/components/left/main/EmptyFolder.tsx
View File

@ -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<OwnProps & StateProps> = ({
ripple={!isMobile}
fluid
pill
iconName="settings"
onClick={handleEditFolder}
isRtl={lang.isRtl}
>
<Icon name="settings" />
<div className={styles.buttonText}>
{lang('ChatList.EmptyChatListEditFilter')}
</div>

5
src/components/left/main/LeftMainHeader.tsx
View File

@ -297,9 +297,8 @@ const LeftMainHeader = ({
ariaLabel={`${oldLang('ShortcutsController.Others.LockByPasscode')} (Ctrl+Shift+L)`}
onClick={handleLockScreen}
className={buildClassName(!isCurrentUserPremium && 'extra-spacing')}
>
<Icon name="lock" />
</Button>
iconName="lock"
/>
)}
<ShowTransition
isOpen={connectionStatusPosition === 'overlay'}

6
src/components/left/main/forum/ForumPanel.tsx
View File

@ -39,7 +39,6 @@ import useOrderDiff from '../hooks/useOrderDiff';
import GroupCallTopPane from '../../../calls/group/GroupCallTopPane';
import GroupChatInfo from '../../../common/GroupChatInfo';
import Icon from '../../../common/icons/Icon';
import PrivateChatInfo from '../../../common/PrivateChatInfo';
import HeaderActions from '../../../middle/HeaderActions';
import Button from '../../../ui/Button';
@ -252,9 +251,8 @@ const ForumPanel = ({
color="translucent"
onClick={handleClose}
ariaLabel={lang('Close')}
>
<Icon name="close" />
</Button>
iconName="close"
/>
{isUserId(chat.id) ? (
<PrivateChatInfo

6
src/components/left/newChat/NewChatStep1.tsx
View File

@ -11,7 +11,6 @@ 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';
@ -96,9 +95,8 @@ const NewChatStep1: FC<OwnProps & StateProps> = ({
color="translucent"
onClick={onReset}
ariaLabel="Return to Chat List"
>
<Icon name="arrow-left" />
</Button>
iconName="arrow-left"
/>
<h3>{lang('GroupAddMembers')}</h3>
</div>
<div className="NewChat-inner step-1">

7
src/components/left/newChat/NewChatStep2.tsx
View File

@ -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<OwnProps & StateProps> = ({
round
size="smaller"
color="translucent"
onClick={() => onReset()}
ariaLabel="Return to member selection"
>
<Icon name="arrow-left" />
</Button>
iconName="arrow-left"
/>
<h3>{lang(isChannel ? 'NewChannel' : 'NewGroup')}</h3>
</div>
<div className="NewChat-inner step-2">

6
src/components/left/search/RecentContacts.tsx
View File

@ -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<OwnProps & StateProps> = ({
ariaLabel={lang('Clear')}
onClick={handleClearRecentlyFoundChats}
isRtl={lang.isRtl}
>
<Icon name="close" />
</Button>
iconName="close"
/>
</h3>
{recentlyFoundChatIds.map((id) => (
<LeftSearchResultChat

5
src/components/left/settings/SettingsActiveSession.tsx
View File

@ -11,7 +11,6 @@ import getSessionIcon from './helpers/getSessionIcon';
import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
import useLang from '../../../hooks/useLang';
import Icon from '../../common/icons/Icon';
import Button from '../../ui/Button';
import ListItem from '../../ui/ListItem';
import Modal from '../../ui/Modal';
@ -63,9 +62,7 @@ const SettingsActiveSession: FC<OwnProps & StateProps> = ({
function renderHeader() {
return (
<div className="modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
<Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose}>
<Icon name="close" />
</Button>
<Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose} iconName="close" />
<div className="modal-title">{lang('SessionPreviewTitle')}</div>
<Button
color="danger"

5
src/components/left/settings/SettingsActiveWebsite.tsx
View File

@ -11,7 +11,6 @@ import useOldLang from '../../../hooks/useOldLang';
import Avatar from '../../common/Avatar';
import FullNameTitle from '../../common/FullNameTitle';
import Icon from '../../common/icons/Icon';
import Button from '../../ui/Button';
import Modal from '../../ui/Modal';
@ -52,9 +51,7 @@ const SettingsActiveWebsite: FC<OwnProps & StateProps> = ({
function renderHeader() {
return (
<div className="modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
<Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose}>
<Icon name="close" />
</Button>
<Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose} iconName="close" />
<div className="modal-title">{lang('WebSessionsTitle')}</div>
<Button
color="danger"

17
src/components/left/settings/SettingsHeader.tsx
View File

@ -11,7 +11,6 @@ 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';
@ -70,9 +69,8 @@ const SettingsHeader: FC<OwnProps> = ({
className={isOpen ? 'active' : ''}
onClick={onTrigger}
ariaLabel="More actions"
>
<Icon name="more" />
</Button>
iconName="more"
/>
);
}, [isMobile]);
@ -268,12 +266,10 @@ const SettingsHeader: FC<OwnProps> = ({
ripple={!isMobile}
size="smaller"
color="translucent"
onClick={() => openSettingsScreen({ screen: SettingsScreens.EditProfile })}
ariaLabel={oldLang('lng_settings_information')}
>
<Icon name="edit" />
</Button>
iconName="edit"
/>
<DropdownMenu
className="settings-more-menu"
trigger={SettingsMenuButton}
@ -294,9 +290,8 @@ const SettingsHeader: FC<OwnProps> = ({
color="translucent"
onClick={onReset}
ariaLabel={oldLang('AccDescrGoBack')}
>
<Icon name="arrow-left" />
</Button>
iconName="arrow-left"
/>
{renderHeaderContent()}
<ConfirmDialog
isOpen={isSignOutDialogOpen}

3
src/components/left/settings/folders/SettingsFoldersMain.tsx
View File

@ -238,15 +238,14 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
{canCreateNewFolder && (
<Button
// TODO: Move icon into button prop
className="settings-button with-icon"
color="primary"
pill
fluid
onClick={handleCreateFolder}
isRtl={lang.isRtl}
iconName="add"
>
<Icon name="add" />
{lang('CreateNewFilter')}
</Button>
)}

13
src/components/main/FoldersSidebar.tsx
View File

@ -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')}
>
<Icon name="menu" className={styles.icon} />
</Button>
iconName="menu"
iconClassName={styles.icon}
/>
);
}, [lang]);
@ -175,9 +174,9 @@ const FoldersSidebar = ({
color="translucent"
className={buildClassName(styles.menuButton, styles.settingsButton)}
onClick={handleSettingsClick}
>
<Icon name="tools" className={styles.icon} />
</Button>
iconName="tools"
iconClassName={styles.icon}
/>
</div>
);
};

5
src/components/main/premium/GiveawayModal.tsx
View File

@ -698,9 +698,8 @@ const GiveawayModal: FC<OwnProps & StateProps> = ({
color="translucent"
onClick={handleClose}
ariaLabel={lang('Close')}
>
<Icon name="close" />
</Button>
iconName="close"
/>
<img className={styles.logo} src={PremiumLogo} alt="" draggable={false} />
<h2 className={styles.headerText}>
{renderText(lang('BoostingBoostsViaGifts'))}

6
src/components/main/premium/PremiumFeatureModal.tsx
View File

@ -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<OwnProps> = ({
color={hasHeaderBackdrop ? 'translucent-white' : 'translucent'}
onClick={onBack}
ariaLabel={oldLang('Back')}
>
<Icon name="arrow-left" />
</Button>
iconName="arrow-left"
/>
<div className={styles.preview} />

6
src/components/main/premium/PremiumMainModal.tsx
View File

@ -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<OwnProps & StateProps> = ({
color="translucent"
onClick={() => closePremiumModal()}
ariaLabel={oldLang('Close')}
>
<Icon name="close" />
</Button>
iconName="close"
/>
{renderHeader()}
{!isPremium && !isGift && renderSubscriptionOptions()}
<div className={buildClassName(styles.header, isHeaderHidden && styles.hiddenHeader)}>

1
src/components/main/premium/common/PremiumLimitReachedModal.module.scss
View File

@ -48,7 +48,6 @@
}
.x2 {
margin-inline-start: 0.25rem;
font-size: 1.25rem;
}

5
src/components/main/premium/common/PremiumLimitReachedModal.tsx
View File

@ -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<OwnProps & StateProps> = ({
isText
onClick={handleClick}
color="primary"
iconName="double-badge"
iconClassName={styles.x2}
iconAlignment="end"
>
{lang('IncreaseLimit')}
<Icon name="double-badge" className={styles.x2} />
</Button>
)}
</div>

6
src/components/mediaViewer/MediaViewer.tsx
View File

@ -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}
>
<Icon name="close" />
</Button>
/>
)}
<Transition activeKey={animationKey.current!} name={headerAnimation}>
<SenderInfo

45
src/components/mediaViewer/MediaViewerActions.tsx
View File

@ -164,9 +164,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
className={isOpen ? 'active' : undefined}
onClick={onTrigger}
ariaLabel="More actions"
>
<Icon name="more" />
</Button>
iconName="more"
/>
);
}, []);
@ -209,9 +208,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
size="smaller"
color="translucent-white"
ariaLabel={lang('AccActionDownload')}
>
<Icon name="download" />
</Button>
iconName="download"
/>
));
}
@ -319,9 +317,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
color="translucent-white"
ariaLabel={lang('Forward')}
onClick={onForward}
>
<Icon name="forward" />
</Button>
iconName="forward"
/>
)}
{renderDownloadButton()}
<Button
@ -330,18 +327,16 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
color="translucent-white"
ariaLabel={lang('MediaZoomOut')}
onClick={handleZoomOut}
>
<Icon name="zoom-out" />
</Button>
iconName="zoom-out"
/>
<Button
round
size="smaller"
color="translucent-white"
ariaLabel={lang('MediaZoomIn')}
onClick={handleZoomIn}
>
<Icon name="zoom-in" />
</Button>
iconName="zoom-in"
/>
{canReportAvatar && (
<Button
round
@ -349,9 +344,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
color="translucent-white"
ariaLabel={lang(isVideo ? 'PeerInfo.ReportProfileVideo' : 'PeerInfo.ReportProfilePhoto')}
onClick={onReport}
>
<Icon name="flag" />
</Button>
iconName="flag"
/>
)}
{canUpdate && (
<Button
@ -360,9 +354,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
color="translucent-white"
ariaLabel={lang('ProfilePhoto.SetMainPhoto')}
onClick={handleUpdate}
>
<Icon name="copy-media" />
</Button>
iconName="copy-media"
/>
)}
{canDelete && (
<Button
@ -371,9 +364,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
color="translucent-white"
ariaLabel={lang('Delete')}
onClick={openDeleteModalHandler}
>
<Icon name="delete" />
</Button>
iconName="delete"
/>
)}
<Button
round
@ -381,9 +373,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
color="translucent-white"
ariaLabel={lang('Close')}
onClick={onCloseMediaViewer}
>
<Icon name="close" />
</Button>
iconName="close"
/>
{canDelete && renderDeleteModal()}
</div>
);

5
src/components/mediaViewer/VideoPlayer.tsx
View File

@ -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<OwnProps> = ({
/>
</div>
{shouldRenderPlayButton && (
<Button round className={`play-button ${playButtonClassNames}`} onClick={togglePlayState}>
<Icon name="play" />
</Button>
<Button round className={`play-button ${playButtonClassNames}`} onClick={togglePlayState} iconName="play" />
)}
{shouldRenderSpinner && (
<div className={['spinner-container', spinnerClassNames].join(' ')}>

21
src/components/mediaViewer/VideoPlayerControls.tsx
View File

@ -24,7 +24,6 @@ import useOldLang from '../../hooks/useOldLang';
import useControlsSignal from './hooks/useControlsSignal';
import AnimatedFileSize from '../common/AnimatedFileSize';
import Icon from '../common/icons/Icon';
import Button from '../ui/Button';
import Menu from '../ui/Menu';
import MenuItem from '../ui/MenuItem';
@ -190,9 +189,8 @@ const VideoPlayerControls: FC<OwnProps> = ({
className="play"
round
onClick={onPlayPause}
>
<Icon name={isPlaying ? 'pause' : 'play'} />
</Button>
iconName={isPlaying ? 'pause' : 'play'}
/>
<Button
ariaLabel="Volume"
size="tiny"
@ -200,9 +198,8 @@ const VideoPlayerControls: FC<OwnProps> = ({
className="volume"
round
onClick={onVolumeClick}
>
<Icon name={volumeIcon} />
</Button>
iconName={volumeIcon}
/>
{!IS_IOS && (
<RangeSlider bold className="volume-slider" value={isMuted ? 0 : volume * 100} onChange={onVolumeChange} />
)}
@ -231,9 +228,8 @@ const VideoPlayerControls: FC<OwnProps> = ({
className="fullscreen"
round
onClick={onPictureInPictureChange}
>
<Icon name="pip" />
</Button>
iconName="pip"
/>
)}
{isFullscreenSupported && (
<Button
@ -243,9 +239,8 @@ const VideoPlayerControls: FC<OwnProps> = ({
className="fullscreen"
round
onClick={onChangeFullscreen}
>
<Icon name={isFullscreen ? 'smallscreen' : 'fullscreen'} />
</Button>
iconName={isFullscreen ? 'smallscreen' : 'fullscreen'}
/>
)}
</div>
<Menu

23
src/components/middle/HeaderActions.tsx
View File

@ -41,7 +41,6 @@ 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';
@ -296,9 +295,8 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
className={isOpen ? 'active' : ''}
onClick={onTrigger}
ariaLabel={lang('TranslateMessage')}
>
<Icon name="language" />
</Button>
iconName="language"
/>
);
}, [isRightColumnShown, lang]);
@ -382,9 +380,8 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
size="smaller"
onClick={handleSearchClick}
ariaLabel={lang('Conversation.SearchPlaceholder')}
>
<Icon name="search" />
</Button>
iconName="search"
/>
)}
{canCall && (
<Button
@ -393,9 +390,8 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
size="smaller"
onClick={handleRequestCall}
ariaLabel="Call"
>
<Icon name="phone" />
</Button>
iconName="phone"
/>
)}
</>
)}
@ -406,10 +402,10 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
ripple={isRightColumnShown}
color="translucent"
size="smaller"
iconName="user"
onClick={handleJoinRequestsClick}
ariaLabel={isChannel ? lang('SubscribeRequests') : lang('MemberRequests')}
>
<Icon name="user" />
<div className="badge">{pendingJoinRequests}</div>
</Button>
)}
@ -423,9 +419,8 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
disabled={noMenu}
ariaLabel="More actions"
onClick={handleHeaderMenuOpen}
>
<Icon name="more" />
</Button>
iconName="more"
/>
{menuAnchor && (
<HeaderMenuContainer
chatId={chatId}

5
src/components/middle/MessageSelectToolbar.tsx
View File

@ -192,9 +192,8 @@ const MessageSelectToolbar: FC<OwnProps & StateProps> = ({
round
onClick={handleExitMessageSelectMode}
ariaLabel="Exit select mode"
>
<Icon name="close" />
</Button>
iconName="close"
/>
<span className="MessageSelectToolbar-count" title={formattedMessagesCount}>
{formattedMessagesCount}
</span>

3
src/components/middle/MiddleColumn.tsx
View File

@ -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"
>
<Icon name="unpin" />
<span>{oldLang('Chat.Pinned.UnpinAll', pinnedMessagesCount, 'i')}</span>
</Button>
</div>

3
src/components/middle/ReactorListModal.tsx
View File

@ -155,10 +155,9 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
className={buildClassName(!chosenTab && 'chosen')}
size="tiny"
ripple
iconName="heart"
onClick={() => setChosenTab(undefined)}
>
<Icon name="heart" />
{Boolean(reactors?.count) && formatIntegerCompact(lang, reactors.count)}
</Button>
{allReactions.map((reaction) => {

7
src/components/middle/ScrollDownButton.tsx
View File

@ -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<OwnProps> = ({
onClick={onClick}
onContextMenu={handleContextMenu}
ariaLabel={oldLang(ariaLabelLang)}
>
<Icon name={icon} className={styles.icon} />
</Button>
iconName={icon}
iconClassName={styles.icon}
/>
{Boolean(unreadCount) && <div className={styles.unreadCount}>{formatIntegerCompact(lang, unreadCount)}</div>}
{onReadAll && (
<Menu

17
src/components/middle/composer/AttachmentModal.tsx
View File

@ -45,7 +45,6 @@ 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';
@ -457,9 +456,8 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
className={isMenuOpen ? 'active' : ''}
onClick={onTrigger}
ariaLabel="More actions"
>
<Icon name="more" />
</Button>
iconName="more"
/>
);
}, [isMobile]);
@ -533,9 +531,14 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
return (
<div className="modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
<Button round color="translucent" size="smaller" ariaLabel="Cancel attachments" onClick={onClear}>
<Icon name="close" />
</Button>
<Button
round
color="translucent"
size="smaller"
ariaLabel="Cancel attachments"
onClick={onClear}
iconName="close"
/>
<div className="modal-title">{title}</div>
{notEditingFile && !isInAlbum
&& (

5
src/components/middle/composer/ComposerEmbeddedMessage.tsx
View File

@ -326,9 +326,8 @@ const ComposerEmbeddedMessage = ({
color="translucent"
ariaLabel={oldLang('Cancel')}
onClick={handleClearClick}
>
<Icon name="close" />
</Button>
iconName="close"
/>
{(isShowingReply || isForwarding) && !isContextMenuDisabled && (
<Menu
isOpen={isContextMenuOpen}

7
src/components/middle/composer/EmojiPicker.tsx
View File

@ -24,7 +24,6 @@ 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 Transition from '../../ui/Transition.tsx';
@ -190,12 +189,10 @@ const EmojiPicker: FC<OwnProps & StateProps> = ({
round
faded
color="translucent"
onClick={() => selectCategory(index)}
ariaLabel={category.name}
>
<Icon name={icon} />
</Button>
iconName={icon}
/>
);
}

18
src/components/middle/composer/PollModal.tsx
View File

@ -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 (
<div className="modal-header-condensed">
<Button round color="translucent" size="smaller" ariaLabel="Cancel poll creation" onClick={onClear}>
<Icon name="close" />
</Button>
<Button
round
color="translucent"
size="smaller"
ariaLabel="Cancel poll creation"
onClick={onClear}
iconName="close"
/>
<div className="modal-title">{lang('NewPoll')}</div>
<Button
color="primary"
@ -286,11 +290,9 @@ const PollModal = ({
color="translucent"
size="smaller"
ariaLabel={lang('Delete')}
onClick={() => removeOption(index)}
>
<Icon name="close" />
</Button>
iconName="close"
/>
)}
</div>
));

6
src/components/middle/composer/SymbolMenu.tsx
View File

@ -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<OwnProps & StateProps> = ({
className="symbol-close-button"
size="tiny"
onClick={onClose}
>
<Icon name="close" />
</Button>
iconName="close"
/>
)}
<SymbolMenuFooter
activeTab={activeTab}

11
src/components/middle/composer/SymbolMenuFooter.tsx
View File

@ -6,7 +6,6 @@ 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,9 +79,8 @@ const SymbolMenuFooter: FC<OwnProps> = ({
faded
color="translucent"
onClick={handleSearchOpen}
>
<Icon name="search" />
</Button>
iconName="search"
/>
)}
{canSendPlainText && renderTabButton(SymbolMenuTabs.Emoji)}
@ -98,9 +96,8 @@ const SymbolMenuFooter: FC<OwnProps> = ({
round
faded
color="translucent"
>
<Icon name="delete-left" />
</Button>
iconName="delete-left"
/>
)}
</div>
);

54
src/components/middle/composer/TextFormatter.tsx
View File

@ -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<OwnProps> = ({
ariaLabel={lang('FormattingSpoilerAria')}
className={getFormatButtonClassName('spoiler')}
onClick={handleSpoilerText}
>
<Icon name="eye-crossed" />
</Button>
iconName="eye-crossed"
/>
<div className="TextFormatter-divider" />
<Button
color="translucent"
ariaLabel={lang('FormattingBoldAria')}
className={getFormatButtonClassName('bold')}
onClick={handleBoldText}
>
<Icon name="bold" />
</Button>
iconName="bold"
/>
<Button
color="translucent"
ariaLabel={lang('FormattingItalicAria')}
className={getFormatButtonClassName('italic')}
onClick={handleItalicText}
>
<Icon name="italic" />
</Button>
iconName="italic"
/>
<Button
color="translucent"
ariaLabel={lang('FormattingUnderlineAria')}
className={getFormatButtonClassName('underline')}
onClick={handleUnderlineText}
>
<Icon name="underlined" />
</Button>
iconName="underlined"
/>
<Button
color="translucent"
ariaLabel={lang('FormattingStrikethroughAria')}
className={getFormatButtonClassName('strikethrough')}
onClick={handleStrikethroughText}
>
<Icon name="strikethrough" />
</Button>
iconName="strikethrough"
/>
<Button
color="translucent"
ariaLabel={lang('FormattingMonospaceAria')}
className={getFormatButtonClassName('monospace')}
onClick={handleMonospaceText}
>
<Icon name="monospace" />
</Button>
iconName="monospace"
/>
<div className="TextFormatter-divider" />
<Button color="translucent" ariaLabel={lang('FormattingAddLinkAria')} onClick={openLinkControl}>
<Icon name="link" />
</Button>
<Button
color="translucent"
ariaLabel={lang('FormattingAddLinkAria')}
onClick={openLinkControl}
iconName="link"
/>
</div>
<div className="TextFormatter-link-control">
<div className="TextFormatter-buttons">
<Button color="translucent" ariaLabel={lang('Cancel')} onClick={closeLinkControl}>
<Icon name="arrow-left" />
</Button>
<Button
color="translucent"
ariaLabel={lang('Cancel')}
onClick={closeLinkControl}
iconName="arrow-left"
/>
<div className="TextFormatter-divider" />
<div
@ -504,9 +503,8 @@ const TextFormatter: FC<OwnProps> = ({
ariaLabel={lang('Save')}
className="color-primary"
onClick={handleLinkUrlConfirm}
>
<Icon name="check" />
</Button>
iconName="check"
/>
</div>
</div>
</div>

17
src/components/middle/composer/ToDoListModal.tsx
View File

@ -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 (
<div className="modal-header-condensed">
<Button round color="translucent" size="smaller" ariaLabel={lang('AriaToDoCancel')} onClick={onClear}>
<Icon name="close" />
</Button>
<Button
round
color="translucent"
size="smaller"
ariaLabel={lang('AriaToDoCancel')}
onClick={onClear}
iconName="close"
/>
<div className="modal-title">{lang(modalTitle)}</div>
<Button
color="primary"
@ -332,9 +336,8 @@ const ToDoListModal = ({
size="smaller"
ariaLabel={lang('Delete')}
onClick={() => removeItem(stateIndex)}
>
<Icon name="close" />
</Button>
iconName="close"
/>
)}
</div>
);

5
src/components/middle/composer/WebPagePreview.tsx
View File

@ -236,9 +236,8 @@ const WebPagePreview = ({
color="translucent"
ariaLabel={lang('AccLinkRemovePreview')}
onClick={handleClearWebpagePreview}
>
<Icon name="close" />
</Button>
iconName="close"
/>
{!isEditing && renderContextMenu()}
</div>
</div>

10
src/components/middle/message/Message.tsx
View File

@ -1823,9 +1823,8 @@ const Message = ({
size="tiny"
ariaLabel={oldLang('lng_context_forward_msg')}
onClick={isLastInDocumentGroup ? handleGroupForward : handleForward}
>
<Icon name="share-filled" />
</Button>
iconName="share-filled"
/>
)}
{canFocus && (
<Button
@ -1835,9 +1834,8 @@ const Message = ({
size="tiny"
ariaLabel={lang('FocusMessage')}
onClick={isPinnedList ? handleFocus : handleFocusForwarded}
>
<Icon name="arrow-right" />
</Button>
iconName="arrow-right"
/>
)}
</div>
)}

5
src/components/middle/message/MessagePhoneCall.tsx
View File

@ -59,9 +59,8 @@ const MessagePhoneCall: FC<OwnProps> = ({
className={styles.button}
disabled={!ARE_CALLS_SUPPORTED}
ariaLabel={lang(isOutgoing ? 'CallAgain' : 'CallBack')}
>
<Icon name={isVideo ? 'video-outlined' : 'phone'} />
</Button>
iconName={isVideo ? 'video-outlined' : 'phone'}
/>
<div className={styles.info}>
<div className={styles.reason}>{lang(getCallMessageKey(phoneCall, message.isOutgoing))}</div>
<div className={styles.meta}>

6
src/components/middle/message/Poll.tsx
View File

@ -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<OwnProps> = ({
className="poll-quiz-help"
onClick={showSolution}
ariaLabel="Show Solution"
>
<Icon name="lamp" />
</Button>
iconName="lamp"
/>
)}
</div>
{canVote && (

5
src/components/middle/message/RoundVideo.tsx
View File

@ -245,9 +245,8 @@ const RoundVideo: FC<OwnProps> = ({
size="smaller"
className="play"
nonInteractive
>
<Icon name="play" />
</Button>
iconName="play"
/>
<Icon name="view-once" />
</div>
);

5
src/components/middle/message/SimilarChannels.tsx
View File

@ -175,9 +175,8 @@ const SimilarChannels = ({
className={styles.close}
color="translucent"
onClick={handleToggle}
>
<Icon name="close" />
</Button>
iconName="close"
/>
</div>
<div ref={ref} className={buildClassName(styles.channelList, 'no-scrollbar')}>
{firstSimilarChannels?.map((channel, i) => {

13
src/components/middle/message/SponsoredMessage.tsx
View File

@ -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<OwnProps & StateProps> = ({
color="translucent-white"
round
size="tiny"
iconName="close"
iconClassName="sponsored-action-icon"
ariaLabel={lang('Close')}
onClick={handleHideSponsoredMessage}
>
<Icon name="close" className="sponsored-action-icon" />
</Button>
/>
{message.canReport && (
<Button
className="message-action-button"
color="translucent-white"
round
size="tiny"
iconName="more"
iconClassName="sponsored-action-icon"
ariaLabel={lang('More')}
onClick={handleContextMenu}
onContextMenu={handleContextMenu}
>
<Icon name="more" className="sponsored-action-icon" />
</Button>
/>
)}
</div>
</div>

6
src/components/middle/message/reactions/ReactionSelector.tsx
View File

@ -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<OwnProps> = ({
color="translucent"
className={cn('show-more')}
onClick={handleShowMoreClick}
>
<Icon name="down" />
</Button>
iconName="down"
/>
)}
</div>
</div>

20
src/components/middle/panes/AudioPlayer.tsx
View File

@ -295,9 +295,8 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
disabled={isFirst?.()}
onClick={requestPreviousTrack}
ariaLabel="Previous track"
>
<Icon name="skip-previous" />
</Button>
iconName="skip-previous"
/>
<Button
round
ripple={!isMobile}
@ -319,9 +318,8 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
disabled={isLast?.()}
onClick={requestNextTrack}
ariaLabel="Next track"
>
<Icon name="skip-next" />
</Button>
iconName="skip-next"
/>
<div className="volume-button-wrapper">
<Button
@ -332,9 +330,8 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
ariaLabel="Volume"
onClick={handleVolumeClick}
ripple={!isMobile}
>
<Icon name={volumeIcon} />
</Button>
iconName={volumeIcon}
/>
{!IS_IOS && (
<div className="volume-slider-wrapper">
@ -370,9 +367,8 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
size="smaller"
onClick={handleClose}
ariaLabel="Close player"
>
<Icon name="close" />
</Button>
iconName="close"
/>
</div>
);
};

6
src/components/middle/panes/ChatReportPane.tsx
View File

@ -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<OwnProps & StateProps> = ({
color="translucent"
onClick={handleCloseReportPane}
ariaLabel={lang('Close')}
>
<Icon name="close" />
</Button>
iconName="close"
/>
<ConfirmDialog
isOpen={isBlockUserModalOpen}
onClose={closeBlockUserModal}

5
src/components/middle/panes/HeaderPinnedMessage.tsx
View File

@ -262,9 +262,8 @@ const HeaderPinnedMessage = ({
color="translucent"
ariaLabel={lang('UnpinMessageAlertTitle')}
onClick={openUnpinDialog}
>
<Icon name="close" />
</Button>
iconName="close"
/>
)}
<ConfirmDialog
isOpen={isUnpinDialogOpen}

23
src/components/middle/search/MiddleSearch.tsx
View File

@ -52,7 +52,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
import useOldLang from '../../../hooks/useOldLang';
import Avatar from '../../common/Avatar';
import Icon from '../../common/icons/Icon';
import PeerChip from '../../common/PeerChip';
import Button from '../../ui/Button';
import InfiniteScroll from '../../ui/InfiniteScroll';
@ -697,12 +696,10 @@ const MiddleSearch: FC<OwnProps & StateProps> = ({
round
size="smaller"
color="translucent"
onClick={() => openHistoryCalendar({ selectedAt: getDayStartAt(Date.now()) })}
ariaLabel={oldLang('JumpToDate')}
>
<Icon name="calendar" />
</Button>
iconName="calendar"
/>
</div>
)}
</div>
@ -713,12 +710,10 @@ const MiddleSearch: FC<OwnProps & StateProps> = ({
round
size="smaller"
color="translucent"
onClick={() => openHistoryCalendar({ selectedAt: getDayStartAt(Date.now()) })}
ariaLabel={oldLang('JumpToDate')}
>
<Icon name="calendar" />
</Button>
iconName="calendar"
/>
<div className={styles.counter}>
{hasQueryData && (
foundIds?.length ? (
@ -750,9 +745,8 @@ const MiddleSearch: FC<OwnProps & StateProps> = ({
onClick={handleFocusOlder}
nonInteractive={!canFocusOlder}
ariaLabel={lang('AriaSearchOlderResult')}
>
<Icon name="up" />
</Button>
iconName="up"
/>
<Button
className={buildClassName(styles.navigationButton, !canFocusNewer && styles.navigationDisabled)}
round
@ -761,9 +755,8 @@ const MiddleSearch: FC<OwnProps & StateProps> = ({
onClick={handleFocusNewer}
nonInteractive={!canFocusNewer}
ariaLabel={lang('AriaSearchNewerResult')}
>
<Icon name="down" />
</Button>
iconName="down"
/>
</div>
)}
</div>

6
src/components/modals/aboutAds/AboutAdsModal.tsx
View File

@ -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}
>
<Icon name="more" />
</Button>
iconName="more"
/>
</>
);

6
src/components/modals/collectible/CollectibleInfoModal.tsx
View File

@ -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<OwnProps & StateProps> = ({
className={styles.closeButton}
ariaLabel={lang('Close')}
onClick={handleClose}
>
<Icon name="close" />
</Button>
iconName="close"
/>
<div className={styles.icon}>
<AnimatedIconWithPreview
tgsUrl={isUsername ? LOCAL_TGS_URLS.Mention : LOCAL_TGS_URLS.Fragment}

1
src/components/modals/gift/info/GiftInfoModal.module.scss
View File

@ -15,7 +15,6 @@
.upgradeIcon {
transform: rotateX(180deg);
margin-left: 0.25rem;
font-size: 1.25rem;
}

32
src/components/modals/gift/info/GiftInfoModal.tsx
View File

@ -375,27 +375,42 @@ const GiftInfoModal = ({
if (canManage && savedGift?.alreadyPaidUpgradeStars && !savedGift.upgradeMsgId) {
return (
<Button isShiny onClick={handleOpenUpgradeModal}>
<Button
isShiny
onClick={handleOpenUpgradeModal}
iconName="arrow-down-circle"
iconClassName={styles.upgradeIcon}
iconAlignment="end"
>
{lang('GiftInfoUpgradeForFree')}
<Icon name="arrow-down-circle" className={styles.upgradeIcon} />
</Button>
);
}
if (canManage && savedGift?.canUpgrade && !savedGift.upgradeMsgId) {
return (
<Button isShiny onClick={handleOpenUpgradeModal}>
<Button
isShiny
onClick={handleOpenUpgradeModal}
iconName="arrow-down-circle"
iconClassName={styles.upgradeIcon}
iconAlignment="end"
>
{lang('GiftInfoUpgrade')}
<Icon name="arrow-down-circle" className={styles.upgradeIcon} />
</Button>
);
}
if (savedGift?.prepaidUpgradeHash) {
return (
<Button isShiny onClick={handleOpenUpgradeModal}>
<Button
isShiny
onClick={handleOpenUpgradeModal}
iconName="arrow-down-circle"
iconClassName={styles.upgradeIcon}
iconAlignment="end"
>
{lang('GiftAnUpgradeButton')}
<Icon name="arrow-down-circle" className={styles.upgradeIcon} />
</Button>
);
}
@ -804,9 +819,8 @@ const GiftInfoModal = ({
color="translucent"
ariaLabel="Delete original details"
onClick={handleRemoveMessage}
>
<Icon name="delete" />
</Button>
iconName="delete"
/>
)}
</div>,
]);

6
src/components/modals/preparedMessage/PreparedMessageModal.tsx
View File

@ -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<OwnProps & StateProps> = ({
size="smaller"
ariaLabel={lang('Close')}
onClick={handleCloseClick}
>
<Icon name="close" />
</Button>
iconName="close"
/>
<h3 className={buildClassName('modal-title', styles.modalTitle)}>
{lang('BotShareMessage')}
</h3>

1
src/components/modals/profileRating/ProfileRatingModal.module.scss
View File

@ -112,7 +112,6 @@
}
.understoodIcon {
margin-right: 0.25rem;
font-size: 1.1875rem;
}

4
src/components/modals/profileRating/ProfileRatingModal.tsx
View File

@ -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 = ({
<div className={styles.footer}>
<Button
onClick={handleClose}
iconName="understood"
iconClassName={styles.understoodIcon}
>
<Icon name="understood" className={styles.understoodIcon} />
{lang('ButtonUnderstood')}
</Button>
</div>

11
src/components/modals/quickPreview/QuickPreviewModalHeader.tsx
View File

@ -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<OwnProps & StateProps> = ({
ariaLabel={lang('ChatListContextMaskAsRead')}
onClick={handleMarkAsRead}
className={styles.markAsReadButton}
>
<Icon name="readchats" />
</Button>
iconName="readchats"
/>
)}
<Button
round
@ -90,9 +88,8 @@ const QuickPreviewModalHeader: FC<OwnProps & StateProps> = ({
ariaLabel={lang('Close')}
onClick={onClose}
className={styles.closeButton}
>
<Icon name="close" />
</Button>
iconName="close"
/>
<div className="modal-title">
<div className={styles.chatInfoOverride}>
{isUserId(displayChatId) ? (

6
src/components/modals/reportAd/ReportAdModal.tsx
View File

@ -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}
>
<Icon name={renderingDepth ? 'arrow-left' : 'close'} />
</Button>
iconName={renderingDepth ? 'arrow-left' : 'close'}
/>
<div className={buildClassName('modal-title', styles.modalTitle, hasSubtitle && styles.titleMultiline)}>
<h3 className={styles.title}>{lang('ReportAd')}</h3>
{hasSubtitle && (

11
src/components/modals/reportModal/ReportModal.tsx
View File

@ -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}
>
<Icon name="arrow-left" />
</Button>
iconName="arrow-left"
/>
) : (
<Button
round
@ -100,9 +98,8 @@ const ReportModal = ({
size="smaller"
ariaLabel={lang('Close')}
onClick={handleCloseClick}
>
<Icon name="close" />
</Button>
iconName="close"
/>
)}
<div className={buildClassName('modal-title', styles.modalTitle, hasSubtitle && styles.titleMultiline)}>
<h3 className={buildClassName(styles.title, renderingDepth && styles.hasDepth)}>

6
src/components/modals/stars/StarsBalanceModal.tsx
View File

@ -312,12 +312,10 @@ const StarsBalanceModal = ({
size="smaller"
className={styles.closeButton}
color="translucent"
onClick={() => closeStarsBalanceModal()}
ariaLabel={lang('Close')}
>
<Icon name="close" />
</Button>
iconName="close"
/>
{currency !== TON_CURRENCY_CODE && <BalanceBlock balance={balance} className={styles.modalBalance} />}
<div className={buildClassName(styles.header, isHeaderHidden && styles.hiddenHeader)}>
<h2 className={styles.starHeaderText}>

7
src/components/modals/stars/gift/StarsGiftModal.tsx
View File

@ -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<OwnProps & StateProps> = ({
size="smaller"
className={styles.closeButton}
color="translucent"
onClick={() => closeStarsGiftModal()}
ariaLabel={oldLang('Close')}
>
<Icon name="close" />
</Button>
iconName="close"
/>
<div className={buildClassName(styles.header, isHeaderHidden && styles.hiddenHeader)}>
<h2 className={styles.starHeaderText}>
{user ? oldLang('GiftStarsTitle') : oldLang('Star.List.GetStars')}

13
src/components/modals/webApp/MinimizedWebAppModal.tsx
View File

@ -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}
>
<Icon className={styles.icon} name="close" />
</Button>
/>
<AvatarList className={styles.avatars} size="mini" peers={peers} />
{renderTitle()}
<Button
@ -112,10 +111,10 @@ const MinimizedWebAppModal = ({
round
color="translucent"
size="tiny"
iconName="expand-modal"
iconClassName={styles.stateIcon}
onClick={handleExpandClick}
>
<Icon className={styles.stateIcon} name="expand-modal" />
</Button>
/>
</div>
);
};

35
src/components/modals/webApp/WebAppModal.tsx
View File

@ -350,9 +350,8 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
color="translucent"
onClick={onTrigger}
ariaLabel="More actions"
>
<Icon name="more" />
</Button>
iconName="more"
/>
);
}, [isMobile, supportMultiTabMode]);
@ -479,11 +478,11 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
round
color="translucent"
size="tiny"
iconName="close"
iconClassName={styles.tabCloseIcon}
ariaLabel={oldLang('Close')}
onClick={handleTabClose}
>
<Icon className={styles.tabCloseIcon} name="close" />
</Button>
/>
</div>
{renderTabCurveBorder(styles.tabButtonRightCurve)}
</div>
@ -509,11 +508,11 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
round
color="translucent"
size="tiny"
iconName="close"
iconClassName={styles.tabCloseIcon}
ariaLabel={oldLang('Close')}
onClick={handleCloseMoreAppsTab}
>
<Icon className={styles.tabCloseIcon} name="close" />
</Button>
/>
</div>
{renderTabCurveBorder(styles.tabButtonRightCurve)}
</div>
@ -531,9 +530,9 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
color="translucent"
size="tiny"
onClick={handleOpenMoreAppsTabClick}
>
<Icon className={styles.icon} name="add" />
</Button>
iconName="add"
iconClassName={styles.icon}
/>
);
}
@ -614,9 +613,9 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
color="translucent"
size="tiny"
onClick={handleFullscreenClick}
>
<Icon className={styles.stateIcon} name="expand-modal" />
</Button>
iconName="expand-modal"
iconClassName={styles.stateIcon}
/>
)}
<Button
@ -628,9 +627,9 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
color="translucent"
size="tiny"
onClick={handleCollapseClick}
>
<Icon className={styles.stateIcon} name="collapse-modal" />
</Button>
iconClassName={styles.stateIcon}
iconName="collapse-modal"
/>
</div>
</div>
);

6
src/components/payment/PaymentModal.tsx
View File

@ -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<OwnProps & StateProps> = ({
color="translucent"
round
size="smaller"
iconName={step === PaymentStep.Checkout ? 'close' : 'arrow-left'}
onClick={step === PaymentStep.Checkout ? closeModal : handleBackClick}
ariaLabel={lang('Close')}
>
<Icon name={step === PaymentStep.Checkout ? 'close' : 'arrow-left'} />
</Button>
/>
<h3>{modalHeader}</h3>
</div>
{step !== undefined ? (

6
src/components/payment/ReceiptModal.tsx
View File

@ -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<OwnProps & StateProps> = ({
size="smaller"
onClick={closeModal}
ariaLabel="Close"
>
<Icon name="close" />
</Button>
iconName="close"
/>
<h3>
{' '}
{lang('PaymentReceipt')}

4
src/components/right/Profile.scss
View File

@ -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 {

14
src/components/right/Profile.tsx
View File

@ -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 && (
<>
{}
<Button className="show-more-channels" onClick={() => openPremiumModal()}>
<Button
className="show-more-channels"
onClick={() => openPremiumModal()}
iconName="unlock-badge"
iconAlignment="end"
>
{oldLang('UnlockSimilar')}
<Icon name="unlock-badge" />
</Button>
<div className="more-similar">
{renderText(oldLang('MoreSimilarText', limitSimilarPeers), ['simple_markdown'])}
@ -1054,10 +1056,8 @@ const Profile = ({
))}
{!isCurrentUserPremium && (
<>
{}
<Button className="show-more-bots" onClick={() => openPremiumModal()}>
<Button className="show-more-bots" onClick={() => openPremiumModal()} iconName="unlock-badge">
{lang('UnlockMoreSimilarBots')}
<Icon name="unlock-badge" />
</Button>
<div className="more-similar">
{renderText(lang('MoreSimilarBotsDescription', { count: limitSimilarPeers }, {

46
src/components/right/RightHeader.tsx
View File

@ -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<OwnProps & StateProps> = ({
className={isOpen ? 'active' : ''}
onClick={onTrigger}
ariaLabel={lang('AriaLabelOpenMenu')}
>
<Icon name="more" />
</Button>
iconName="more"
/>
);
}, [isMobile, lang]);
@ -441,9 +439,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
size="smaller"
ariaLabel={oldLang('Edit')}
onClick={handleEditInviteClick}
>
<Icon name="edit" />
</Button>
iconName="edit"
/>
)}
{currentInviteInfo && currentInviteInfo.isRevoked && (
<>
@ -453,9 +450,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
size="smaller"
ariaLabel={oldLang('Delete')}
onClick={openDeleteDialog}
>
<Icon name="delete" />
</Button>
iconName="delete"
/>
<ConfirmDialog
isOpen={isDeleteDialogOpen}
onClose={closeDeleteDialog}
@ -636,9 +632,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
size="smaller"
ariaLabel={oldLang('AddContact')}
onClick={handleAddContact}
>
<Icon name="add-user" />
</Button>
iconName="add-user"
/>
)}
{canManage && !isInsideTopic && (
<Button
@ -647,9 +642,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
size="smaller"
ariaLabel={oldLang('Edit')}
onClick={handleToggleManagement}
>
<Icon name="edit" />
</Button>
iconName="edit"
/>
)}
{canEditBot && (
<Button
@ -658,9 +652,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
size="smaller"
ariaLabel={oldLang('Edit')}
onClick={handleToggleManagement}
>
<Icon name="edit" />
</Button>
iconName="edit"
/>
)}
{canEditTopic && (
<Button
@ -669,9 +662,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
size="smaller"
ariaLabel={oldLang('EditTopic')}
onClick={toggleEditTopic}
>
<Icon name="edit" />
</Button>
iconName="edit"
/>
)}
{canViewStatistics && (
<Button
@ -680,9 +672,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
size="smaller"
ariaLabel={oldLang('Statistics')}
onClick={handleToggleStatistics}
>
<Icon name="stats" />
</Button>
iconName="stats"
/>
)}
{isOwnProfile && (
<Button
@ -691,9 +682,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
size="smaller"
ariaLabel={lang('Edit')}
onClick={handleEditProfile}
>
<Icon name="edit" />
</Button>
iconName="edit"
/>
)}
</section>
</>

15
src/components/story/Story.tsx
View File

@ -572,9 +572,8 @@ function Story({
onClick={onTrigger}
className={buildClassName(styles.button, isOpen && 'active')}
ariaLabel={lang('AriaLabelOpenMenu')}
>
<Icon name="more" />
</Button>
iconName="more"
/>
);
};
}, [isMobile, lang]);
@ -716,9 +715,8 @@ function Story({
disabled={!hasFullData}
onClick={handleVolumeMuted}
ariaLabel={oldLang('Volume')}
>
<Icon name={(isMuted || noSound) ? 'speaker-muted-story' : 'speaker-story'} />
</Button>
iconName={(isMuted || noSound) ? 'speaker-muted-story' : 'speaker-story'}
/>
)}
<DropdownMenu
className={styles.buttonMenu}
@ -766,9 +764,8 @@ function Story({
color="translucent-white"
ariaLabel={oldLang('Close')}
onClick={onClose}
>
<Icon name="close" />
</Button>
iconName="close"
/>
</div>
</div>
);

10
src/components/story/StoryFooter.tsx
View File

@ -126,9 +126,8 @@ const StoryFooter = ({
onClick={handleForwardClick}
ariaLabel={lang('Forward')}
className={styles.footerItem}
>
<Icon name="forward" />
</Button>
iconName="forward"
/>
)}
{isChannel && (
<>
@ -140,9 +139,8 @@ const StoryFooter = ({
size="smaller"
nonInteractive
ariaLabel={lang('PublicShares')}
>
<Icon name="loop" />
</Button>
iconName="loop"
/>
<span>{forwardsCount}</span>
</div>
)}

6
src/components/story/StoryViewer.tsx
View File

@ -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}
>
<Icon name="close" />
</Button>
iconName="close"
/>
<StorySlides
isOpen={isOpen}

2
src/components/ui/Button.scss
View File

@ -502,6 +502,7 @@
.with-icon-start {
display: flex;
align-items: center;
.icon {
margin-inline-end: 0.25rem;
}
@ -510,6 +511,7 @@
.with-icon-end {
display: flex;
flex-direction: row-reverse;
align-items: center;
.icon {
margin-inline-start: 0.25rem;

8
src/components/ui/Button.tsx
View File

@ -22,7 +22,7 @@ import './Button.scss';
export type OwnProps = {
ref?: ElementRef<HTMLButtonElement | HTMLAnchorElement>;
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<OwnProps> = ({
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<HTMLButtonElement, MouseEvent>) => {
@ -209,6 +209,10 @@ const Button: FC<OwnProps> = ({
return children;
}
if (!children) {
return icon;
}
return (
<div className={`with-icon-${iconAlignment}`}>
{icon}

6
src/components/ui/DropdownMenu.tsx
View File

@ -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<OwnProps> = ({
size="smaller"
color="translucent"
className={isMenuOpen ? 'active' : ''}
iconName="more"
onClick={onTrigger}
ariaLabel="More actions"
>
<Icon name="more" />
</Button>
/>
);
}, [trigger]);

12
src/components/ui/ImageCropper.tsx
View File

@ -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}
/>
<Button className={styles.confirmButton} round color="primary" onClick={handleCrop} ariaLabel="Crop">
<Icon name="check" />
</Button>
<Button
className={styles.confirmButton}
round
color="primary"
iconName="check"
onClick={handleCrop}
ariaLabel="Crop"
/>
</div>
</div>
);

5
src/components/ui/ListItem.tsx
View File

@ -264,9 +264,8 @@ const ListItem = ({
size="smaller"
onClick={handleSecondaryIconClick}
onMouseDown={handleSecondaryIconMouseDown}
>
<Icon name={secondaryIcon} />
</Button>
iconName={secondaryIcon}
/>
)}
{rightElement}
</ButtonElementTag>

6
src/components/ui/Modal.tsx
View File

@ -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<OwnProps> = ({
round
color={absoluteCloseButtonColor}
size="smaller"
iconName="close"
ariaLabel={lang('Close')}
onClick={onClose}
>
<Icon name="close" />
</Button>
/>
) : undefined;
return title ? (

15
src/components/ui/SearchInput.tsx
View File

@ -198,24 +198,22 @@ const SearchInput: FC<OwnProps> = ({
round
size="tiny"
color="translucent"
iconName="up"
onClick={onUpClick}
disabled={!onUpClick}
ariaLabel={lang('AriaSearchOlderResult')}
>
<Icon name="up" />
</Button>
/>
)}
{hasDownButton && (
<Button
round
size="tiny"
color="translucent"
iconName="down"
onClick={onDownClick}
disabled={!onDownClick}
ariaLabel={lang('AriaSearchNewerResult')}
>
<Icon name="down" />
</Button>
/>
)}
<Transition
name="fade"
@ -232,10 +230,9 @@ const SearchInput: FC<OwnProps> = ({
round
size="tiny"
color="translucent"
iconName="close"
onClick={onReset}
>
<Icon name="close" />
</Button>
/>
)
)}
</Transition>

3
src/components/ui/ShowMoreButton.tsx
View File

@ -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<OwnProps> = ({
isLoading={isLoading}
isRtl={lang.isRtl}
onClick={onClick}
iconName="down"
>
<Icon name="down" />
Show
{' '}
{count}