From a26cbdf4c73f1f8546335e0537eed17d20c88830 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 19 Sep 2022 13:39:44 +1000 Subject: [PATCH 1/7] feat: styled settings background and password box --- stylesheets/_session.scss | 10 ++++++---- ts/components/settings/SessionSettings.tsx | 12 ++++++++---- ts/components/settings/SessionSettingsHeader.tsx | 2 +- ts/themes/SessionTheme.tsx | 1 + 4 files changed, 16 insertions(+), 9 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 5909c54c5..ab5c0a065 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -582,6 +582,7 @@ label { height: 100vh; display: flex; flex-direction: column; + background-color: var(--background-secondary-color); &__password-lock { display: flex; @@ -598,21 +599,22 @@ label { max-width: 90%; width: 600px; - background: var(--color-cell-background); - color: var(--color-text); + background: var(--background-primary-color); + color: var(--text-primary-color); - border: 1px solid var(--color-darker-gray-color); + border: 1px solid var(--border-color); border-radius: 5px; } } } +// TODO Theming #qr svg, .qr-image svg { width: $session-modal-size-sm; height: $session-modal-size-sm; padding: var(--margins-xs); - background-color: var(--color-white-color); + background-color: var(--white-color); border-radius: 3px; } diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index fadee22b5..ac5c63d53 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -84,18 +84,22 @@ const SessionInfo = () => { const StyledPasswordInput = styled.input` width: 100%; - background: var(--color-input-background); - color: var(--color-text); + background: var(--text-box-background-color); + color: var(--text-box-text-user-color); padding: var(--margins-xs) var(--margins-md); margin-bottom: var(--margins-lg); outline: none; - border: none; - border-radius: 2px; + border: 1px solid var(--border-color); + border-radius: 7px; text-align: center; font-size: 24px; letter-spacing: 5px; font-family: var(--font-default); + + ::placeholder { + color: var(--text-box-text-control-color); + } `; const StyledH3 = styled.h3` diff --git a/ts/components/settings/SessionSettingsHeader.tsx b/ts/components/settings/SessionSettingsHeader.tsx index 42f8f8c01..bfcbef88a 100644 --- a/ts/components/settings/SessionSettingsHeader.tsx +++ b/ts/components/settings/SessionSettingsHeader.tsx @@ -11,7 +11,7 @@ const StyledSettingsHeader = styled.div` justify-content: center; align-items: center; height: var(--main-view-header-height); - background: var(--color-cell-background); + border-bottom: 1px solid var(--border-color); `; const StyledHeaderTittle = styled.div` diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index c188abdbe..d7adb2afb 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -485,6 +485,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* TODO Theming Clarify what those transparent colors mean */ /* Text Box */ + /* Also used for inputs specifically password box input */ --text-box-background-color: var(--background-primary-color); --text-box-text-control-color: ${THEMES.CLASSIC_LIGHT.COLOR1}; --text-box-text-user-color: var(--text-primary-color); From 060cbd3bbf72c811b8115bf19778e9833faa54c4 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 19 Sep 2022 14:29:49 +1000 Subject: [PATCH 2/7] feat: added proper theming to password popup cleaned up redundant session label options --- password.html | 10 ++++ stylesheets/_session.scss | 18 ++----- stylesheets/_session_password.scss | 31 +++++------- ts/components/SessionPasswordPrompt.tsx | 48 ++++++++++++++----- .../dialog/SessionPasswordDialog.tsx | 2 +- ts/components/settings/SessionSettings.tsx | 2 +- 6 files changed, 66 insertions(+), 45 deletions(-) diff --git a/password.html b/password.html index 3ef0b278b..593a4c1d3 100644 --- a/password.html +++ b/password.html @@ -1,5 +1,14 @@ + + + + + + + diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index ab5c0a065..3e1ca5e9b 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -73,27 +73,17 @@ textarea { } .session-label { - color: var(--color-white-color); + font-weight: 700; + color: var(--white-color); padding: var(--margins-sm); width: 100%; border-radius: 2px; text-align: center; &.primary { - background-color: var(--color-dark-gray-color); - } - &.secondary { - background-color: var(--color-darkest-gray-color); - } - &.success { - /* TODO is this correct? */ - background-color: var(--color-text); + background-color: var(--primary-color); } &.danger { - background-color: var(--color-destructive); - } - /* TODO Is this correct? */ - &.warning { - background-color: var(--color-warning); + background-color: var(--danger-color); } } diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss index c3016662e..a8d1153a7 100644 --- a/stylesheets/_session_password.scss +++ b/stylesheets/_session_password.scss @@ -22,23 +22,18 @@ justify-content: center; align-items: center; - background-color: var(--color-black-color); - width: 100%; height: 100%; - padding: 3 * $session-margin-lg; + padding: calc(3 * var(--margins-lg)); } &-error-section { width: 100%; - color: white; - margin: -var(--margins-sm) 0px 2 * $session-margin-lg 0px; + color: var(--text-primary-color); + margin: -var(--margins-sm) 0px calc(2 * var(--margins-lg)) 0px; .session-label { - &.primary { - background-color: rgba(var(--color-dark-gray-color-rgb), 0.3); - } padding: var(--margins-xs) var(--margins-sm); text-align: center; } @@ -46,7 +41,7 @@ &-container { font-family: $session-font-default; - color: white; + color: var(--text-primary-color); display: inline-flex; flex-direction: column; align-items: center; @@ -54,10 +49,10 @@ width: 600px; min-width: 420px; - padding: 3 * $session-margin-lg 2 * $session-margin-lg; + padding: calc(3 * var(--margins-lg)) calc(2 * var(--margins-lg)); box-sizing: border-box; - background-color: var(--color-darkest-gray-color); - border: 1px solid var(--color-darker-gray-color); + background-color: var(--background-secondary-color); + border: 1px solid var(--border-color); border-radius: 2px; .warning-info-area, @@ -67,7 +62,7 @@ align-items: center; h1 { - color: white; + color: var(--text-primary-color); } svg { margin-inline-end: var(--margins-lg); @@ -85,13 +80,13 @@ #password-prompt-input { width: 100%; - color: var(--color-white-color); - background-color: var(--color-darker-gray-color); - margin-top: 2 * $session-margin-lg; + background-color: var(--text-box-background-color); + color: var(--text-box-text-user-color); + margin-top: calc(2 * var(--margins-lg)); padding: var(--margins-xs) var(--margins-lg); outline: none; - border: none; - border-radius: 2px; + border: 1px solid var(--border-color); + border-radius: 7px; text-align: center; font-size: 24px; letter-spacing: 5px; diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx index 40055805b..0c189af71 100644 --- a/ts/components/SessionPasswordPrompt.tsx +++ b/ts/components/SessionPasswordPrompt.tsx @@ -1,12 +1,16 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import classNames from 'classnames'; import { SessionIcon } from './icon'; -import { withTheme } from 'styled-components'; import autoBind from 'auto-bind'; -import { SessionButton, SessionButtonColor } from './basic/SessionButton'; -import { Constants } from '../session'; +import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton'; import { SessionSpinner } from './basic/SessionSpinner'; +import { + SessionTheme, + switchHtmlToDarkTheme, + switchHtmlToLightTheme, +} from '../themes/SessionTheme'; +import styled from 'styled-components'; interface State { error: string; @@ -17,11 +21,16 @@ interface State { export const MAX_LOGIN_TRIES = 3; +const StyledTextPleaseWait = styled.div` + margin: var(--margins-sm) 0; + font-weight: 700; +`; + const TextPleaseWait = (props: { isLoading: boolean }) => { if (!props.isLoading) { return null; } - return
{window.i18n('pleaseWaitOpenAndOptimizeDb')}
; + return {window.i18n('pleaseWaitOpenAndOptimizeDb')}; }; class SessionPasswordPromptInner extends React.PureComponent<{}, State> { @@ -78,18 +87,18 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { /> ); const infoIcon = this.state.clearDataView ? ( - + ) : ( - + ); const errorSection = !this.state.clearDataView && (
{this.state.error && ( <> {showResetElements ? ( -
{window.i18n('maxPasswordAttempts')}
+
{window.i18n('maxPasswordAttempts')}
) : ( -
{this.state.error}
+
{this.state.error}
)} )} @@ -174,7 +183,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
{showResetElements && ( @@ -182,6 +191,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { @@ -196,10 +206,12 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { { this.setState({ clearDataView: false }); }} @@ -209,4 +221,18 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { } } -export const SessionPasswordPrompt = withTheme(SessionPasswordPromptInner); +export const SessionPasswordPrompt = () => { + useEffect(() => { + if ((window as any).theme === 'dark') { + switchHtmlToDarkTheme(); + } else { + switchHtmlToLightTheme(); + } + }, []); + + return ( + + + + ); +}; diff --git a/ts/components/dialog/SessionPasswordDialog.tsx b/ts/components/dialog/SessionPasswordDialog.tsx index 09a8daa39..4bbb8cb03 100644 --- a/ts/components/dialog/SessionPasswordDialog.tsx +++ b/ts/components/dialog/SessionPasswordDialog.tsx @@ -140,7 +140,7 @@ export class SessionPasswordDialog extends React.Component { <> {message && ( <> -
{message}
+
{message}
)} diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index ac5c63d53..78f7b12a3 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -127,7 +127,7 @@ const PasswordLock = ({ autoFocus={true} /> - {pwdLockError &&
{pwdLockError}
} + {pwdLockError &&
{pwdLockError}
} Date: Mon, 19 Sep 2022 14:50:54 +1000 Subject: [PATCH 3/7] feat: updated styling for setting list items --- .../settings/SessionSettingListItem.tsx | 16 ++++++++++------ ts/components/settings/SessionSettingsHeader.tsx | 1 - 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx index a6ed9f0ad..9ca8d3003 100644 --- a/ts/components/settings/SessionSettingListItem.tsx +++ b/ts/components/settings/SessionSettingListItem.tsx @@ -26,7 +26,6 @@ export const StyledDescriptionSettingsItem = styled.div` font-size: var(--font-size-sm); font-weight: 400; max-width: 700px; - color: var(--color-text-subtle); `; export const StyledTitleSettingsItem = styled.div` @@ -47,10 +46,12 @@ const StyledDescriptionContainer = styled(StyledDescriptionSettingsItem)` export const StyledSettingItem = styled.div` font-size: var(--font-size-md); padding: var(--margins-lg); + margin-bottom: var(--margins-lg); - background: var(--color-cell-background); - color: var(--color-text); - border-bottom: var(--border-session); + background: var(--settings-tab-background-color); + color: var(--settings-tab-text-color); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); `; const StyledSettingItemInline = styled(StyledSettingItem)` @@ -61,9 +62,12 @@ const StyledSettingItemInline = styled(StyledSettingItem)` `; const StyledSettingItemClickable = styled(StyledSettingItemInline)` + cursor: pointer; :hover { - background: var(--color-clickable-hovered); - cursor: pointer; + background: var(--settings-tab-background-hover-color); + } + :active { + background: var(--settings-tab-background-selected-color); } `; diff --git a/ts/components/settings/SessionSettingsHeader.tsx b/ts/components/settings/SessionSettingsHeader.tsx index bfcbef88a..f08924bca 100644 --- a/ts/components/settings/SessionSettingsHeader.tsx +++ b/ts/components/settings/SessionSettingsHeader.tsx @@ -11,7 +11,6 @@ const StyledSettingsHeader = styled.div` justify-content: center; align-items: center; height: var(--main-view-header-height); - border-bottom: 1px solid var(--border-color); `; const StyledHeaderTittle = styled.div` From 7cf9d2f05c5cea0dbe9bce499df93b01f1cfe50b Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 19 Sep 2022 15:10:02 +1000 Subject: [PATCH 4/7] feat: updated session toggle styling --- ts/components/basic/SessionToggle.tsx | 25 +++++++++++++++---------- ts/themes/SessionTheme.tsx | 3 ++- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx index 2dd1a9beb..1d6b6aefe 100644 --- a/ts/components/basic/SessionToggle.tsx +++ b/ts/components/basic/SessionToggle.tsx @@ -2,19 +2,19 @@ import React from 'react'; import { updateConfirmModal } from '../../state/ducks/modalDialog'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; -import { whiteColor } from '../../themes/SessionTheme'; const StyledKnob = styled.div<{ active: boolean }>` position: absolute; - top: 0.5px; - left: 0.5px; + top: ${props => (props.active ? '1px' : '0.5px')}; + left: ${props => (props.active ? '2px' : '0.5px')}; height: 21px; width: 21px; border-radius: 28px; - /* TODO Theming update */ - background-color: ${whiteColor}; + background-color: var(--toggle-switch-ball-color); box-shadow: ${props => - props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'}; + props.active + ? '-2px 1px 3px var(--toggle-switch-ball-shadow-color);' + : '2px 1px 3px var(--toggle-switch-ball-shadow-color);'}; transition: transform var(--default-duration) ease, background-color var(--default-duration) ease; @@ -24,17 +24,22 @@ const StyledKnob = styled.div<{ active: boolean }>` const StyledSessionToggle = styled.div<{ active: boolean }>` width: 51px; height: 25px; - border: 1px solid #e5e5ea; // TODO Theming update + background-color: (--toggle-switch-off-background-color); + border: 1px solid var(--toggle-switch-off-border-color); border-radius: 16px; position: relative; cursor: pointer; - background-color: var(--color-transparent-color); transition: var(--default-duration); background-color: ${props => - props.active ? 'var(--color-accent)' : 'var(--color-clickable-hovered)'}; - border-color: ${props => (props.active ? 'var(--color-accent)' : 'var(--color-cell-background)')}; + props.active + ? 'var(--toggle-switch-on-background-color)' + : 'var(--toggle-switch-off-background-color)'}; + border-color: ${props => + props.active + ? 'var(--toggle-switch-on-border-color)' + : 'var(--toggle-switch-off-border-color)'}; `; type Props = { diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index d7adb2afb..a3330eecc 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -583,7 +583,8 @@ export const SessionGlobalStyles = createGlobalStyle` --zoom-bar-selector-color: var(--primary-color); /* Toggle Switch */ - --toggle-switch-ball-color: ; + --toggle-switch-ball-color: var(--white-color); + --toggle-switch-ball-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15); /* TODO Theming think this should be white instead of transparent */ --toggle-switch-off-background-color: var(--transparent-color); --toggle-switch-off-border-color: var(--border-color); From 27e19f3afac990f54475e9735fd31bf904d6808b Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 19 Sep 2022 16:34:36 +1000 Subject: [PATCH 5/7] feat: updated SessionIconButton to support themes --- stylesheets/_conversation.scss | 11 +-- stylesheets/_session.scss | 32 -------- stylesheets/_session_conversation.scss | 9 +-- .../SessionMessagesListContainer.tsx | 13 --- .../conversation/SessionRecording.tsx | 3 +- .../composition/CompositionButtons.tsx | 79 ++++++++++++------- .../message-content/MessageReactBar.tsx | 17 ++-- .../message/message-item/GroupInvitation.tsx | 2 +- ts/components/dialog/SessionConfirm.tsx | 8 +- ts/components/icon/SessionIconButton.tsx | 29 ++++++- ts/components/leftpane/ActionsPanel.tsx | 3 - ts/components/lightbox/Lightbox.tsx | 30 +++++-- ts/themes/SessionTheme.tsx | 1 + 13 files changed, 116 insertions(+), 121 deletions(-) diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 4f67b9690..dcca0d2bc 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -55,16 +55,7 @@ } .session-icon-button { - background-color: var(--button-icon-background-color); - box-shadow: none; - - filter: brightness(1.05); - svg path { - transition: var(--default-duration); - opacity: 0.6; - // TODO Theming remove - fill: var(--color-text-opposite); - } + background-color: var(--primary-color); } } } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 3e1ca5e9b..2273fe21a 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -21,10 +21,6 @@ word-break: break-all; } -.session-icon-button svg path { - transition: fill 0.3s ease; -} - input, textarea { caret-color: var(--color-text) !important; @@ -91,17 +87,7 @@ textarea { cursor: pointer; display: inline-block; position: relative; - opacity: 0.4; transform: translateZ(0); - - &:hover { - opacity: 1; - } - transition: opacity var(--default-duration); - - &.no-opacity { - opacity: 1; - } } /* CONVERSATION AND MESSAGES */ @@ -454,10 +440,6 @@ label { &:hover { background: var(--color-clickable-hovered); - - .session-icon { - opacity: 1; - } } } @@ -666,20 +648,6 @@ input { height: 40px; width: 40px; border-radius: 50%; - opacity: 1; - background-color: var(--button-icon-background-color); - box-shadow: var(--color-session-shadow); - - svg path { - transition: var(--default-duration); - opacity: 0.6; - fill: var(--button-icon-stroke-color); - } - - &:hover svg path { - opacity: 1; - fill: var(--button-icon-stroke-hover-color); - } } } diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 43982fb5f..af30d0a35 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -165,18 +165,11 @@ z-index: 1; .session-icon-button { - margin-right: var(--margins-sm); - display: flex; justify-content: center; align-items: center; - opacity: 0.7; - &:hover { - opacity: 1; - filter: brightness(0.9); - transition: var(--default-duration); - } + margin-right: var(--margins-sm); .send { padding: var(--margins-xs); diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index f1aaefc23..19be88a5a 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/ts/components/conversation/SessionMessagesListContainer.tsx @@ -68,19 +68,6 @@ const StyledMessagesContainer = styled.div<{}>` height: 40px; width: 40px; border-radius: 50%; - opacity: 1; - background-color: var(--color-cell-background); - box-shadow: var(--color-session-shadow); - - svg path { - transition: var(--default-duration); - opacity: 0.6; - fill: var(--color-text); - } - - &:hover svg path { - opacity: 1; - } } `; diff --git a/ts/components/conversation/SessionRecording.tsx b/ts/components/conversation/SessionRecording.tsx index 97c576b54..6e3cc7239 100644 --- a/ts/components/conversation/SessionRecording.tsx +++ b/ts/components/conversation/SessionRecording.tsx @@ -127,7 +127,7 @@ export class SessionRecording extends React.Component { )} @@ -174,6 +174,7 @@ export class SessionRecording extends React.Component { iconSize={'large'} iconRotation={90} onClick={this.onSendVoiceMessage} + margin={'var(--margins-sm)'} />
)} diff --git a/ts/components/conversation/composition/CompositionButtons.tsx b/ts/components/conversation/composition/CompositionButtons.tsx index 6f3046daf..921893ed8 100644 --- a/ts/components/conversation/composition/CompositionButtons.tsx +++ b/ts/components/conversation/composition/CompositionButtons.tsx @@ -1,54 +1,77 @@ import React from 'react'; +import styled from 'styled-components'; import { SessionIconButton } from '../../icon'; +const StyledChatButtonContainer = styled.div` + .session-icon-button { + svg { + background-color: var(--chat-buttons-background-color); + } + + &:hover svg { + background-color: var(--chat-buttons-background-hover-color); + } + } +`; + export const AddStagedAttachmentButton = (props: { onClick: () => void }) => { return ( - + + + ); }; export const StartRecordingButton = (props: { onClick: () => void }) => { return ( - - ); -}; - -export const ToggleEmojiButton = React.forwardRef void }>( - (props, ref) => { - return ( + + + ); +}; + +export const ToggleEmojiButton = React.forwardRef void }>( + (props, ref) => { + return ( + + + ); } ); export const SendMessageButton = (props: { onClick: () => void }) => { return ( -
+ void }) => { onClick={props.onClick} dataTestId="send-message-button" /> -
+ ); }; diff --git a/ts/components/conversation/message/message-content/MessageReactBar.tsx b/ts/components/conversation/message/message-content/MessageReactBar.tsx index 15c236d9d..68c2f2c25 100644 --- a/ts/components/conversation/message/message-content/MessageReactBar.tsx +++ b/ts/components/conversation/message/message-content/MessageReactBar.tsx @@ -12,7 +12,7 @@ type Props = { }; const StyledMessageReactBar = styled.div` - background-color: var(--color-received-message-background); + background-color: var(--emoji-reaction-bar-background-color); border-radius: 25px; box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19); @@ -26,9 +26,10 @@ const StyledMessageReactBar = styled.div` align-items: center; .session-icon-button { - border-color: transparent !important; - box-shadow: none !important; margin: 0 4px; + &:hover svg { + background-color: var(--chat-buttons-background-hover-color); + } } `; @@ -44,7 +45,7 @@ const ReactButton = styled.span` font-size: 24px; :hover { - background-color: var(--color-compose-view-button-background); + background-color: var(--chat-buttons-background-hover-color); } `; @@ -79,11 +80,11 @@ export const MessageReactBar = (props: Props): ReactElement => { ))} diff --git a/ts/components/conversation/message/message-item/GroupInvitation.tsx b/ts/components/conversation/message/message-item/GroupInvitation.tsx index 8b3d7ea1a..8fafccf9f 100644 --- a/ts/components/conversation/message/message-item/GroupInvitation.tsx +++ b/ts/components/conversation/message/message-item/GroupInvitation.tsx @@ -25,8 +25,8 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
{ acceptOpenGroupInvitation(props.acceptUrl, props.serverName); diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx index 1814fec37..b774395f6 100644 --- a/ts/components/dialog/SessionConfirm.tsx +++ b/ts/components/dialog/SessionConfirm.tsx @@ -64,7 +64,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => { const cancelText = props.cancelText || window.i18n('cancel'); const showHeader = !!props.title; - const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle'; + const messageSubText = messageSub ? 'session-confirm-main-message' : undefined; const onClickOkHandler = async () => { if (onClickOk) { @@ -120,11 +120,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => { )} - +
diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx index 1a3430c71..8bf5abdd6 100644 --- a/ts/components/icon/SessionIconButton.tsx +++ b/ts/components/icon/SessionIconButton.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import { SessionIcon, SessionIconProps } from '../icon'; import _ from 'lodash'; import { SessionNotificationCount } from './SessionNotificationCount'; +import styled from 'styled-components'; interface SProps extends SessionIconProps { onClick?: (e: React.MouseEvent) => void; @@ -15,6 +16,26 @@ interface SProps extends SessionIconProps { style?: object; } +const StyledSessionIconButton = styled.div<{ color?: string; isSelected?: boolean }>` + background-color: var(--button-icon-background-color); + + svg path { + transition: var(--default-duration); + ${props => + !props.color && + `fill: + ${ + props.isSelected + ? 'var(--button-icon-stroke-selected-color)' + : 'var(--button-icon-stroke-color)' + };`} + } + + &:hover svg path { + ${props => !props.color && `fill: var(--button-icon-stroke-hover-color);`} + } +`; + const SessionIconButtonInner = React.forwardRef((props, ref) => { const { iconType, @@ -43,8 +64,10 @@ const SessionIconButtonInner = React.forwardRef((props, }; return ( -
((props, iconPadding={iconPadding} /> {Boolean(notificationCount) && } -
+ ); }); diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index 74f7bbc60..fc4e9c6c6 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -101,7 +101,6 @@ const Section = (props: { type: SectionType }) => { iconSize="medium" dataTestId="message-section" iconType={'chatBubble'} - iconColor={undefined} notificationCount={unreadToShow} onClick={handleClick} isSelected={isSelected} @@ -113,7 +112,6 @@ const Section = (props: { type: SectionType }) => { iconSize="medium" dataTestId="settings-section" iconType={'gear'} - iconColor={undefined} notificationCount={unreadToShow} onClick={handleClick} isSelected={isSelected} @@ -134,7 +132,6 @@ const Section = (props: { type: SectionType }) => { iconSize="medium" iconType={'moon'} dataTestId="theme-section" - iconColor={undefined} notificationCount={unreadToShow} onClick={handleClick} isSelected={isSelected} diff --git a/ts/components/lightbox/Lightbox.tsx b/ts/components/lightbox/Lightbox.tsx index 713592ae9..cb407d9be 100644 --- a/ts/components/lightbox/Lightbox.tsx +++ b/ts/components/lightbox/Lightbox.tsx @@ -14,6 +14,7 @@ import { Flex } from '../basic/Flex'; import { SessionIconButton, SessionIconType } from '../icon'; import * as MIME from '../../types/MIME'; import { isUndefined } from 'lodash'; +import styled from 'styled-components'; const Colors = { TEXT_SECONDARY: '#bbb', @@ -127,6 +128,17 @@ const styles = { }, }; +const StyledIconButton = styled.div` + .session-icon-button { + opacity: 0.4; + transition: opacity var(--default-duration); + + &:hover { + opacity: 1; + } + } +`; + interface IconButtonProps { onClick?: () => void; style?: React.CSSProperties; @@ -162,14 +174,16 @@ const IconButton = ({ onClick, type }: IconButtonProps) => { } return ( - + + + ); }; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index a3330eecc..91dbfb479 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -504,6 +504,7 @@ export const SessionGlobalStyles = createGlobalStyle` --menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; /* Chat (Interaction) Buttons */ + /* Also used for Reaction Bar Buttons */ --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); From 59f82a165b403d619d48f93afe8d64a071931e30 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 19 Sep 2022 16:59:09 +1000 Subject: [PATCH 6/7] feat: finished styling convesation category including block list, added quick link to github release --- ts/components/settings/BlockedList.tsx | 32 +++++++++++++--------- ts/components/settings/SessionSettings.tsx | 24 ++++++++++++---- 2 files changed, 37 insertions(+), 19 deletions(-) diff --git a/ts/components/settings/BlockedList.tsx b/ts/components/settings/BlockedList.tsx index ed9830868..4dd0a59aa 100644 --- a/ts/components/settings/BlockedList.tsx +++ b/ts/components/settings/BlockedList.tsx @@ -18,20 +18,28 @@ const BlockedEntriesContainer = styled.div` overflow: auto; min-height: 40px; max-height: 100%; - background: var(--color-input-background); // TODO theming update `; const BlockedEntriesRoundedContainer = styled.div` overflow: hidden; + background: var(--background-secondary-color); + border: 1px solid var(--border-color); border-radius: 16px; padding: var(--margins-lg); - background: var(--color-input-background); // TODO theming update + margin: 0 var(--margins-lg); `; const BlockedContactsSection = styled.div` display: flex; flex-direction: column; min-height: 0; + + background: var(--settings-tab-background-color); + color: var(--settings-tab-text-color); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); + + margin-bottom: var(--margins-lg); `; const BlockedContactListTitle = styled.div` @@ -50,10 +58,6 @@ export const StyledBlockedSettingItem = styled.div<{ clickable: boolean }>` font-size: var(--font-size-md); padding: var(--margins-lg); - background: var(--color-cell-background); - color: var(--color-text); - border-bottom: var(--border-session); - cursor: ${props => (props.clickable ? 'pointer' : 'unset')}; `; @@ -143,18 +147,20 @@ export const BlockedContactsList = () => { iconRotation={expanded ? 0 : 180} dataTestId="reveal-blocked-user-settings" /> - )} {expanded && !noBlockedNumbers ? ( - + <> + + + ) : null} ); diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index 78f7b12a3..5f0537e3f 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -61,21 +61,33 @@ const StyledSpanSessionInfo = styled.span` opacity: 0.4; transition: var(--default-duration); user-select: text; + cursor: pointer; - :hover { + &:hover { opacity: 1; } `; const SessionInfo = () => { - const openOxenWebsite = () => { - void shell.openExternal('https://oxen.io/'); - }; return ( - v{window.versionInfo.version} + { + void shell.openExternal( + `https://github.com/oxen-io/session-desktop/releases/tag/v${window.versionInfo.version}` + ); + }} + > + v{window.versionInfo.version} + - + { + void shell.openExternal('https://oxen.io/'); + }} + /> {window.versionInfo.commitHash} From 976d11af38d29198a8c7e83e9e82f29acd3e5bb0 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 19 Sep 2022 17:28:45 +1000 Subject: [PATCH 7/7] fix: improved stlying for settings heading items --- ts/components/MemberListItem.tsx | 9 ++-- .../leftpane/LeftPaneSettingSection.tsx | 54 ++++++++++--------- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index e84328383..7e632aa4b 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -22,6 +22,7 @@ const StyledSessionMemberItem = styled.button<{ inMentions?: boolean; zombie?: boolean; selected?: boolean; + disableBg?: boolean; }>` cursor: pointer; display: flex; @@ -36,14 +37,13 @@ const StyledSessionMemberItem = styled.button<{ transition: var(--default-duration); opacity: ${props => (props.zombie ? 0.5 : 1)}; background-color: ${props => - props.selected && 'var(--color-conversation-item-selected) !important'}; + !props.disableBg && props.selected + ? 'var(--conversation-tab-background-selected-color) !important' + : null}; :not(:last-child) { border-bottom: var(--border-color); } - - background-color: ${props => - props.selected ? 'var(--conversation-tab-background-selected-color) !important' : null}; `; const StyledInfo = styled.div` @@ -109,6 +109,7 @@ export const MemberListItem = (props: { zombie={isZombie} inMentions={inMentions} selected={isSelected} + disableBg={disableBg} > diff --git a/ts/components/leftpane/LeftPaneSettingSection.tsx b/ts/components/leftpane/LeftPaneSettingSection.tsx index 25f24e9ec..db1549c4c 100644 --- a/ts/components/leftpane/LeftPaneSettingSection.tsx +++ b/ts/components/leftpane/LeftPaneSettingSection.tsx @@ -15,6 +15,33 @@ import { SessionIcon } from '../icon'; import { SessionSettingCategory } from '../settings/SessionSettings'; import { resetConversationExternal } from '../../state/ducks/conversations'; +const StyledSettingsSectionTitle = styled.strong` + font-family: var(--font-font-accent); + font-size: var(--font-size-md); +`; + +const StyledSettingsListItem = styled.div<{ active: boolean }>` + background-color: ${props => + props.active + ? 'var(--settings-tab-background-selected-color)' + : 'var(--settings-tab-background-color)'}; + color: var(--settings-tab-text-color); + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 74px; + line-height: 1.4; + padding: 0px var(--margins-md); + flex-shrink: 0; + cursor: pointer; + transition: var(--default-duration) !important; + + :hover { + background: var(--settings-tab-background-hover-color); + } +`; + const getCategories = () => { return [ { @@ -92,9 +119,7 @@ const LeftPaneSettingsCategoryRow = (props: { } }} > - + {title} @@ -123,29 +148,6 @@ const StyledContentSection = styled.div` overflow-y: auto; `; -const StyledSettingsSectionTitle = styled.strong` - font-family: var(--font-font-accent); - font-size: var(--font-size-md); -`; - -const StyledSettingsListItem = styled.div<{ active: boolean }>` - background: ${props => (props.active ? 'var(--color-conversation-item-selected)' : 'none')}; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - height: 74px; - line-height: 1.4; - padding: 0px var(--margins-md); - flex-shrink: 0; - cursor: pointer; - transition: var(--default-duration) !important; - - :hover { - background: var(--color-clickable-hovered); - } -`; - export const LeftPaneSettingSection = () => { return (