diff --git a/frontend/src/components/fragments/SearchHint.tsx b/frontend/src/components/fragments/SearchHint.tsx new file mode 100644 index 000000000..9223e2342 --- /dev/null +++ b/frontend/src/components/fragments/SearchHint.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons"; +import { Icon, Tooltip } from "src/components/fragments"; + +export const SearchHint: React.FC = () => ( + +
+ +
+
+); diff --git a/frontend/src/components/fragments/index.ts b/frontend/src/components/fragments/index.ts index c4064ea02..d98f68f53 100644 --- a/frontend/src/components/fragments/index.ts +++ b/frontend/src/components/fragments/index.ts @@ -8,3 +8,4 @@ export { default as ErrorMessage } from "./ErrorMessage"; export { default as Help } from "./Help"; export { default as Tooltip } from "./Tooltip"; export { FavoriteStar } from "./Favorite"; +export { SearchHint } from "./SearchHint"; diff --git a/frontend/src/components/fragments/styles.scss b/frontend/src/components/fragments/styles.scss index 5047cf8d4..57778e4f5 100644 --- a/frontend/src/components/fragments/styles.scss +++ b/frontend/src/components/fragments/styles.scss @@ -118,3 +118,9 @@ box-shadow: none; } } + +.SearchHint { + margin-left: 10px; + margin-right: 7px; + cursor: help; +} diff --git a/frontend/src/components/searchField/SearchField.tsx b/frontend/src/components/searchField/SearchField.tsx index 1dfa76070..84a87aba7 100644 --- a/frontend/src/components/searchField/SearchField.tsx +++ b/frontend/src/components/searchField/SearchField.tsx @@ -11,7 +11,7 @@ import SearchPerformersGQL from "src/graphql/queries/SearchPerformers.gql"; import { SearchAllQuery, SearchPerformersQuery } from "src/graphql"; import { createHref, filterData, getImage } from "src/utils"; import { ROUTE_SEARCH } from "src/constants/route"; -import { GenderIcon } from "src/components/fragments"; +import { GenderIcon, SearchHint } from "src/components/fragments"; type SceneAllResult = NonNullable; type PerformerAllResult = NonNullable< @@ -234,6 +234,12 @@ const SearchField: FC = ({ components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null, + ValueContainer: ({ children }) => ( + <> + + {children} + + ), }} noOptionsMessage={({ inputValue }) => inputValue === "" ? null : `No result found for "${inputValue}"` diff --git a/frontend/src/components/studioSelect/StudioSelect.tsx b/frontend/src/components/studioSelect/StudioSelect.tsx index 531d35db7..d7de27d27 100644 --- a/frontend/src/components/studioSelect/StudioSelect.tsx +++ b/frontend/src/components/studioSelect/StudioSelect.tsx @@ -2,6 +2,7 @@ import { FC } from "react"; import Async from "react-select/async"; import { useApolloClient } from "@apollo/client"; import debounce from "p-debounce"; +import { SearchHint } from "src/components/fragments"; import StudiosGQL from "src/graphql/queries/Studios.gql"; import StudioGQL from "src/graphql/queries/Studio.gql"; @@ -130,6 +131,14 @@ const StudioSelect: FC = ({ } isClearable={isClearable} formatOptionLabel={formatStudioName} + components={{ + ValueContainer: ({ children }) => ( + <> + + {children} + + ), + }} /> );