diff --git a/app/components/files/file.tsx b/app/components/files/file.tsx index 426228602..1041439fa 100644 --- a/app/components/files/file.tsx +++ b/app/components/files/file.tsx @@ -44,7 +44,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { flex: 1, flexDirection: 'row', alignItems: 'center', - marginTop: 10, borderWidth: 1, borderColor: changeOpacity(theme.centerChannelColor, 0.24), borderRadius: 4, diff --git a/app/components/files/files.tsx b/app/components/files/files.tsx index 683f1cf81..3747fea43 100644 --- a/app/components/files/files.tsx +++ b/app/components/files/files.tsx @@ -43,6 +43,9 @@ const styles = StyleSheet.create({ failed: { opacity: 0.5, }, + marginTop: { + marginTop: 10, + }, }); const Files = ({canDownloadFiles, failed, filesInfo, isReplyPost, layoutWidth, location, postId, publicLinkEnabled}: FilesProps) => { @@ -86,7 +89,7 @@ const Files = ({canDownloadFiles, failed, filesInfo, isReplyPost, layoutWidth, l } return ( ({ + resultsNumber: { + ...typography('Heading', 300), + padding: 20, + color: theme.centerChannelColor, + }, +})); + type Props = { canDownloadFiles: boolean; fileChannels: ChannelModel[]; @@ -41,6 +52,9 @@ type Props = { const galleryIdentifier = 'search-files-location'; +const separatorStyle = {height: 10}; +const Separator = () => ; + const FileResults = ({ canDownloadFiles, fileChannels, @@ -52,13 +66,14 @@ const FileResults = ({ isFilterEnabled, }: Props) => { const theme = useTheme(); + const styles = getStyles(theme); const insets = useSafeAreaInsets(); const isTablet = useIsTablet(); const [action, setAction] = useState('none'); const [lastViewedFileInfo, setLastViewedFileInfo] = useState(undefined); - const containerStyle = useMemo(() => ([paddingTop, {top: fileInfos.length ? 8 : 0, flexGrow: 1}]), [fileInfos, paddingTop]); + const containerStyle = useMemo(() => ([paddingTop, {flexGrow: 1}]), [paddingTop]); const numOptions = getNumberFileMenuOptions(canDownloadFiles, publicLinkEnabled); const {images: imageAttachments, nonImages: nonImageAttachments} = useImageAttachments(fileInfos, publicLinkEnabled); @@ -141,6 +156,15 @@ const FileResults = ({ return ( <> + } + ItemSeparatorComponent={Separator} ListEmptyComponent={noResults} contentContainerStyle={containerStyle} data={orderedFileInfos} diff --git a/app/screens/home/search/results/header.tsx b/app/screens/home/search/results/header.tsx index 7ffc5ea0e..35f1fad35 100644 --- a/app/screens/home/search/results/header.tsx +++ b/app/screens/home/search/results/header.tsx @@ -27,8 +27,6 @@ type Props = { onFilterChanged: (filter: FileFilter) => void; selectedTab: TabType; selectedFilter: FileFilter; - numberMessages: number; - numberFiles: number; setTeamId: (id: string) => void; teamId: string; teams: TeamModel[]; @@ -65,8 +63,6 @@ const Header = ({ setTeamId, onTabSelect, onFilterChanged, - numberMessages, - numberFiles, selectedTab, selectedFilter, teams, @@ -122,7 +118,7 @@ const Header = ({ }); }, [onFilterChanged, selectedFilter]); - const filterStyle = useMemo(() => ({marginRight: teams.length > 1 ? 0 : 10}), [teams.length > 1]); + const filterStyle = useMemo(() => ({marginRight: teams.length > 1 ? 0 : 8}), [teams.length > 1]); return ( @@ -130,39 +126,42 @@ const Header = ({ - {showFilterIcon && - - + + + + )} + {teams.length > 1 && ( + - - - } - {teams.length > 1 && - - } + )} @@ -170,4 +169,3 @@ const Header = ({ }; export default Header; - diff --git a/app/screens/home/search/results/header_button.tsx b/app/screens/home/search/results/header_button.tsx index 3a0d7704b..e4632bb9c 100644 --- a/app/screens/home/search/results/header_button.tsx +++ b/app/screens/home/search/results/header_button.tsx @@ -16,7 +16,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { borderRadius: 4, }, text: { - paddingHorizontal: 16, + paddingHorizontal: 12, paddingVertical: 8, ...typography('Body', 200, 'SemiBold'), }, diff --git a/app/screens/home/search/results/post_results.tsx b/app/screens/home/search/results/post_results.tsx index 5e63894cf..a98125878 100644 --- a/app/screens/home/search/results/post_results.tsx +++ b/app/screens/home/search/results/post_results.tsx @@ -4,18 +4,30 @@ import React, {useCallback, useMemo} from 'react'; import {FlatList, type ListRenderItemInfo, type StyleProp, type ViewStyle} from 'react-native'; +import FormattedText from '@components/formatted_text'; import NoResultsWithTerm from '@components/no_results_with_term'; import DateSeparator from '@components/post_list/date_separator'; import PostWithChannelInfo from '@components/post_with_channel_info'; import {Screens} from '@constants'; +import {useTheme} from '@context/theme'; import {convertSearchTermToRegex, parseSearchTerms} from '@utils/markdown'; import {getDateForDateLine, selectOrderedPosts} from '@utils/post_list'; import {TabTypes} from '@utils/search'; +import {makeStyleSheetFromTheme} from '@utils/theme'; +import {typography} from '@utils/typography'; import type {PostListItem, PostListOtherItem} from '@typings/components/post_list'; import type PostModel from '@typings/database/models/servers/post'; import type {SearchPattern} from '@typings/global/markdown'; +const getStyles = makeStyleSheetFromTheme((theme: Theme) => ({ + resultsNumber: { + ...typography('Heading', 300), + padding: 20, + color: theme.centerChannelColor, + }, +})); + type Props = { appsEnabled: boolean; customEmojiNames: string[]; @@ -37,8 +49,10 @@ const PostResults = ({ paddingTop, searchValue, }: Props) => { + const theme = useTheme(); + const styles = getStyles(theme); const orderedPosts = useMemo(() => selectOrderedPosts(posts, 0, false, '', '', false, isTimezoneEnabled, currentTimezone, false).reverse(), [posts]); - const containerStyle = useMemo(() => ({top: posts.length ? 4 : 8, flexGrow: 1}), [posts]); + const containerStyle = useMemo(() => ([paddingTop, {flexGrow: 1}]), [paddingTop]); const renderItem = useCallback(({item}: ListRenderItemInfo) => { switch (item.type) { @@ -88,8 +102,16 @@ const PostResults = ({ return ( + } ListEmptyComponent={noResults} - contentContainerStyle={[paddingTop, containerStyle]} + contentContainerStyle={containerStyle} data={orderedPosts} indicatorStyle='black' initialNumToRender={5} @@ -104,7 +126,6 @@ const PostResults = ({ scrollEventThrottle={16} scrollToOverflowEnabled={true} showsVerticalScrollIndicator={true} - style={containerStyle} testID='search_results.post_list.flat_list' /> ); diff --git a/app/screens/home/search/results/results.tsx b/app/screens/home/search/results/results.tsx index a54343beb..4fca6b035 100644 --- a/app/screens/home/search/results/results.tsx +++ b/app/screens/home/search/results/results.tsx @@ -100,7 +100,7 @@ const Results = ({ } {!loading && - + - + { setTeamId={handleResultsTeamChange} onTabSelect={setSelectedTab} onFilterChanged={handleFilterChange} - numberMessages={posts.length} selectedTab={selectedTab} - numberFiles={fileInfos.length} selectedFilter={filter} teams={teams} /> diff --git a/app/screens/home/search/team_picker_icon.tsx b/app/screens/home/search/team_picker_icon.tsx index 9a9fa52e9..6b49790e0 100644 --- a/app/screens/home/search/team_picker_icon.tsx +++ b/app/screens/home/search/team_picker_icon.tsx @@ -28,7 +28,7 @@ const NO_TEAMS_HEIGHT = 392; const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { return { teamContainer: { - paddingLeft: 12, + paddingLeft: 8, flexDirection: 'row', alignItems: 'center', }, diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 2d9176aee..720e55081 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -681,6 +681,7 @@ "mobile.search.show_less": "Show less", "mobile.search.show_more": "Show more", "mobile.search.team.select": "Select a team to search", + "mobile.search.results": "{count} search {count, plural, one {result} other {results}}", "mobile.server_identifier.exists": "You are already connected to this server.", "mobile.server_link.error.text": "The link could not be found on this server.", "mobile.server_link.error.title": "Link Error", @@ -1061,4 +1062,4 @@ "video.download_description": "This video must be downloaded to play it.", "video.failed_description": "An error occurred while trying to play the video.", "your.servers": "Your servers" -} +} \ No newline at end of file