diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 70e620401..8a3056067 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -273,6 +273,10 @@ align-items: center; } + .centered-action .action-message-content { + max-width: 17rem; + } + .action-message-gift { display: flex !important; width: 13.75rem; diff --git a/src/components/middle/message/ContextMenuContainer.tsx b/src/components/middle/message/ContextMenuContainer.tsx index 045668cee..0d31788c3 100644 --- a/src/components/middle/message/ContextMenuContainer.tsx +++ b/src/components/middle/message/ContextMenuContainer.tsx @@ -32,7 +32,6 @@ import { getIsDownloading, getMessageDownloadableMedia, getMessageVideo, - getPrivateChatUserId, getUserFullName, hasMessageTtl, isActionMessage, diff --git a/src/components/modals/gift/GiftComposer.module.scss b/src/components/modals/gift/GiftComposer.module.scss index 85e5c54f0..d949f1ca2 100644 --- a/src/components/modals/gift/GiftComposer.module.scss +++ b/src/components/modals/gift/GiftComposer.module.scss @@ -140,3 +140,96 @@ margin-right: 0.1875rem; margin-left: 0.5rem; } + +.background { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + overflow: hidden; + background-color: var(--theme-background-color); + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + + :global(html.theme-light) &:not(.customBgImage)::before { + background-image: url('../../../assets/chat-bg-br.png'); + } + + &:not(.customBgImage).customBgColor::before { + display: none; + } + + &.customBgImage::before { + background-image: var(--custom-background) !important; + transform: scale(1.1); + } + + :global(body:not(.no-page-transitions)) &.withTransition { + transition: background-color 0.2s; + + &.customBgImage::before { + transition: background-image var(--layer-transition); + } + } + + &.customBgImage.blurred::before { + filter: blur(12px); + } + + @media screen and (min-width: 1276px) { + :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { + overflow: hidden; + transform: scale(1); + transform-origin: left center; + } + } + + :global(html.theme-light body:not(.no-page-transitions)) &:not(.customBgImage).withRightColumn::before { + @media screen and (min-width: 1276px) { + transform: scaleX(0.73) !important; + } + + @media screen and (min-width: 1921px) { + transform: scaleX(0.8) !important; + } + + @media screen and (min-width: 2600px) { + transform: scaleX(0.95) !important; + } + } + + /* stylelint-disable-next-line @stylistic/max-line-length */ + :global(html.theme-light body:not(.no-page-transitions)) &:not(.customBgImage).withRightColumn.withTransition::before { + transition: transform var(--layer-transition); + } + + &:not(.customBgImage):not(.customBgColor)::after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-image: url('../../../assets/chat-bg-pattern-light.png'); + background-position: top right; + background-size: 510px auto; + background-repeat: repeat; + mix-blend-mode: overlay; + + :global(html.theme-dark) & { + background-image: url('../../../assets/chat-bg-pattern-dark.png'); + mix-blend-mode: unset; + } + } +} diff --git a/src/components/modals/gift/GiftComposer.tsx b/src/components/modals/gift/GiftComposer.tsx index 8f8199b1b..b42f80fac 100644 --- a/src/components/modals/gift/GiftComposer.tsx +++ b/src/components/modals/gift/GiftComposer.tsx @@ -5,15 +5,18 @@ import React, { import { getActions, withGlobal } from '../../../global'; import type { ApiMessage, ApiUser } from '../../../api/types'; +import type { ThemeKey } from '../../../types'; import type { GiftOption } from './GiftModal'; import { STARS_CURRENCY_CODE } from '../../../config'; import { getUserFullName } from '../../../global/helpers'; import { selectTabState, selectTheme, selectUser } from '../../../global/selectors'; import buildClassName from '../../../util/buildClassName'; +import buildStyle from '../../../util/buildStyle'; import { formatCurrency } from '../../../util/formatCurrency'; import { formatStarsAsIcon } from '../../../util/localization/format'; +import useCustomBackground from '../../../hooks/useCustomBackground'; import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; @@ -33,7 +36,11 @@ export type OwnProps = { export type StateProps = { captionLimit?: number; + theme: ThemeKey; + isBackgroundBlurred?: boolean; patternColor?: string; + customBackground?: string; + backgroundColor?: string; user?: ApiUser; currentUserId?: string; isPaymentFormLoading?: boolean; @@ -46,7 +53,11 @@ function GiftComposer({ userId, user, captionLimit, + theme, + isBackgroundBlurred, patternColor, + backgroundColor, + customBackground, currentUserId, isPaymentFormLoading, }: OwnProps & StateProps) { @@ -57,6 +68,8 @@ function GiftComposer({ const [giftMessage, setGiftMessage] = useState(''); const [shouldHideName, setShouldHideName] = useState(false); + const customBackgroundValue = useCustomBackground(theme, customBackground); + const isStarGift = 'id' in gift; const localMessage = useMemo(() => { @@ -214,14 +227,29 @@ function GiftComposer({ ); } + const bgClassName = buildClassName( + styles.background, + styles.withTransition, + customBackground && styles.customBgImage, + backgroundColor && styles.customBgColor, + customBackground && isBackgroundBlurred && styles.blurred, + ); + return (
+
{renderOptionsSection()} @@ -234,7 +262,10 @@ export default memo(withGlobal( (global, { userId }): StateProps => { const theme = selectTheme(global); const { + isBlurred: isBackgroundBlurred, patternColor, + background: customBackground, + backgroundColor, } = global.settings.themes[theme] || {}; const user = selectUser(global, userId); @@ -242,7 +273,11 @@ export default memo(withGlobal( return { user, + theme, + isBackgroundBlurred, patternColor, + customBackground, + backgroundColor, captionLimit: global.appConfig?.starGiftMaxMessageLength, currentUserId: global.currentUserId, isPaymentFormLoading: tabState.isPaymentFormLoading,