diff --git a/src/components/common/gift/GiftTransferPreview.tsx b/src/components/common/gift/GiftTransferPreview.tsx index c4665717d..4e077b3eb 100644 --- a/src/components/common/gift/GiftTransferPreview.tsx +++ b/src/components/common/gift/GiftTransferPreview.tsx @@ -39,6 +39,9 @@ const GiftTransferPreview = ({ className={styles.backdrop} backgroundColors={[giftAttributes.backdrop!.centerColor, giftAttributes.backdrop!.edgeColor]} patternIcon={giftAttributes.pattern?.sticker} + ringsCount={1} + ovalFactor={1} + patternSize={12} /> ); }, [backdrop, pattern]); diff --git a/src/components/common/profile/ProfileInfo.tsx b/src/components/common/profile/ProfileInfo.tsx index ba0d2acaf..2557e8a86 100644 --- a/src/components/common/profile/ProfileInfo.tsx +++ b/src/components/common/profile/ProfileInfo.tsx @@ -98,6 +98,7 @@ type StateProps = { theme: ThemeKey; isPlain?: boolean; savedGifts?: ApiSavedGifts; + hasAvatar?: boolean; }; const EMOJI_STATUS_SIZE = 24; @@ -130,6 +131,7 @@ const ProfileInfo = ({ theme, isPlain, savedGifts, + hasAvatar, onExpand, }: OwnProps & StateProps) => { const { @@ -286,7 +288,7 @@ const ProfileInfo = ({ return; } - onExpand?.(); + if (hasAvatar) onExpand?.(); }); function handleSelectFallbackPhoto() { @@ -576,7 +578,7 @@ const ProfileInfo = ({ size="jumbo" peer={peer} style={createVtnStyle('avatar', true)} - onClick={handleMinimizedAvatarClick} + onClick={hasAvatar ? handleMinimizedAvatarClick : undefined} /> )} @@ -627,6 +629,7 @@ export default memo(withGlobal( const hasBackground = selectPeerHasProfileBackground(global, peerId); const savedGifts = selectPeerSavedGifts(global, peerId); + const hasAvatar = Boolean(peer?.avatarPhotoId); return { user, @@ -646,6 +649,7 @@ export default memo(withGlobal( theme, isPlain: !hasBackground, savedGifts, + hasAvatar, }; }, )(ProfileInfo)); diff --git a/src/components/common/profile/RadialPatternBackground.tsx b/src/components/common/profile/RadialPatternBackground.tsx index 063b3fade..e25dc22eb 100644 --- a/src/components/common/profile/RadialPatternBackground.tsx +++ b/src/components/common/profile/RadialPatternBackground.tsx @@ -29,6 +29,7 @@ type OwnProps = { className?: string; clearBottomSector?: boolean; yPosition?: number; + withAdaptiveHeight?: boolean; }; const BASE_RING_ITEM_COUNT = 8; @@ -40,7 +41,7 @@ const DARK_LUMA_THRESHOLD = 255 * 0.2; const DEFAULT_PATTERN_SIZE = 20; const DEFAULT_RINGS_COUNT = 3; -const DEFAULT_OVAL_FACTOR = 1.4; +const DEFAULT_OVAL_FACTOR = 1.61; const RadialPatternBackground = ({ backgroundColors, @@ -53,6 +54,7 @@ const RadialPatternBackground = ({ clearBottomSector, className, yPosition, + withAdaptiveHeight, }: OwnProps) => { const containerRef = useRef(); const canvasRef = useRef(); @@ -125,7 +127,8 @@ const RadialPatternBackground = ({ if (!width || !height) return; const centerX = width / 2; - const centerY = yPosition !== undefined ? yPosition * dpr : height / 2; + const centerY = withAdaptiveHeight ? height / 2 + : yPosition !== undefined ? yPosition * dpr : width / 2; ctx.clearRect(0, 0, width, height); @@ -133,8 +136,7 @@ const RadialPatternBackground = ({ x, y, sizeFactor, }) => { const renderX = x * Math.max(width, MIN_SIZE * dpr) + centerX; - const renderY = yPosition !== undefined ? y * Math.max(width, MIN_SIZE * dpr) + centerY - : y * Math.max(height, MIN_SIZE * dpr) + centerY; + const renderY = y * Math.max(withAdaptiveHeight ? height : width, MIN_SIZE * dpr) + centerY; const size = patternSize * dpr * sizeFactor; ctx.drawImage(emojiImage, renderX - size / 2, renderY - size / 2, size, size); diff --git a/src/components/middle/message/ActionMessage.module.scss b/src/components/middle/message/ActionMessage.module.scss index ea7b53d07..d7391ae69 100644 --- a/src/components/middle/message/ActionMessage.module.scss +++ b/src/components/middle/message/ActionMessage.module.scss @@ -196,7 +196,7 @@ .uniqueBackground { position: absolute; - inset: -6rem 0 0 0; + inset: 0; } .uniqueValue { diff --git a/src/components/middle/message/WebPageUniqueGift.module.scss b/src/components/middle/message/WebPageUniqueGift.module.scss index 04deacbaa..8b912a28a 100644 --- a/src/components/middle/message/WebPageUniqueGift.module.scss +++ b/src/components/middle/message/WebPageUniqueGift.module.scss @@ -17,16 +17,10 @@ font-weight: var(--font-weight-semibold); } -.backgroundWrapper { - position: absolute; - inset: 0; - overflow: hidden; - border-radius: inherit; -} - .background { position: absolute; - inset: -1rem 0 0 0; + inset: 0; + border-radius: inherit; } .stickerWrapper { diff --git a/src/components/middle/message/WebPageUniqueGift.tsx b/src/components/middle/message/WebPageUniqueGift.tsx index d02c72df5..a44806578 100644 --- a/src/components/middle/message/WebPageUniqueGift.tsx +++ b/src/components/middle/message/WebPageUniqueGift.tsx @@ -45,16 +45,15 @@ const WebPageUniqueGift = ({ onMouseEnter={!IS_TOUCH_ENV ? markHover : undefined} onMouseLeave={!IS_TOUCH_ENV ? unmarkHover : undefined} > -
- -
+
diff --git a/src/components/modals/gift/GiftItemStar.tsx b/src/components/modals/gift/GiftItemStar.tsx index 491b50587..edc8cbb22 100644 --- a/src/components/modals/gift/GiftItemStar.tsx +++ b/src/components/modals/gift/GiftItemStar.tsx @@ -26,10 +26,10 @@ import styles from './GiftItem.module.scss'; export type OwnProps = { gift: ApiStarGift; - observeIntersection?: ObserveFn; - onClick: (gift: ApiStarGift, target: 'original' | 'resell') => void; isResale?: boolean; withTransferBadge?: boolean; + observeIntersection?: ObserveFn; + onClick: (gift: ApiStarGift, target: 'original' | 'resell') => void; }; type StateProps = { @@ -39,7 +39,7 @@ type StateProps = { const GIFT_STICKER_SIZE = 90; function GiftItemStar({ - gift, observeIntersection, onClick, isResale, isCurrentUserPremium, withTransferBadge, + gift, isResale, isCurrentUserPremium, withTransferBadge, observeIntersection, onClick, }: OwnProps & StateProps) { const { openGiftInfoModal, openPremiumModal, showNotification, checkCanSendGift } = getActions(); diff --git a/src/components/modals/gift/UniqueGiftHeader.module.scss b/src/components/modals/gift/UniqueGiftHeader.module.scss index 4e6210eb1..0d40fd2a0 100644 --- a/src/components/modals/gift/UniqueGiftHeader.module.scss +++ b/src/components/modals/gift/UniqueGiftHeader.module.scss @@ -14,10 +14,6 @@ &.withManageButtons { --_height: 18.5rem; - .radialPattern { - inset: -8rem -5% -5% -5%; - } - .sticker { margin-top: 2.5rem; } @@ -52,8 +48,7 @@ .radialPattern { position: absolute; z-index: -1; - inset: -5rem -5% -5% -5%; - height: calc(var(--height) * 1.05); + inset: 0; } .amount { diff --git a/src/components/modals/gift/UniqueGiftHeader.tsx b/src/components/modals/gift/UniqueGiftHeader.tsx index ad144887a..80b2974dd 100644 --- a/src/components/modals/gift/UniqueGiftHeader.tsx +++ b/src/components/modals/gift/UniqueGiftHeader.tsx @@ -14,6 +14,7 @@ import { import { IS_TOUCH_ENV } from '../../../util/browser/windowEnvironment.ts'; import buildClassName from '../../../util/buildClassName'; import buildStyle from '../../../util/buildStyle'; +import { REM } from '../../common/helpers/mediaDimensions.ts'; import { useTransitionActiveKey } from '../../../hooks/animations/useTransitionActiveKey'; import useFlag from '../../../hooks/useFlag'; @@ -72,6 +73,7 @@ const UniqueGiftHeader = ({ className={styles.radialPattern} backgroundColors={backdropColors} patternIcon={patternAttribute.sticker} + yPosition={6.5 * REM} /> ); }, [backdropAttribute, patternAttribute]); diff --git a/src/components/modals/gift/status/GiftStatusInfoModal.module.scss b/src/components/modals/gift/status/GiftStatusInfoModal.module.scss index dfb197ac9..9cf880337 100644 --- a/src/components/modals/gift/status/GiftStatusInfoModal.module.scss +++ b/src/components/modals/gift/status/GiftStatusInfoModal.module.scss @@ -19,11 +19,11 @@ .radialPattern { position: absolute; z-index: -1; - top: -3rem; + top: -1rem; inset-inline-start: -1.5rem; width: calc(100% + 3rem); - height: calc(100% + 2rem); + height: calc(100% + 1rem); } .lockIcon { diff --git a/src/components/modals/gift/status/GiftStatusInfoModal.tsx b/src/components/modals/gift/status/GiftStatusInfoModal.tsx index 6f076a92e..d49659c6a 100644 --- a/src/components/modals/gift/status/GiftStatusInfoModal.tsx +++ b/src/components/modals/gift/status/GiftStatusInfoModal.tsx @@ -9,6 +9,7 @@ import type { TabState } from '../../../../global/types'; import { selectIsCurrentUserPremium, selectUser } from '../../../../global/selectors'; import buildClassName from '../../../../util/buildClassName'; import buildStyle from '../../../../util/buildStyle'; +import { REM } from '../../../common/helpers/mediaDimensions'; import useCurrentOrPrev from '../../../../hooks/useCurrentOrPrev'; import useLang from '../../../../hooks/useLang'; @@ -73,6 +74,7 @@ const GiftStatusInfoModal = ({ className={styles.radialPattern} backgroundColors={backdropColors} patternIcon={patternIcon.customEmoji} + yPosition={6.5 * REM} /> ); }, [emojiStatus, isOpen, patternIcon]); diff --git a/src/components/modals/gift/withdraw/GiftWithdrawModal.tsx b/src/components/modals/gift/withdraw/GiftWithdrawModal.tsx index 17442dbf0..58d145173 100644 --- a/src/components/modals/gift/withdraw/GiftWithdrawModal.tsx +++ b/src/components/modals/gift/withdraw/GiftWithdrawModal.tsx @@ -87,6 +87,7 @@ const GiftWithdrawModal = ({ modal, hasPassword, passwordHint }: OwnProps & Stat (global: T, peer: A const profileColor = !isCustomPeer ? peer.profileColor : undefined; if (profileColor?.type === 'collectible') return undefined; - const key = profileColor?.color || peerColorId; - if (!key) return undefined; + const key = profileColor?.color ?? peerColorId; + if (key === undefined) return undefined; return global.peerColors?.profile?.[key]; }