Add search box to splash screen

specifyweb/frontend/js_src/lib/components/Header/ExpressSearchTask.tsx

@@ -39,35 +39,45 @@ import { useMenuItem } from './useMenuItem';
 
 export function ExpressSearchOverlay(): JSX.Element {
   useMenuItem('search');
-  const [query = ''] = useSearchParameter('q');
-  const value = React.useState(query);
-  const [pendingQuery] = value;
-  const navigate = useNavigate();
   const formId = useId('express-search')('form');
   const handleClose = React.useContext(OverlayContext);
   return (
     <Dialog
       buttons={
         <>
           <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
-          <Submit.Blue form={formId}>{commonText.search()}</Submit.Blue>
+          <Submit.Save form={formId}>{commonText.search()}</Submit.Save>
         </>
       }
       header={headerText.simpleSearch()}
       onClose={handleClose}
     >
-      <Form
-        id={formId}
-        onSubmit={(): void =>
-          navigate(formatUrl('/specify/express-search/', { q: pendingQuery }))
-        }
-      >
-        <SearchField value={value} />
-      </Form>
+      <SearchForm formId={formId} />
     </Dialog>
   );
 }
 
+export function SearchForm({
+  formId,
+}: {
+  readonly formId: string;
+}): JSX.Element {
+  const navigate = useNavigate();
+  const [query = ''] = useSearchParameter('q');
+  const value = React.useState(query);
+  const [pendingQuery] = value;
+  return (
+    <Form
+      id={formId}
+      onSubmit={(): void =>
+        navigate(formatUrl('/specify/express-search/', { q: pendingQuery }))
+      }
+    >
+      <SearchField value={value} />
+    </Form>
+  );
+}
+
 function SearchField({
   value: [value, setValue],
 }: {
@@ -77,7 +87,7 @@ function SearchField({
     <Input.Generic
       aria-label={commonText.search()}
       autoComplete="on"
-      className="flex-1"
+      className="flex-1 bg-[color:var(--field-background)]"
       // Name is for autocomplete purposes only
       name="searchQuery"
       placeholder={commonText.search()}

specifyweb/frontend/js_src/lib/components/HomePage/index.tsx

@@ -6,6 +6,10 @@ import { f } from '../../utils/functools';
 import { defaultWelcomePageImage } from '../Preferences/Renderers';
 import { userPreferences } from '../Preferences/userPreferences';
 import { Async } from '../Router/RouterUtils';
+import { SearchForm } from '../Header/ExpressSearchTask';
+import { useId } from '../../hooks/useId';
+import { Submit } from '../Atoms/Submit';
+import { commonText } from '../../localization/common';
 
 const taxonTiles = f.store(() => (
   <Async
@@ -20,20 +24,29 @@ const taxonTiles = f.store(() => (
 
 export function WelcomeView(): JSX.Element {
   const [mode] = userPreferences.use('welcomePage', 'general', 'mode');
+  const formId = useId('express-search')('form');
 
   return (
-    <div
-      className={`
-        mx-auto flex h-full w-full max-w-[1000px] flex-col justify-center gap-4 p-4
-      `}
-    >
+    <div className="flex h-full flex-col">
+      <div className="flex justify-end gap-2 pt-4 pr-4">
+        <SearchForm formId={formId} />
+        <Submit.Gray form={formId}>{commonText.search()}</Submit.Gray>
+      </div>
       <div
         className={`
+        mx-auto flex w-full max-w-[1000px] flex-1 flex-col justify-center gap-4 p-4
+      `}
+      >
+        <span className="-ml-2 flex-1" />
+        <div
+          className={`
           flex min-h-0 items-center justify-center
           ${mode === 'embeddedWebpage' ? 'h-5/6' : ''}
         `}
-      >
-        {mode === 'taxonTiles' ? taxonTiles() : <WelcomeScreenContent />}
+        >
+          {mode === 'taxonTiles' ? taxonTiles() : <WelcomeScreenContent />}
+        </div>
+        <span className="-ml-2 flex-1" />
       </div>
     </div>
   );