Album: Fix background color during selection (#1494)

src/components/middle/composer/WebPagePreview.tsx

@@ -5,9 +5,10 @@ import { withGlobal } from '../../../lib/teact/teactn';
 
 import { GlobalActions } from '../../../global/types';
 import { ApiMessage, ApiMessageEntityTypes, ApiWebPage } from '../../../api/types';
+import { ISettings } from '../../../types';
 
 import { RE_LINK_TEMPLATE } from '../../../config';
-import { selectNoWebPage } from '../../../modules/selectors';
+import { selectNoWebPage, selectTheme } from '../../../modules/selectors';
 import { pick } from '../../../util/iteratees';
 import parseMessageInput from './helpers/parseMessageInput';
 import useOnChange from '../../../hooks/useOnChange';
@@ -30,6 +31,7 @@ type OwnProps = {
 type StateProps = {
   webPagePreview?: ApiWebPage;
   noWebPage?: boolean;
+  theme: ISettings['theme'];
 };
 type DispatchProps = Pick<GlobalActions, 'loadWebPagePreview' | 'clearWebPagePreview' | 'toggleMessageWebPage'>;
 
@@ -42,6 +44,7 @@ const WebPagePreview: FC<OwnProps & StateProps & DispatchProps> = ({
   disabled,
   webPagePreview,
   noWebPage,
+  theme,
   loadWebPagePreview,
   clearWebPagePreview,
   toggleMessageWebPage,
@@ -103,7 +106,7 @@ const WebPagePreview: FC<OwnProps & StateProps & DispatchProps> = ({
         <Button round faded color="translucent" ariaLabel="Clear Webpage Preview" onClick={handleClearWebpagePreview}>
           <i className="icon-close" />
         </Button>
-        <WebPage message={messageStub} inPreview />
+        <WebPage message={messageStub} inPreview theme={theme} />
       </div>
     </div>
   );
@@ -113,6 +116,7 @@ export default memo(withGlobal<OwnProps>(
   (global, { chatId, threadId }): StateProps => {
     const noWebPage = selectNoWebPage(global, chatId, threadId);
     return {
+      theme: selectTheme(global),
       webPagePreview: global.webPagePreview,
       noWebPage,
     };

src/components/middle/message/Album.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback } from '../../../lib/teact/teact';
 
 import { GlobalActions, GlobalState } from '../../../global/types';
 import { ApiMessage } from '../../../api/types';
-import { IAlbum } from '../../../types';
+import { IAlbum, ISettings } from '../../../types';
 import { AlbumRectPart, IAlbumLayout } from './helpers/calculateAlbumLayout';
 
 import { getMessageContent } from '../../../modules/helpers';
@@ -10,6 +10,7 @@ import { withGlobal } from '../../../lib/teact/teactn';
 import { pick } from '../../../util/iteratees';
 import withSelectControl from './hocs/withSelectControl';
 import { ObserveFn } from '../../../hooks/useIntersectionObserver';
+import { selectTheme } from '../../../modules/selectors';
 
 import Photo from './Photo';
 import Video from './Video';
@@ -32,6 +33,7 @@ type OwnProps = {
 };
 
 type StateProps = {
+  theme: ISettings['theme'];
   uploadsById: GlobalState['fileUploads']['byMessageLocalId'];
 };
 
@@ -48,6 +50,7 @@ const Album: FC<OwnProps & StateProps & DispatchProps> = ({
   albumLayout,
   onMediaClick,
   uploadsById,
+  theme,
   cancelSendingMessage,
 }) => {
   const mediaCount = album.messages.length;
@@ -79,6 +82,7 @@ const Album: FC<OwnProps & StateProps & DispatchProps> = ({
           dimensions={dimensions}
           onClick={onMediaClick}
           onCancelUpload={handleCancelUpload}
+          theme={theme}
         />
       );
     } else if (video) {
@@ -94,6 +98,7 @@ const Album: FC<OwnProps & StateProps & DispatchProps> = ({
           dimensions={dimensions}
           onClick={onMediaClick}
           onCancelUpload={handleCancelUpload}
+          theme={theme}
         />
       );
     }
@@ -116,7 +121,9 @@ const Album: FC<OwnProps & StateProps & DispatchProps> = ({
 
 export default withGlobal<OwnProps>(
   (global): StateProps => {
+    const theme = selectTheme(global);
     return {
+      theme,
       uploadsById: global.fileUploads.byMessageLocalId,
     };
   },

src/components/middle/message/Message.scss

@@ -18,7 +18,6 @@
   --meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + var(--meta-safe-area-extra-width));
   --deleting-translate-x: -50%;
   --select-message-scale: 0.9;
-  --select-background-color: white;
 
   &.is-swiped {
     transform: translateX(-2.5rem) !important;
@@ -57,11 +56,6 @@
   }
 
   &.is-in-selection-mode {
-    .Album {
-      border: 1px var(--select-background-color) solid;
-      background-color: var(--select-background-color);
-    }
-
     body.is-android & {
       .can-select-text {
         z-index: var(--z-message-select-control);
@@ -261,11 +255,6 @@
       left: unset;
     }
 
-    .media-inner {
-      border: 0 var(--select-background-color) solid;
-      transition: border-width var(--select-transition);
-    }
-
     img, video {
       transition: transform var(--select-transition), opacity ease 300ms;
     }

src/components/middle/message/Message.tsx

@@ -533,6 +533,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
             shouldAffectAppendix={hasCustomAppendix}
             onClick={handleMediaClick}
             onCancelUpload={handleCancelUpload}
+            theme={theme}
           />
         )}
         {!isAlbum && video && video.isRound && (
@@ -611,6 +612,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
             lastSyncTime={lastSyncTime}
             onMediaClick={handleMediaClick}
             onCancelMediaTransfer={handleCancelUpload}
+            theme={theme}
           />
         )}
         {invoice && <Invoice message={message} />}

src/components/middle/message/Photo.tsx

@@ -3,6 +3,7 @@ import React, {
 } from '../../../lib/teact/teact';
 
 import { ApiMessage } from '../../../api/types';
+import { ISettings } from '../../../types';
 import { IMediaDimensions } from './helpers/calculateAlbumLayout';
 
 import {
@@ -37,6 +38,7 @@ export type OwnProps = {
   shouldAffectAppendix?: boolean;
   dimensions?: IMediaDimensions & { isSmall?: boolean };
   nonInteractive?: boolean;
+  theme: ISettings['theme'];
   onClick?: (id: number) => void;
   onCancelUpload?: (message: ApiMessage) => void;
 };
@@ -56,6 +58,7 @@ const Photo: FC<OwnProps> = ({
   dimensions,
   nonInteractive,
   shouldAffectAppendix,
+  theme,
   onClick,
   onCancelUpload,
 }) => {
@@ -108,14 +111,14 @@ const Photo: FC<OwnProps> = ({
     const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
 
     if (fullMediaData) {
-      getCustomAppendixBg(fullMediaData, isOwn, isInSelectMode, isSelected).then((appendixBg) => {
+      getCustomAppendixBg(fullMediaData, isOwn, isInSelectMode, isSelected, theme).then((appendixBg) => {
         contentEl.style.setProperty('--appendix-bg', appendixBg);
         contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, '');
       });
     } else {
       contentEl.classList.add('has-appendix-thumb');
     }
-  }, [fullMediaData, isOwn, shouldAffectAppendix, isInSelectMode, isSelected]);
+  }, [fullMediaData, isOwn, shouldAffectAppendix, isInSelectMode, isSelected, theme]);
 
   const { width, height, isSmall } = dimensions || calculateMediaDimensions(message, noAvatars);
 

src/components/middle/message/WebPage.tsx

@@ -2,6 +2,7 @@ import React, { FC, memo, useCallback } from '../../../lib/teact/teact';
 
 import { ApiMessage } from '../../../api/types';
 import { ObserveFn } from '../../../hooks/useIntersectionObserver';
+import { ISettings } from '../../../types';
 
 import { getMessageWebPage } from '../../../modules/helpers';
 import { calculateMediaDimensions } from './helpers/mediaDimensions';
@@ -25,6 +26,7 @@ type OwnProps = {
   shouldAutoPlay?: boolean;
   inPreview?: boolean;
   lastSyncTime?: number;
+  theme: ISettings['theme'];
   onMediaClick?: () => void;
   onCancelMediaTransfer?: () => void;
 };
@@ -37,6 +39,7 @@ const WebPage: FC<OwnProps> = ({
   shouldAutoPlay,
   inPreview,
   lastSyncTime,
+  theme,
   onMediaClick,
   onCancelMediaTransfer,
 }) => {
@@ -91,6 +94,7 @@ const WebPage: FC<OwnProps> = ({
           nonInteractive={!isMediaInteractive}
           onClick={isMediaInteractive ? handleMediaClick : undefined}
           onCancelUpload={onCancelMediaTransfer}
+          theme={theme}
         />
       )}
       <div className="WebPage-text">

src/components/middle/message/helpers/getCustomAppendixBg.ts

@@ -1,7 +1,23 @@
-const SELECTED_APPENDIX_BACKGROUND = Promise.resolve('rgba(255,255,255,1)');
+import { ISettings } from '../../../../types';
 
-export default function getCustomAppendixBg(src: string, isOwn: boolean, inSelectMode?: boolean, isSelected?: boolean) {
+const SELECTED_APPENDIX_COLORS = {
-  return isSelected ? SELECTED_APPENDIX_BACKGROUND : getAppendixColorFromImage(src, isOwn);
+  dark: {
+    outgoing: 'rgb(135,116,225)',
+    incoming: 'rgb(33,33,33)',
+  },
+  light: {
+    outgoing: 'rgb(238,255,222)',
+    incoming: 'rgb(255,255,255)',
+  },
+};
+
+export default function getCustomAppendixBg(
+  src: string, isOwn: boolean, inSelectMode?: boolean, isSelected?: boolean, theme?: ISettings['theme'],
+) {
+  if (isSelected) {
+    return Promise.resolve(SELECTED_APPENDIX_COLORS[theme || 'light'][isOwn ? 'outgoing' : 'incoming']);
+  }
+  return getAppendixColorFromImage(src, isOwn);
 }
 
 async function getAppendixColorFromImage(src: string, isOwn: boolean) {