Styles, copy, funtionality, state changes and clicks. Ready to be tested.

client/coral-admin/src/routes/Moderation/components/StorySearch.css

@@ -1,12 +1,12 @@
 .overlay {
   position: absolute;
-  background-color: transparent;
-  top: 0;
+  top: 58px;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   z-index: 99;
+  opacity: 0;
 }
 
 .container {
@@ -77,6 +77,10 @@
   &:hover {
     background-color: #efefef;
   }
+
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .title, .meta {
@@ -112,11 +116,11 @@
   height: 35px;
 }
 
-.recentStories {
+.searchResults {
   padding: 10px 24px;
 }
 
-.recentStories i {
+.searchResults i {
   font-size: 16px;
   vertical-align: middle;
 }
@@ -133,3 +137,7 @@
   margin-left: 10px;
 }
 
+.noResults {
+  padding: 10px 24px 15px 49px;
+}
+

client/coral-admin/src/routes/Moderation/components/StorySearch.js

@@ -18,8 +18,8 @@ const StorySearch = (props) => {
   }
 
   return (
-    <div className={styles.overlay} onClick={props.closeSearch}>
-      <div className={styles.container}>
+    <div>
+      <div className={styles.container} role='alertdialog'>
         <div className={styles.positionShim}>
           <div className={styles.headInput}>
             <input
@@ -27,6 +27,7 @@ const StorySearch = (props) => {
               onChange={props.handleSearchChange}
               onKeyDown={props.handleEnter}
               value={props.searchValue}
+              autoFocus
             />
             <Button
               cStyle='blue'
@@ -39,10 +40,21 @@ const StorySearch = (props) => {
           <div className={styles.results}>
             <p className={styles.cta}>Moderate comments on All Stories</p>
             <div className={styles.storyList}>
-              <div className={styles.recentStories}>
-                <Icon name="access_time" />
-                <span className={styles.headlineRecent}>Most Recent Stories</span>
-              </div>
+
+              {
+                props.moderation.storySearchString ? (
+                  <div className={styles.searchResults}>
+                    <Icon name="search" />
+                    <span className={styles.headlineRecent}>Search Results</span>
+                  </div>
+                ) : (
+                  <div className={styles.searchResults}>
+                    <Icon name="access_time" />
+                    <span className={styles.headlineRecent}>Most Recent Stories</span>
+                  </div>
+                )
+              }
+
               {
                 loading
                 ? <Spinner />
@@ -59,10 +71,13 @@ const StorySearch = (props) => {
                   />;
                 })
               }
+
+              {assets.length === 0 && <div className={styles.noResults}>No results</div>}
             </div>
           </div>
         </div>
       </div>
+      <div className={styles.overlay} onClick={props.closeSearch} />
     </div>
   );
 };

client/coral-admin/src/routes/Moderation/containers/StorySearch.js

@@ -74,6 +74,6 @@ export const withAssetSearchQuery = withQuery(gql`
 });
 
 export default compose(
-  withAssetSearchQuery,
-  withRouter
+  withRouter,
+  withAssetSearchQuery
 )(StorySearchContainer);