Fix Message attachment actions colors on dark themes (#4065)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/components/message_attachments/action_button/action_button.js

@@ -7,7 +7,7 @@ import Button from 'react-native-button';
 
 import {preventDoubleTap} from 'app/utils/tap';
 import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
-import {STATUS_COLORS} from 'app/constants/colors';
+import {getStatusColors} from 'app/utils/message_attachment_colors';
 import ActionButtonText from './action_button_text';
 
 export default class ActionButton extends PureComponent {
@@ -19,7 +19,7 @@ export default class ActionButton extends PureComponent {
         name: PropTypes.string.isRequired,
         postId: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
-        cookie: PropTypes.string.isRequired,
+        cookie: PropTypes.string,
         disabled: PropTypes.bool,
         buttonColor: PropTypes.string,
     };
@@ -36,6 +36,7 @@ export default class ActionButton extends PureComponent {
         let customButtonTextStyle;
 
         if (buttonColor) {
+            const STATUS_COLORS = getStatusColors(theme);
             const hexColor = STATUS_COLORS[buttonColor] || theme[buttonColor] || buttonColor;
             customButtonStyle = {borderColor: changeOpacity(hexColor, 0.25), backgroundColor: '#ffffff'};
             customButtonTextStyle = {color: hexColor};
@@ -58,6 +59,7 @@ export default class ActionButton extends PureComponent {
 }
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    const STATUS_COLORS = getStatusColors(theme);
     return {
         button: {
             borderRadius: 4,

app/components/message_attachments/action_button/action_button.test.js

@@ -5,7 +5,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import ActionButton from './action_button';
 import {changeOpacity} from 'app/utils/theme';
-import {STATUS_COLORS} from 'app/constants/colors';
+import {getStatusColors} from 'app/utils/message_attachment_colors';
 
 import Preferences from 'mattermost-redux/constants/preferences';
 
@@ -62,6 +62,7 @@ describe('ActionButton', () => {
         const buttonTextChild = wrapper.getElement().props.children;
         const dynamicButtonStyles = wrapper.getElement().props.containerStyle[1];
 
+        const STATUS_COLORS = getStatusColors(Preferences.THEMES.default);
         expect(dynamicButtonStyles.borderColor).toBe(changeOpacity(STATUS_COLORS[buttonConfig.style], 0.25));
         expect(buttonTextChild.props.style.color).toBe(STATUS_COLORS[buttonConfig.style]);
     });

app/components/message_attachments/attachment_actions.js

@@ -62,6 +62,6 @@ export default class AttachmentActions extends PureComponent {
             }
         });
 
-        return content;
+        return content.length ? content : null;
     }
 }

app/components/message_attachments/message_attachment.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {View} from 'react-native';
 
 import CustomPropTypes from 'app/constants/custom_prop_types';
-import {STATUS_COLORS} from 'app/constants/colors';
+import {getStatusColors} from 'app/utils/message_attachment_colors';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import AttachmentActions from './attachment_actions';
@@ -48,6 +48,7 @@ export default class MessageAttachment extends PureComponent {
         } = this.props;
 
         const style = getStyleSheet(theme);
+        const STATUS_COLORS = getStatusColors(theme);
 
         let borderStyle;
         if (attachment.color) {

app/constants/colors.js

@@ -1,13 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import Preferences from 'mattermost-redux/constants/preferences';
-
-export const STATUS_COLORS = {
-    good: '#00c100',
-    warning: '#dede01',
-    danger: Preferences.THEMES.default.errorTextColor,
-    default: Preferences.THEMES.default.centerChannelColor,
-    primary: Preferences.THEMES.default.buttonBg,
-    success: Preferences.THEMES.default.onlineIndicator,
-};

app/utils/message_attachment_colors.js

@@ -0,0 +1,13 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export function getStatusColors(theme) {
+    return {
+        good: '#00c100',
+        warning: '#dede01',
+        danger: theme.errorTextColor,
+        default: theme.centerChannelColor,
+        primary: theme.buttonBg,
+        success: theme.onlineIndicator,
+    };
+}