- = ({
+const FullNameTitle = ({
className,
style,
peer,
@@ -74,7 +73,7 @@ const FullNameTitle: FC = ({
withStatusTextColor,
onEmojiStatusClick,
observeIntersection,
-}) => {
+}: OwnProps) => {
const { showNotification } = getActions();
const oldLang = useOldLang();
@@ -125,7 +124,10 @@ const FullNameTitle: FC = ({
const botVerificationIconId = realPeer?.botVerificationIconId;
return (
-
@@ -363,11 +360,11 @@ const GiftAuctionBidModal = ({
{renderUserBid()}
{renderTopWinners()}
-
);
@@ -614,7 +614,7 @@ const GiftInfoModal = ({
tableData.push([
lang('GiftInfoValue'),
+
@@ -304,8 +302,7 @@ const GiftAuctionBidModal = ({
{amount !== undefined && (
{botVerificationIconId && (
Promise.all([
diff --git a/src/components/common/gift/SavedGift.module.scss b/src/components/common/gift/SavedGift.module.scss
index 94aa189b4..ff46b6441 100644
--- a/src/components/common/gift/SavedGift.module.scss
+++ b/src/components/common/gift/SavedGift.module.scss
@@ -35,9 +35,7 @@
}
.star {
- margin-inline-start: 0 !important;
- margin-inline-end: 0.125rem;
- font-size: 0.75rem !important;
+ font-size: 0.75rem;
}
.priceBadge {
@@ -46,15 +44,15 @@
overflow: visible;
- height: 1.5rem !important;
+ height: 1.5rem;
margin-top: 0.625rem;
+ padding-block: 0.375rem;
- font-size: 0.6875rem !important;
- font-weight: var(--font-weight-semibold) !important;
+ font-size: 0.6875rem;
+ font-weight: var(--font-weight-semibold);
line-height: 1;
- background-color: var(--color-light-shadow) !important;
- -webkit-backdrop-filter: blur(0.5rem);
+ background-color: var(--color-light-shadow);
backdrop-filter: blur(0.5rem);
}
diff --git a/src/components/common/gift/SavedGift.tsx b/src/components/common/gift/SavedGift.tsx
index a518959b8..e79c68d1e 100644
--- a/src/components/common/gift/SavedGift.tsx
+++ b/src/components/common/gift/SavedGift.tsx
@@ -191,9 +191,9 @@ const SavedGift = ({
nonInteractive
size="tiny"
withSparkleEffect
- noSparkleAnimation
pill
fluid
+ inline
>
{resellPrice.currency === 'TON'
? formatTonAsIcon(lang, resellPrice.amount, { shouldConvertFromNanos: true, className: styles.star })
diff --git a/src/components/common/icons/StarIcon.module.scss b/src/components/common/icons/StarIcon.module.scss
index 91650fd12..ce77da9c4 100644
--- a/src/components/common/icons/StarIcon.module.scss
+++ b/src/components/common/icons/StarIcon.module.scss
@@ -1,7 +1,7 @@
.root {
--color-fill: var(--color-primary);
- display: flex;
+ display: inline-block;
flex-shrink: 0;
width: 1rem;
height: 1rem;
@@ -10,28 +10,30 @@
.middle {
width: 1.25rem;
height: 1.25rem;
+ font-size: 1rem !important;
}
.big {
width: 1.5rem;
height: 1.5rem;
+ font-size: 1rem !important;
}
.adaptive {
- display: inline-block;
-
width: 1em;
height: 1em;
-
line-height: 1;
- vertical-align: text-top;
}
-.svg {
+.svg, .img {
width: 100%;
height: 100%;
}
+.img {
+ vertical-align: bottom;
+}
+
.clickable {
pointer-events: auto;
cursor: var(--custom-cursor, pointer);
diff --git a/src/components/common/icons/StarIcon.tsx b/src/components/common/icons/StarIcon.tsx
index 02d4cf82d..911f5be1b 100644
--- a/src/components/common/icons/StarIcon.tsx
+++ b/src/components/common/icons/StarIcon.tsx
@@ -1,4 +1,3 @@
-import type { FC } from '../../../lib/teact/teact';
import { memo } from '../../../lib/teact/teact';
import buildClassName from '../../../util/buildClassName';
@@ -7,11 +6,14 @@ import useUniqueId from '../../../hooks/useUniqueId';
import styles from './StarIcon.module.scss';
+import StarWebp from '../../../assets/icons/star/star.webp';
+
type OwnProps = {
type?: 'gold' | 'premium' | 'regular';
size?: 'small' | 'middle' | 'big' | 'adaptive';
className?: string;
style?: string;
+ forceVector?: boolean;
onClick?: VoidFunction;
};
@@ -19,20 +21,21 @@ type OwnProps = {
const STAR_PATH = 'M6.63869 12.1902L3.50621 14.1092C3.18049 14.3087 2.75468 14.2064 2.55515 13.8807C2.45769 13.7216 2.42864 13.5299 2.47457 13.3491L2.95948 11.4405C3.13452 10.7515 3.60599 10.1756 4.24682 9.86791L7.6642 8.22716C7.82352 8.15067 7.89067 7.95951 7.81418 7.80019C7.75223 7.67116 7.61214 7.59896 7.47111 7.62338L3.66713 8.28194C2.89387 8.41581 2.1009 8.20228 1.49941 7.69823L0.297703 6.69116C0.00493565 6.44581 -0.0335059 6.00958 0.211842 5.71682C0.33117 5.57442 0.502766 5.48602 0.687982 5.47153L4.35956 5.18419C4.61895 5.16389 4.845 4.99974 4.94458 4.75937L6.36101 1.3402C6.5072 0.987302 6.91179 0.819734 7.26469 0.965925C7.43413 1.03612 7.56876 1.17075 7.63896 1.3402L9.05539 4.75937C9.15496 4.99974 9.38101 5.16389 9.6404 5.18419L13.3322 5.47311C13.713 5.50291 13.9975 5.83578 13.9677 6.2166C13.9534 6.39979 13.8667 6.56975 13.7269 6.68896L10.9114 9.08928C10.7131 9.25826 10.6267 9.52425 10.6876 9.77748L11.5532 13.3733C11.6426 13.7447 11.414 14.1182 11.0427 14.2076C10.8642 14.2506 10.676 14.2208 10.5195 14.1249L7.36128 12.1902C7.13956 12.0544 6.8604 12.0544 6.63869 12.1902Z';
/* eslint-enable @stylistic/max-len */
-const StarIcon: FC = ({
+const StarIcon = ({
type = 'regular',
size = 'small',
className,
style,
+ forceVector,
onClick,
-}) => {
+}: OwnProps) => {
const randomId = useUniqueId();
const validSvgRandomId = `svg-${randomId}`; // ID must start with a letter
const renderIcon = () => {
switch (type) {
case 'gold':
- return = ({
);
};
-function GoldStarIcon({ randomId }: { randomId: string }) {
+function GoldStarIcon({ randomId, asVector }: { randomId: string; asVector?: boolean }) {
+ if (!asVector) {
+ return (
+ 
+ );
+ }
+
const mask1Id = `${randomId}-mask1`;
const mask2Id = `${randomId}-mask2`;
const gradient1Id = `${randomId}-gradient1`;
diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss
index 24705b0b5..1aaa904ad 100644
--- a/src/components/left/main/Chat.scss
+++ b/src/components/left/main/Chat.scss
@@ -315,12 +315,6 @@
color: #fff;
}
}
-
- .star-amount-icon {
- margin-inline: 0;
- line-height: initial;
- vertical-align: text-top;
- }
}
&[dir="rtl"] {
diff --git a/src/components/left/search/PublicPostsSearchLauncher.tsx b/src/components/left/search/PublicPostsSearchLauncher.tsx
index c637e94ea..2b44d6392 100644
--- a/src/components/left/search/PublicPostsSearchLauncher.tsx
+++ b/src/components/left/search/PublicPostsSearchLauncher.tsx
@@ -130,6 +130,7 @@ const PublicPostsSearchLauncher = ({
color="primary"
disabled={!searchQuery}
noForcedUpperCase
+ inline
onClick={handlePaidSearchClick}
>
{lang('PublicPostsSearchForStars', {
diff --git a/src/components/middle/RequirementToContactMessage.module.scss b/src/components/middle/RequirementToContactMessage.module.scss
index d5b4e1278..2ded8071a 100644
--- a/src/components/middle/RequirementToContactMessage.module.scss
+++ b/src/components/middle/RequirementToContactMessage.module.scss
@@ -88,8 +88,3 @@
align-items: center;
font-weight: var(--font-weight-medium);
}
-
-.starIcon {
- margin-inline-start: 0 !important;
- margin-inline-end: 0.0625rem !important;
-}
diff --git a/src/components/middle/RequirementToContactMessage.tsx b/src/components/middle/RequirementToContactMessage.tsx
index 108d0dca5..466948d10 100644
--- a/src/components/middle/RequirementToContactMessage.tsx
+++ b/src/components/middle/RequirementToContactMessage.tsx
@@ -66,7 +66,6 @@ function RequirementToContactMessage({
paidMessagesStars,
{
asFont: true,
- className: styles.starIcon,
containerClassName: styles.starIconContainer,
}),
}, {
diff --git a/src/components/middle/composer/AttachmentModal.module.scss b/src/components/middle/composer/AttachmentModal.module.scss
index 03bac1520..aa828a289 100644
--- a/src/components/middle/composer/AttachmentModal.module.scss
+++ b/src/components/middle/composer/AttachmentModal.module.scss
@@ -86,11 +86,6 @@
}
}
-.sendButtonStar {
- margin-inline-start: 0 !important;
- margin-inline-end: 0.125rem !important;
-}
-
.attachments {
overflow: auto;
display: flex;
diff --git a/src/components/middle/composer/AttachmentModal.tsx b/src/components/middle/composer/AttachmentModal.tsx
index 8788d28e8..cfc86a051 100644
--- a/src/components/middle/composer/AttachmentModal.tsx
+++ b/src/components/middle/composer/AttachmentModal.tsx
@@ -638,7 +638,6 @@ const AttachmentModal = ({
lang,
attachmentsLength * paidMessagesStars,
{
- className: styles.sendButtonStar,
asFont: true,
},
) : lang('Send');
@@ -766,6 +765,7 @@ const AttachmentModal = ({
ref={mainButtonRef}
className={styles.send}
size="smaller"
+ inline
onClick={handleSendClick}
onContextMenu={canShowCustomSendMenu ? handleContextMenu : undefined}
>
diff --git a/src/components/middle/composer/helpers/renderKeyboardButtonText.tsx b/src/components/middle/composer/helpers/renderKeyboardButtonText.tsx
index 6656137cc..3ed14efa0 100644
--- a/src/components/middle/composer/helpers/renderKeyboardButtonText.tsx
+++ b/src/components/middle/composer/helpers/renderKeyboardButtonText.tsx
@@ -15,7 +15,7 @@ export default function renderKeyboardButtonText(lang: LangFn, button: ApiKeyboa
}
if (button.type === 'buy') {
- return replaceWithTeact(button.text, STARS_ICON_PLACEHOLDER, = ({
{
formatStarsAsIcon(lang, paidMessageStars, {
asFont: true,
- className: 'message-price-star-icon',
- containerClassName: 'message-price-stars-container',
})
}
diff --git a/src/components/middle/panes/PaidMessageChargePane.module.scss b/src/components/middle/panes/PaidMessageChargePane.module.scss
index f6d122513..a71be1d34 100644
--- a/src/components/middle/panes/PaidMessageChargePane.module.scss
+++ b/src/components/middle/panes/PaidMessageChargePane.module.scss
@@ -16,23 +16,10 @@
}
.message {
- display: flex;
- align-items: center;
- justify-content: center;
-
margin-bottom: 0.375rem;
-
font-size: 1rem;
}
.messageStars {
- display: inline-flex;
- align-items: center;
- padding-inline: 0.25rem;
font-weight: var(--font-weight-medium);
}
-
-.messageStarIcon {
- margin-inline-start: 0 !important;
- margin-inline-end: 0.125rem !important;
-}
diff --git a/src/components/middle/panes/PaidMessageChargePane.tsx b/src/components/middle/panes/PaidMessageChargePane.tsx
index 20164c719..0a61d6632 100644
--- a/src/components/middle/panes/PaidMessageChargePane.tsx
+++ b/src/components/middle/panes/PaidMessageChargePane.tsx
@@ -16,13 +16,11 @@ import {
import { formatStarsAsIcon } from '../../../util/localization/format';
import useLang from '../../../hooks/useLang';
-// import useTimeout from '../../../hooks/schedulers/useTimeout';
import useLastCallback from '../../../hooks/useLastCallback';
import useHeaderPane, { type PaneState } from '../hooks/useHeaderPane';
import Button from '../../ui/Button';
-// import CustomEmoji from '../../common/CustomEmoji';
import styles from './PaidMessageChargePane.module.scss';
type OwnProps = {
@@ -65,7 +63,7 @@ const PaidMessageChargePane: FC = ({
peer: peerName,
amount: formatStarsAsIcon(lang,
chargedPaidMessageStars,
- { asFont: true, className: styles.messageStarIcon, containerClassName: styles.messageStars }),
+ { asFont: true }),
}, {
withMarkdown: true,
withNodes: true,
@@ -73,9 +71,9 @@ const PaidMessageChargePane: FC = ({
return (
-
diff --git a/src/components/modals/gift/auction/ActiveGiftAuctionsModal.tsx b/src/components/modals/gift/auction/ActiveGiftAuctionsModal.tsx
index 7ae183126..75f4600a1 100644
--- a/src/components/modals/gift/auction/ActiveGiftAuctionsModal.tsx
+++ b/src/components/modals/gift/auction/ActiveGiftAuctionsModal.tsx
@@ -102,7 +102,7 @@ function ActiveAuctionItem({ auction }: { auction: ApiStarGiftAuctionState }) {
+
{message}
-
+
{lang('GiftAuctionBidPosition', {
- amount: formatStarsAsIcon(lang, userState.bidAmount!, { noStyles: true }),
+ amount: formatStarsAsIcon(lang, userState.bidAmount!),
position: lang.number(bidPosition),
}, {
withNodes: true,
diff --git a/src/components/modals/gift/auction/GiftAuctionBidModal.module.scss b/src/components/modals/gift/auction/GiftAuctionBidModal.module.scss
index 5645ff2f9..37cce16f2 100644
--- a/src/components/modals/gift/auction/GiftAuctionBidModal.module.scss
+++ b/src/components/modals/gift/auction/GiftAuctionBidModal.module.scss
@@ -60,7 +60,6 @@
.infoCardValue {
display: flex;
- gap: 0.25rem;
align-items: center;
justify-content: center;
@@ -197,19 +196,11 @@
}
.bidderAmount {
- display: flex;
- gap: 0.25rem;
- align-items: center;
-
font-size: 0.9375rem;
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
-.buttonStar {
- margin-inline-start: 0 !important;
-}
-
.giftSticker {
margin-right: 0.25rem;
}
diff --git a/src/components/modals/gift/auction/GiftAuctionBidModal.tsx b/src/components/modals/gift/auction/GiftAuctionBidModal.tsx
index 32351142f..7aa9377dc 100644
--- a/src/components/modals/gift/auction/GiftAuctionBidModal.tsx
+++ b/src/components/modals/gift/auction/GiftAuctionBidModal.tsx
@@ -200,8 +200,7 @@ const GiftAuctionBidModal = ({
@@ -269,8 +268,7 @@ const GiftAuctionBidModal = ({
{currentUserPeer &&
-
{lang('GiftAuctionMinimumBid')}
-
-
)}
- {formatStarsAsIcon(lang, starsValue, { className: styles.starAmountIcon })}
+ {formatStarsAsIcon(lang, starsValue, { className: styles.starAmountIcon, withWrapper: true })}
{canManage && hasConvertOption && Boolean(starsToConvert) && (
{lang('GiftInfoConvert', { amount: starsToConvert }, { pluralValue: starsToConvert })}
diff --git a/src/components/modals/gift/resale/GiftResalePriceComposerModal.tsx b/src/components/modals/gift/resale/GiftResalePriceComposerModal.tsx
index 23b77ea72..b321e3dbe 100644
--- a/src/components/modals/gift/resale/GiftResalePriceComposerModal.tsx
+++ b/src/components/modals/gift/resale/GiftResalePriceComposerModal.tsx
@@ -167,7 +167,7 @@ const GiftResalePriceComposerModal = ({
{lang('OnlyAcceptTONDescription')}
-