From 21845e2b9bcf01e12ab0789783e1a415177e6e50 Mon Sep 17 00:00:00 2001 From: Matthew Birtch Date: Tue, 10 Oct 2023 17:34:03 -0400 Subject: [PATCH] MM-53513 Update styles of slack attachment buttons (#24628) Co-authored-by: Asaad Mahmood Co-authored-by: Mattermost Build --- .../action_button/action_button.test.tsx | 14 +++---- .../action_button/action_button.tsx | 40 +++++++++++-------- .../channels/src/sass/layout/_webhooks.scss | 22 ++++++---- 3 files changed, 43 insertions(+), 33 deletions(-) diff --git a/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.test.tsx b/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.test.tsx index 9f021d7f89..d6c9a8b66a 100644 --- a/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.test.tsx +++ b/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.test.tsx @@ -49,8 +49,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => { const button = screen.getByRole('button'); - expect(button).toHaveStyle(`borderColor: ${changeOpacity(Preferences.THEMES.denim.onlineIndicator, 0.25)}`); - expect(button).toHaveStyle('borderWidth: 2'); + expect(button).toHaveStyle(`background-color: ${changeOpacity(Preferences.THEMES.denim.onlineIndicator, 0.08)}`); expect(button).toHaveStyle(`color: ${Preferences.THEMES.denim.onlineIndicator}`); }); @@ -65,8 +64,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => { const button = screen.getByRole('button'); - expect(button).toHaveStyle(`borderColor: ${changeOpacity(Preferences.THEMES.indigo.errorTextColor, 0.25)}`); - expect(button).toHaveStyle('borderWidth: 2'); + expect(button).toHaveStyle(`background-color: ${changeOpacity(Preferences.THEMES.indigo.errorTextColor, 0.08)}`); expect(button).toHaveStyle(`color: ${Preferences.THEMES.indigo.errorTextColor}`); }); @@ -79,9 +77,8 @@ describe('components/post_view/message_attachments/action_button.jsx', () => { render(); const button = screen.getByRole('button'); - expect(button).toHaveStyle(`borderColor: ${changeOpacity(Preferences.THEMES.denim.onlineIndicator, 0.25)}`); - expect(button).toHaveStyle('borderWidth: 2'); - expect(button).toHaveStyle(`color: ${Preferences.THEMES.denim.onlineIndicator}`); + expect(button).toHaveStyle(`background-color: ${changeOpacity('#339970', 0.08)}`); + expect(button).toHaveStyle(`color: ${'#339970'}`); }); test('should have correct styles when provided hex color', () => { @@ -93,8 +90,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => { render(); const button = screen.getByRole('button'); - expect(button).toHaveStyle(`borderColor: ${changeOpacity(props.action.style, 0.25)}`); - expect(button).toHaveStyle('borderWidth: 2'); + expect(button).toHaveStyle(`background-color: ${changeOpacity(props.action.style, 0.08)}`); expect(button).toHaveStyle(`color: ${props.action.style}`); }); diff --git a/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.tsx b/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.tsx index d4b8fd20d5..477974a89d 100644 --- a/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.tsx +++ b/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.tsx @@ -2,6 +2,7 @@ // See LICENSE.txt for license information. import React from 'react'; +import styled, {css} from 'styled-components'; import type {PostAction, PostActionOption} from '@mattermost/types/integration_actions'; @@ -23,43 +24,36 @@ type Props = { export default class ActionButton extends React.PureComponent { getStatusColors(theme: Theme) { return { - good: '#00c100', - warning: '#dede01', + good: '#339970', + warning: '#CC8F00', danger: theme.errorTextColor, default: theme.centerChannelColor, primary: theme.buttonBg, - success: theme.onlineIndicator, + success: '#339970', } as Record; } render() { const {action, handleAction, disabled, theme} = this.props; - let customButtonStyle; + let hexColor: string | null | undefined; if (action.style) { const STATUS_COLORS = this.getStatusColors(theme); - const hexColor = + hexColor = STATUS_COLORS[action.style] || theme[action.style] || (action.style.match('^#(?:[0-9a-fA-F]{3}){1,2}$') && action.style); - - if (hexColor) { - customButtonStyle = { - borderColor: changeOpacity(hexColor, 0.25), - color: hexColor, - borderWidth: 2, - }; - } } return ( - + ); } } + +type ActionBtnProps = {hexColor: string | null | undefined}; +const ActionBtn = styled.button` + ${({hexColor}) => hexColor && css` + background-color: ${changeOpacity(hexColor, 0.08)} !important; + color: ${hexColor} !important; + &:hover { + background-color: ${changeOpacity(hexColor, 0.12)} !important; + } + &:active { + background-color: ${changeOpacity(hexColor, 0.16)} !important; + } + `} +`; diff --git a/webapp/channels/src/sass/layout/_webhooks.scss b/webapp/channels/src/sass/layout/_webhooks.scss index 197e3528ff..1f58fcbd2f 100644 --- a/webapp/channels/src/sass/layout/_webhooks.scss +++ b/webapp/channels/src/sass/layout/_webhooks.scss @@ -4,7 +4,7 @@ padding: 0 13px 15px; border: 1px solid; margin-top: 10px; - border-radius: 3px; + border-radius: 4px; @include alpha-property(background, $black, 0.1); } @@ -371,20 +371,26 @@ } button { - height: auto; - padding: 6px 12px; - border-width: 1px; - border-style: solid; - margin: 8px 8px 0 0; - border-radius: 3px; + border: none; + margin-top: 8px; + background-color: rgba(var(--center-channel-color-rgb), 0.08); + color: var(--center-channel-color); font-size: 13px; - font-weight: 700; outline: 0; + &:hover { + background-color: rgba(var(--center-channel-color-rgb), 0.12); + text-decoration: none; + } + &[disabled] { cursor: auto; opacity: 0.5; } + + a { + color: inherit; + } } .alert {