diff --git a/src/css/manage/_cloud-community.scss b/src/css/manage/_cloud-community.scss index ba29ff97..93143046 100644 --- a/src/css/manage/_cloud-community.scss +++ b/src/css/manage/_cloud-community.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @use '../common/theme'; @use '../common/banners'; @@ -15,6 +16,16 @@ flex: 0 0 165px; } + .cloud-search-submit { + display: inline-flex; + align-items: center; + justify-content: center; + + .components-spinner { + margin: 0; + } + } + .cloud-search-query { flex: 1; position: relative; @@ -51,6 +62,10 @@ block-size: 100%; } + nav { + margin-inline-start: auto; + } + .tablenav-pages { margin: 0; margin-inline-start: auto; @@ -169,3 +184,16 @@ .cloud-search-results .cloud-search-result footer > .components-spinner { margin: 0; } + +.cloud-pro-button.button { + background-color: theme.$secondary; + border-color: theme.$secondary; + color: #fff; + + &:hover, + &:focus { + background-color: color.adjust(theme.$secondary, $lightness: -10%); + border-color: color.adjust(theme.$secondary, $lightness: -10%); + color: #fff; + } +} diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx index a31b7a4d..e45f9183 100644 --- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx +++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx @@ -2,7 +2,6 @@ import { __ } from '@wordpress/i18n' import React, { useEffect } from 'react' import { Spinner } from '@wordpress/components' import { TablePagination } from '../../common/ListTable/TablePagination' -import { SubmitButton } from '../../common/SubmitButton' import { useCloudSearch } from './WithCloudSearchContext' import { WithCloudSearchFiltersContext, useCloudSearchFilters } from './WithCloudSearchFiltersContext' import { SearchFilters } from './SearchFilters' @@ -43,14 +42,18 @@ const SearchBox = () => { placeholder={__('e.g. Remove unused JavaScript…', 'code-snippets')} /> - {isSearching && <> - - {__('Searching…', 'code-snippets')} - } + {isSearching && + {__('Searching…', 'code-snippets')}} - + ) } @@ -78,18 +81,22 @@ const SearchResultsTable = () => { /> - - -
- -
+ {0 < filteredSearchResults.length + ? <> + + +
+ +
+ + : } : null } @@ -104,8 +111,15 @@ const NoSearchResultsBanner = () =>

{__('No snippets or codevault could be found with that search term. Please try again.', 'code-snippets')}

+const CloudSnippetsHeading: React.FC<{ isFeatured: boolean }> = ({ isFeatured }) => +

+ {isFeatured + ? __('Featured Snippets', 'code-snippets') + : __('Search Results', 'code-snippets')} +

+ export const CloudSearch = () => { - const { searchResults, error, page } = useCloudSearch() + const { searchResults, error, isFeatured } = useCloudSearch() return (
@@ -113,11 +127,14 @@ export const CloudSearch = () => { {error && } - {0 < page && 0 === searchResults?.length - ? - : - - } + {searchResults !== undefined + ? <> + + + + + + : null}
) } diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx index 11ab17a6..eb58e3ee 100644 --- a/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx +++ b/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx @@ -3,7 +3,6 @@ import { __ } from '@wordpress/i18n' import { CloudStatus } from '../../../types/schema/CloudSnippetSchema' import { updateQueryParam } from '../../../utils/urls' import { useCloudSearch } from './WithCloudSearchContext' -import { useCloudSearchFilters } from './WithCloudSearchFiltersContext' import type { Dispatch, SetStateAction } from 'react' export const STATUS_LABELS: Record = { @@ -15,7 +14,8 @@ export const STATUS_LABELS: Record = { } export interface CloudSearchFilters { - tags: string + category: number + type: number status: number } @@ -35,7 +35,7 @@ const SearchFilter: React.FC = ({ options, filter, filters, s