diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index f2e65018e..2752e4a6c 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -147,15 +147,26 @@ .module-message__link-preview { cursor: pointer; + + display: flex; + align-items: center; + background: white; + color: black; + border-radius: var(--border-radius-message-box); + margin: var(--padding-link-preview); + + .module-image { + margin: -1px; + } } .module-message__link-preview__content { - padding: 0 0 5px 0; + padding: 0 0 var(--margins-xs) 0; display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1; - border: 1px solid $color-black-015; + margin-left: var(--margins-sm); } .module-message__link-preview__image_container { diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index 6aab68d37..2881b1007 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -281,26 +281,4 @@ } } -$session-highlight-message-shadow: 0px 0px 10px 1px $session-color-green; -@keyframes remove-box-shadow { - 0% { - box-shadow: none; - } - 10% { - box-shadow: $session-highlight-message-shadow; - } - 75% { - box-shadow: $session-highlight-message-shadow; - } - 100% { - box-shadow: none; - } -} - -.flash-green-once { - animation-name: remove-box-shadow; - animation-timing-function: linear; - animation-duration: 2s; - box-shadow: $session-highlight-message-shadow; -} diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index f1aaefc23..d66ef8b87 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/ts/components/conversation/SessionMessagesListContainer.tsx @@ -186,7 +186,7 @@ class SessionMessagesListContainerInner extends React.Component { if (messageId !== undefined) { this.timeoutResetQuotedScroll = global.setTimeout(() => { window.inboxStore?.dispatch(quotedMessageToAnimate(undefined)); - }, 2000); // should match .flash-green-once + }, 1000); // should match StyledMessageOpaqueContent } } diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index 301445c3e..18954cd85 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/ts/components/conversation/message/message-content/MessageContent.tsx @@ -16,7 +16,7 @@ import { MessageLinkPreview } from './MessageLinkPreview'; import { MessageQuote } from './MessageQuote'; import { MessageText } from './MessageText'; import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; export type MessageContentSelectorProps = Pick< MessageRenderingProps, @@ -42,7 +42,10 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent) } } -const StyledMessageOpaqueContent = styled.div<{ messageDirection: MessageModelType }>` +const StyledMessageOpaqueContent = styled.div<{ + messageDirection: MessageModelType; + highlight: boolean; +}>` background: ${props => props.messageDirection === 'incoming' ? 'var(--color-received-message-background)' @@ -51,6 +54,36 @@ const StyledMessageOpaqueContent = styled.div<{ messageDirection: MessageModelTy padding: var(--padding-message-content); border-radius: var(--border-radius-message-box); + + @keyframes highlight { + 0% { + opacity: 1; + } + 25% { + opacity: 0.2; + } + 50% { + opacity: 1; + } + 75% { + opacity: 0.2; + } + 100% { + opacity: 1; + } +} + + ${props => { + return props.highlight + ? css` + animation-name: highlight; + animation-timing-function: linear; + animation-duration: 1s; + border-radius: 'var(--border-radius-message-box)'; + ` + : ''; + }} +} `; export const IsMessageVisibleContext = createContext(false); @@ -128,11 +161,7 @@ export const MessageContent = (props: Props) => { return (
{ > {hasContentAfterAttachmentAndQuote && ( - + {!isDeleted && ( <> diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx index 6839f5f16..4b5f176ff 100644 --- a/ts/components/leftpane/MessageRequestsBanner.tsx +++ b/ts/components/leftpane/MessageRequestsBanner.tsx @@ -48,7 +48,7 @@ const StyledUnreadCounter = styled.div` font-weight: bold; border-radius: var(--margins-sm); background-color: var(--color-request-banner-unread-background); - margin-left: 10px; + margin-left: var(--margins-sm); min-width: 20px; height: 20px; line-height: 25px; diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx index 804bddcae..cb0c8e78d 100644 --- a/ts/state/ducks/SessionTheme.tsx +++ b/ts/state/ducks/SessionTheme.tsx @@ -332,7 +332,9 @@ export const SessionGlobalStyles = createGlobalStyle` --margins-lg: 20px; /* PADDING */ + // TODO Theming --padding-message-content: 7px 13px; + --padding-link-preview: -7px -13px 7px -13px; // bottom has positive value because a link preview has always a body below --border-radius-message-box: 16px; /* SIZES */