From c9c22583d80aa9f91c9266e3ebf7b6dddc24b025 Mon Sep 17 00:00:00 2001 From: Jyoti Patel <36148363+jp0707@users.noreply.github.com> Date: Thu, 3 Sep 2020 22:21:36 -0400 Subject: [PATCH] [GH-15305][MM-27677] Improve empty state for Recent Mentions. (#4715) * Improve empty state for Recent Mentions. * Change backgroud color of icon. * Improve empty states for flagged and pinned posts. * Update pinned posts' test snapshot. * Change NoResult style as per figma specs. * Change NoResults icons according to UX specs. * Change style according to UX feedback. --- app/components/no_results.js | 54 ++++++++++++++----- .../settings/settings_sidebar_base.js | 6 +-- .../pinned/__snapshots__/pinned.test.js.snap | 2 +- app/screens/channel_info/pinned/pinned.tsx | 4 +- app/screens/flagged_posts/flagged_posts.js | 6 +-- app/screens/pinned_posts/pinned_posts.js | 4 +- .../recent_mentions/recent_mentions.js | 7 +-- assets/base/i18n/en.json | 16 +++--- 8 files changed, 65 insertions(+), 34 deletions(-) diff --git a/app/components/no_results.js b/app/components/no_results.js index ba57498c6..4496873e5 100644 --- a/app/components/no_results.js +++ b/app/components/no_results.js @@ -5,6 +5,7 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import {Image, Text, View} from 'react-native'; import IonIcon from 'react-native-vector-icons/Ionicons'; +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; @@ -12,6 +13,7 @@ export default class NoResults extends PureComponent { static propTypes = { description: PropTypes.string, iconName: PropTypes.string, + iconType: PropTypes.oneOf(['' /* image */, 'ion', 'material-community']), image: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), theme: PropTypes.object.isRequired, title: PropTypes.string.isRequired, @@ -21,6 +23,7 @@ export default class NoResults extends PureComponent { const { description, iconName, + iconType, image, theme, title, @@ -36,18 +39,30 @@ export default class NoResults extends PureComponent { /> ); } else if (iconName) { - icon = ( - - ); + if (iconType === 'ion') { + icon = ( + + ); + } else if (iconType === 'material-community') { + icon = ( + + ); + } } return ( - {icon} + + {icon} + {title} {description && {description} @@ -63,18 +78,33 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { alignItems: 'center', flex: 1, justifyContent: 'center', - paddingHorizontal: 15, + marginLeft: 32, + marginRight: 32, + marginBottom: 40, }, title: { - color: changeOpacity(theme.centerChannelColor, 0.4), + color: changeOpacity(theme.centerChannelColor, 1), fontSize: 20, fontWeight: '600', marginVertical: 15, }, description: { - color: changeOpacity(theme.centerChannelColor, 0.4), - fontSize: 17, + color: changeOpacity(theme.centerChannelColor, 1), + fontSize: 16, textAlign: 'center', + lineHeight: 24, + }, + icon: { + color: theme.buttonBg, + }, + iconContainer: { + height: 120, + width: 120, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 60, + marginBottom: 4, + backgroundColor: changeOpacity(theme.centerChannelColor, 0.1), }, }; }); diff --git a/app/components/sidebars/settings/settings_sidebar_base.js b/app/components/sidebars/settings/settings_sidebar_base.js index a311e0e69..2b389afc5 100644 --- a/app/components/sidebars/settings/settings_sidebar_base.js +++ b/app/components/sidebars/settings/settings_sidebar_base.js @@ -95,7 +95,7 @@ export default class SettingsSidebarBase extends PureComponent { goToFlaggedScreen = (intl) => { this.openModal( 'FlaggedPosts', - intl.formatMessage({id: 'search_header.title3', defaultMessage: 'Flagged Posts'}), + intl.formatMessage({id: 'search_header.title3', defaultMessage: 'Saved Messages'}), ); }; @@ -218,9 +218,9 @@ export default class SettingsSidebarBase extends PureComponent { theme={theme} /> Pinned should match snapshot 1`] = ` { const {channelId} = this.props; const {formatMessage} = this.context.intl; const id = t('channel_header.pinnedPosts'); - const defaultMessage = 'Pinned Posts'; + const defaultMessage = 'Pinned Messages'; const screen = 'PinnedPosts'; const title = formatMessage({id, defaultMessage}); const passProps = { @@ -42,7 +42,7 @@ export default class Pinned extends PureComponent { return ( ); diff --git a/app/screens/pinned_posts/pinned_posts.js b/app/screens/pinned_posts/pinned_posts.js index 1c282c278..00cc488aa 100644 --- a/app/screens/pinned_posts/pinned_posts.js +++ b/app/screens/pinned_posts/pinned_posts.js @@ -141,10 +141,10 @@ export default class PinnedPosts extends PureComponent { ); diff --git a/app/screens/recent_mentions/recent_mentions.js b/app/screens/recent_mentions/recent_mentions.js index 1a267ca95..4861bd21d 100644 --- a/app/screens/recent_mentions/recent_mentions.js +++ b/app/screens/recent_mentions/recent_mentions.js @@ -142,10 +142,11 @@ export default class RecentMentions extends PureComponent { ); diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index b8ac6f658..096dcbe5e 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -17,7 +17,7 @@ "channel_header.addMembers": "Add Members", "channel_header.directchannel.you": "{displayname} (you) ", "channel_header.manageMembers": "Manage Members", - "channel_header.pinnedPosts": "Pinned Posts", + "channel_header.pinnedPosts": "Pinned Messages", "channel_header.viewMembers": "View Members", "channel_info.header": "Header:", "channel_info.purpose": "Purpose:", @@ -272,8 +272,8 @@ "mobile.files_paste.error_description": "An error occurred while pasting the file(s). Please try again.", "mobile.files_paste.error_dismiss": "Dismiss", "mobile.files_paste.error_title": "Paste failed", - "mobile.flagged_posts.empty_description": "Flags are a way to mark messages for follow up. Your flags are personal, and cannot be seen by other users.", - "mobile.flagged_posts.empty_title": "No Flagged Posts", + "mobile.flagged_posts.empty_description": "Saved messages are only visible to you. Mark messages for follow-up or save something for later by long-pressing a message and choosing Save from the menu.", + "mobile.flagged_posts.empty_title": "No Saved messages yet", "mobile.help.title": "Help", "mobile.image_preview.save": "Save Image", "mobile.image_preview.save_video": "Save Video", @@ -363,8 +363,8 @@ "mobile.permission_denied_retry": "Settings", "mobile.photo_library_permission_denied_description": "To save images and videos to your library, please change your permission settings.", "mobile.photo_library_permission_denied_title": "{applicationName} would like to access your photo library", - "mobile.pinned_posts.empty_description": "Pin important items by holding down on any message and selecting \"Pin to Channel\".", - "mobile.pinned_posts.empty_title": "No Pinned Posts", + "mobile.pinned_posts.empty_description": "Pin important messages which are visible to the whole channel. Long press on a message and choose Pin to Channel to save it here.", + "mobile.pinned_posts.empty_title": "No Pinned messages yet", "mobile.post_info.add_reaction": "Add Reaction", "mobile.post_info.copy_text": "Copy Text", "mobile.post_info.flag": "Flag", @@ -401,8 +401,8 @@ "mobile.push_notification_reply.placeholder": "Write a reply...", "mobile.push_notification_reply.title": "Reply", "mobile.reaction_header.all_emojis": "All", - "mobile.recent_mentions.empty_description": "Messages containing your username and other words that trigger mentions will appear here.", - "mobile.recent_mentions.empty_title": "No Recent Mentions", + "mobile.recent_mentions.empty_description": "Messages where someone mentions you or includes your trigger words are saved here.", + "mobile.recent_mentions.empty_title": "No Mentions yet", "mobile.rename_channel.display_name_maxLength": "Channel name must be less than {maxLength, number} characters", "mobile.rename_channel.display_name_minLength": "Channel name must be {minLength, number} or more characters", "mobile.rename_channel.display_name_required": "Channel name is required", @@ -565,7 +565,7 @@ "search_bar.search": "Search", "search_header.results": "Search Results", "search_header.title2": "Recent Mentions", - "search_header.title3": "Flagged Posts", + "search_header.title3": "Saved Messages", "search_item.channelArchived": "Archived", "sidebar_right_menu.logout": "Logout", "sidebar_right_menu.report": "Report a Problem",