Lang Icon Format: Replace next icon (#6661)

src/assets/font-icons/next-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 32"><path d="M17.975 14.378c.824.825.888 2.12.19 3.016l-.19.216L4.266 31.32a2.284 2.284 0 0 1-3.422-3.016l.19-.216 12.092-12.093L1.035 3.902A2.284 2.284 0 0 1 .845.886l.19-.216A2.284 2.284 0 0 1 4.05.48l.215.19z"/></svg>

src/components/left/settings/SettingsEditProfile.tsx

@@ -12,6 +12,7 @@ import { getChatAvatarHash } from '../../../global/helpers';
 import { selectTabState, selectUser, selectUserFullInfo } from '../../../global/selectors';
 import { selectCurrentLimit } from '../../../global/selectors/limits';
 import { formatDateToString } from '../../../util/dates/dateFormat';
+import { getNextArrowReplacement } from '../../../util/localization/format';
 import { throttle } from '../../../util/schedulers';
 import renderText from '../../common/helpers/renderText';
 
@@ -280,7 +281,12 @@ const SettingsEditProfile = ({
           </ListItem>
           <p className="settings-item-description" dir={oldLang.isRtl ? 'rtl' : undefined}>
             {lang('BirthdayPrivacySuggestion', {
-              link: <Link isPrimary onClick={handleBirthdayPrivacyClick}>{lang('BirthdayPrivacySuggestionLink')}</Link>,
+              link: (
+                <Link isPrimary onClick={handleBirthdayPrivacyClick}>
+                  {lang('BirthdayPrivacySuggestionLink',
+                    undefined, { withNodes: true, specialReplacement: getNextArrowReplacement() })}
+                </Link>
+              ),
             }, { withNodes: true })}
           </p>
         </div>

src/components/left/settings/SettingsPasskeys.tsx

@@ -10,6 +10,7 @@ import type { ApiPasskey } from '../../../api/types';
 import { IS_WEBAUTHN_SUPPORTED } from '../../../util/browser/windowEnvironment';
 import buildClassName from '../../../util/buildClassName';
 import { formatPastDatetime } from '../../../util/dates/dateFormat';
+import { getNextArrowReplacement } from '../../../util/localization/format';
 import { LOCAL_TGS_PREVIEW_URLS, LOCAL_TGS_URLS } from '../../common/helpers/animatedAssets';
 import { REM } from '../../common/helpers/mediaDimensions';
 
@@ -153,7 +154,12 @@ const SettingsPasskeys = ({
         )}
         <p className="settings-item-description mt-3" dir="auto">
           {lang('SettingsPasskeysFooter', {
-            link: <Link isPrimary onClick={handleOpenPasskeyModal}>{lang('SettingsPasskeysFooterLink')}</Link>,
+            link: (
+              <Link isPrimary onClick={handleOpenPasskeyModal}>
+                {lang('SettingsPasskeysFooterLink', undefined,
+                  { withNodes: true, specialReplacement: getNextArrowReplacement() })}
+              </Link>
+            ),
           }, { withNodes: true })}
         </p>
       </div>

src/components/modals/birthday/BirthdaySetupModal.tsx

@@ -5,6 +5,7 @@ import type { TabState } from '../../../global/types';
 import { SettingsScreens } from '../../../types';
 
 import buildClassName from '../../../util/buildClassName';
+import { getNextArrowReplacement } from '../../../util/localization/format';
 import { LOCAL_TGS_URLS } from '../../common/helpers/animatedAssets';
 
 import useLang from '../../../hooks/useLang';
@@ -206,7 +207,12 @@ const BirthdaySetupModal = ({ modal }: OwnProps) => {
       <div className={styles.footer}>
         <span className={styles.privacySuggestion}>
           {lang('BirthdayPrivacySuggestion', {
-            link: <Link isPrimary onClick={handlePrivacyClick}>{lang('BirthdayPrivacySuggestionLink')}</Link>,
+            link: (
+              <Link isPrimary onClick={handlePrivacyClick}>
+                {lang('BirthdayPrivacySuggestionLink', undefined,
+                  { withNodes: true, specialReplacement: getNextArrowReplacement() })}
+              </Link>
+            ),
           }, { withNodes: true })}
         </span>
         {currentBirthday && (

src/components/modals/gift/GiftComposer.tsx

@@ -19,7 +19,7 @@ import buildStyle from '../../../util/buildStyle';
 import { formatCountdown } from '../../../util/dates/dateFormat';
 import { HOUR } from '../../../util/dates/units';
 import { formatCurrency } from '../../../util/formatCurrency';
-import { formatStarsAsIcon } from '../../../util/localization/format';
+import { formatStarsAsIcon, getNextArrowReplacement } from '../../../util/localization/format';
 import { getServerTime } from '../../../util/serverTime';
 
 import useCustomBackground from '../../../hooks/useCustomBackground';
@@ -322,13 +322,24 @@ function GiftComposer({
             {isPeerUser
               ? lang('GiftMakeUniqueDescription', {
                 user: title,
-                link: <Link isPrimary onClick={handleOpenUpgradePreview}>{lang('GiftMakeUniqueLink')}</Link>,
+                link: (
+                  <Link isPrimary onClick={handleOpenUpgradePreview}>
+                    {lang('GiftMakeUniqueLink', undefined, { withNodes: true,
+                      specialReplacement: getNextArrowReplacement() })}
+                  </Link>
+                ),
               }, {
                 withNodes: true,
               })
               : lang('GiftMakeUniqueDescriptionChannel', {
                 peer: title,
-                link: <Link isPrimary onClick={handleOpenUpgradePreview}>{lang('GiftMakeUniqueLink')}</Link>,
+                link: (
+                  <Link isPrimary onClick={handleOpenUpgradePreview}>
+                    {lang('GiftMakeUniqueLink', undefined, {
+                      withNodes: true,
+                      specialReplacement: getNextArrowReplacement() })}
+                  </Link>
+                ),
               }, {
                 withNodes: true,
               })}

src/components/modals/gift/GiftModal.tsx

@@ -23,6 +23,7 @@ import { getPeerTitle, isApiPeerChat, isApiPeerUser } from '../../../global/help
 import { selectTabState } from '../../../global/selectors';
 import { selectPeer, selectUserFullInfo } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
+import { getNextArrowReplacement } from '../../../util/localization/format';
 import { throttle } from '../../../util/schedulers';
 import { REM } from '../../common/helpers/mediaDimensions';
 
@@ -237,7 +238,12 @@ const GiftModal: FC<OwnProps & StateProps> = ({
       <SafeLink
         text={lang('GiftPremiumDescriptionLinkCaption')}
         url={lang('GiftPremiumDescriptionLink')}
-      />
+      >
+        {lang('GiftPremiumDescriptionLinkCaption', undefined, {
+          withNodes: true,
+          specialReplacement: getNextArrowReplacement(),
+        })}
+      </SafeLink>
     ),
   }, { withNodes: true });
 

src/components/modals/gift/auction/GiftAuctionModal.tsx

@@ -196,7 +196,12 @@ const GiftAuctionModal = ({ modal, auctionState }: OwnProps & StateProps) => {
             {lang('GiftAuctionTopBidders', {
               count: giftsPerRound,
               gift: <span className={styles.giftName}>{giftTitle}</span>,
-              link: <Link isPrimary onClick={handleLearnMoreClick}>{lang('GiftAuctionLearnMore')}</Link>,
+              link: (
+                <Link isPrimary onClick={handleLearnMoreClick}>
+                  {lang('GiftAuctionLearnMore', undefined,
+                    { withNodes: true })}
+                </Link>
+              ),
             }, { pluralValue: giftsPerRound, withNodes: true, withMarkdown: true })}
           </p>
         )}

src/components/modals/gift/info/GiftInfoModal.tsx

@@ -19,6 +19,7 @@ import { formatDateTimeToString } from '../../../../util/dates/dateFormat';
 import { formatCurrencyAsString } from '../../../../util/formatCurrency';
 import {
   formatStarsAsIcon, formatStarsAsText, formatTonAsIcon, formatTonAsText,
+  getNextArrowReplacement,
 } from '../../../../util/localization/format';
 import { CUSTOM_PEER_HIDDEN } from '../../../../util/objects/customPeer';
 import { getServerTime } from '../../../../util/serverTime';
@@ -803,7 +804,12 @@ const GiftInfoModal = ({
             {tonLink && (
               <div>
                 {lang('GiftInfoTonText', {
-                  link: <SafeLink url={tonLink} shouldSkipModal text={lang('GiftInfoTonLinkText')} />,
+                  link: (
+                    <SafeLink url={tonLink} shouldSkipModal text={lang('GiftInfoTonLinkText')}>
+                      {lang('GiftInfoTonLinkText', undefined,
+                        { withNodes: true, specialReplacement: getNextArrowReplacement() })}
+                    </SafeLink>
+                  ),
                 }, { withNodes: true })}
               </div>
             )}
@@ -812,7 +818,8 @@ const GiftInfoModal = ({
                 {lang(`GiftInfo${isTargetChat ? 'Channel' : ''}${isUnsaved ? 'Hidden' : 'Saved'}`, {
                   link: (
                     <Link isPrimary onClick={handleTriggerVisibility}>
-                      {lang(`GiftInfoSaved${isUnsaved ? 'Show' : 'Hide'}`)}
+                      {lang(`GiftInfoSaved${isUnsaved ? 'Show' : 'Hide'}`, undefined,
+                        { withNodes: true, specialReplacement: getNextArrowReplacement() })}
                     </Link>
                   ),
                 }, {

src/components/modals/gift/upgrade/GiftUpgradeModal.tsx

@@ -8,6 +8,7 @@ import type { TabState } from '../../../../global/types';
 
 import { getPeerTitle } from '../../../../global/helpers/peers';
 import { selectPeer } from '../../../../global/selectors';
+import { getNextArrowReplacement } from '../../../../util/localization/format';
 import {
   getRandomGiftPreviewAttributes, type GiftPreviewAttributes,
   preloadGiftAttributeStickers } from '../../../common/helpers/gifts';
@@ -212,7 +213,8 @@ const GiftUpgradeModal = ({ modal, recipient }: OwnProps & StateProps) => {
                 isPrimary
                 onClick={handleOpenPriceInfo}
               >
-                {lang('StarGiftPriceDecreaseInfoLink')}
+                {lang('StarGiftPriceDecreaseInfoLink', undefined,
+                  { withNodes: true, specialReplacement: getNextArrowReplacement() })}
               </Link>
             )}
           </>

src/components/modals/profileRating/ProfileRatingModal.tsx

@@ -8,6 +8,7 @@ import { getPeerTitle } from '../../../global/helpers/peers';
 import { selectUser, selectUserFullInfo } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
 import { formatShortDuration } from '../../../util/dates/dateFormat';
+import { getNextArrowReplacement } from '../../../util/localization/format';
 import { getServerTime } from '../../../util/serverTime';
 
 import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
@@ -130,7 +131,8 @@ const ProfileRatingModal = ({
                 points: Math.abs(pendingPoints),
                 link: (
                   <span className={styles.backLink} onClick={handleShowCurrent}>
-                    {lang('LinkDescriptionRatingBack')}
+                    {lang('LinkDescriptionRatingBack',
+                      undefined, { withNodes: true, specialReplacement: getNextArrowReplacement() })}
                   </span>
                 ),
               }, {
@@ -145,7 +147,8 @@ const ProfileRatingModal = ({
                 points: Math.abs(pendingPoints),
                 link: (
                   <span className={styles.previewLink} onClick={handleShowFuture}>
-                    {lang('LinkDescriptionRatingPreview')}
+                    {lang('LinkDescriptionRatingPreview',
+                      undefined, { withNodes: true, specialReplacement: getNextArrowReplacement() })}
                   </span>
                 ),
               }, {

src/components/ui/ModalStarBalanceBar.module.scss

@@ -50,5 +50,7 @@
 
 .tonInUsdDescription,
 .getMoreStarsLink {
+  --next-arrow-weight: 600;
+
   font-weight: var(--font-weight-semibold);
 }

src/components/ui/ModalStarBalanceBar.tsx

@@ -6,7 +6,7 @@ import type { ApiStarsAmount, ApiTonAmount } from '../../api/types';
 import { formatStarsAmount } from '../../global/helpers/payments';
 import buildClassName from '../../util/buildClassName';
 import { convertTonFromNanos, convertTonToUsd, formatCurrencyAsString } from '../../util/formatCurrency';
-import { formatStarsAsIcon, formatTonAsIcon } from '../../util/localization/format';
+import { formatStarsAsIcon, formatTonAsIcon, getNextArrowReplacement } from '../../util/localization/format';
 
 import useIsTopmostBalanceBarModal from '../../hooks/element/useIsTopmostBalanceBarModal';
 import useLang from '../../hooks/useLang';
@@ -103,7 +103,10 @@ function ModalStarBalanceBar({
         )}
         {!isTonMode && (
           <Link className={styles.getMoreStarsLink} isPrimary onClick={handleGetMoreStars}>
-            {lang('GetMoreStarsLinkText')}
+            {lang('GetMoreStarsLinkText', undefined, {
+              withNodes: true,
+              specialReplacement: getNextArrowReplacement(),
+            })}
           </Link>
         )}
       </div>

src/styles/icons.css

@@ -3,8 +3,8 @@
   font-weight: normal;
   font-style: normal;
   font-display: block;
-  src: url("./icons.woff2?78af88c0f83feccd1a41bd4d851b003d") format("woff2"),
-url("./icons.woff?78af88c0f83feccd1a41bd4d851b003d") format("woff");
+  src: url("./icons.woff2?0ec01f08be54a6cffe9ee7d1ef331226") format("woff2"),
+url("./icons.woff?0ec01f08be54a6cffe9ee7d1ef331226") format("woff");
 }
 
 .icon-char::before {
@@ -495,459 +495,462 @@ url("./icons.woff?78af88c0f83feccd1a41bd4d851b003d") format("woff");
 .icon-new-chat-filled::before {
   content: "\f19e";
 }
-.icon-next::before {
+.icon-next-link::before {
   content: "\f19f";
 }
-.icon-nochannel::before {
+.icon-next::before {
   content: "\f1a0";
 }
-.icon-noise-suppression::before {
+.icon-nochannel::before {
   content: "\f1a1";
 }
-.icon-non-contacts::before {
+.icon-noise-suppression::before {
   content: "\f1a2";
 }
-.icon-note::before {
+.icon-non-contacts::before {
   content: "\f1a3";
 }
-.icon-one-filled::before {
+.icon-note::before {
   content: "\f1a4";
 }
-.icon-open-in-new-tab::before {
+.icon-one-filled::before {
   content: "\f1a5";
 }
-.icon-password-off::before {
+.icon-open-in-new-tab::before {
   content: "\f1a6";
 }
-.icon-pause::before {
+.icon-password-off::before {
   content: "\f1a7";
 }
-.icon-permissions::before {
+.icon-pause::before {
   content: "\f1a8";
 }
-.icon-phone-discard-outline::before {
+.icon-permissions::before {
   content: "\f1a9";
 }
-.icon-phone-discard::before {
+.icon-phone-discard-outline::before {
   content: "\f1aa";
 }
-.icon-phone::before {
+.icon-phone-discard::before {
   content: "\f1ab";
 }
-.icon-photo::before {
+.icon-phone::before {
   content: "\f1ac";
 }
-.icon-pin-badge::before {
+.icon-photo::before {
   content: "\f1ad";
 }
-.icon-pin-list::before {
+.icon-pin-badge::before {
   content: "\f1ae";
 }
-.icon-pin::before {
+.icon-pin-list::before {
   content: "\f1af";
 }
-.icon-pinned-chat::before {
+.icon-pin::before {
   content: "\f1b0";
 }
-.icon-pinned-message::before {
+.icon-pinned-chat::before {
   content: "\f1b1";
 }
-.icon-pip::before {
+.icon-pinned-message::before {
   content: "\f1b2";
 }
-.icon-play-story::before {
+.icon-pip::before {
   content: "\f1b3";
 }
-.icon-play::before {
+.icon-play-story::before {
   content: "\f1b4";
 }
-.icon-poll::before {
+.icon-play::before {
   content: "\f1b5";
 }
-.icon-previous::before {
+.icon-poll::before {
   content: "\f1b6";
 }
-.icon-privacy-policy::before {
+.icon-previous::before {
   content: "\f1b7";
 }
-.icon-proof-of-ownership::before {
+.icon-privacy-policy::before {
   content: "\f1b8";
 }
-.icon-quote-text::before {
+.icon-proof-of-ownership::before {
   content: "\f1b9";
 }
-.icon-quote::before {
+.icon-quote-text::before {
   content: "\f1ba";
 }
-.icon-radial-badge::before {
+.icon-quote::before {
   content: "\f1bb";
 }
-.icon-rating-icons-level1::before {
+.icon-radial-badge::before {
   content: "\f1bc";
 }
-.icon-rating-icons-level10::before {
+.icon-rating-icons-level1::before {
   content: "\f1bd";
 }
-.icon-rating-icons-level2::before {
+.icon-rating-icons-level10::before {
   content: "\f1be";
 }
-.icon-rating-icons-level20::before {
+.icon-rating-icons-level2::before {
   content: "\f1bf";
 }
-.icon-rating-icons-level3::before {
+.icon-rating-icons-level20::before {
   content: "\f1c0";
 }
-.icon-rating-icons-level30::before {
+.icon-rating-icons-level3::before {
   content: "\f1c1";
 }
-.icon-rating-icons-level4::before {
+.icon-rating-icons-level30::before {
   content: "\f1c2";
 }
-.icon-rating-icons-level40::before {
+.icon-rating-icons-level4::before {
   content: "\f1c3";
 }
-.icon-rating-icons-level5::before {
+.icon-rating-icons-level40::before {
   content: "\f1c4";
 }
-.icon-rating-icons-level50::before {
+.icon-rating-icons-level5::before {
   content: "\f1c5";
 }
-.icon-rating-icons-level6::before {
+.icon-rating-icons-level50::before {
   content: "\f1c6";
 }
-.icon-rating-icons-level60::before {
+.icon-rating-icons-level6::before {
   content: "\f1c7";
 }
-.icon-rating-icons-level7::before {
+.icon-rating-icons-level60::before {
   content: "\f1c8";
 }
-.icon-rating-icons-level70::before {
+.icon-rating-icons-level7::before {
   content: "\f1c9";
 }
-.icon-rating-icons-level8::before {
+.icon-rating-icons-level70::before {
   content: "\f1ca";
 }
-.icon-rating-icons-level80::before {
+.icon-rating-icons-level8::before {
   content: "\f1cb";
 }
-.icon-rating-icons-level9::before {
+.icon-rating-icons-level80::before {
   content: "\f1cc";
 }
-.icon-rating-icons-level90::before {
+.icon-rating-icons-level9::before {
   content: "\f1cd";
 }
-.icon-rating-icons-negative::before {
+.icon-rating-icons-level90::before {
   content: "\f1ce";
 }
-.icon-readchats::before {
+.icon-rating-icons-negative::before {
   content: "\f1cf";
 }
-.icon-recent::before {
+.icon-readchats::before {
   content: "\f1d0";
 }
-.icon-refund::before {
+.icon-recent::before {
   content: "\f1d1";
 }
-.icon-reload::before {
+.icon-refund::before {
   content: "\f1d2";
 }
-.icon-remove-quote::before {
+.icon-reload::before {
   content: "\f1d3";
 }
-.icon-remove::before {
+.icon-remove-quote::before {
   content: "\f1d4";
 }
-.icon-reopen-topic::before {
+.icon-remove::before {
   content: "\f1d5";
 }
-.icon-reorder-tabs::before {
+.icon-reopen-topic::before {
   content: "\f1d6";
 }
-.icon-replace::before {
+.icon-reorder-tabs::before {
   content: "\f1d7";
 }
-.icon-replies::before {
+.icon-replace::before {
   content: "\f1d8";
 }
-.icon-reply-filled::before {
+.icon-replies::before {
   content: "\f1d9";
 }
-.icon-reply::before {
+.icon-reply-filled::before {
   content: "\f1da";
 }
-.icon-revenue-split::before {
+.icon-reply::before {
   content: "\f1db";
 }
-.icon-revote::before {
+.icon-revenue-split::before {
   content: "\f1dc";
 }
-.icon-save-story::before {
+.icon-revote::before {
   content: "\f1dd";
 }
-.icon-saved-messages::before {
+.icon-save-story::before {
   content: "\f1de";
 }
-.icon-schedule::before {
+.icon-saved-messages::before {
   content: "\f1df";
 }
-.icon-scheduled::before {
+.icon-schedule::before {
   content: "\f1e0";
 }
-.icon-sd-photo::before {
+.icon-scheduled::before {
   content: "\f1e1";
 }
-.icon-search::before {
+.icon-sd-photo::before {
   content: "\f1e2";
 }
-.icon-select::before {
+.icon-search::before {
   content: "\f1e3";
 }
-.icon-sell-outline::before {
+.icon-select::before {
   content: "\f1e4";
 }
-.icon-sell::before {
+.icon-sell-outline::before {
   content: "\f1e5";
 }
-.icon-send-outline::before {
+.icon-sell::before {
   content: "\f1e6";
 }
-.icon-send::before {
+.icon-send-outline::before {
   content: "\f1e7";
 }
-.icon-settings-filled::before {
+.icon-send::before {
   content: "\f1e8";
 }
-.icon-settings::before {
+.icon-settings-filled::before {
   content: "\f1e9";
 }
-.icon-share-filled::before {
+.icon-settings::before {
   content: "\f1ea";
 }
-.icon-share-screen-outlined::before {
+.icon-share-filled::before {
   content: "\f1eb";
 }
-.icon-share-screen-stop::before {
+.icon-share-screen-outlined::before {
   content: "\f1ec";
 }
-.icon-share-screen::before {
+.icon-share-screen-stop::before {
   content: "\f1ed";
 }
-.icon-show-message::before {
+.icon-share-screen::before {
   content: "\f1ee";
 }
-.icon-sidebar::before {
+.icon-show-message::before {
   content: "\f1ef";
 }
-.icon-skip-next::before {
+.icon-sidebar::before {
   content: "\f1f0";
 }
-.icon-skip-previous::before {
+.icon-skip-next::before {
   content: "\f1f1";
 }
-.icon-smallscreen::before {
+.icon-skip-previous::before {
   content: "\f1f2";
 }
-.icon-smile::before {
+.icon-smallscreen::before {
   content: "\f1f3";
 }
-.icon-sort-by-date::before {
+.icon-smile::before {
   content: "\f1f4";
 }
-.icon-sort-by-number::before {
+.icon-sort-by-date::before {
   content: "\f1f5";
 }
-.icon-sort-by-price::before {
+.icon-sort-by-number::before {
   content: "\f1f6";
 }
-.icon-sort::before {
+.icon-sort-by-price::before {
   content: "\f1f7";
 }
-.icon-speaker-muted-story::before {
+.icon-sort::before {
   content: "\f1f8";
 }
-.icon-speaker-outline::before {
+.icon-speaker-muted-story::before {
   content: "\f1f9";
 }
-.icon-speaker-story::before {
+.icon-speaker-outline::before {
   content: "\f1fa";
 }
-.icon-speaker::before {
+.icon-speaker-story::before {
   content: "\f1fb";
 }
-.icon-spoiler-disable::before {
+.icon-speaker::before {
   content: "\f1fc";
 }
-.icon-spoiler::before {
+.icon-spoiler-disable::before {
   content: "\f1fd";
 }
-.icon-sport::before {
+.icon-spoiler::before {
   content: "\f1fe";
 }
-.icon-star::before {
+.icon-sport::before {
   content: "\f1ff";
 }
-.icon-stars-lock::before {
+.icon-star::before {
   content: "\f200";
 }
-.icon-stars-refund::before {
+.icon-stars-lock::before {
   content: "\f201";
 }
-.icon-stats::before {
+.icon-stars-refund::before {
   content: "\f202";
 }
-.icon-stealth-future::before {
+.icon-stats::before {
   content: "\f203";
 }
-.icon-stealth-past::before {
+.icon-stealth-future::before {
   content: "\f204";
 }
-.icon-stickers::before {
+.icon-stealth-past::before {
   content: "\f205";
 }
-.icon-stop-raising-hand::before {
+.icon-stickers::before {
   content: "\f206";
 }
-.icon-stop::before {
+.icon-stop-raising-hand::before {
   content: "\f207";
 }
-.icon-story-caption::before {
+.icon-stop::before {
   content: "\f208";
 }
-.icon-story-expired::before {
+.icon-story-caption::before {
   content: "\f209";
 }
-.icon-story-priority::before {
+.icon-story-expired::before {
   content: "\f20a";
 }
-.icon-story-reply::before {
+.icon-story-priority::before {
   content: "\f20b";
 }
-.icon-strikethrough::before {
+.icon-story-reply::before {
   content: "\f20c";
 }
-.icon-tag-add::before {
+.icon-strikethrough::before {
   content: "\f20d";
 }
-.icon-tag-crossed::before {
+.icon-tag-add::before {
   content: "\f20e";
 }
-.icon-tag-filter::before {
+.icon-tag-crossed::before {
   content: "\f20f";
 }
-.icon-tag-name::before {
+.icon-tag-filter::before {
   content: "\f210";
 }
-.icon-tag::before {
+.icon-tag-name::before {
   content: "\f211";
 }
-.icon-timer::before {
+.icon-tag::before {
   content: "\f212";
 }
-.icon-toncoin::before {
+.icon-timer::before {
   content: "\f213";
 }
-.icon-tools::before {
+.icon-toncoin::before {
   content: "\f214";
 }
-.icon-topic-new::before {
+.icon-tools::before {
   content: "\f215";
 }
-.icon-trade::before {
+.icon-topic-new::before {
   content: "\f216";
 }
-.icon-transcribe::before {
+.icon-trade::before {
   content: "\f217";
 }
-.icon-truck::before {
+.icon-transcribe::before {
   content: "\f218";
 }
-.icon-unarchive::before {
+.icon-truck::before {
   content: "\f219";
 }
-.icon-underlined::before {
+.icon-unarchive::before {
   content: "\f21a";
 }
-.icon-understood::before {
+.icon-underlined::before {
   content: "\f21b";
 }
-.icon-unique-profile::before {
+.icon-understood::before {
   content: "\f21c";
 }
-.icon-unlist-outline::before {
+.icon-unique-profile::before {
   content: "\f21d";
 }
-.icon-unlist::before {
+.icon-unlist-outline::before {
   content: "\f21e";
 }
-.icon-unlock-badge::before {
+.icon-unlist::before {
   content: "\f21f";
 }
-.icon-unlock::before {
+.icon-unlock-badge::before {
   content: "\f220";
 }
-.icon-unmute::before {
+.icon-unlock::before {
   content: "\f221";
 }
-.icon-unpin::before {
+.icon-unmute::before {
   content: "\f222";
 }
-.icon-unread::before {
+.icon-unpin::before {
   content: "\f223";
 }
-.icon-up::before {
+.icon-unread::before {
   content: "\f224";
 }
-.icon-user-filled::before {
+.icon-up::before {
   content: "\f225";
 }
-.icon-user-online::before {
+.icon-user-filled::before {
   content: "\f226";
 }
-.icon-user-stars::before {
+.icon-user-online::before {
   content: "\f227";
 }
-.icon-user::before {
+.icon-user-stars::before {
   content: "\f228";
 }
-.icon-video-outlined::before {
+.icon-user::before {
   content: "\f229";
 }
-.icon-video-stop::before {
+.icon-video-outlined::before {
   content: "\f22a";
 }
-.icon-video::before {
+.icon-video-stop::before {
   content: "\f22b";
 }
-.icon-view-once::before {
+.icon-video::before {
   content: "\f22c";
 }
-.icon-voice-chat::before {
+.icon-view-once::before {
   content: "\f22d";
 }
-.icon-volume-1::before {
+.icon-voice-chat::before {
   content: "\f22e";
 }
-.icon-volume-2::before {
+.icon-volume-1::before {
   content: "\f22f";
 }
-.icon-volume-3::before {
+.icon-volume-2::before {
   content: "\f230";
 }
-.icon-warning::before {
+.icon-volume-3::before {
   content: "\f231";
 }
-.icon-web::before {
+.icon-warning::before {
   content: "\f232";
 }
-.icon-webapp::before {
+.icon-web::before {
   content: "\f233";
 }
-.icon-word-wrap::before {
+.icon-webapp::before {
   content: "\f234";
 }
-.icon-zoom-in::before {
+.icon-word-wrap::before {
   content: "\f235";
 }
-.icon-zoom-out::before {
+.icon-zoom-in::before {
   content: "\f236";
 }
+.icon-zoom-out::before {
+  content: "\f237";
+}

src/styles/icons.scss

@@ -174,156 +174,157 @@ $icons-map: (
   "muted": "\f19c",
   "my-notes": "\f19d",
   "new-chat-filled": "\f19e",
-  "next": "\f19f",
-  "nochannel": "\f1a0",
-  "noise-suppression": "\f1a1",
-  "non-contacts": "\f1a2",
-  "note": "\f1a3",
-  "one-filled": "\f1a4",
-  "open-in-new-tab": "\f1a5",
-  "password-off": "\f1a6",
-  "pause": "\f1a7",
-  "permissions": "\f1a8",
-  "phone-discard-outline": "\f1a9",
-  "phone-discard": "\f1aa",
-  "phone": "\f1ab",
-  "photo": "\f1ac",
-  "pin-badge": "\f1ad",
-  "pin-list": "\f1ae",
-  "pin": "\f1af",
-  "pinned-chat": "\f1b0",
-  "pinned-message": "\f1b1",
-  "pip": "\f1b2",
-  "play-story": "\f1b3",
-  "play": "\f1b4",
-  "poll": "\f1b5",
-  "previous": "\f1b6",
-  "privacy-policy": "\f1b7",
-  "proof-of-ownership": "\f1b8",
-  "quote-text": "\f1b9",
-  "quote": "\f1ba",
-  "radial-badge": "\f1bb",
-  "rating-icons-level1": "\f1bc",
-  "rating-icons-level10": "\f1bd",
-  "rating-icons-level2": "\f1be",
-  "rating-icons-level20": "\f1bf",
-  "rating-icons-level3": "\f1c0",
-  "rating-icons-level30": "\f1c1",
-  "rating-icons-level4": "\f1c2",
-  "rating-icons-level40": "\f1c3",
-  "rating-icons-level5": "\f1c4",
-  "rating-icons-level50": "\f1c5",
-  "rating-icons-level6": "\f1c6",
-  "rating-icons-level60": "\f1c7",
-  "rating-icons-level7": "\f1c8",
-  "rating-icons-level70": "\f1c9",
-  "rating-icons-level8": "\f1ca",
-  "rating-icons-level80": "\f1cb",
-  "rating-icons-level9": "\f1cc",
-  "rating-icons-level90": "\f1cd",
-  "rating-icons-negative": "\f1ce",
-  "readchats": "\f1cf",
-  "recent": "\f1d0",
-  "refund": "\f1d1",
-  "reload": "\f1d2",
-  "remove-quote": "\f1d3",
-  "remove": "\f1d4",
-  "reopen-topic": "\f1d5",
-  "reorder-tabs": "\f1d6",
-  "replace": "\f1d7",
-  "replies": "\f1d8",
-  "reply-filled": "\f1d9",
-  "reply": "\f1da",
-  "revenue-split": "\f1db",
-  "revote": "\f1dc",
-  "save-story": "\f1dd",
-  "saved-messages": "\f1de",
-  "schedule": "\f1df",
-  "scheduled": "\f1e0",
-  "sd-photo": "\f1e1",
-  "search": "\f1e2",
-  "select": "\f1e3",
-  "sell-outline": "\f1e4",
-  "sell": "\f1e5",
-  "send-outline": "\f1e6",
-  "send": "\f1e7",
-  "settings-filled": "\f1e8",
-  "settings": "\f1e9",
-  "share-filled": "\f1ea",
-  "share-screen-outlined": "\f1eb",
-  "share-screen-stop": "\f1ec",
-  "share-screen": "\f1ed",
-  "show-message": "\f1ee",
-  "sidebar": "\f1ef",
-  "skip-next": "\f1f0",
-  "skip-previous": "\f1f1",
-  "smallscreen": "\f1f2",
-  "smile": "\f1f3",
-  "sort-by-date": "\f1f4",
-  "sort-by-number": "\f1f5",
-  "sort-by-price": "\f1f6",
-  "sort": "\f1f7",
-  "speaker-muted-story": "\f1f8",
-  "speaker-outline": "\f1f9",
-  "speaker-story": "\f1fa",
-  "speaker": "\f1fb",
-  "spoiler-disable": "\f1fc",
-  "spoiler": "\f1fd",
-  "sport": "\f1fe",
-  "star": "\f1ff",
-  "stars-lock": "\f200",
-  "stars-refund": "\f201",
-  "stats": "\f202",
-  "stealth-future": "\f203",
-  "stealth-past": "\f204",
-  "stickers": "\f205",
-  "stop-raising-hand": "\f206",
-  "stop": "\f207",
-  "story-caption": "\f208",
-  "story-expired": "\f209",
-  "story-priority": "\f20a",
-  "story-reply": "\f20b",
-  "strikethrough": "\f20c",
-  "tag-add": "\f20d",
-  "tag-crossed": "\f20e",
-  "tag-filter": "\f20f",
-  "tag-name": "\f210",
-  "tag": "\f211",
-  "timer": "\f212",
-  "toncoin": "\f213",
-  "tools": "\f214",
-  "topic-new": "\f215",
-  "trade": "\f216",
-  "transcribe": "\f217",
-  "truck": "\f218",
-  "unarchive": "\f219",
-  "underlined": "\f21a",
-  "understood": "\f21b",
-  "unique-profile": "\f21c",
-  "unlist-outline": "\f21d",
-  "unlist": "\f21e",
-  "unlock-badge": "\f21f",
-  "unlock": "\f220",
-  "unmute": "\f221",
-  "unpin": "\f222",
-  "unread": "\f223",
-  "up": "\f224",
-  "user-filled": "\f225",
-  "user-online": "\f226",
-  "user-stars": "\f227",
-  "user": "\f228",
-  "video-outlined": "\f229",
-  "video-stop": "\f22a",
-  "video": "\f22b",
-  "view-once": "\f22c",
-  "voice-chat": "\f22d",
-  "volume-1": "\f22e",
-  "volume-2": "\f22f",
-  "volume-3": "\f230",
-  "warning": "\f231",
-  "web": "\f232",
-  "webapp": "\f233",
-  "word-wrap": "\f234",
-  "zoom-in": "\f235",
-  "zoom-out": "\f236",
+  "next-link": "\f19f",
+  "next": "\f1a0",
+  "nochannel": "\f1a1",
+  "noise-suppression": "\f1a2",
+  "non-contacts": "\f1a3",
+  "note": "\f1a4",
+  "one-filled": "\f1a5",
+  "open-in-new-tab": "\f1a6",
+  "password-off": "\f1a7",
+  "pause": "\f1a8",
+  "permissions": "\f1a9",
+  "phone-discard-outline": "\f1aa",
+  "phone-discard": "\f1ab",
+  "phone": "\f1ac",
+  "photo": "\f1ad",
+  "pin-badge": "\f1ae",
+  "pin-list": "\f1af",
+  "pin": "\f1b0",
+  "pinned-chat": "\f1b1",
+  "pinned-message": "\f1b2",
+  "pip": "\f1b3",
+  "play-story": "\f1b4",
+  "play": "\f1b5",
+  "poll": "\f1b6",
+  "previous": "\f1b7",
+  "privacy-policy": "\f1b8",
+  "proof-of-ownership": "\f1b9",
+  "quote-text": "\f1ba",
+  "quote": "\f1bb",
+  "radial-badge": "\f1bc",
+  "rating-icons-level1": "\f1bd",
+  "rating-icons-level10": "\f1be",
+  "rating-icons-level2": "\f1bf",
+  "rating-icons-level20": "\f1c0",
+  "rating-icons-level3": "\f1c1",
+  "rating-icons-level30": "\f1c2",
+  "rating-icons-level4": "\f1c3",
+  "rating-icons-level40": "\f1c4",
+  "rating-icons-level5": "\f1c5",
+  "rating-icons-level50": "\f1c6",
+  "rating-icons-level6": "\f1c7",
+  "rating-icons-level60": "\f1c8",
+  "rating-icons-level7": "\f1c9",
+  "rating-icons-level70": "\f1ca",
+  "rating-icons-level8": "\f1cb",
+  "rating-icons-level80": "\f1cc",
+  "rating-icons-level9": "\f1cd",
+  "rating-icons-level90": "\f1ce",
+  "rating-icons-negative": "\f1cf",
+  "readchats": "\f1d0",
+  "recent": "\f1d1",
+  "refund": "\f1d2",
+  "reload": "\f1d3",
+  "remove-quote": "\f1d4",
+  "remove": "\f1d5",
+  "reopen-topic": "\f1d6",
+  "reorder-tabs": "\f1d7",
+  "replace": "\f1d8",
+  "replies": "\f1d9",
+  "reply-filled": "\f1da",
+  "reply": "\f1db",
+  "revenue-split": "\f1dc",
+  "revote": "\f1dd",
+  "save-story": "\f1de",
+  "saved-messages": "\f1df",
+  "schedule": "\f1e0",
+  "scheduled": "\f1e1",
+  "sd-photo": "\f1e2",
+  "search": "\f1e3",
+  "select": "\f1e4",
+  "sell-outline": "\f1e5",
+  "sell": "\f1e6",
+  "send-outline": "\f1e7",
+  "send": "\f1e8",
+  "settings-filled": "\f1e9",
+  "settings": "\f1ea",
+  "share-filled": "\f1eb",
+  "share-screen-outlined": "\f1ec",
+  "share-screen-stop": "\f1ed",
+  "share-screen": "\f1ee",
+  "show-message": "\f1ef",
+  "sidebar": "\f1f0",
+  "skip-next": "\f1f1",
+  "skip-previous": "\f1f2",
+  "smallscreen": "\f1f3",
+  "smile": "\f1f4",
+  "sort-by-date": "\f1f5",
+  "sort-by-number": "\f1f6",
+  "sort-by-price": "\f1f7",
+  "sort": "\f1f8",
+  "speaker-muted-story": "\f1f9",
+  "speaker-outline": "\f1fa",
+  "speaker-story": "\f1fb",
+  "speaker": "\f1fc",
+  "spoiler-disable": "\f1fd",
+  "spoiler": "\f1fe",
+  "sport": "\f1ff",
+  "star": "\f200",
+  "stars-lock": "\f201",
+  "stars-refund": "\f202",
+  "stats": "\f203",
+  "stealth-future": "\f204",
+  "stealth-past": "\f205",
+  "stickers": "\f206",
+  "stop-raising-hand": "\f207",
+  "stop": "\f208",
+  "story-caption": "\f209",
+  "story-expired": "\f20a",
+  "story-priority": "\f20b",
+  "story-reply": "\f20c",
+  "strikethrough": "\f20d",
+  "tag-add": "\f20e",
+  "tag-crossed": "\f20f",
+  "tag-filter": "\f210",
+  "tag-name": "\f211",
+  "tag": "\f212",
+  "timer": "\f213",
+  "toncoin": "\f214",
+  "tools": "\f215",
+  "topic-new": "\f216",
+  "trade": "\f217",
+  "transcribe": "\f218",
+  "truck": "\f219",
+  "unarchive": "\f21a",
+  "underlined": "\f21b",
+  "understood": "\f21c",
+  "unique-profile": "\f21d",
+  "unlist-outline": "\f21e",
+  "unlist": "\f21f",
+  "unlock-badge": "\f220",
+  "unlock": "\f221",
+  "unmute": "\f222",
+  "unpin": "\f223",
+  "unread": "\f224",
+  "up": "\f225",
+  "user-filled": "\f226",
+  "user-online": "\f227",
+  "user-stars": "\f228",
+  "user": "\f229",
+  "video-outlined": "\f22a",
+  "video-stop": "\f22b",
+  "video": "\f22c",
+  "view-once": "\f22d",
+  "voice-chat": "\f22e",
+  "volume-1": "\f22f",
+  "volume-2": "\f230",
+  "volume-3": "\f231",
+  "warning": "\f232",
+  "web": "\f233",
+  "webapp": "\f234",
+  "word-wrap": "\f235",
+  "zoom-in": "\f236",
+  "zoom-out": "\f237",
 );

src/styles/index.scss

@@ -361,6 +361,13 @@ body:not(.is-ios) {
   vertical-align: text-bottom; // As regular text
 }
 
+.next-arrow-icon {
+  font-size: var(--next-arrow-size, 0.5625em);
+  font-weight: var(--next-arrow-weight, inherit);
+  line-height: inherit;
+  vertical-align: middle;
+}
+
 .shared-canvas-container {
   position: relative;
 }

src/types/icons/font.ts

@@ -157,6 +157,7 @@ export type FontIconName =
   | 'muted'
   | 'my-notes'
   | 'new-chat-filled'
+  | 'next-link'
   | 'next'
   | 'nochannel'
   | 'noise-suppression'

src/util/localization/format.tsx

@@ -8,6 +8,12 @@ import buildClassName from '../buildClassName';
 import Icon from '../../components/common/icons/Icon';
 import StarIcon from '../../components/common/icons/StarIcon';
 
+export function getNextArrowReplacement() {
+  return {
+    '>': <Icon name="next-link" className="next-arrow-icon" />,
+  };
+}
+
 export function formatStarsAsText(lang: LangFn, amount: number) {
   return lang('StarsAmountText', { amount }, { pluralValue: amount });
 }