Merge pull request #2807 from yougotwill/fix/no-ref/selected_message_shadow

Fix/no ref/selected message shadow

stylesheets/_modules.scss

@@ -1048,6 +1048,9 @@
 }
 
 // Module H5AudioPlayer
+$rhap_background-color: var(--transparent-color) !default;
+$rhap_font-family: inherit !default;
+
 .module-message__container--outgoing {
   .rhap_container {
     background-color: var(--message-bubbles-sent-background-color);

stylesheets/_session_conversation.scss

@@ -254,135 +254,3 @@
     }
   }
 }
-
-/* ************ */
-/* AUDIO PLAYER */
-/* ************ */
-$rhap_background-color: var(--transparent-color) !default;
-$rhap_font-family: inherit !default;
-
-.rhap_container,
-.rhap_container button,
-.rhap_progress-container {
-  outline: none;
-}
-
-.rhap_progress-container {
-  margin: 0 0 0 calc(10px + 1%);
-}
-
-.rhap_container {
-  min-width: 220px;
-  padding: 0px;
-  background-color: transparent;
-  box-shadow: none;
-  padding: var(--padding-message-content);
-  border-radius: var(--border-radius-message-box);
-
-  svg {
-    transition: fill var(--default-duration);
-  }
-}
-
-.rhap_total-time {
-  display: none;
-}
-
-.rhap_current-time {
-  margin: 0 5px 0 4px;
-  flex-shrink: 0;
-}
-
-.rhap_play-pause-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.rhap_volume-bar {
-  display: none;
-}
-
-.rhap_volume-button {
-  .module-message__container--incoming & {
-    color: var(--message-bubbles-received-text-color);
-  }
-  .module-message__container--outgoing & {
-    color: var(--message-bubbles-sent-text-color);
-  }
-}
-
-.rhap_volume-container div[role='progressbar'] {
-  display: none;
-}
-
-.rhap_time {
-  .module-message__container--incoming & {
-    color: var(--message-bubbles-received-text-color);
-  }
-  .module-message__container--outgoing & {
-    color: var(--message-bubbles-sent-text-color);
-  }
-
-  font-size: 12px;
-}
-
-.rhap_progress-bar {
-  box-sizing: border-box;
-  position: relative;
-  z-index: 0;
-  width: 100%;
-  height: 5px;
-  border-radius: 2px;
-}
-
-.rhap_progress-filled {
-  padding-left: 5px;
-}
-
-.rhap_download-progress {
-  height: 100%;
-  position: absolute;
-  z-index: 1;
-  border-radius: 2px;
-}
-
-.rhap_progress-indicator {
-  z-index: 3;
-  width: 15px;
-  height: 15px;
-  top: -5px;
-  margin-left: -10px;
-  box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important;
-}
-
-.rhap_controls-section {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.rhap_additional-controls {
-  display: none;
-}
-
-.rhap_play-pause-button {
-  width: unset;
-  height: unset;
-}
-
-.rhap_controls-section {
-  flex: unset;
-  justify-content: flex-start;
-}
-
-.rhap_volume-button {
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-  margin-right: 0px;
-}
-
-/* **************** */
-/* END AUDIO PLAYER */
-/* **************** */

ts/components/conversation/H5AudioPlayer.tsx

@@ -25,6 +25,128 @@ const StyledSpeedButton = styled.div`
   }
 `;
 
+export const StyledH5AudioPlayer = styled(H5AudioPlayer)`
+  &.rhap_container {
+    min-width: 220px;
+    padding: 0px;
+    outline: none;
+    padding: var(--padding-message-content);
+    border-radius: var(--border-radius-message-box);
+
+    svg {
+      transition: fill var(--default-duration);
+    }
+
+    button {
+      outline: none;
+    }
+  }
+
+  .rhap_progress-container {
+    margin: 0 0 0 calc(10px + 1%);
+    outline: none;
+  }
+
+  .rhap_total-time {
+    display: none;
+  }
+
+  .rhap_current-time {
+    margin: 0 5px 0 4px;
+    flex-shrink: 0;
+  }
+
+  .rhap_play-pause-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .rhap_volume-bar {
+    display: none;
+  }
+
+  .rhap_volume-button {
+    .module-message__container--incoming & {
+      color: var(--message-bubbles-received-text-color);
+    }
+    .module-message__container--outgoing & {
+      color: var(--message-bubbles-sent-text-color);
+    }
+  }
+
+  .rhap_volume-container div[role='progressbar'] {
+    display: none;
+  }
+
+  .rhap_time {
+    .module-message__container--incoming & {
+      color: var(--message-bubbles-received-text-color);
+    }
+    .module-message__container--outgoing & {
+      color: var(--message-bubbles-sent-text-color);
+    }
+
+    font-size: 12px;
+  }
+
+  .rhap_progress-bar {
+    box-sizing: border-box;
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 5px;
+    border-radius: 2px;
+  }
+
+  .rhap_progress-filled {
+    padding-left: 5px;
+  }
+
+  .rhap_download-progress {
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    border-radius: 2px;
+  }
+
+  .rhap_progress-indicator {
+    z-index: 3;
+    width: 15px;
+    height: 15px;
+    top: -5px;
+    margin-left: -10px;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important;
+  }
+
+  .rhap_controls-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .rhap_additional-controls {
+    display: none;
+  }
+
+  .rhap_play-pause-button {
+    width: unset;
+    height: unset;
+  }
+
+  .rhap_controls-section {
+    flex: unset;
+    justify-content: flex-start;
+  }
+
+  .rhap_volume-button {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    margin-right: 0px;
+  }
+`;
+
 export const AudioPlayerWithEncryptedFile = (props: {
   src: string;
   contentType: string;
@@ -98,7 +220,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
   };
 
   return (
-    <H5AudioPlayer
+    <StyledH5AudioPlayer
       src={urlToLoad}
       preload="metadata"
       style={{ pointerEvents: multiSelectMode ? 'none' : 'inherit' }}

ts/components/conversation/message/message-content/MessageAttachment.tsx

@@ -31,6 +31,7 @@ import { LightBoxOptions } from '../../SessionConversation';
 import { ClickToTrustSender } from './ClickToTrustSender';
 import styled from 'styled-components';
 import classNames from 'classnames';
+import { StyledMessageHighlighter } from './MessageContent';
 
 export type MessageAttachmentSelectorProps = Pick<
   MessageRenderingProps,
@@ -48,10 +49,13 @@ type Props = {
   messageId: string;
   imageBroken: boolean;
   handleImageError: () => void;
+  highlight?: boolean;
 };
 // tslint:disable: use-simple-attributes
 
-const StyledAttachmentContainer = styled.div<{ messageDirection: MessageModelType }>`
+const StyledAttachmentContainer = styled.div<{
+  messageDirection: MessageModelType;
+}>`
   text-align: center;
   position: relative;
   overflow: hidden;
@@ -61,10 +65,11 @@ const StyledAttachmentContainer = styled.div<{ messageDirection: MessageModelTyp
 
 // tslint:disable-next-line max-func-body-length cyclomatic-complexity
 export const MessageAttachment = (props: Props) => {
-  const { messageId, imageBroken, handleImageError } = props;
+  const { messageId, imageBroken, handleImageError, highlight = false } = props;
 
   const dispatch = useDispatch();
   const attachmentProps = useSelector(state => getMessageAttachmentProps(state as any, messageId));
+
   const multiSelectMode = useSelector(isMessageSelectionMode);
   const onClickOnImageGrid = useCallback(
     (attachment: AttachmentTypeWithPath | AttachmentType) => {
@@ -116,6 +121,7 @@ export const MessageAttachment = (props: Props) => {
   if (!attachments || !attachments[0]) {
     return null;
   }
+
   const firstAttachment = attachments[0];
   const displayImage = canDisplayImage(attachments);
 
@@ -130,18 +136,22 @@ export const MessageAttachment = (props: Props) => {
       (isVideo(attachments) && hasVideoScreenshot(attachments)))
   ) {
     return (
-      <StyledAttachmentContainer messageDirection={direction}>
-        <ImageGrid
-          attachments={attachments}
-          onError={handleImageError}
-          onClickAttachment={onClickOnImageGrid}
-        />
-      </StyledAttachmentContainer>
+      <StyledMessageHighlighter highlight={highlight}>
+        <StyledAttachmentContainer messageDirection={direction}>
+          <ImageGrid
+            attachments={attachments}
+            onError={handleImageError}
+            onClickAttachment={onClickOnImageGrid}
+          />
+        </StyledAttachmentContainer>
+      </StyledMessageHighlighter>
     );
   }
+
   if (!firstAttachment.pending && !firstAttachment.error && isAudio(attachments)) {
     return (
-      <div
+      <StyledMessageHighlighter
+        highlight={highlight}
         role="main"
         onClick={(e: any) => {
           if (multiSelectMode) {
@@ -150,21 +160,20 @@ export const MessageAttachment = (props: Props) => {
           e.stopPropagation();
           e.preventDefault();
         }}
-        style={{ padding: 'var(--margins-xs) 0px' }}
       >
         <AudioPlayerWithEncryptedFile
           src={firstAttachment.url}
           contentType={firstAttachment.contentType}
           messageId={messageId}
         />
-      </div>
+      </StyledMessageHighlighter>
     );
   }
   const { pending, fileName, fileSize, contentType } = firstAttachment;
   const extension = getExtensionForDisplay({ contentType, fileName });
 
   return (
-    <div className="module-message__generic-attachment">
+    <StyledMessageHighlighter highlight={highlight} className="module-message__generic-attachment">
       {pending ? (
         <div className="module-message__generic-attachment__spinner-container">
           <Spinner size="small" />
@@ -200,7 +209,7 @@ export const MessageAttachment = (props: Props) => {
           {fileSize}
         </div>
       </div>
-    </div>
+    </StyledMessageHighlighter>
   );
 };
 

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -62,7 +62,7 @@ const opacityAnimation = keyframes`
     }
 `;
 
-const StyledMessageHighlighter = styled.div<{
+export const StyledMessageHighlighter = styled.div<{
   highlight: boolean;
 }>`
   ${props =>
@@ -187,13 +187,12 @@ export const MessageContent = (props: Props) => {
             </StyledMessageOpaqueContent>
           )}
           {!isDeleted && (
-            <StyledMessageHighlighter highlight={highlight}>
-              <MessageAttachment
-                messageId={props.messageId}
-                imageBroken={imageBroken}
-                handleImageError={handleImageError}
-              />
-            </StyledMessageHighlighter>
+            <MessageAttachment
+              messageId={props.messageId}
+              imageBroken={imageBroken}
+              handleImageError={handleImageError}
+              highlight={highlight}
+            />
           )}
         </IsMessageVisibleContext.Provider>
       </InView>

ts/components/conversation/message/message-content/MessageReactions.tsx

@@ -14,7 +14,11 @@ import { StyledPopupContainer } from '../reactions/ReactionPopup';
 export const popupXDefault = -81;
 export const popupYDefault = -90;
 
-const StyledMessageReactionsContainer = styled(Flex)<{ x: number; y: number; noAvatar: boolean }>`
+export const StyledMessageReactionsContainer = styled(Flex)<{
+  x: number;
+  y: number;
+  noAvatar: boolean;
+}>`
   ${StyledPopupContainer} {
     position: absolute;
     top: ${props => `${props.y}px;`};

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -21,6 +21,7 @@ import { MessageContentWithStatuses } from '../message-content/MessageContentWit
 import { ReadableMessage } from './ReadableMessage';
 import styled, { keyframes } from 'styled-components';
 import { isOpenOrClosedGroup } from '../../../../models/conversationAttributes';
+import { StyledMessageReactionsContainer } from '../message-content/MessageReactions';
 
 export type GenericReadableMessageSelectorProps = Pick<
   MessageRenderingProps,
@@ -118,11 +119,16 @@ const StyledReadableMessage = styled(ReadableMessage)<{
   width: 100%;
   letter-spacing: 0.03rem;
   padding: var(--margins-xs) var(--margins-lg) 0;
+  margin: var(--margins-xxs) 0;
 
   &.message-highlighted {
     animation: ${highlightedMessageAnimation} 1s ease-in-out;
   }
 
+  ${StyledMessageReactionsContainer} {
+    margin-top: var(--margins-xs);
+  }
+
   ${props =>
     props.isRightClicked &&
     `

ts/themes/globals.tsx

@@ -17,6 +17,7 @@ export type ThemeGlobals = {
   '--font-size-h4': string;
 
   /* Margins */
+  '--margins-xxs': string;
   '--margins-xs': string;
   '--margins-sm': string;
   '--margins-md': string;
@@ -97,6 +98,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--font-size-h3': '20px',
   '--font-size-h4': '16px',
 
+  '--margins-xxs': '2.5px',
   '--margins-xs': '5px',
   '--margins-sm': '10px',
   '--margins-md': '15px',