MM-53513 Update styles of slack attachment buttons (#24628)

Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

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(`background-color: ${changeOpacity(Preferences.THEMES.denim.onlineIndicator, 0.08)}`);
-        expect(button).toHaveStyle('borderWidth: 2');
         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(`background-color: ${changeOpacity(Preferences.THEMES.indigo.errorTextColor, 0.08)}`);
-        expect(button).toHaveStyle('borderWidth: 2');
         expect(button).toHaveStyle(`color: ${Preferences.THEMES.indigo.errorTextColor}`);
     });
 
@@ -79,9 +77,8 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
         render(<ActionButton {...props}/>);
         const button = screen.getByRole('button');
 
-        expect(button).toHaveStyle(`borderColor: ${changeOpacity(Preferences.THEMES.denim.onlineIndicator, 0.25)}`);
+        expect(button).toHaveStyle(`background-color: ${changeOpacity('#339970', 0.08)}`);
-        expect(button).toHaveStyle('borderWidth: 2');
+        expect(button).toHaveStyle(`color: ${'#339970'}`);
-        expect(button).toHaveStyle(`color: ${Preferences.THEMES.denim.onlineIndicator}`);
     });
 
     test('should have correct styles when provided hex color', () => {
@@ -93,8 +90,7 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
         render(<ActionButton {...props}/>);
         const button = screen.getByRole('button');
 
-        expect(button).toHaveStyle(`borderColor: ${changeOpacity(props.action.style, 0.25)}`);
+        expect(button).toHaveStyle(`background-color: ${changeOpacity(props.action.style, 0.08)}`);
-        expect(button).toHaveStyle('borderWidth: 2');
         expect(button).toHaveStyle(`color: ${props.action.style}`);
     });
 

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<Props> {
     getStatusColors(theme: Theme) {
         return {
-            good: '#00c100',
+            good: '#339970',
-            warning: '#dede01',
+            warning: '#CC8F00',
             danger: theme.errorTextColor,
             default: theme.centerChannelColor,
             primary: theme.buttonBg,
-            success: theme.onlineIndicator,
+            success: '#339970',
         } as Record<string, string>;
     }
 
     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 (
-            <button
+            <ActionBtn
                 data-action-id={action.id}
                 data-action-cookie={action.cookie}
                 disabled={disabled}
                 key={action.id}
                 onClick={(e) => handleAction(e, this.props.action.options)}
-                style={customButtonStyle}
+                className='btn btn-sm'
+                hexColor={hexColor}
             >
                 <LoadingWrapper
                     loading={this.props.actionExecuting}
@@ -74,7 +68,21 @@ export default class ActionButton extends React.PureComponent<Props> {
                         }}
                     />
                 </LoadingWrapper>
-            </button>
+            </ActionBtn>
         );
     }
 }
+
+type ActionBtnProps = {hexColor: string | null | undefined};
+const ActionBtn = styled.button<ActionBtnProps>`
+    ${({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;
+        }
+    `}
+`;

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;
+                border: none;
-                padding: 6px 12px;
+                margin-top: 8px;
-                border-width: 1px;
+                background-color: rgba(var(--center-channel-color-rgb), 0.08);
-                border-style: solid;
+                color: var(--center-channel-color);
-                margin: 8px 8px 0 0;
-                border-radius: 3px;
                 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 {