diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 9024e5131..2a8c20303 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -144,97 +144,3 @@ padding-top: 40px; padding-bottom: 40px; } - -// We need to use the wrapper because the conversation view calculates the height of all -// things in the composition area. A margin on an inner div won't be included in that -// height calculation. -.bottom-bar .quote-wrapper { - margin-inline-start: 37px; - margin-inline-end: 73px; - margin-top: 3px; - margin-bottom: -5px; -} - -.bottom-bar .preview-wrapper { - margin-top: 3px; - margin-inline-start: 37px; - margin-inline-end: 73px; - margin-bottom: 2px; -} - -.bottom-bar { - box-sizing: content-box; - $button-width: 36px; - @include themify($themes) { - border-top: themed('sessionBorder'); - } - - form.send { - margin-bottom: 0px; - background: $color-white; - - &.video-attachment { - .image-container { - position: relative; - } - - .outer { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - - text-align: center; - display: flex; - align-items: center; - justify-content: center; - - .play.icon { - height: 30px; - width: 30px; - - @include color-svg('../images/play.svg', white); - } - } - } - } - - .attachment-previews { - padding: 0 36px; - margin-bottom: 3px; - - .attachment-preview { - padding: 13px 10px 0; - } - img { - border: 2px solid #ddd; - border-radius: $border-radius; - max-height: 100px; - } - - .close { - position: absolute; - top: 5px; - right: 2px; - background: #999; - - &:hover { - background: $grey; - } - } - } - - .flex { - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: 7px; - padding: 0px 15px; - } - - .choose-file { - float: left; - height: 36px; - } -} diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index deb769f76..d693c87c7 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -17,46 +17,6 @@ } } -// This is related to the bottomBar quote&mention logic -.bottom-bar .module-quote { - margin: 0; - border-left-style: none; - @include themify($themes) { - background: themed('quoteBottomBarBackground'); - } - - .module-quote__primary__author { - @include themify($themes) { - color: themed('textColor'); - } - } - .module-quote__primary__text { - @include themify($themes) { - color: themed('textColor'); - } - a { - @include themify($themes) { - color: themed('textColor'); - } - } - } - - // close button when quoting a message - &__close { - &-container { - @include themify($themes) { - background: themed('backgroundPrimary'); - } - } - - &-button { - @include themify($themes) { - @include color-svg('../images/x.svg', themed('foregroundPrimary')); - } - } - } -} - // This is related to the quote logic inside messages .module-quote { &--outgoing { @@ -322,18 +282,6 @@ } } -.bottom-bar .member-item { - @include themify($themes) { - border-bottom: themed('sessionBorder'); - } - - &:hover { - @include themify($themes) { - background: themed('clickableHovered'); - } - } -} - // animate when user is scrolling to a quoted message @keyframes blinker { 0% { diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 0a7ca425f..68e09677b 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1039,50 +1039,6 @@ label { transition: $session-transition-duration !important; } -.bottom-bar { - .compose { - max-height: 200px; - } - - .send-message-container { - display: flex; - flex-grow: 1; - height: 48px; - margin-bottom: -5px; - } - - textarea.send-message { - @include themify($themes) { - background: themed('composeViewBackground'); - color: themed('textColor'); - } - border: none; - margin: 0px; - padding: 0px $session-margin-lg; - font-size: $session-font-md; - line-height: 1.3em; - align-self: center; - } -} - -.bottom-bar form { - &.send { - @include themify($themes) { - background: themed('composeViewBackground'); - } - } - - &.active textarea { - border: none; - } -} - -.dark-theme .bottom-bar .send-message[disabled='disabled'] { - @include themify($themes) { - background: themed('composeViewBackground'); - } -} - .session-radio-group fieldset { border: none; margin-inline-start: $session-margin-sm; diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index cef63de6b..100a3b2d8 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -41,7 +41,6 @@ $themes: ( buttonGreen: #272726, // conversation view composeViewBackground: #fcfcfc, - composeViewTextFieldBackground: #ededed, receivedMessageBackground: #f5f5f5, sentMessageBackground: $accentLightTheme, receivedMessageText: $black, @@ -65,9 +64,6 @@ $themes: ( // context menu contextMenuBackground: #f5f5f5, filterSessionText: brightness(0) saturate(100%), - lastSeenIndicatorColor: #62656a, - lastSeenIndicatorTextColor: #070c14, - quoteBottomBarBackground: #f0f0f0, ), dark: ( accent: $accentDarkTheme, @@ -91,9 +87,8 @@ $themes: ( foregroundPrimary: $white, buttonGreen: $accentDarkTheme, // conversation view - composeViewBackground: #1b1b1b, - composeViewTextFieldBackground: #141414, - receivedMessageBackground: #222325, + composeViewBackground: #171717, + receivedMessageBackground: #2d2d2d, sentMessageBackground: $accentDarkTheme, receivedMessageText: $white, sentMessageText: $black, @@ -116,9 +111,6 @@ $themes: ( // context menu contextMenuBackground: #212121, filterSessionText: none, - lastSeenIndicatorColor: #353535, - lastSeenIndicatorTextColor: #a8a9aa, - quoteBottomBarBackground: #404040, ), ); diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index b6176b2c8..3c5ce3ab6 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -55,6 +55,7 @@ import { connect } from 'react-redux'; import { StateType } from '../../../state/reducer'; import { getTheme } from '../../../state/selectors/theme'; import { removeAllStagedAttachmentsInConversation } from '../../../state/ducks/stagedAttachments'; +import { useTheme } from 'styled-components'; export interface ReplyingToMessageProps { convoId: string; diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx index c36f40137..06593f356 100644 --- a/ts/state/ducks/SessionTheme.tsx +++ b/ts/state/ducks/SessionTheme.tsx @@ -12,8 +12,6 @@ const accentLightTheme = '#00e97b'; const accentDarkTheme = '#00f782'; const borderLightThemeColor = '#f1f1f1'; const borderDarkThemeColor = '#ffffff0F'; -const borderHighContrastLightTheme = '#afafaf'; -const borderHighContrastDarkTheme = '#484848'; // const borderAvatarColor = '#00000059'; // const borderLightTheme = '#f1f1f1'; @@ -48,113 +46,53 @@ export const lightTheme: DefaultTheme = { accentButton: black, warning: warning, destructive: destructive, - cellBackground: '#fcfcfc', - modalBackground: '#fcfcfc', - fakeChatBubbleBackground: '#f5f5f5', - // input - inputBackground: '#8E8E93331F', // text textColor: black, textColorSubtle: `${black}99`, - textColorSubtleNoOpacity: '#52514f', textColorOpposite: white, - textHighlight: `${black}33`, textAccent: '#00c769', - // inbox - inboxBackground: white, - // buttons - backgroundPrimary: '#272726', - foregroundPrimary: white, - buttonGreen: '#272726', // conversation view - composeViewBackground: '#fcfcfc', - composeViewTextFieldBackground: '#ededed', - receivedMessageBackground: '#f5f5f5', + composeViewButtonBackground: '#efefef', sentMessageBackground: accentLightTheme, - receivedMessageText: black, sentMessageText: white, sessionShadow: `0 0 4px 0 ${black}5E`, - sessionShadowColor: `${black}5E`, // left pane - conversationList: white, - conversationItemHasUnread: '#fcfcfc', - conversationItemSelected: '#f0f0f0', clickableHovered: '#dfdfdf', sessionBorder: `1px solid ${borderLightThemeColor}`, sessionBorderColor: borderLightThemeColor, - sessionBorderHighContrast: `1px solid ${borderHighContrastLightTheme}`, - sessionUnreadBorder: `4px solid ${accentLightTheme}`, - leftpaneOverlayBackground: white, recoveryPhraseBannerBackground: white, - // scrollbars - scrollBarTrack: '#fcfcfc', - scrollBarThumb: '#474646', // pill divider: pillDividerColor: `${black}1A`, - pillDividerTextColor: '#555555', - // context menu - contextMenuBackground: '#f5f5f5', - filterSessionText: 'brightness(0) saturate(100%)', lastSeenIndicatorColor: '#62656a', lastSeenIndicatorTextColor: '#070c14', quoteBottomBarBackground: '#f0f0f0', }, }; -export const darkTheme = { +export const darkTheme: DefaultTheme = { common, colors: { accent: accentDarkTheme, accentButton: accentDarkTheme, warning: warning, destructive: destructive, - cellBackground: '#1b1b1b', - modalBackground: '#101011', - fakeChatBubbleBackground: '#212121', - // input - inputBackground: '#8e8e931F', // text textColor: white, textColorSubtle: `${white}99`, - textColorSubtleNoOpacity: '#7f7d7d', textColorOpposite: black, - textHighlight: `${accentDarkTheme}99`, textAccent: accentDarkTheme, - // inbox - inboxBackground: 'linear-gradient(180deg, #171717 0%, #121212 100%)', - // buttons - backgroundPrimary: '#474646', - foregroundPrimary: white, - buttonGreen: accentDarkTheme, // conversation view - composeViewBackground: '#1b1b1b', - composeViewTextFieldBackground: '#141414', - receivedMessageBackground: '#222325', + composeViewButtonBackground: '#232323', sentMessageBackground: accentDarkTheme, - receivedMessageText: white, sentMessageText: black, sessionShadow: `0 0 4px 0 ${white}33`, - sessionShadowColor: `${white}33`, // left pane - conversationList: '#1b1b1b', - conversationItemHasUnread: '#2c2c2c', - conversationItemSelected: '#404040', clickableHovered: '#414347', sessionBorder: `1px solid ${borderDarkThemeColor}`, sessionBorderColor: borderDarkThemeColor, - sessionBorderHighContrast: `1px solid ${borderHighContrastDarkTheme}`, - sessionUnreadBorder: `4px solid ${accentDarkTheme}`, - leftpaneOverlayBackground: 'linear-gradient(180deg, #171717 0%, #121212 100%)', recoveryPhraseBannerBackground: '#1f1f1f', - // scrollbars - scrollBarTrack: '#1b1b1b', - scrollBarThumb: '#474646', // pill divider: pillDividerColor: '#353535', - pillDividerTextColor: '#a0a0a0', - // context menu - contextMenuBackground: '#212121', - filterSessionText: 'none', lastSeenIndicatorColor: '#353535', lastSeenIndicatorTextColor: '#a8a9aa', quoteBottomBarBackground: '#404040', diff --git a/ts/styled.d.ts b/ts/styled.d.ts index 953f901d3..265decd12 100644 --- a/ts/styled.d.ts +++ b/ts/styled.d.ts @@ -28,53 +28,24 @@ declare module 'styled-components' { accentButton: string; warning: string; destructive: string; - cellBackground: string; - modalBackground: string; - fakeChatBubbleBackground: string; - // input - inputBackground: string; // text textColor: string; textColorSubtle: string; - textColorSubtleNoOpacity: string; textColorOpposite: string; - textHighlight: string; textAccent: string; - // inbox - inboxBackground: string; - // buttons - backgroundPrimary: string; - foregroundPrimary: string; - buttonGreen: string; // conversation view - composeViewBackground: string; - composeViewTextFieldBackground: string; - receivedMessageBackground: string; + composeViewButtonBackground: string; sentMessageBackground: string; - receivedMessageText: string; sentMessageText: string; sessionShadow: string; - sessionShadowColor: string; // left pane - conversationList: string; - conversationItemHasUnread: string; - conversationItemSelected: string; clickableHovered: string; sessionBorder: string; sessionBorderColor: string; - sessionBorderHighContrast: string; - sessionUnreadBorder: string; - leftpaneOverlayBackground: string; recoveryPhraseBannerBackground: string; - // scrollbars - scrollBarTrack: string; - scrollBarThumb: string; // pill divider: pillDividerColor: string; - pillDividerTextColor: string; // context menu - contextMenuBackground: string; - filterSessionText: string; lastSeenIndicatorColor: string; lastSeenIndicatorTextColor: string; quoteBottomBarBackground: string;