new func and style

client/coral-admin/src/actions/moderation.js

@@ -57,11 +57,10 @@ export const toggleStorySearch = (active) => ({
 });
 
 export const storySearchChange = (value) => ({
-  type: actions.CHANGE_ASSET_SEARCH_STRING,
+  type: actions.STORY_SEARCH_CHANGE_VALUE,
   value
 });
 
 export const storySearchClear = () => ({
-  type: actions.CHANGE_ASSET_SEARCH_STRING,
-  value: ''
+  type: actions.STORY_SEARCH_CLEAR
 });

client/coral-admin/src/components/ui/Layout.js

@@ -10,7 +10,7 @@ const Layout = ({
   toggleShortcutModal,
   restricted = false,
   ...props}) => (
-  <LayoutMDL fixedDrawer>
+  <LayoutMDL className={styles.layout} fixedDrawer>
     <Header
       handleLogout={handleLogout}
       showShortcuts={toggleShortcutModal}

client/coral-admin/src/constants/moderation.js

@@ -14,4 +14,5 @@ export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
 export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
 export const SHOW_STORY_SEARCH = 'SHOW_STORY_SEARCH';
 export const HIDE_STORY_SEARCH = 'HIDE_STORY_SEARCH';
-export const CHANGE_ASSET_SEARCH_STRING = 'CHANGE_ASSET_SEARCH_STRING';
+export const STORY_SEARCH_CHANGE_VALUE = 'STORY_SEARCH_CHANGE_VALUE';
+export const STORY_SEARCH_CLEAR = 'STORY_SEARCH_CLEAR';

client/coral-admin/src/reducers/moderation.js

@@ -86,8 +86,10 @@ export default function moderation (state = initialState, action) {
     return state.set('storySearchVisible', true);
   case actions.HIDE_STORY_SEARCH:
     return state.set('storySearchVisible', false);
-  case actions.CHANGE_ASSET_SEARCH_STRING:
+  case actions.STORY_SEARCH_CHANGE_VALUE:
     return state.set('storySearchString', action.value);
+  case actions.STORY_SEARCH_CLEAR:
+    return state.set('storySearchString', '');
   case actions.SET_SORT_ORDER:
     return state.set('sortOrder', action.order);
   default :

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

@@ -28,7 +28,7 @@
   padding: 8px;
   height: 100%;
   font-size: 16px;
-  margin-right: 10px;
+  margin-right: 5px;
   position: relative;
   top: 2px;
   box-sizing: border-box;
@@ -39,13 +39,16 @@
 }
 
 .cta {
-  padding: 32px 30px;
   letter-spacing: 1px;
   font-weight: bold;
-  font-size: 17px;
+  font-size: 15px;
   margin: 0;
-  height: 74px;
+  height: 50px;
   box-sizing: border-box;
+  font-size: 15px;
+  font-weight: 500;
+  padding: 12px 30px;
+  letter-spacing: 0.7px;
 }
 
 .storyList {
@@ -58,7 +61,7 @@
   cursor: pointer;
   display: block;
   text-decoration: none;
-  height: 66px;
+  height: 50px;
 
   &:hover {
     background-color: #efefef;
@@ -69,7 +72,6 @@
   margin: 0;
   color: black;
   font-size: 17px;
-  /* margin: 0 0 -4px; */
 }
 
 .author, .createdAt, .status {
@@ -104,8 +106,8 @@
 }
 
 .recentStories i {
-  font-size: 20px;
-  line-height: 26px;
+  font-size: 16px;
+  vertical-align: middle;
 }
 
 .accessStories {
@@ -113,9 +115,10 @@
 }
 
 .headlineRecent {
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 500;
-  padding: 17px;
   letter-spacing: 0.7px;
+  vertical-align: middle;
+  margin-left: 10px;
 }
 

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

@@ -24,8 +24,17 @@ const StorySearch = (props) => {
     <div className={styles.container}>
       <div className={styles.positionShim}>
         <div className={styles.headInput}>
-          <input className={styles.searchInput} onChange={props.storySearchChange} />
-          <Button cStyle='blue' className={styles.searchButton} raised>Search</Button>
+          <input
+            className={styles.searchInput}
+            onChange={props.handleSearchChange}
+          />
+          <Button
+            cStyle='blue'
+            className={styles.searchButton}
+            onClick={props.search}
+            raised >
+            Search
+          </Button>
         </div>
         <div className={styles.results}>
           <p className={styles.cta}>Moderate comments on All Stories</p>
@@ -57,8 +66,8 @@ const StorySearch = (props) => {
   );
 };
 
-StorySearch.propTypes = {
-  storySearchChange: PropTypes.func.isRequired
-};
+// StorySearch.propTypes = {
+//   storySearchChange: PropTypes.func.isRequired
+// };
 
 export default withRouter(StorySearch);

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

@@ -25,7 +25,6 @@ import {
   viewUserDetail,
   hideUserDetail,
   setSortOrder,
-  storySearchClear
 } from 'actions/moderation';
 
 import {Spinner} from 'coral-ui';
@@ -307,7 +306,6 @@ const mapDispatchToProps = (dispatch) => ({
     viewUserDetail,
     hideUserDetail,
     setSortOrder,
-    storySearchClear
   }, dispatch),
 });
 

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

@@ -7,20 +7,32 @@ import withQuery from 'coral-framework/hocs/withQuery';
 import {storySearchChange} from 'coral-admin/src/actions/moderation';
 
 class StorySearchContainer extends React.Component {
-  searchChange = (e) => {
+
+  handleSearchChange = (e) => {
     const value = e.target.value;
     this.props.storySearchChange(value);
-    this.props.data.refetch();
   }
 
-  componentDidUpdate (prevProps) {
-    if (prevProps.moderation.storySearchString !== this.props.moderation.storySearchString) {
-      this.props.data.refetch();
+  handleEnter = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.search();
     }
   }
 
+  search = () => {
+    this.props.data.refetch();
+  }
+
   render () {
-    return <StorySearch searchChange={this.searchChange} {...this.props} />;
+    return (
+      <StorySearch
+        search={this.search}
+        handleSearchChange={this.handleSearchChange}
+        onKeyDownHandler={this.handleEnter}
+        {...this.props}
+      />
+    );
   }
 }