From 1de5eb495d0f643e5224047ed7586dc8f0ebd326 Mon Sep 17 00:00:00 2001 From: Mattermost Build Date: Tue, 24 Mar 2020 02:20:22 +0100 Subject: [PATCH] Fix Message attachment actions colors on dark themes (#4065) Co-authored-by: Elias Nahum --- .../action_button/action_button.js | 6 ++++-- .../action_button/action_button.test.js | 3 ++- .../message_attachments/attachment_actions.js | 2 +- .../message_attachments/message_attachment.js | 3 ++- app/constants/colors.js | 13 ------------- app/utils/message_attachment_colors.js | 13 +++++++++++++ 6 files changed, 22 insertions(+), 18 deletions(-) delete mode 100644 app/constants/colors.js create mode 100644 app/utils/message_attachment_colors.js diff --git a/app/components/message_attachments/action_button/action_button.js b/app/components/message_attachments/action_button/action_button.js index 54c9c2ec7..0e063bf02 100644 --- a/app/components/message_attachments/action_button/action_button.js +++ b/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, diff --git a/app/components/message_attachments/action_button/action_button.test.js b/app/components/message_attachments/action_button/action_button.test.js index dd797bbf3..c52ceefac 100644 --- a/app/components/message_attachments/action_button/action_button.test.js +++ b/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]); }); diff --git a/app/components/message_attachments/attachment_actions.js b/app/components/message_attachments/attachment_actions.js index e80f84618..d5f96bbef 100644 --- a/app/components/message_attachments/attachment_actions.js +++ b/app/components/message_attachments/attachment_actions.js @@ -62,6 +62,6 @@ export default class AttachmentActions extends PureComponent { } }); - return content; + return content.length ? content : null; } } diff --git a/app/components/message_attachments/message_attachment.js b/app/components/message_attachments/message_attachment.js index e29bf1cae..464944716 100644 --- a/app/components/message_attachments/message_attachment.js +++ b/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) { diff --git a/app/constants/colors.js b/app/constants/colors.js deleted file mode 100644 index 795bb23e4..000000000 --- a/app/constants/colors.js +++ /dev/null @@ -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, -}; diff --git a/app/utils/message_attachment_colors.js b/app/utils/message_attachment_colors.js new file mode 100644 index 000000000..b6173987f --- /dev/null +++ b/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, + }; +} \ No newline at end of file