From ea95f78c5a8fb4284f116d8486b27787aa5a8710 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 27 Sep 2022 14:39:54 +1000 Subject: [PATCH 01/10] feat: updated colors context menu --- ts/components/SessionContextMenuContainer.tsx | 16 ++- ts/themes/SessionTheme.tsx | 17 ++- ts/themes/switchTheme.tsx | 104 ++++++++++++++++++ 3 files changed, 127 insertions(+), 10 deletions(-) diff --git a/ts/components/SessionContextMenuContainer.tsx b/ts/components/SessionContextMenuContainer.tsx index 4cc1a39c9..1aaacc48a 100644 --- a/ts/components/SessionContextMenuContainer.tsx +++ b/ts/components/SessionContextMenuContainer.tsx @@ -7,27 +7,25 @@ export const SessionContextMenuContainer = styled.div.attrs({ // be sure it is more than the one set for the More Informations screen of messages z-index: 30; min-width: 200px; - /* TODO Theming Update */ - box-shadow: 0 10px 16px 0 rgba(var(--color-black-color-rgb), 0.2), - 0 6px 20px 0 rgba(var(--color-black-color-rgb), 0.19) !important; - background-color: var(--color-received-message-background); + box-shadow: 0px 0px 10px var(--context-menu-shadow-color) !important; + background-color: var(--context-menu-background-color); &.react-contexify__theme--dark { - background-color: var(--color-received-message-background); + background-color: var(--context-menu-background-color); } .react-contexify__item { - background: var(--color-received-message-background); + background: var(--context-menu-background-color); } .react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__item__content { - background: var(--color-accent); - color: var(--color-text-menu-highlighted); + background: var(--context-menu-background-hover-color); + color: var(--context-menu-text-hover-color); } .react-contexify__item__content { transition: var(--default-duration); - color: var(--color-text); + color: var(--context-menu-text-color); } &.react-contexify__submenu { diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 2f643647a..772664f31 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -505,6 +505,8 @@ export const SessionGlobalStyles = createGlobalStyle` /* Chat (Interaction) Buttons */ /* Also used for Reaction Bar Buttons */ + /* Used for Link Preview Attachment Icons */ + /* Used for Media Grid Item Play Button */ --chat-buttons-background-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --chat-buttons-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --chat-buttons-icon-color: var(--text-primary-color); @@ -553,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 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 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}; @@ -635,6 +637,19 @@ export const SessionGlobalStyles = createGlobalStyle` --session-logo-text-dark-filter: none; --session-logo-text-current-filter: var(--session-logo-text-light-filter); + /* Right Click / Context Menu) */ + --context-menu-background-color: var(--background-primary-color); + --context-menu-background-hover-color: var(--primary-color); + --context-menu-text-color: var(--text-primary-color); + --context-menu-text-hover-color: var(--black-color); + --context-menu-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22); + + /* Message Link Preview */ + /* Also used for Images */ + /* Also used for the Media Grid Items */ + /* Also used for Staged Generic Attachments */ + /* Same for all Themes */ + --message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06); }; `; diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index d42ecf406..bfabb01ac 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -357,6 +357,32 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) { '--session-logo-text-current-filter', 'var(--session-logo-text-light-filter)' ); + + document.documentElement.style.setProperty( + '--context-menu-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-background-hover-color', + 'var(--primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-color', + 'var(--text-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-hover-color', + 'var(--black-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-shadow-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)` + ); + + document.documentElement.style.setProperty( + '--message-link-preview-background-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)` + ); } function loadClassicDark(primaryColor?: PrimaryColorStateType) { @@ -703,6 +729,32 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) { '--session-logo-text-current-filter', 'var(--session-logo-text-light-filter)' ); + + document.documentElement.style.setProperty( + '--context-menu-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-background-hover-color', + 'var(--primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-color', + 'var(--text-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-hover-color', + 'var(--black-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-shadow-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)` + ); + + document.documentElement.style.setProperty( + '--message-link-preview-background-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)` + ); } function loadOceanLight(primaryColor?: PrimaryColorStateType) { @@ -1055,6 +1107,32 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) { '--session-logo-text-current-filter', 'var(--session-logo-text-light-filter)' ); + + document.documentElement.style.setProperty( + '--context-menu-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-background-hover-color', + 'var(--primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-color', + 'var(--text-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-hover-color', + 'var(--black-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-shadow-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)` + ); + + document.documentElement.style.setProperty( + '--message-link-preview-background-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)` + ); } function loadOceanDark(primaryColor?: PrimaryColorStateType) { @@ -1397,6 +1475,32 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { '--session-logo-text-current-filter', 'var(--session-logo-text-light-filter)' ); + + document.documentElement.style.setProperty( + '--context-menu-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-background-hover-color', + 'var(--primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-color', + 'var(--text-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-hover-color', + 'var(--black-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-shadow-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)` + ); + + document.documentElement.style.setProperty( + '--message-link-preview-background-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)` + ); } export async function switchTheme(theme: ThemeStateType) { From 7e01c9f39a1cda000cec370076c5baaa7b1ffda3 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 27 Sep 2022 14:40:46 +1000 Subject: [PATCH 02/10] feat: fixed link preview and message details styling --- .../conversation/ConversationHeader.tsx | 38 +++++----- .../message/message-content/MessageBody.tsx | 74 +++++++++---------- .../message-content/MessagePreview.tsx | 9 ++- .../message/message-item/MessageDetail.tsx | 11 +-- .../menu/ConversationListItemContextMenu.tsx | 1 - ts/state/selectors/conversations.ts | 1 + 6 files changed, 69 insertions(+), 65 deletions(-) diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 1ba9e0595..7e0f3cbcc 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -141,6 +141,12 @@ const SelectionOverlay = () => { ); }; +const TripleDotContainer = styled.div` + user-select: none; + flex-grow: 0; + flex-shrink: 0; +`; + const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) => { const { showBackButton } = props; if (showBackButton) { @@ -162,12 +168,6 @@ const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) = ); }; -const TripleDotContainer = styled.div` - user-select: none; - flex-grow: 0; - flex-shrink: 0; -`; - const ExpirationLength = (props: { expirationSettingName?: string }) => { const { expirationSettingName } = props; @@ -281,6 +281,19 @@ export type ConversationHeaderTitleProps = { currentNotificationSetting?: ConversationNotificationSettingType; }; +/** + * The subtitle beneath a conversation title when looking at a conversation screen. + * @param props props for subtitle. Text to be displayed + * @returns JSX Element of the subtitle of conversation header + */ +export const ConversationHeaderSubtitle = (props: { text?: string | null }): JSX.Element | null => { + const { text } = props; + if (!text) { + return null; + } + return {text}; +}; + const ConversationHeaderTitle = () => { const headerTitleProps = useSelector(getConversationHeaderTitleProps); const notificationSetting = useSelector(getCurrentNotificationSettingText); @@ -344,19 +357,6 @@ const ConversationHeaderTitle = () => { ); }; -/** - * The subtitle beneath a conversation title when looking at a conversation screen. - * @param props props for subtitle. Text to be displayed - * @returns JSX Element of the subtitle of conversation header - */ -export const ConversationHeaderSubtitle = (props: { text?: string | null }): JSX.Element | null => { - const { text } = props; - if (!text) { - return null; - } - return {text}; -}; - export const ConversationHeaderWithDetails = () => { const isSelectionMode = useSelector(isMessageSelectionMode); const isMessageDetailOpened = useSelector(isMessageDetailView); diff --git a/ts/components/conversation/message/message-content/MessageBody.tsx b/ts/components/conversation/message/message-content/MessageBody.tsx index 4a76370e6..da29e1a52 100644 --- a/ts/components/conversation/message/message-content/MessageBody.tsx +++ b/ts/components/conversation/message/message-content/MessageBody.tsx @@ -88,43 +88,6 @@ const JsxSelectable = (jsx: JSX.Element): JSX.Element => { ); }; -export const MessageBody = (props: Props) => { - const { text, disableJumbomoji, disableLinks, isGroup } = props; - const sizeClass: SizeClassType = disableJumbomoji ? 'default' : getEmojiSizeClass(text); - - if (disableLinks) { - return JsxSelectable( - renderEmoji({ - text, - sizeClass, - key: 0, - renderNonEmoji: renderNewLines, - isGroup, - }) - ); - } - - if (text && text.startsWith('```') && text.endsWith('```') && text.length > 6) { - return 
{text.substring(4, text.length - 3)}
; - } - - return JsxSelectable( - { - return renderEmoji({ - text: nonLinkText, - sizeClass, - key, - renderNonEmoji: renderNewLines, - isGroup, - }); - }} - /> - ); -}; - type LinkifyProps = { text: string; /** Allows you to customize now non-links are rendered. Simplest is just a . */ @@ -184,3 +147,40 @@ const Linkify = (props: LinkifyProps): JSX.Element => { return <>{results}; }; + +export const MessageBody = (props: Props) => { + const { text, disableJumbomoji, disableLinks, isGroup } = props; + const sizeClass: SizeClassType = disableJumbomoji ? 'default' : getEmojiSizeClass(text); + + if (disableLinks) { + return JsxSelectable( + renderEmoji({ + text, + sizeClass, + key: 0, + renderNonEmoji: renderNewLines, + isGroup, + }) + ); + } + + if (text && text.startsWith('```') && text.endsWith('```') && text.length > 6) { + return 
{text.substring(4, text.length - 3)}
; + } + + return JsxSelectable( + { + return renderEmoji({ + text: nonLinkText, + sizeClass, + key, + renderNonEmoji: renderNewLines, + isGroup, + }); + }} + /> + ); +}; diff --git a/ts/components/conversation/message/message-content/MessagePreview.tsx b/ts/components/conversation/message/message-content/MessagePreview.tsx index 0550a9e71..9b987bfc7 100644 --- a/ts/components/conversation/message/message-content/MessagePreview.tsx +++ b/ts/components/conversation/message/message-content/MessagePreview.tsx @@ -10,7 +10,10 @@ import { SessionIcon } from '../../../icon'; import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message'; import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm'; -export type MessagePreviewSelectorProps = Pick; +export type MessagePreviewSelectorProps = Pick< + MessageRenderingProps, + 'direction' | 'attachments' | 'previews' +>; type Props = { handleImageError: () => void; @@ -24,7 +27,7 @@ export const MessagePreview = (props: Props) => { if (!selected) { return null; } - const { attachments, previews } = selected; + const { direction, attachments, previews } = selected; // Attachments take precedence over Link Previews if (attachments && attachments.length) { @@ -53,7 +56,7 @@ export const MessagePreview = (props: Props) => { return (
{first.image && previewHasImage && isFullSizeImage ? ( diff --git a/ts/components/conversation/message/message-item/MessageDetail.tsx b/ts/components/conversation/message/message-item/MessageDetail.tsx index 65c49a23a..e88190cee 100644 --- a/ts/components/conversation/message/message-item/MessageDetail.tsx +++ b/ts/components/conversation/message/message-item/MessageDetail.tsx @@ -17,6 +17,7 @@ import { import { ContactName } from '../../ContactName'; // tslint:disable-next-line: no-submodule-imports import useKey from 'react-use/lib/useKey'; +import { SessionButton, SessionButtonColor, SessionButtonType } from '../../../basic/SessionButton'; const AvatarItem = (props: { pubkey: string }) => { const { pubkey } = props; @@ -29,14 +30,14 @@ const DeleteButtonItem = (props: { messageId: string; convoId: string; isDeletab return props.isDeletable ? (
- + />
) : null; }; diff --git a/ts/components/menu/ConversationListItemContextMenu.tsx b/ts/components/menu/ConversationListItemContextMenu.tsx index 2c8bc19f7..7f91d0b62 100644 --- a/ts/components/menu/ConversationListItemContextMenu.tsx +++ b/ts/components/menu/ConversationListItemContextMenu.tsx @@ -29,7 +29,6 @@ export type PropsContextConversationItem = { const ConversationListItemContextMenu = (props: PropsContextConversationItem) => { const { triggerId } = props; - // TODO Theming - Waiting on Session Components for correct colors return ( diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 01c78b002..ca4468a63 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -954,6 +954,7 @@ export const getMessagePreviewProps = createSelector(getMessagePropsByMessageId, } const msgProps: MessagePreviewSelectorProps = pick(props.propsForMessage, [ + 'direction', 'attachments', 'previews', ]); From ef5184b9fc9c9ea403c67b2fc8a5e3f434abe979 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 27 Sep 2022 15:10:07 +1000 Subject: [PATCH 03/10] feat: updated styling for all modules and cleaned up _theme_dark.scss --- stylesheets/_index.scss | 67 ------- stylesheets/_modules.scss | 136 +++++++-------- stylesheets/_theme_dark.scss | 330 ++++------------------------------- 3 files changed, 100 insertions(+), 433 deletions(-) diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 7c361171c..8a06158f7 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -80,70 +80,3 @@ .left-pane-wrapper { flex: 1; } - -.hint { - margin: 10px; - padding: 1em; - border-radius: $border-radius; - color: white; - border: 2px dashed white; - - h3 { - margin-top: 5px; - } - - &.firstRun { - position: absolute; - top: 0; - left: 302px; - width: 225px; - - &:before, - &:after { - content: ' '; - display: block; - position: absolute; - top: 8px; - left: -35px; - width: 0; - height: 0; - border: solid 10px white; - border-color: transparent white transparent transparent; - transform: scaleX(2.5) scaleY(0.75); - } - &:after { - border-color: transparent var(--color-dark-blue-color) transparent transparent; - left: -30px; - } - } -} - -.contact.placeholder { - position: absolute; - top: 50px; - left: 0; - background: transparent; - color: white; - border: 2px dashed white; - overflow: visible; - p { - color: white; - } - &:before, - &:after { - content: ' '; - display: block; - position: absolute; - top: -35px; - left: 15px; - width: 0; - height: 0; - border: solid 10px white; - border-color: transparent transparent white transparent; - transform: scaleY(2.5) scaleX(0.75); - } - &:after { - border-color: transparent transparent var(--color-dark-blue-color) transparent; - top: -30px; - } -} diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 059e7dd29..0c6fca683 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -104,7 +104,7 @@ white-space: nowrap; text-overflow: clip; - color: var(--color-darkest-gray-color); + color: var(--black-color); } .module-message__generic-attachment__text { @@ -115,7 +115,6 @@ } .module-message__generic-attachment__file-name { - color: var(--color-darkest-gray-color); font-size: 14px; line-height: 18px; font-weight: 300; @@ -126,13 +125,9 @@ white-space: nowrap; text-overflow: ellipsis; } - -.module-message__generic-attachment__file-size, -.module-message__generic-attachment__file-name--outgoing, -.module-message__generic-attachment__file-size--incoming, -.module-message__generic-attachment__file-size--outgoing, -.module-message__generic-attachment__file-name--incoming { - color: var(--color-text); +.module-message__generic-attachment__file-name, +.module-message__generic-attachment__file-size { + color: var(--text-primary-color); } .module-message__generic-attachment__file-size { @@ -143,6 +138,18 @@ white-space: nowrap; } +.module-message__generic-attachment__file-name--incoming, +.module-message__generic-attachment__file-size--incoming, +.module-message__link-preview--incoming { + color: var(--message-bubbles-received-text-color); +} + +.module-message__generic-attachment__file-name--outgoing, +.module-message__generic-attachment__file-size--outgoing, +.module-message__link-preview--outgoing { + color: var(--message-bubbles-sent-text-color); +} + .module-message__link-preview { cursor: pointer; border-top-left-radius: $session_message-container-border-radius; @@ -151,11 +158,9 @@ .module-message__link-preview__content { padding: 8px; - background-color: var(--color-white-color); display: flex; flex-direction: row; align-items: flex-start; - border: 1px solid var(--color-lighter-black-color); } .module-message__link-preview__image_container { @@ -200,7 +205,7 @@ height: 32px; width: 32px; border-radius: 50%; - background-color: var(--color-lighter-gray-color); + background-color: var(--message-link-preview-background-color); } .module-message__link-preview__text--with-icon { @@ -208,9 +213,8 @@ } .module-message__link-preview__title { - color: var(--color-darkest-gray-color); font-size: 16px; - font-weight: 300; + font-weight: 500; letter-spacing: 0.15px; line-height: 22px; @@ -222,13 +226,12 @@ .module-message__link-preview__location { margin-top: 4px; - color: var(--color-gray-color); font-size: 12px; height: 16px; letter-spacing: 0.4px; line-height: 16px; - text-transform: uppercase; } + .module-conversation__user, .module-message__author { margin-top: var(--margins-sm); @@ -241,6 +244,7 @@ white-space: nowrap; text-overflow: ellipsis; } + .module-conversation__user__profile-name, .module-message__author__profile-name { font-style: italic; @@ -255,7 +259,7 @@ flex-direction: row; align-items: center; - color: var(--color-gray-color); + color: var(--conversation-tab-text-color); } .module-contact-list-item--with-click-handler { @@ -347,8 +351,7 @@ } .module-conversation-header__expiration__clock-icon { - // TODO Theming update - @include color-svg('../images/timer.svg', var(--color-gray-color)); + @include color-svg('../images/timer.svg', var(--button-icon-stroke-color)); height: 20px; width: 20px; display: inline-block; @@ -389,19 +392,11 @@ .module-message-detail__delete-button-container { text-align: center; margin-top: 10px; -} -.module-message-detail__delete-button { - @include button-reset; - - background-color: var(--danger-color); - color: var(--color-white-color); - box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); - border-radius: 5px; - border: solid 1px var(--color-light-gray-color); - cursor: pointer; - margin: 1em auto; - padding: 1em; + .session-button { + width: 160px; + margin: 1em auto; + } } .module-message-detail__contact-container { @@ -494,7 +489,7 @@ } .module-document-list-item--with-separator { - border-bottom: 1px solid var(--color-lightest-gray-color); + border-bottom: 1px solid var(--border-color); } .module-document-list-item__content { @@ -511,7 +506,7 @@ width: 48px; height: 48px; - @include color-svg('../images/file.svg', var(--color-light-gray-color)); + @include color-svg('../images/file.svg', var(--button-icon-stroke-color)); } .module-document-list-item__metadata { @@ -547,7 +542,7 @@ height: 94px; width: 94px; cursor: pointer; - background-color: var(--color-lighter-gray-color); + background-color: var(--message-link-preview-background-color); margin-inline-end: 4px; margin-bottom: 4px; position: relative; @@ -568,7 +563,7 @@ } .module-media-grid-item__icon-image { - @include color-svg('../images/image.svg', var(--color-light-gray-color)); + @include color-svg('../images/image.svg', var(--button-icon-stroke-color)); } .module-media-grid-item__image-container { @@ -585,8 +580,12 @@ width: 42px; height: 42px; - background-color: var(--color-white-color); + background-color: var(--chat-buttons-background-color); border-radius: 21px; + + &:hover { + background-color: var(--chat-buttons-background-hover-color); + } } .module-media-grid-item__play-overlay { @@ -597,15 +596,15 @@ height: 36px; width: 36px; - @include color-svg('../images/play.svg', var(--primary-color)); + @include color-svg('../images/play.svg', var(--chat-buttons-icon-color)); } .module-media-grid-item__icon-video { - @include color-svg('../images/movie.svg', var(--color-light-gray-color)); + @include color-svg('../images/movie.svg', var(--button-icon-stroke-color)); } .module-media-grid-item__icon-generic { - @include color-svg('../images/file.svg', var(--color-light-gray-color)); + @include color-svg('../images/file.svg', var(--button-icon-stroke-color)); } /* Module: Empty State*/ @@ -616,7 +615,6 @@ align-items: center; flex-grow: 1; font-size: 28px; - color: var(--color-light-gray-color); } // Module: Conversation List Item @@ -663,8 +661,6 @@ min-width: 16px; line-height: 16px; border-radius: 8px; - // TODO Theming Should we remove this? - box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color); } .module-conversation-list-item__content { @@ -772,14 +768,15 @@ } .module-image__border-overlay--dark { - background-color: var(--color-light-black-color); + // TODO Theming - Is this correct? + background-color: var(--message-link-preview-background-color); } .module-image__loading-placeholder { display: inline-flex; flex-direction: row; align-items: center; - background-color: var(--color-lighter-black-color); + background-color: var(--message-link-preview-background-color); } .module-image__image { @@ -791,12 +788,13 @@ } } +// NOTE This isn't currently used anywhere .module-image__bottom-overlay { height: 48px; background-image: linear-gradient( to bottom, var(--color-transparent-color), - /* TODO does this work */ var(--color-transparent-color) 9%, + var(--color-transparent-color) 9%, rgba(0, 0, 0, 0.6) ); position: absolute; @@ -814,8 +812,13 @@ width: 48px; height: 48px; - background-color: var(--color-white-color); + background-color: var(--chat-buttons-background-color); border-radius: 24px; + z-index: 1; + + &:hover { + background-color: var(--chat-buttons-background-hover-color); + } } .module-image__play-overlay__icon { @@ -826,7 +829,7 @@ height: 36px; width: 36px; - @include color-svg('../images/play.svg', var(--primary-color)); + @include color-svg('../images/play.svg', var(--chat-buttons-icon-color)); } .module-image__text-container { @@ -837,7 +840,7 @@ bottom: 0; z-index: 2; - color: var(--color-white-color); + color: var(--white-color); font-size: 20px; font-weight: normal; @@ -969,7 +972,7 @@ // Module: Attachments .module-attachments { - border-top: 1px solid var(--color-lighter-black-color); + border-top: 1px solid var(--border-color); } .module-attachments__header { @@ -987,7 +990,7 @@ height: 20px; z-index: 2; - @include color-svg('../images/x-16.svg', var(--color-black-color)); + @include color-svg('../images/x-16.svg', var(--button-icon-stroke-color)); } .module-attachments__rail { @@ -1010,8 +1013,8 @@ display: inline-block; position: relative; border-radius: 4px; - box-shadow: inset 0px 0px 0px 1px var(--color-lighter-black-color); - background-color: var(--color-lighter-gray-color); + box-shadow: inset 0px 0px 0px 1px var(--border-color); + background-color: var(--message-link-preview-background-color); vertical-align: middle; } @@ -1023,7 +1026,7 @@ width: 16px; height: 16px; z-index: 2; - @include color-svg('../images/x-16.svg', var(--color-black-color)); + @include color-svg('../images/x-16.svg', var(--button-icon-stroke-color)); } .module-staged-generic-attachment__icon { @@ -1059,7 +1062,7 @@ white-space: nowrap; text-overflow: clip; - color: var(--color-darkest-gray-color); + color: var(--black-color); } .module-staged-generic-attachment__filename { @@ -1067,7 +1070,7 @@ margin-top: 5px; text-align: center; - font-family: $session-font-default; + font-family: var(--font-default); font-size: 14px; overflow: hidden; @@ -1079,7 +1082,7 @@ } // Module: Caption Editor - +// TODO Theming We don't seem to use this can we delete? .module-caption-editor { background-color: rgba(0, 0, 0, 0.8); z-index: 20; @@ -1110,9 +1113,8 @@ height: 30px; z-index: 2; // the background of the lightbox is dark - @include color-svg('../images/x-16.svg', white); + @include color-svg('../images/x-16.svg', var(--white-color)); } - .module-caption-editor__media-container { flex-grow: 1; flex-shrink: 1; @@ -1121,7 +1123,6 @@ overflow: hidden; height: 100%; } - .module-caption-editor__image { width: 100%; height: 100%; @@ -1146,12 +1147,13 @@ flex-grow: 1; flex-shrink: 1; } + // Module: Staged Placeholder Attachment .module-staged-placeholder-attachment { margin: 1px; border-radius: 4px; - border: 1px solid var(--color-light-gray-color); + border: 1px solid var(--border-color); height: 120px; width: 120px; display: inline-block; @@ -1160,7 +1162,7 @@ position: relative; &:hover { - background: var(--color-lighter-gray-color); + background-color: var(--background-secondary-color); } } @@ -1174,7 +1176,7 @@ height: 36px; width: 36px; - @include color-svg('../images/plus-36.svg', var(--color-light-gray-color)); + @include color-svg('../images/plus-36.svg', var(--button-icon-stroke-color)); } // Module: Staged Link Preview @@ -1188,20 +1190,18 @@ min-height: 65px; margin: var(--margins-xs); } - .module-staged-link-preview--is-loading { align-items: center; justify-content: center; } .module-staged-link-preview__loading { - color: var(--color-text); + color: var(--text-primary-color); font-size: 14px; text-align: center; flex-grow: 1; flex-shrink: 1; } - .module-staged-link-preview__icon-container { margin-inline-end: 8px; padding: var(--margins-sm); @@ -1211,8 +1211,7 @@ padding: var(--margins-sm); } .module-staged-link-preview__title { - color: var(--color-darkest-gray-color); - font-weight: 300; + font-weight: 500; font-size: 14px; line-height: 18px; @@ -1223,7 +1222,6 @@ } .module-staged-link-preview__location { margin-top: 4px; - color: var(--color-gray-color); font-size: var(--font-size-xs); height: 16px; letter-spacing: 0.25px; @@ -1238,7 +1236,7 @@ height: 16px; width: 16px; - @include color-svg('../images/x-16.svg', var(--color-gray-color)); + @include color-svg('../images/x-16.svg', var(--button-icon-stroke-color)); } // Module: Left Pane diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index ad9d853f0..2839a47a8 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -63,49 +63,42 @@ } } - input.search { - border: 1px solid var(--color-gray-color); - color: var(--color-lighter-gray-color); - background-color: var(--color-darkest-gray-color); - - &:focus { - outline: solid 1px var(--color-dark-blue-color); - } - } - - .hint { - color: var(--color-white-color); - border: 2px dashed var(--color-white-color); - - &.firstRun { - &:before, - &:after { - border: solid 10px var(--color-white-color); - border-color: transparent var(--color-white-color) transparent transparent; - } - &:after { - border-color: transparent var(--color-dark-blue-color) transparent transparent; - } - } - } + // TODO Theming - Do we use this anywhere? + // .hint { + // color: var(--color-white-color); + // border: 2px dashed var(--color-white-color); + + // &.firstRun { + // &:before, + // &:after { + // border: solid 10px var(--color-white-color); + // border-color: transparent var(--color-white-color) transparent transparent; + // } + // &:after { + // border-color: transparent var(--color-dark-blue-color) transparent transparent; + // } + // } + // } - .contact.placeholder { - color: var(--color-white-color); - border: 2px dashed var(--color-white-color); - p { - color: var(--color-white-color); - } - &:before, - &:after { - border: solid 10px var(--color-white-color); - border-color: transparent transparent var(--color-white-color) transparent; - } - &:after { - border-color: transparent transparent var(--color-dark-blue-color) transparent; - } - } + // TODO Theming - I don't think we use this. + // .contact.placeholder { + // color: var(--color-white-color); + // border: 2px dashed var(--color-white-color); + // p { + // color: var(--color-white-color); + // } + // &:before, + // &:after { + // border: solid 10px var(--color-white-color); + // border-color: transparent transparent var(--color-white-color) transparent; + // } + // &:after { + // border-color: transparent transparent var(--color-dark-blue-color) transparent; + // } + // } // _modal + // TODO Theming .modal { background-color: rgba(var(--color-black-color-rgb), 0.3); @@ -114,261 +107,4 @@ box-shadow: 0px 3px 5px 0px var(--color-light-black-color); } } - - // _modules - - // Module: Message - - .module-message__error { - @include color-svg('../images/error.svg', var(--color-destructive)); - } - - .module-message__img-border-overlay { - box-shadow: inset 0px 0px 0px 1px var(--color-lighter-white-color); - } - - .module-message__img-overlay { - /* TODO does this work? */ - background-image: linear-gradient( - to bottom, - var(--color-transparent-color), - var(--color-transparent-color) 9%, - rgba(var(--color-black-color-rgb), 0.02) 17%, - rgba(var(--color-black-color-rgb), 0.05) 24%, - rgba(var(--color-black-color-rgb), 0.08) 31%, - rgba(var(--color-black-color-rgb), 0.12) 37%, - rgba(var(--color-black-color-rgb), 0.16) 44%, - rgba(var(--color-black-color-rgb), 0.2) 50%, - rgba(var(--color-black-color-rgb), 0.24) 56%, - rgba(var(--color-black-color-rgb), 0.28) 63%, - rgba(var(--color-black-color-rgb), 0.32) 69%, - rgba(var(--color-black-color-rgb), 0.35) 76%, - rgba(var(--color-black-color-rgb), 0.38) 83%, - rgba(var(--color-black-color-rgb), 0.4) 91%, - rgba(var(--color-black-color-rgb), 0.4) - ); - } - - .module-message__broken-image { - color: var(--color-lighter-gray-color); - } - - .module-message__broken-image--incoming { - color: var(--color-white-color); - } - - .module-message__video-overlay__circle { - background-color: var(--color-white-color); - } - - .module-message__video-overlay__play-icon { - @include color-svg('../images/play.svg', var(--primary-color)); - } - - .module-message__broken-video-screenshot { - color: var(--color-lighter-gray-color); - } - - .module-message__link-preview__content { - background-color: var(--color-darkest-gray-color); - border: 1px solid var(--color-gray-color); - } - - .module-message__link-preview__title { - color: var(--color-lighter-gray-color); - } - - .module-message__link-preview__location { - color: var(--color-light-gray-color); - } - - // Module: Contact Detail - - .module-contact-detail__send-message { - background-color: var(--color-dark-blue-color); - color: var(--color-white-color); - } - - .module-contact-detail__additional-contact { - border-top: 1px solid var(--color-dark-gray-color); - } - - .module-contact-detail__additional-contact__type { - color: var(--color-light-gray-color); - } - - // Module: Contact List Item - - .module-contact-list-item { - color: var(--color-light-gray-color); - } - - // Module: Message Detail - - .module-message-detail__delete-button { - background-color: var(--color-destructive); - color: var(--color-white-color); - box-shadow: 0 0 10px -3px var(--color-gray-color-rgb); - border: solid 1px var(--color-light-gray-color); - } - - .module-message-detail__contact__error { - color: var(--color-destructive); - } - - // Module: Media Gallery - - .module-media-gallery__tab { - background-color: var(--color-darkest-gray-color); - } - - .module-media-gallery__tab--active { - border-bottom: 2px solid var(--primary-color); - } - - // Module: Document List Item - - .module-document-list-item--with-separator { - border-bottom: 1px solid var(--color-dark-gray-color); - } - - .module-document-list-item__icon { - @include color-svg('../images/file.svg', var(--color-gray-color)); - } - - // Module: Media Grid Item - - .module-media-grid-item { - background-color: var(--color-darkest-gray-color); - } - - .module-media-grid-item__icon-image { - @include color-svg('../images/image.svg', var(--color-gray-color)); - } - - .module-media-grid-item__icon-video { - @include color-svg('../images/movie.svg', var(--color-gray-color)); - } - - .module-media-grid-item__icon-generic { - @include color-svg('../images/file.svg', var(--color-gray-color)); - } - - // Module: Empty State - - .module-empty-state { - color: var(--color-light-gray-color); - } - - // TODO Theming Remove - // Module: Conversation List Item - - // .module-conversation-list-item--is-selected { - // background-color: var(--color-dark-gray-color); - // } - - // .module-conversation-list-item__unread-count { - // color: var(--color-white-color); - // background-color: var(--primary-color); - // box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color); - // } - - // .module-conversation-list-item__header__name { - // color: var(--color-lighter-gray-color); - // } - - // .module-conversation-list-item__header__date--has-unread { - // color: var(--color-lighter-gray-color); - // } - - // .module-conversation-list-item__message__text { - // color: var(--color-light-gray-color); - // } - - // .module-conversation-list-item__message__text--has-unread { - // color: var(--color-lighter-gray-color); - // } - - // Module: Image - - .module-image { - background: none; - } - - .module-image__loading-placeholder { - background-color: var(--color-lighter-white-color); - } - - // Module: Typing Animation - - .module-typing-animation__dot { - background-color: var(--color-white-color); - } - - .module-typing-animation__dot--light { - background-color: var(--color-white-color); - } - - // Module: Attachments - - .module-attachments { - border-top: 1px solid var(--color-dark-gray-color); - } - - .module-attachments__close-button { - @include color-svg('../images/x-16.svg', var(--color-light-gray-color)); - } - - // Module: Staged Generic Attachment - - .module-staged-generic-attachment { - box-shadow: inset 0px 0px 0px 1px var(--color-light-gray-color); - background-color: var(--color-dark-gray-color); - color: var(--color-lighter-gray-color); - } - - .module-staged-generic-attachment__close-button { - @include color-svg('../images/x.svg', var(--color-light-gray-color)); - } - - .module-staged-generic-attachment__icon { - background: url('../images/file-gradient.svg') no-repeat center; - } - - .module-staged-generic-attachment__icon__extension { - color: var(--color-darkest-gray-color); - } - - // Module: Staged Placeholder Attachment - - .module-staged-placeholder-attachment { - border: 1px solid var(--color-gray-color); - - &:hover { - background: var(--color-dark-gray-color); - } - } - - .module-staged-placeholder-attachment__plus-icon { - @include color-svg('../images/plus-36.svg', var(--color-gray-color)); - } - - // Module: Staged Link Preview - - .module-staged-link-preview__close-button { - @include color-svg('../images/x-16.svg', var(--color-light-gray-color)); - } - - // Module: Message Search Result - - // TODO Theming remove - // .module-message-search-result { - // &:hover { - // background-color: var(--color-dark-gray-color); - // } - // } - - .module-message__link-preview__icon-container__circle-background { - background-color: var(--color-light-gray-color); - } } From 135062340607bb2bb89ca353dd6295f49c8ebf25 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 27 Sep 2022 15:38:56 +1000 Subject: [PATCH 04/10] feat: Restyled conversation elements and the file dropzone --- stylesheets/_session.scss | 11 ------- stylesheets/_session_conversation.scss | 11 ------- ts/components/SplitViewContainer.tsx | 4 +-- .../ConversationRequestButtons.tsx | 30 +++++++++---------- .../conversation/ConversationRequestInfo.tsx | 27 +++++++++-------- .../conversation/SessionFileDropzone.tsx | 6 ++-- ts/themes/SessionTheme.tsx | 1 + 7 files changed, 35 insertions(+), 55 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4b0a90003..bad48f138 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -640,17 +640,6 @@ input { } } -.messages-container { - .session-icon-button { - display: flex; - justify-content: center; - align-items: center; - height: 40px; - width: 40px; - border-radius: 50%; - } -} - .group-member-list { &__selection { height: 100%; diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index e0f75ef78..73210d8ee 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -144,17 +144,6 @@ } } -.messages-container { - display: flex; - flex-grow: 1; - flex-direction: column-reverse; - position: relative; - overflow-x: hidden; - min-width: 370px; - scrollbar-width: 4px; - padding: var(--margins-sm) var(--margins-lg) var(--margins-lg); -} - .composition-container { display: flex; justify-content: center; diff --git a/ts/components/SplitViewContainer.tsx b/ts/components/SplitViewContainer.tsx index 2e9df22b6..b45b2651b 100644 --- a/ts/components/SplitViewContainer.tsx +++ b/ts/components/SplitViewContainer.tsx @@ -17,7 +17,7 @@ const Divider = styled.div` width: 100%; cursor: row-resize; height: 5px; - background-color: var(--color-cell-background); + background-color: var(--background-primary-color); margin-top: 2px; `; @@ -25,7 +25,7 @@ const DividerHandle = styled.div` width: 10%; height: 5px; cursor: row-resize; - background-color: var(--color-text); + background-color: var(--text-primary-color); flex-shrink: 0; position: relative; left: 50%; diff --git a/ts/components/conversation/ConversationRequestButtons.tsx b/ts/components/conversation/ConversationRequestButtons.tsx index fe9ed7bba..27425c374 100644 --- a/ts/components/conversation/ConversationRequestButtons.tsx +++ b/ts/components/conversation/ConversationRequestButtons.tsx @@ -24,6 +24,21 @@ const handleAcceptConversationRequest = async (convoId: string) => { await approveConvoAndSendResponse(convoId, true); }; +const ConversationRequestBanner = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + padding: var(--margins-lg); + gap: var(--margins-lg); +`; + +const ConversationBannerRow = styled.div` + display: flex; + flex-direction: row; + gap: var(--margins-lg); + justify-content: center; +`; + export const ConversationMessageRequestButtons = () => { const selectedConversation = useSelector(getSelectedConversation); @@ -61,18 +76,3 @@ export const ConversationMessageRequestButtons = () => { ); }; - -const ConversationBannerRow = styled.div` - display: flex; - flex-direction: row; - gap: var(--margins-lg); - justify-content: center; -`; - -const ConversationRequestBanner = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - padding: var(--margins-lg); - gap: var(--margins-lg); -`; diff --git a/ts/components/conversation/ConversationRequestInfo.tsx b/ts/components/conversation/ConversationRequestInfo.tsx index 1b20f6c97..fb9ad94e1 100644 --- a/ts/components/conversation/ConversationRequestInfo.tsx +++ b/ts/components/conversation/ConversationRequestInfo.tsx @@ -7,6 +7,20 @@ import { hasSelectedConversationIncomingMessages, } from '../../state/selectors/conversations'; +const ConversationRequestTextBottom = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + padding: var(--margins-lg); +`; + +// TODO Theming - Confirm this is correct? +const ConversationRequestTextInner = styled.div` + color: var(--text-secondary-color); + text-align: center; + max-width: 390px; +`; + export const ConversationRequestinfo = () => { const selectedConversation = useSelector(getSelectedConversation); const isIncomingMessageRequest = useIsRequest(selectedConversation?.id); @@ -26,16 +40,3 @@ export const ConversationRequestinfo = () => { ); }; - -const ConversationRequestTextBottom = styled.div` - display: flex; - flex-direction: row; - justify-content: center; - padding: var(--margins-lg); -`; - -const ConversationRequestTextInner = styled.div` - color: var(--color-text-subtle); - text-align: center; - max-width: 390px; -`; diff --git a/ts/components/conversation/SessionFileDropzone.tsx b/ts/components/conversation/SessionFileDropzone.tsx index fb3f6dcbc..108ca7735 100644 --- a/ts/components/conversation/SessionFileDropzone.tsx +++ b/ts/components/conversation/SessionFileDropzone.tsx @@ -12,8 +12,8 @@ const DropZoneContainer = styled.div` `; const DropZoneWithBorder = styled.div` - border: dashed 4px var(--color-accent); - background-color: var(--color-clickable-hovered); + border: dashed 4px var(--primary-color); + background-color: var(--message-link-preview-background-color); position: absolute; top: 0; bottom: 0; @@ -29,7 +29,7 @@ export const SessionFileDropzone = () => { - + diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 772664f31..8f0f489aa 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -648,6 +648,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* Also used for Images */ /* Also used for the Media Grid Items */ /* Also used for Staged Generic Attachments */ + /* Also used for FileDropZone */ /* Same for all Themes */ --message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06); }; From 3abd69a3eacf08e40daad0c67aac516934f27482 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 28 Sep 2022 14:19:10 +1000 Subject: [PATCH 05/10] 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', From 0bb3035ebb3f3fb7eb1f185a225d8e3e04b106df Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 28 Sep 2022 14:32:18 +1000 Subject: [PATCH 06/10] feat: styled unread scroll, expire timer, last seen, click to trust --- ts/components/SessionScrollButton.tsx | 4 +++ ts/components/conversation/ExpireTimer.tsx | 4 +-- .../conversation/SessionLastSeenIndicator.tsx | 35 ++++++++++++------- .../message-content/ClickToTrustSender.tsx | 2 +- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx index 48fb63ca1..94606b593 100644 --- a/ts/components/SessionScrollButton.tsx +++ b/ts/components/SessionScrollButton.tsx @@ -10,6 +10,10 @@ const SessionScrollButtonDiv = styled.div` z-index: 2; right: 60px; animation: fadein var(--default-duration); + + .session-icon-button { + background-color: var(--message-bubbles-received-background-color); + } `; export const SessionScrollButton = (props: { onClickScrollBottom: () => void }) => { diff --git a/ts/components/conversation/ExpireTimer.tsx b/ts/components/conversation/ExpireTimer.tsx index dc60f7774..25f324db5 100644 --- a/ts/components/conversation/ExpireTimer.tsx +++ b/ts/components/conversation/ExpireTimer.tsx @@ -32,7 +32,7 @@ const ExpireTimerBucket = styled.div` letter-spacing: 0.3px; text-transform: uppercase; user-select: none; - color: var(--color-text); + color: var(--text-primary-color); `; export const ExpireTimer = (props: Props) => { @@ -57,7 +57,7 @@ export const ExpireTimer = (props: Props) => { return null; } - const expireTimerColor = 'var(--color-text)'; + const expireTimerColor = 'var(--primary-text-color)'; if (timeLeft <= 60) { return {timeLeft}; diff --git a/ts/components/conversation/SessionLastSeenIndicator.tsx b/ts/components/conversation/SessionLastSeenIndicator.tsx index 6a1d2ecb2..3c694d2ac 100644 --- a/ts/components/conversation/SessionLastSeenIndicator.tsx +++ b/ts/components/conversation/SessionLastSeenIndicator.tsx @@ -2,21 +2,11 @@ import React, { useContext, useLayoutEffect } from 'react'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { getQuotedMessageToAnimate } from '../../state/selectors/conversations'; +import { getTheme } from '../../state/selectors/theme'; import { ScrollToLoadedMessageContext } from './SessionMessagesListContainer'; -const LastSeenBarContainer = styled.div` - padding-bottom: 35px; - max-width: 300px; - align-self: center; - padding-top: 28px; - display: flex; - flex-direction: row; - align-items: center; -`; - const LastSeenBar = styled.div` height: 2px; - background-color: var(--color-last-seen-indicator); flex-grow: 1; min-width: 60px; flex-shrink: 0; @@ -25,14 +15,32 @@ const LastSeenBar = styled.div` const LastSeenText = styled.div` margin-top: 3px; font-size: var(--font-size-xs); + font-weight: 500; line-height: 26px; letter-spacing: 0.3px; text-transform: uppercase; text-align: center; flex-shrink: 0; margin-inline: 1rem; +`; + +const LastSeenBarContainer = styled.div<{ darkMode?: boolean }>` + padding-bottom: 35px; + max-width: 300px; + align-self: center; + padding-top: 28px; + display: flex; + flex-direction: row; + align-items: center; + + ${LastSeenBar} { + background-color: ${props => + props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)'}; + } - color: var(--color-last-seen-indicator); + ${LastSeenText} { + color: ${props => (props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)')}; + } `; export const SessionLastSeenIndicator = (props: { @@ -40,6 +48,7 @@ export const SessionLastSeenIndicator = (props: { didScroll: boolean; setDidScroll: (scroll: boolean) => void; }) => { + const darkMode = useSelector(getTheme).includes('dark'); // if this unread-indicator is not unique it's going to cause issues const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate); const scrollToLoadedMessage = useContext(ScrollToLoadedMessageContext); @@ -64,7 +73,7 @@ export const SessionLastSeenIndicator = (props: { }); return ( - + {window.i18n('unreadMessages')} diff --git a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx index 668b04510..2adefdd95 100644 --- a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx +++ b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx @@ -38,7 +38,7 @@ export const ClickToTrustSender = (props: { messageId: string }) => { message: window.i18n('trustThisContactDialogDescription', [ convo.getContactProfileNameOrShortenedPubKey(), ]), - okTheme: SessionButtonColor.Green, + okTheme: SessionButtonColor.Primary, onClickOk: async () => { convo.set({ isTrustedForAttachmentDownload: true }); await convo.commit(); From 72cab10d6bdec933bed4a48e9570730d56e69d3f Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 28 Sep 2022 14:52:40 +1000 Subject: [PATCH 07/10] feat: update moon icon --- ts/components/icon/Icons.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ts/components/icon/Icons.tsx b/ts/components/icon/Icons.tsx index 75bc7120b..748b408b1 100644 --- a/ts/components/icon/Icons.tsx +++ b/ts/components/icon/Icons.tsx @@ -306,8 +306,8 @@ export const icons = { }, moon: { path: - 'M11.1441877,12.8180303 C8.90278993,10.5766325 8.24397847,7.29260898 9.27752593,4.437982 C6.09633644,5.5873034 3.89540402,8.67837285 4.00385273,12.2078365 C4.13368986,16.4333868 7.52883112,19.8285281 11.7543814,19.9583652 C15.2838451,20.0668139 18.3749145,17.8658815 19.5242359,14.684692 C16.669609,15.7182395 13.3855854,15.059428 11.1441877,12.8180303 Z M21.9576498,12.8823459 C21.4713729,18.1443552 16.9748949,22.1197182 11.692957,21.9574217 C6.41101918,21.7951253 2.16709261,17.5511988 2.00479619,12.2692609 C1.84249977,6.98732307 5.81786273,2.49084501 11.0798721,2.00456809 C11.9400195,1.92507947 12.4895134,2.90008536 11.9760569,3.59473245 C10.2106529,5.98311963 10.4582768,9.30369233 12.5584012,11.4038167 C14.6585256,13.5039411 17.9790983,13.7515651 20.3674855,11.986161 C21.0621326,11.4727046 22.0371385,12.0221984 21.9576498,12.8823459', - viewBox: '0.5 0.5 22 22', + 'M15.72 14.4723C13.3767 14.439 11.14 13.4593 9.49209 11.7444C7.84421 10.0296 6.91721 7.7169 6.91097 5.3051C6.92029 3.79321 7.29571 2.30757 8.00328 0.982563C8.06586 0.867604 8.09359 0.735993 8.08286 0.604685C8.07213 0.473378 8.02344 0.348388 7.94309 0.245798C7.86273 0.143207 7.75438 0.0677123 7.63197 0.0290483C7.50957 -0.00961566 7.37872 -0.00968327 7.25627 0.0288491C5.60062 0.574051 4.10352 1.53621 2.90088 2.82796C1.69824 4.11972 0.828148 5.70015 0.369624 7.42578C-0.088901 9.15141 -0.121348 10.9676 0.275232 12.7094C0.671811 14.4512 1.48485 16.0635 2.64054 17.3998C3.79623 18.7362 5.25797 19.7544 6.89303 20.3618C8.52809 20.9693 10.2847 21.1468 12.0033 20.8783C13.722 20.6099 15.3483 19.9039 16.7345 18.8244C18.1208 17.745 19.2231 16.3263 19.9413 14.6972C19.9949 14.5772 20.0124 14.4435 19.9913 14.3133C19.9703 14.183 19.9118 14.0623 19.8234 13.9666C19.735 13.8709 19.6207 13.8048 19.4954 13.7766C19.3701 13.7485 19.2394 13.7597 19.1203 13.8087C18.0407 14.2592 16.885 14.4847 15.72 14.4723Z', + viewBox: '0 0 20 21', ratio: 1, }, mute: { @@ -408,7 +408,7 @@ export const icons = { sun: { path: 'M16.6209 7.62069C11.8081 7.62069 7.89156 11.5372 7.89156 16.35C7.89156 21.1628 11.8081 25.0793 16.6209 25.0793C21.4337 25.0793 25.3502 21.1628 25.3502 16.35C25.3502 11.5372 21.4337 7.62069 16.6209 7.62069ZM16.6209 22.5852C13.1768 22.5852 10.3856 19.794 10.3856 16.35C10.3856 12.906 13.1768 10.1148 16.6209 10.1148C20.0649 10.1148 22.8561 12.906 22.8561 16.35C22.8561 19.794 20.0649 22.5852 16.6209 22.5852ZM16.6209 5.1266C17.3093 5.1266 17.8679 4.568 17.8679 3.87956V1.38547C17.8679 0.697025 17.3093 0.138428 16.6209 0.138428C15.9324 0.138428 15.3738 0.697025 15.3738 1.38547V3.87956C15.3738 4.568 15.9324 5.1266 16.6209 5.1266ZM16.6209 27.5734C15.9324 27.5734 15.3738 28.132 15.3738 28.8204V31.3145C15.3738 32.0029 15.9324 32.5615 16.6209 32.5615C17.3093 32.5615 17.8679 32.0029 17.8679 31.3145V28.8204C17.8679 28.132 17.3093 27.5734 16.6209 27.5734ZM26.3196 8.4131L28.083 6.64971C28.5701 6.16258 28.5701 5.37344 28.083 4.88631C27.5959 4.39918 26.8067 4.39918 26.3196 4.88631L24.5562 6.64971C24.0691 7.13683 24.0691 7.92598 24.5562 8.4131C25.0433 8.90023 25.8325 8.90023 26.3196 8.4131ZM6.92214 24.2869L5.15874 26.0503C4.67162 26.5374 4.67162 27.3265 5.15874 27.8137C5.64587 28.3008 6.43501 28.3008 6.92214 27.8137L8.68554 26.0503C9.17266 25.5616 9.17266 24.774 8.68554 24.2869C8.19849 23.7997 7.40927 23.7981 6.92214 24.2869ZM5.39747 16.35C5.39747 15.6615 4.83888 15.1029 4.15043 15.1029H1.65634C0.967899 15.1029 0.409302 15.6615 0.409302 16.35C0.409302 17.0384 0.967899 17.597 1.65634 17.597H4.15043C4.83888 17.597 5.39747 17.0384 5.39747 16.35ZM31.5854 15.1029H29.0913C28.4028 15.1029 27.8442 15.6615 27.8442 16.35C27.8442 17.0384 28.4028 17.597 29.0913 17.597H31.5854C32.2738 17.597 32.8324 17.0384 32.8324 16.35C32.8324 15.6615 32.2738 15.1029 31.5854 15.1029ZM6.9205 8.4131C7.40771 8.90023 8.19685 8.90023 8.6839 8.4131C9.1711 7.92598 9.1711 7.13683 8.6839 6.64971L6.9205 4.88631C6.43338 4.39918 5.64431 4.39918 5.15711 4.88631C4.66998 5.37344 4.66998 6.16258 5.15711 6.64971L6.9205 8.4131ZM26.3212 24.2852C25.8325 23.7981 25.0449 23.7981 24.5578 24.2852C24.0706 24.7724 24.0691 25.5615 24.5578 26.0486L26.3212 27.812C26.8083 28.2992 27.5974 28.2992 28.0845 27.812C28.5717 27.3249 28.5717 26.5358 28.0845 26.0486L26.3212 24.2852Z', - viewBox: '0 0 33 33', + viewBox: '0 0 33 34', ratio: 1, }, qr: { From e25a0dc5b2c995ee4c7e0ce071fc7dee0e942421 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 28 Sep 2022 15:51:38 +1000 Subject: [PATCH 08/10] feat: styled reactions --- .../message/message-content/MessageReactions.tsx | 2 +- ts/components/conversation/message/reactions/Reaction.tsx | 4 ++-- .../conversation/message/reactions/ReactionPopup.tsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx index 977cdd0db..d41810713 100644 --- a/ts/components/conversation/message/message-content/MessageReactions.tsx +++ b/ts/components/conversation/message/message-content/MessageReactions.tsx @@ -36,7 +36,7 @@ const StyledReactionOverflow = styled.button` margin-bottom: var(--margins-sm); span { - background-color: var(--color-received-message-background); + background-color: var(--message-bubbles-received-background-color); border: 1px solid var(--border-color); border-radius: 50%; overflow: hidden; diff --git a/ts/components/conversation/message/reactions/Reaction.tsx b/ts/components/conversation/message/reactions/Reaction.tsx index a2f4cc0fb..60dad8207 100644 --- a/ts/components/conversation/message/reactions/Reaction.tsx +++ b/ts/components/conversation/message/reactions/Reaction.tsx @@ -14,10 +14,10 @@ const StyledReaction = styled.button<{ selected: boolean; inModal: boolean; show justify-content: ${props => (props.showCount ? 'flex-start' : 'center')}; align-items: center; - background-color: var(--color-received-message-background); + background-color: var(--message-bubbles-received-background-color); border-width: 1px; border-style: solid; - border-color: ${props => (props.selected ? 'var(--color-accent)' : 'transparent')}; + border-color: ${props => (props.selected ? 'var(--primary-color)' : 'var(--transparent-color)')}; border-radius: 11px; box-sizing: border-box; padding: 0 7px; diff --git a/ts/components/conversation/message/reactions/ReactionPopup.tsx b/ts/components/conversation/message/reactions/ReactionPopup.tsx index f458c4e94..e35d27e08 100644 --- a/ts/components/conversation/message/reactions/ReactionPopup.tsx +++ b/ts/components/conversation/message/reactions/ReactionPopup.tsx @@ -18,8 +18,8 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }> height: 72px; z-index: 5; - background-color: var(--color-received-message-background); - color: var(--color-pill-divider-text); + background-color: var(--message-bubbles-received-background-color); + color: var(--message-bubbles-received-text-color); box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.51); font-size: 12px; font-weight: 600; @@ -45,7 +45,7 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }> }}; width: 22px; height: 22px; - background-color: var(--color-received-message-background); + background-color: var(--message-bubbles-received-background-color); transform: rotate(45deg); border-radius: 3px; transform: scaleY(1.4) rotate(45deg); @@ -66,7 +66,7 @@ const StyledContacts = styled.span` `; const StyledOthers = styled.span<{ darkMode: boolean }>` - color: ${props => (props.darkMode ? 'var(--color-accent)' : 'var(--color-text)')}; + color: ${props => (props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)')}; `; const generateContactsString = async ( From 8b06ea88f902230766813b8f172eb545e64861dc Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 28 Sep 2022 17:15:06 +1000 Subject: [PATCH 09/10] feat: initial styling for audio player --- stylesheets/_modules.scss | 74 +++++++++++++++++++ stylesheets/_session_conversation.scss | 30 ++------ ts/components/conversation/H5AudioPlayer.tsx | 14 +--- .../message-content/ClickToTrustSender.tsx | 2 +- 4 files changed, 84 insertions(+), 36 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 0c6fca683..5c152cd20 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1251,3 +1251,77 @@ .module-left-pane__virtual-list { outline: none; } + +// TODO Theming - Needs Improvement +// Module H5AudioPlayer +.module-message__container--outgoing { + .rhap_container { + .rhap_play-pause-button, + .session-button { + color: var(--message-bubbles-sent-text-color); + &:hover { + color: var(--message-bubbles-sent-text-color); + } + } + } + + .rhap_volume-button { + color: var(--message-bubbles-sent-text-color); + } + + .rhap_time { + color: var(--message-bubbles-sent-text-color); + } + + .rhap_progress-bar { + background-color: var(--button-icon-stroke-color); + } + + .rhap_progress-filled { + background-color: var(--button-icon-stroke-hover-color); + } + + .rhap_download-progress { + background-color: var(--button-icon-stroke-hover-color); + } + + .rhap_progress-indicator { + background: var(--primary-color); + } +} + +.module-message__container--incoming { + .rhap_container { + .rhap_play-pause-button, + .session-button { + color: var(--message-bubbles-received-text-color); + &:hover { + color: var(--message-bubbles-received-text-color); + } + } + } + + .rhap_volume-button { + color: var(--message-bubbles-received-text-color); + } + + .rhap_time { + color: var(--message-bubbles-received-text-color); + } + + .rhap_progress-bar { + background-color: var(--button-icon-stroke-color); + } + + .rhap_progress-filled { + background-color: var(--button-icon-stroke-hover-color); + } + + .rhap_download-progress { + background-color: var(--button-icon-stroke-hover-color); + } + + .rhap_progress-indicator { + background: var(--primary-color); + } +} diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 73210d8ee..e5c740d3a 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -20,9 +20,10 @@ @keyframes pulseLight { 0% { - box-shadow: 0px 0px 0px 0px var(--color-destructive-alt); + box-shadow: 0px 0px 0px 0px var(--danger-color); } + // TODO Theming - Needs fixing 50% { box-shadow: 0px 0px 12px 0px rgba(var(--color-destructive-alt-rgb), 1); } @@ -330,10 +331,10 @@ height: var(--margins-sm); width: var(--margins-sm); border-radius: 50%; - background-color: var(--color-destructive-alt); + background-color: var(--danger-color); margin: 0 var(--margins-sm); - @include pulse-color(var(--color-destructive-alt), 1s, infinite); + @include pulse-color(var(--danger-color), 1s, infinite); } } } @@ -341,8 +342,7 @@ /* ************ */ /* AUDIO PLAYER */ /* ************ */ -$rhap_theme-color: #212121 !default; -$rhap_background-color: var(--color-transparent-color) !default; +$rhap_background-color: var(--transparent-color) !default; $rhap_font-family: inherit !default; .rhap_container, @@ -363,10 +363,6 @@ $rhap_font-family: inherit !default; svg { transition: fill var(--default-duration); - - &:hover path { - fill: var(--color-white-color); - } } } @@ -389,17 +385,11 @@ $rhap_font-family: inherit !default; display: none; } -.rhap_volume-button { - color: subtle(var(--color-text)); -} - .rhap_volume-container div[role='progressbar'] { display: none; } .rhap_time { - color: subtle(var(--color-text)); - font-size: 12px; } @@ -409,14 +399,10 @@ $rhap_font-family: inherit !default; z-index: 0; width: 100%; height: 5px; - background-color: var(--color-text); - border-radius: 2px; } .rhap_progress-filled { - background-color: rgba(var(--color-accent-rgb), 0.6); - padding-left: 5px; } @@ -424,8 +410,6 @@ $rhap_font-family: inherit !default; height: 100%; position: absolute; z-index: 1; - background-color: subtle(var(--color-text)); - border-radius: 2px; } @@ -435,9 +419,7 @@ $rhap_font-family: inherit !default; height: 15px; top: -5px; margin-left: -10px; - background: var(--primary-color); - box-shadow: none; - box-shadow: rgba($rhap_theme-color, 0.5) 0 0 5px; + box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important; } .rhap_controls-section { diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx index f3a55a4f9..c6c5fc291 100644 --- a/ts/components/conversation/H5AudioPlayer.tsx +++ b/ts/components/conversation/H5AudioPlayer.tsx @@ -16,13 +16,8 @@ import { SessionIcon } from '../icon'; const StyledSpeedButton = styled.div` padding: var(--margins-xs); - opacity: 0.6; transition: none; - :hover { - opacity: 1; - } - .session-button { transition: none; width: 34px; @@ -80,6 +75,7 @@ export const AudioPlayerWithEncryptedFile = (props: { dispatch(setNextMessageToPlayId(undefined)); return; } + // justEndedMessageIndex cannot be -1 nor 0, so it is >= 1 const nextMessageIndex = justEndedMessageIndex - 1; // stop auto-playing when the audio messages change author. @@ -128,12 +124,8 @@ export const AudioPlayerWithEncryptedFile = (props: { , ]} customIcons={{ - play: ( - - ), - pause: ( - - ), + play: , + pause: , }} /> ); diff --git a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx index 2adefdd95..e3ae998b8 100644 --- a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx +++ b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx @@ -38,7 +38,7 @@ export const ClickToTrustSender = (props: { messageId: string }) => { message: window.i18n('trustThisContactDialogDescription', [ convo.getContactProfileNameOrShortenedPubKey(), ]), - okTheme: SessionButtonColor.Primary, + closeTheme: SessionButtonColor.Danger, onClickOk: async () => { convo.set({ isTrustedForAttachmentDownload: true }); await convo.commit(); From dd58d294507038e8b30e38ab9b02f2ac672d271a Mon Sep 17 00:00:00 2001 From: William Grant Date: Thu, 29 Sep 2022 11:33:03 +1000 Subject: [PATCH 10/10] feat: huge refactor of the quote styling for theming --- stylesheets/_quote.scss | 430 ++++++++---------- .../message/message-content/Quote.tsx | 4 +- ts/themes/SessionTheme.tsx | 1 + 3 files changed, 198 insertions(+), 237 deletions(-) diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index d64219745..f065ad7c5 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -10,275 +10,233 @@ border-left-width: 4px; border-left-style: solid; + /* Primary */ + &__primary { + flex-grow: 1; + padding-inline-start: 8px; + padding-inline-end: 8px; + max-width: 100%; + } + &__primary__profile-name { + font-style: italic; + } &__primary__type-label { - border-color: var(--text-primary-color); + font-style: italic; + font-size: var(--font-size-sm); + line-height: 18px; + + color: var(--message-bubbles-received-text-color); + border-color: var(--message-bubbles-received-text-color); } -} + &__primary__author { + font-size: var(--font-size-sm); + font-weight: bold; + line-height: 18px; + margin-bottom: 5px; -// This is related to the quote logic inside messages -.module-quote { - &--outgoing { - .module-quote__primary__author { - color: var(--message-bubbles-sent-text-color); - font-weight: bold; + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--message-bubbles-received-text-color); - .module-contact-name { - font-weight: bold; - } + .module-contact-name { + font-weight: bold; } - .module-quote__primary__text { - color: var(--message-bubbles-sent-text-color); + } + &__primary__text { + font-size: 14px; + line-height: 18px; + text-align: start; - a { - color: var(--message-bubbles-sent-text-color); - } + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + white-space: pre-wrap; + + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + + color: var(--message-bubbles-received-text-color); + + a { + color: var(--message-bubbles-received-text-color); } } + &__primary__filename-label { + font-size: 12px; + } - &--incoming { - .module-quote__primary__author { - color: var(--message-bubbles-sent-text-color); - font-weight: bold; - .module-contact-name { - font-weight: bold; + /* Icons */ + &__icon-container { + flex: initial; + min-width: 54px; + width: 54px; + max-height: 54px; + position: relative; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &__inner { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } + &__circle-background { + display: flex; + align-items: center; + justify-content: center; + + height: 32px; + width: 32px; + border-radius: 50%; + background-color: var(--chat-buttons-background-color); + + &:hover { + background-color: var(--chat-buttons-background-hover-color); } } - .module-quote__primary__text { - color: var(--message-bubbles-sent-text-color); + &__icon { + width: 24px; + height: 24px; - a { - color: var(--message-bubbles-sent-text-color); + &--file { + @include color-svg('../images/file.svg', var(--button-icon-stroke-color)); + } + &--image { + @include color-svg('../images/image.svg', var(--button-icon-stroke-color)); + } + &--microphone { + @include color-svg('../images/microphone.svg', var(--button-icon-stroke-color)); + } + &--play { + @include color-svg('../images/play.svg', var(--chat-buttons-icon-color)); + } + &--movie { + @include color-svg('../images/movie.svg', var(--button-icon-stroke-color)); } } } -} - -.module-quote__icon-container__icon--file { - @include color-svg('../images/file.svg', var(--primary-color)); -} -.module-quote__icon-container__icon--image { - @include color-svg('../images/image.svg', var(--primary-color)); -} -.module-quote__icon-container__icon--microphone { - @include color-svg('../images/microphone.svg', var(--primary-color)); -} -.module-quote__icon-container__icon--play { - @include color-svg('../images/play.svg', var(--primary-color)); -} -.module-quote__icon-container__icon--movie { - @include color-svg('../images/movie.svg', var(--primary-color)); -} - -.module-quote__generic-file__text { - color: var(--color-lighter-gray-color); -} - -.module-quote__reference-warning { - background-color: var(--color-darkest-black-color); -} - -.module-quote__reference-warning__icon { - @include color-svg('../images/broken-link.svg', var(--color-light-gray-color)); -} - -.module-quote__reference-warning__text { - color: var(--color-lighter-gray-color); -} - -.module-quote-container { - margin-bottom: 5px; - margin-top: 10px; - padding-left: 10px; -} - -.module-quote--no-click { - cursor: auto; -} - -.module-quote__primary { - flex-grow: 1; - padding-inline-start: 8px; - padding-inline-end: 8px; - - max-width: 100%; -} - -.module-quote__primary__author { - font-size: var(--font-size-sm); - line-height: 18px; - font-weight: 300; - color: var(--color-darkest-gray-color); - margin-bottom: 5px; - - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.module-quote__primary__profile-name { - font-style: italic; -} - -.module-quote__primary__text { - font-size: 14px; - line-height: 18px; - text-align: start; - - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; - white-space: pre-wrap; - - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; -} - -.module-quote__primary__type-label { - font-style: italic; - color: var(--color-darkest-gray-color); - font-size: var(--font-size-sm); - line-height: 18px; -} - -.module-quote__primary__filename-label { - font-size: 12px; -} -.module-quote__close-container { - position: absolute; - top: 4px; - right: 4px; - height: 16px; - width: 16px; - - background-color: rgba(255, 255, 255, 0.75); - border-radius: 50%; -} + /* Generic Files */ + &__generic { + &-file { + display: flex; + flex-direction: row; + align-items: center; + } + &-file__icon { + background: url('../images/file-gradient.svg'); + background-size: 75%; + background-repeat: no-repeat; + height: 28px; + width: 36px; + margin-inline-start: -4px; + margin-inline-end: -6px; + margin-bottom: 5px; + } + &-file__text { + font-size: 14px; + line-height: 18px; + color: var(--message-bubbles-received-text-color); + + max-width: calc(100% - 26px); + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } -.module-quote__close-button { - width: 100%; - height: 100%; - cursor: pointer; - @include color-svg('../images/x.svg', var(--color-gray-color)); -} + /* Reference Warning */ + &__reference { + &-warning { + height: 26px; + display: flex; + flex-direction: row; + align-items: center; + + background-color: var(--message-link-preview-background-color); + padding-inline-start: 8px; + padding-inline-end: 8px; + margin-inline-end: 8px; + } -.module-quote__icon-container { - flex: initial; - min-width: 54px; - width: 54px; - max-height: 54px; - position: relative; + &-warning__icon { + height: 16px; + width: 16px; + @include color-svg('../images/broken-link.svg', var(--message-bubbles-received-text-color)); + } - img { - width: 100%; - height: 100%; - object-fit: cover; + &-warning__text { + margin-inline-start: 6px; + color: var(--message-bubbles-received-text-color); + font-size: var(--font-size-sm); + line-height: 18px; + } } - &__inner { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - - text-align: center; - display: flex; - align-items: center; - justify-content: center; + /* Misc */ + &--no-click { + cursor: auto; } } -.module-quote__icon-container__circle-background { - display: flex; - align-items: center; - justify-content: center; - - height: 32px; - width: 32px; - border-radius: 50%; - background-color: var(--color-white-color); -} - -.module-quote__icon-container__icon { - width: 24px; - height: 24px; - - &--file { - @include color-svg('../images/file.svg', var(--primary-color)); - } - &--image { - @include color-svg('../images/image.svg', var(--primary-color)); - } - &--microphone { - @include color-svg('../images/microphone.svg', var(--primary-color)); - } - &--play { - @include color-svg('../images/play.svg', var(--primary-color)); - } - &--movie { - @include color-svg('../images/movie.svg', var(--primary-color)); - } -} +/* Outgoing messages */ +.module-quote--outgoing { + color: var(--message-bubbles-sent-text-color); + .module-quote { + &__primary__type-label { + color: var(--message-bubbles-sent-text-color); + border-color: var(--message-bubbles-sent-text-color); + } + &__primary__author { + color: var(--message-bubbles-sent-text-color); + } + &__primary__text { + color: var(--message-bubbles-sent-text-color); -.module-quote__generic { - &-file { - display: flex; - flex-direction: row; - align-items: center; - } - &-file__icon { - background: url('../images/file-gradient.svg'); - background-size: 75%; - background-repeat: no-repeat; - height: 28px; - width: 36px; - margin-inline-start: -4px; - margin-inline-end: -6px; - margin-bottom: 5px; - } - &-file__text { - font-size: 14px; - line-height: 18px; - color: var(--color-darkest-gray-color); + a { + color: var(--message-bubbles-sent-text-color); + } + } - max-width: calc(100% - 26px); - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; + &__generic { + &-file__text { + color: var(--message-bubbles-sent-text-color); + } + } } } -.module-quote__reference { - &-warning { - height: 26px; - display: flex; - flex-direction: row; - align-items: center; - - background-color: var(--color-darkest-white-color); - padding-inline-start: 8px; - padding-inline-end: 8px; - margin-inline-end: 8px; - } - - &-warning__icon { - height: 16px; - width: 16px; - @include color-svg('../images/broken-link.svg', var(--color-gray-color)); - } +.module-quote-container { + margin-bottom: 5px; + margin-top: 10px; + padding-left: 10px; - &-warning__text { - margin-inline-start: 6px; - color: var(--color-darkest-gray-color); - font-size: var(--font-size-sm); - line-height: 18px; + /* This is not within the module-quote class so we handle it separately */ + .module-quote__reference-warning--outgoing { + .module-quote__reference-warning__text { + color: var(--message-bubbles-sent-text-color); + } + .module-quote__reference-warning__icon { + @include color-svg('../images/broken-link.svg', var(--message-bubbles-sent-text-color)); + } } } -$session-highlight-message-shadow: 0px 0px 10px 1px var(--primary-color); +$session-highlight-message-shadow: 0px 0px 10px 1px var(--button-icon-stroke-color); @keyframes remove-box-shadow { 0% { diff --git a/ts/components/conversation/message/message-content/Quote.tsx b/ts/components/conversation/message/message-content/Quote.tsx index 2169551db..53cc63b9f 100644 --- a/ts/components/conversation/message/message-content/Quote.tsx +++ b/ts/components/conversation/message/message-content/Quote.tsx @@ -316,7 +316,9 @@ export const QuoteReferenceWarning = (