From 27e19f3afac990f54475e9735fd31bf904d6808b Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 19 Sep 2022 16:34:36 +1000 Subject: [PATCH] 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);