From d386316f8af484da28cd66753ad4a69aaee6804e Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 16 Jun 2017 08:19:22 -0300
Subject: [PATCH] Styles, copy, funtionality, state changes and clicks. Ready
 to be tested.

---
 .../Moderation/components/StorySearch.css     | 16 ++++++++---
 .../Moderation/components/StorySearch.js      | 27 ++++++++++++++-----
 .../Moderation/containers/StorySearch.js      |  4 +--
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/StorySearch.css b/client/coral-admin/src/routes/Moderation/components/StorySearch.css
index d161b4efd..9ea56df0d 100644
--- a/client/coral-admin/src/routes/Moderation/components/StorySearch.css
+++ b/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;
+}
+
diff --git a/client/coral-admin/src/routes/Moderation/components/StorySearch.js b/client/coral-admin/src/routes/Moderation/components/StorySearch.js
index 8989f8ed3..c174c892f 100644
--- a/client/coral-admin/src/routes/Moderation/components/StorySearch.js
+++ b/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>
   );
 };
diff --git a/client/coral-admin/src/routes/Moderation/containers/StorySearch.js b/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
index d2790eccf..f52c290b5 100644
--- a/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
+++ b/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);