diff --git a/web/modals/search/message-search-modal.css b/web/modals/search/message-search-modal.css --- a/web/modals/search/message-search-modal.css +++ b/web/modals/search/message-search-modal.css @@ -12,3 +12,11 @@ margin-bottom: 8px; margin-top: 24px; } + +.footer { + color: var(--modal-secondary-label); + size: 14; + font-weight: 400; + text-align: center; + margin: 20px; +} diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js --- a/web/modals/search/message-search-modal.react.js +++ b/web/modals/search/message-search-modal.react.js @@ -155,21 +155,33 @@ possiblyLoadMoreMessages(); }, [clearTooltip, possiblyLoadMoreMessages]); - const loader = React.useMemo(() => { - if (endReached) { - return null; + const footer = React.useMemo(() => { + if (query === '') { + return ( +
Your search results will appear here
+ ); + } + if (!endReached) { + return ( +
+ +
+ ); + } + if (modifiedItems.length > 0) { + return
End of results
; } return ( -
- +
+ No results. Please try using different keywords to refine your search
); - }, [endReached]); + }, [query, endReached, modifiedItems.length]); return (
{messages} - {loader} + {footer}
); } diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -237,4 +237,5 @@ --change-member-role-modal-generic-text: var(--shades-white-100); --change-member-role-modal-disabled-background: var(--shades-black-80); --unsaved-changes-modal-text-color: var(--shades-white-60); + --modal-secondary-label: var(--shades-black-60); }