From fec5e07b7ddc480395c4b7a4ee63e4766a9f52f6 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 22 Feb 2026 23:43:33 +0100
Subject: [PATCH] Star Icon: Fix vertical align (#6688)

---
 src/components/modals/gift/GiftComposer.tsx              | 9 ++++++++-
 .../modals/stars/StarsBalanceModal.module.scss           | 2 ++
 src/components/modals/stars/StarsPaymentModal.tsx        | 2 +-
 src/components/ui/ModalStarBalanceBar.module.scss        | 4 +---
 src/styles/index.scss                                    | 2 +-
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/gift/GiftComposer.tsx b/src/components/modals/gift/GiftComposer.tsx
index 15e9f8a56..14a08cc4c 100644
--- a/src/components/modals/gift/GiftComposer.tsx
+++ b/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,
diff --git a/src/components/modals/stars/StarsBalanceModal.module.scss b/src/components/modals/stars/StarsBalanceModal.module.scss
index 410f5fde0..928dd1a1d 100644
--- a/src/components/modals/stars/StarsBalanceModal.module.scss
+++ b/src/components/modals/stars/StarsBalanceModal.module.scss
@@ -286,6 +286,8 @@
 
 .paymentButtonStar {
   --color-fill: white !important;
+
+  margin-inline-start: 0;
 }
 
 .transactions, .subscriptions {
diff --git a/src/components/modals/stars/StarsPaymentModal.tsx b/src/components/modals/stars/StarsPaymentModal.tsx
index 0139afb1c..5461f510f 100644
--- a/src/components/modals/stars/StarsPaymentModal.tsx
+++ b/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,
         })}
diff --git a/src/components/ui/ModalStarBalanceBar.module.scss b/src/components/ui/ModalStarBalanceBar.module.scss
index 8abd24b61..35a5c0960 100644
--- a/src/components/ui/ModalStarBalanceBar.module.scss
+++ b/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 {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 29780cd52..4e3950c24 100644
--- a/src/styles/index.scss
+++ b/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 {