diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss index 3eed13e8c354..c8bd74980c9d 100644 --- a/stylesheets/components/ConversationHeader.scss +++ b/stylesheets/components/ConversationHeader.scss @@ -162,39 +162,42 @@ &:disabled { cursor: default; + opacity: 0.5; } &--show-disabled { opacity: 0.5; } - @include light-theme { - &:hover, - &:focus { - background: $color-gray-02; + &:not(:disabled) { + @include light-theme { + &:hover, + &:focus { + background: $color-gray-02; + } + &:active { + background: $color-gray-05; + } } - &:active { - background: $color-gray-05; + @include dark-theme { + &:hover, + &:focus { + background: $color-gray-80; + } + &:active { + background: $color-gray-75; + } } - } - @include dark-theme { - &:hover, - &:focus { - background: $color-gray-80; - } - &:active { - background: $color-gray-75; - } - } - @include keyboard-mode { - &:focus { - border-color: $color-ultramarine; + @include keyboard-mode { + &:focus { + border-color: $color-ultramarine; + } } - } - @include dark-keyboard-mode { - &:focus { - border-color: $color-ultramarine-light; + @include dark-keyboard-mode { + &:focus { + border-color: $color-ultramarine-light; + } } } diff --git a/ts/components/conversation/ConversationHeader.stories.tsx b/ts/components/conversation/ConversationHeader.stories.tsx index 0bc14f34b5d0..fb5852b5273f 100644 --- a/ts/components/conversation/ConversationHeader.stories.tsx +++ b/ts/components/conversation/ConversationHeader.stories.tsx @@ -35,6 +35,7 @@ const commonProps = { cannotLeaveBecauseYouAreLastAdmin: false, showBackButton: false, outgoingCallButtonStyle: OutgoingCallButtonStyle.Both, + isSelectMode: false, i18n, diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index ff2236eb43b9..a3684f804140 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -57,6 +57,7 @@ export type PropsDataType = { isMissingMandatoryProfileSharing?: boolean; outgoingCallButtonStyle: OutgoingCallButtonStyle; isSMSOnly?: boolean; + isSelectMode: boolean; isSignalConversation?: boolean; theme: ThemeType; } & Pick< @@ -287,10 +288,14 @@ export class ConversationHeader extends React.Component { } private renderMoreButton(triggerId: string): ReactNode { - const { i18n } = this.props; + const { i18n, isSelectMode } = this.props; return ( - +