UI enhancements #1

src/components/header/header.tsx

@@ -1,8 +1,9 @@
-import { Banner, Icon, Search } from '@metrostar/comet-uswds';
+import { Banner, Button, Icon, Modal, Search } from '@metrostar/comet-uswds';
 import { APP_TITLE } from '@src/utils/constants';
 import navigation from '@uswds/uswds/js/usa-header';
 import React, { SyntheticEvent, useEffect, useState } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import icon from '/img/ai-spark-icon.svg';
 
 export const Header = (): React.ReactElement => {
   const navigate = useNavigate();
@@ -64,6 +65,44 @@ export const Header = (): React.ReactElement => {
               <Icon id="menu-icon" type="close" />
             </button>
             <ul className="usa-nav__primary usa-accordion">
+              <li
+                className="usa-nav__primary-item"
+                style={{ margin: 'auto auto' }}
+              >
+                <Button
+                  id="ai-optimized-btn"
+                  aria-controls="ai-optimized-modal"
+                  data-open-modal
+                  style={{
+                    height: '30px',
+                    width: '230px',
+                    backgroundColor: '#FFF5C2',
+                    color: '#000',
+                  }}
+                >
+                  <img style={{ height: '16px' }} src={icon} alt="AI Icon" /> AI
+                  Optimized | Learn More
+                </Button>
+                <Modal
+                  id="ai-optimized-modal"
+                  heading="NSF Search is AI Optimized"
+                >
+                  <p>
+                    The National Science Foundation (NSF) is committed to making
+                    scientific research accessible to all. Our website has been
+                    GenAI optimized, meaning it has been designed to be easily
+                    understood and utilized by advanced AI systems, such as
+                    language models (LLMs). This optimization helps ensure that
+                    both human users and AI systems can access accurate,
+                    reliable information about NSF-funded research.
+                  </p>
+                  <p>
+                    To learn more about how the NSF uses GenAI optimization to
+                    improve your experience and promote science literacy, visit
+                    our <a href="#">GenAI Optimization Information Page</a>.
+                  </p>
+                </Modal>
+              </li>
               <li className="usa-nav__primary-item">
                 <NavLink
                   id="simple-link"

src/components/search/search.tsx

@@ -1,29 +1,45 @@
-import { TextInput } from '@metrostar/comet-uswds';
+import { Button, TextInput } from '@metrostar/comet-uswds';
 import React, { KeyboardEvent } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 export const Search = (): React.ReactElement => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const [currentSearch, setCurrentSearch] = React.useState<string>('');
+
+  const handleSearchClick = () => {
+    navigate(`/results?search=${currentSearch}`);
+  };
+
   const handleSearch = (event: KeyboardEvent<HTMLInputElement>): void => {
     if (event.key !== 'Enter') {
       return;
     }
-
     const value = (event.target as HTMLInputElement).value;
     navigate(`/results?search=${value}`);
   };
 
   return (
     <div className="display-flex flex-row height-full">
-      <div className="flex-align-self-start width-full">
+      <div className="display-flex flex-row width-full">
         <TextInput
           id="search-input"
-          placeholder="Type your search here and press enter to submit..."
+          placeholder="Search awards..."
           defaultValue={searchParams.get('search') || ''}
           onKeyUp={handleSearch}
+          onChange={(event) => setCurrentSearch(event.target.value)}
           autoFocus
         ></TextInput>
+        <Button
+          id="search-button"
+          type="button"
+          onClick={handleSearchClick}
+          disabled={!currentSearch}
+          className="margin-top-1 margin-left-1"
+          style={{ height: '40px', width: '200px' }}
+        >
+          GovAI Search
+        </Button>
       </div>
     </div>
   );

src/pages/home/home.test.tsx

@@ -20,7 +20,7 @@ describe('Home', () => {
     await act(async () => {
       expect(baseElement).toBeTruthy();
       expect(baseElement.querySelector('h1')?.textContent).toEqual(
-        'Awards Simple Search',
+        'Simple Search',
       );
     });
   });

src/pages/home/home.tsx

@@ -6,7 +6,11 @@ export const Home = (): React.ReactElement => {
     <div className="grid-container">
       <div className="grid-row">
         <div className="grid-col">
-          <h1>Awards Simple Search</h1>
+          <h1>Simple Search</h1>
+          <div className="padding-y-1">
+            Popular searches: <a href="">Topic 1</a>, <a href="">Topic 2</a>,{' '}
+            <a href="">Topic 3</a>
+          </div>
           <Search />
         </div>
       </div>

src/providers/uswds/uswds-settings.scss

@@ -20,11 +20,11 @@
   $theme-focus-width: 0.5,
   $theme-icon-image-size: 2,
   // Width settings
-  $theme-grid-container-max-width: 'desktop',
-  $theme-banner-max-width: 'desktop',
-  $theme-header-max-width: 'desktop',
-  $theme-footer-max-width: 'desktop',
-  $theme-site-alert-max-width: 'desktop',
+  $theme-grid-container-max-width: 'desktop-lg',
+  $theme-banner-max-width: 'desktop-lg',
+  $theme-header-max-width: 'desktop-lg',
+  $theme-footer-max-width: 'desktop-lg',
+  $theme-site-alert-max-width: 'desktop-lg',
   $theme-input-max-width: 'mobile-lg',
   // Base colors
   $theme-color-base-lightest: #f0f0f0,