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];
}