Gifts: Adjusted styles in action gift content (#5435)

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;

src/components/middle/message/ContextMenuContainer.tsx

@@ -32,7 +32,6 @@ import {
   getIsDownloading,
   getMessageDownloadableMedia,
   getMessageVideo,
-  getPrivateChatUserId,
   getUserFullName,
   hasMessageTtl,
   isActionMessage,

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

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<string>('');
   const [shouldHideName, setShouldHideName] = useState<boolean>(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 (
     <div className={buildClassName(styles.root, 'no-scroll')}>
       <div
         className={buildClassName(styles.actionMessageView, 'MessageList')}
         // @ts-ignore -- FIXME: Find a way to disable interactions but keep a11y
         inert
-        style={`--pattern-color: ${patternColor}`}
+        style={buildStyle(
+          `--pattern-color: ${patternColor}`,
+          backgroundColor && `--theme-background-color: ${backgroundColor}`,
+        )}
       >
+        <div
+          className={bgClassName}
+          style={customBackgroundValue ? `--custom-background: ${customBackgroundValue}` : undefined}
+        />
         <ActionMessage key={isStarGift ? gift.id : gift.months} message={localMessage} />
       </div>
       {renderOptionsSection()}
@@ -234,7 +262,10 @@ export default memo(withGlobal<OwnProps>(
   (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<OwnProps>(
 
     return {
       user,
+      theme,
+      isBackgroundBlurred,
       patternColor,
+      customBackground,
+      backgroundColor,
       captionLimit: global.appConfig?.starGiftMaxMessageLength,
       currentUserId: global.currentUserId,
       isPaymentFormLoading: tabState.isPaymentFormLoading,