From 3abd69a3eacf08e40daad0c67aac516934f27482 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 28 Sep 2022 14:19:10 +1000 Subject: [PATCH] feat: styled message bubbles, control messages and the session dropdown --- stylesheets/_conversation.scss | 8 +-- stylesheets/_quote.scss | 16 ++--- stylesheets/_session.scss | 30 ++++----- stylesheets/_session_theme.scss | 27 ++++---- .../SessionMessagesListContainer.tsx | 2 +- .../message-content/MessageContent.tsx | 64 +++++++++---------- .../message/message-item/DateBreak.tsx | 2 +- .../message-item/GenericReadableMessage.tsx | 9 ++- .../notification-bubble/CallNotification.tsx | 2 +- .../NotificationBubble.tsx | 4 +- ts/themes/SessionTheme.tsx | 8 ++- ts/themes/switchTheme.tsx | 4 +- 12 files changed, 89 insertions(+), 87 deletions(-) diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index dcca0d2bc..78797b6cb 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -16,10 +16,10 @@ } .group-invitation { - background: var(--color-received-message-background); + background-color: var(--message-bubbles-received-background-color); &.invitation-outgoing { - background: var(--color-sent-message-background); + background-color: var(--message-bubbles-sent-background-color); align-self: flex-end; } @@ -62,12 +62,12 @@ .group-invitation { .group-details { - color: var(--color-received-message-text); + color: var(--message-bubbles-received-text-color); } } .group-invitation.invitation-outgoing { .group-details { - color: var(--color-sent-message-text); + color: var(--message-bubbles-sent-text-color); } } diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index b0ac10b14..d64219745 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -11,7 +11,7 @@ border-left-style: solid; &__primary__type-label { - border-color: var(--color-text); + border-color: var(--text-primary-color); } } @@ -19,7 +19,7 @@ .module-quote { &--outgoing { .module-quote__primary__author { - color: var(--color-sent-message-text); + color: var(--message-bubbles-sent-text-color); font-weight: bold; .module-contact-name { @@ -27,27 +27,27 @@ } } .module-quote__primary__text { - color: var(--color-sent-message-text); + color: var(--message-bubbles-sent-text-color); a { - color: var(--color-sent-message-text); + color: var(--message-bubbles-sent-text-color); } } } &--incoming { .module-quote__primary__author { - color: var(--color-received-message-text); + color: var(--message-bubbles-sent-text-color); font-weight: bold; .module-contact-name { font-weight: bold; } } .module-quote__primary__text { - color: var(--color-received-message-text); + color: var(--message-bubbles-sent-text-color); a { - color: var(--color-received-message-text); + color: var(--message-bubbles-sent-text-color); } } } @@ -295,7 +295,7 @@ $session-highlight-message-shadow: 0px 0px 10px 1px var(--primary-color); } } -.flash-green-once { +.flash-primary-once { animation-name: remove-box-shadow; animation-timing-function: linear; animation-duration: 2s; diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index bad48f138..e528ec005 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -372,13 +372,13 @@ label { justify-content: space-between; height: 50px; padding: 0px var(--margins-md); - font-size: $session-font-sm; + font-size: var(--font-size-md); - color: var(--color-text); - background: var(--color-cell-background); + background-color: var(--right-panel-item-background-color); + color: var(--right-panel-item-text-color); &:hover { - background: var(--color-clickable-hovered); + background: var(--right-panel-item-background-hover-color); } } @@ -403,22 +403,18 @@ label { justify-content: center; height: 35px; padding: 0 var(--margins-md); - background: var(--color-cell-background); - color: var(--color-text); + background: var(--right-panel-item-background-color); + color: var(--right-panel-item-text-color); font-size: 0.8rem; width: -webkit-fill-available; transition: var(--default-duration); &:first-child { - border-top: var(--border-session); + border-top: var(--border-color); } &:last-child { - border-top: var(--border-session); - } - - &:hover { - background: var(--color-clickable-hovered); + border-top: var(--border-color); } .session-icon { @@ -430,16 +426,16 @@ label { &.active, &:hover { - background: var(--color-clickable-hovered); + background: var(--right-panel-item-background-hover-color); } &.danger { - color: var(--color-destructive); + color: var(--danger-color); } } &:hover { - background: var(--color-clickable-hovered); + background: var(--right-panel-item-background-hover-color); } } @@ -469,14 +465,14 @@ label { display: flex; justify-content: center; - background: var(--color-white-color); + background: var(--white-color); padding: 0.5rem; svg { width: 135px; height: 135px; border-radius: 3px; padding: var(--margins-xs); - background-color: var(--color-white-color); + background-color: var(--white-color); } } diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 03a8b3123..48a3584fe 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -33,15 +33,15 @@ &__container--incoming { &--opaque { - background: var(--color-received-message-background); + background: var(--message-bubbles-received-background-color); } &--transparent { - background: none; + background: var(--transparent-color); } .module-message__text { - color: var(--color-received-message-text); + color: var(--message-bubbles-received-text-color); display: flex; flex-direction: row; align-items: center; @@ -52,26 +52,26 @@ a { text-decoration: underline; - color: var(--color-received-message-text); + color: var(--message-bubbles-received-text-color); } } } &__container--outgoing { &--opaque { - background: var(--color-sent-message-background); + background: var(--message-bubbles-sent-background-color); } &--transparent { - background: none; + background: var(--transparent-color); } .module-message__text { - color: var(--color-sent-message-text); + color: var(--message-bubbles-sent-text-color); a { text-decoration: underline; - color: var(--color-sent-message-text); + color: var(--message-bubbles-sent-text-color); } } } @@ -90,20 +90,21 @@ @include fontAccentBold(); } +// TODO Theming - Confirm this works h1 { @include session-h-title; - color: var(--color-light-gray-color); + color: var(--text-secondary-color); font-size: 25px; margin: 0; &.active { - color: var(--color-text); + color: var(--text-primary-color); } } h2 { @include session-h-title; - color: var(--color-text); + color: var(--text-primary-color); font-size: 22px; text-align: center; @@ -111,7 +112,7 @@ h2 { h3 { @include session-h-title; - color: var(--color-text); + color: var(--text-primary-color); font-size: 18px; padding-top: 22px; @@ -119,7 +120,7 @@ h3 { h4 { @include session-h-title; - color: var(--color-text); + color: var(--text-primary-color); font-size: 17px; text-align: center; diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index 19be88a5a..640c120a8 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/ts/components/conversation/SessionMessagesListContainer.tsx @@ -173,7 +173,7 @@ class SessionMessagesListContainerInner extends React.Component { if (messageId !== undefined) { this.timeoutResetQuotedScroll = global.setTimeout(() => { window.inboxStore?.dispatch(quotedMessageToAnimate(undefined)); - }, 2000); // should match .flash-green-once + }, 2000); // should match .flash-primary-once } } diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index 5159389ce..6648b9116 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/ts/components/conversation/message/message-content/MessageContent.tsx @@ -88,6 +88,37 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent) } } +function getWidth( + props: Pick +): number | undefined { + const { attachments, previews } = props; + + if (attachments && attachments.length) { + const dimensions = getGridDimensions(attachments); + if (dimensions) { + return dimensions.width; + } + } + + if (previews && previews.length) { + const first = previews[0]; + + if (!first || !first.image) { + return; + } + const { width } = first.image; + + if (isImageAttachment(first.image) && width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH) { + const dimensions = getImageDimensionsInAttachment(first.image); + if (dimensions) { + return dimensions.width; + } + } + } + + return; +} + const StyledMessageContent = styled.div` border-radius: 18px; `; @@ -187,7 +218,7 @@ export const MessageContent = (props: Props) => { ? `module-message__container--${direction}--transparent` : `module-message__container--${direction}--opaque`, - flashGreen && 'flash-green-once' + flashGreen && 'flash-primary-once' )} style={{ width: isShowingImage ? width : undefined, @@ -229,34 +260,3 @@ export const MessageContent = (props: Props) => { ); }; - -function getWidth( - props: Pick -): number | undefined { - const { attachments, previews } = props; - - if (attachments && attachments.length) { - const dimensions = getGridDimensions(attachments); - if (dimensions) { - return dimensions.width; - } - } - - if (previews && previews.length) { - const first = previews[0]; - - if (!first || !first.image) { - return; - } - const { width } = first.image; - - if (isImageAttachment(first.image) && width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH) { - const dimensions = getImageDimensionsInAttachment(first.image); - if (dimensions) { - return dimensions.width; - } - } - } - - return; -} diff --git a/ts/components/conversation/message/message-item/DateBreak.tsx b/ts/components/conversation/message/message-item/DateBreak.tsx index ca8329632..2b672fa6a 100644 --- a/ts/components/conversation/message/message-item/DateBreak.tsx +++ b/ts/components/conversation/message/message-item/DateBreak.tsx @@ -12,7 +12,7 @@ const DateBreakText = styled.div` font-weight: bold; text-align: center; - color: var(--color-text); + color: var(--text-primary-color); `; export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => { diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx index abb981525..24ff43023 100644 --- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx +++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx @@ -102,7 +102,7 @@ type Props = { const highlightedMessageAnimation = keyframes` 1% { - background-color: #00f782; + background-color: var(--primary-color); } `; @@ -123,7 +123,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{ ${props => props.isRightClicked && ` - background-color: var(--color-compose-view-button-background); + background-color: var(--conversation-tab-background-selected-color); `} ${props => @@ -132,7 +132,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{ &.message-selected { .module-message { &__container { - box-shadow: var(--color-session-shadow); + box-shadow: var(--drop-shadow); } } } @@ -229,8 +229,7 @@ export const GenericReadableMessage = (props: Props) => { isRightClicked={isRightClicked} className={classNames( selected && 'message-selected', - isGroup && 'public-chat-message-wrapper', - isIncoming ? 'session-message-wrapper-incoming' : 'session-message-wrapper-outgoing' + isGroup && 'public-chat-message-wrapper' )} onContextMenu={handleContextMenu} receivedAt={receivedAt} diff --git a/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx b/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx index ee4ca33d0..e1d8f73ec 100644 --- a/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx +++ b/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx @@ -21,7 +21,7 @@ const style: StyleType = { 'missed-call': { notificationTextKey: 'callMissed', iconType: 'callMissed', - iconColor: 'var(--color-destructive)', + iconColor: 'var(--danger-color)', }, 'started-call': { notificationTextKey: 'startedACall', diff --git a/ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx b/ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx index a9c4c6ec9..df6ed5ff2 100644 --- a/ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx +++ b/ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx @@ -4,8 +4,8 @@ import { SessionIcon, SessionIconType } from '../../../../icon'; const NotificationBubbleFlex = styled.div` display: flex; - background: var(--color-fake-chat-bubble-background); - color: var(--color-text); + background: var(--message-bubbles-received-background-color); + color: var(--text-primary-color); width: 90%; max-width: 700px; margin: 10px auto; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 8f0f489aa..c7b586bff 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -555,7 +555,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* TODO Theming Consolidate with code */ /* Conversation Tab */ - /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item, Contact List Items etc. */ + /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */ --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; --conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; @@ -627,6 +627,7 @@ export const SessionGlobalStyles = createGlobalStyle` --toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1); /* Right Panel Items */ + /* Also used for Session Dropdown */ --right-panel-item-background-color: var(--background-secondary-color); --right-panel-item-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --right-panel-item-text-color: var(--text-primary-color); @@ -651,6 +652,11 @@ export const SessionGlobalStyles = createGlobalStyle` /* Also used for FileDropZone */ /* Same for all Themes */ --message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06); + + /* Shadows */ + /* Used across all themes */ + --shadow-color: var(--black-color); + --drop-shadow: 0 0 4px 0 var(--shadow-color); }; `; diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index bfabb01ac..b518ab13c 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -712,11 +712,11 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty( '--right-panel-item-background-color', - 'var(--background-secondary-color)' + THEMES.CLASSIC_DARK.COLOR2 ); document.documentElement.style.setProperty( '--right-panel-item-background-hover-color', - THEMES.CLASSIC_DARK.COLOR4 + THEMES.CLASSIC_DARK.COLOR3 ); document.documentElement.style.setProperty( '--right-panel-item-text-color',