Help text overlays for scene and studio select (#603)

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 = () => (
+  <Tooltip text='Add " to the end to include all words, or paste in a Stash ID'>
+    <div className="SearchHint">
+      <Icon icon={faCircleQuestion} color="black" />
+    </div>
+  </Tooltip>
+);

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";

frontend/src/components/fragments/styles.scss

@@ -118,3 +118,9 @@
     box-shadow: none;
   }
 }
+
+.SearchHint {
+  margin-left: 10px;
+  margin-right: 7px;
+  cursor: help;
+}

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<SearchAllQuery["searchScene"][number]>;
 type PerformerAllResult = NonNullable<
@@ -234,6 +234,12 @@ const SearchField: FC<SearchFieldProps> = ({
         components={{
           DropdownIndicator: () => null,
           IndicatorSeparator: () => null,
+          ValueContainer: ({ children }) => (
+            <>
+              <SearchHint />
+              {children}
+            </>
+          ),
         }}
         noOptionsMessage={({ inputValue }) =>
           inputValue === "" ? null : `No result found for "${inputValue}"`

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<StudioSelectProps> = ({
         }
         isClearable={isClearable}
         formatOptionLabel={formatStudioName}
+        components={{
+          ValueContainer: ({ children }) => (
+            <>
+              <SearchHint />
+              {children}
+            </>
+          ),
+        }}
       />
     </div>
   );