Star Icon: Fix vertical align (#6688)

src/components/modals/gift/GiftComposer.tsx

@@ -289,7 +289,14 @@ function GiftComposer({
           <div className={styles.description}>
             {lang('GiftPremiumDescriptionYourBalance', {
               stars: formatStarsAsIcon(lang, starBalance.amount, { className: styles.switcherStarIcon }),
-              link: <Link isPrimary onClick={handleGetMoreStars}>{lang('GetMoreStarsLinkText')}</Link>,
+              link: (
+                <Link isPrimary onClick={handleGetMoreStars}>
+                  {lang('GetMoreStarsLinkText', undefined, {
+                    withNodes: true,
+                    specialReplacement: getNextArrowReplacement(),
+                  })}
+                </Link>
+              ),
             }, {
               withNodes: true,
               withMarkdown: true,

src/components/modals/stars/StarsBalanceModal.module.scss

@@ -286,6 +286,8 @@
 
 .paymentButtonStar {
   --color-fill: white !important;
+
+  margin-inline-start: 0;
 }
 
 .transactions, .subscriptions {

src/components/modals/stars/StarsPaymentModal.tsx

@@ -200,7 +200,7 @@ const StarPaymentModal = ({
       </div>
       <Button className={styles.paymentButton} onClick={handlePayment} isLoading={isLoading}>
         {lang(isBotSubscription ? 'StarsSubscribeBotButtonMonth' : 'StarsPay', {
-          amount: formatStarsAsIcon(lang, amount!, { asFont: true }),
+          amount: formatStarsAsIcon(lang, amount!, { asFont: true, className: styles.paymentButtonStar }),
         }, {
           withNodes: true,
         })}

src/components/ui/ModalStarBalanceBar.module.scss

@@ -39,9 +39,7 @@
 }
 
 .starIcon {
-  height: 1rem !important;
-  margin-inline-start: 0.125rem !important;
-  line-height: 1rem !important;
+  margin-inline-start: 0 !important;
 }
 
 .tonInUsdDescription {

src/styles/index.scss

@@ -358,7 +358,7 @@ body:not(.is-ios) {
   margin-inline-start: 0.375em; // Prevent sticking to the text without using `white-space: pre`
   margin-inline-end: 0.2em; // Prevent sticking to the text without using `white-space: pre`
   line-height: inherit; // Vertical centring
-  vertical-align: text-bottom; // As regular text
+  vertical-align: text-top; // As regular text
 }
 
 .next-arrow-icon {