Move the search box up so that it is in line (to the left) of the paragraph of ambassador text

src/components/EnhancedSearch.js

@@ -42,7 +42,7 @@ const styles = theme => ({
 class EnhancedSearch extends Component {
 
 	render() {
-		const {query, onUpdateQuery, onColumnChange} = this.props;
+		const {query, onUpdateQuery, onColumnChange, textComponent} = this.props;
 		const { classes } = this.props;
 
 		return (
@@ -62,6 +62,7 @@ class EnhancedSearch extends Component {
 		            startAdornment: <InputAdornment position="start"><Search /></InputAdornment>,
 		          }}
 		        />
+            {textComponent}
 						<br />
             {this.props.showSearchColumns && this.props.columns.map(column => (
               <FormControlLabel

src/components/EnhancedTable.js

@@ -57,6 +57,7 @@ const defaultProps = {
   onEdit: () => {},
   onDelete: () => {},
   onMultipleDelete: () => {},
+  description: ''
 };
 
 /**
@@ -81,8 +82,6 @@ class EnhancedTable extends Component {
         };
       }).sort(sortBy('name'))
     };
-
-    this.handleRequestSort('', this.props.orderBy);
   }
 
   handleRequestSort = (event, property) => {
@@ -254,6 +253,7 @@ class EnhancedTable extends Component {
     return (
       <div style={styles.root}>
         <EnhancedSearch
+          textComponent={this.props.description}
           query={searchQuery}
           columns={searchColumns}
           showSearchColumns={showSearchColumns}

src/components/pages/AmbassadorsPage.js

@@ -350,6 +350,16 @@ class AmbassadorsPage extends Component {
 
     data = data.sort(sortBy('location.searchText'));
 
+    const textComponent = (
+      <span>
+        <FormattedHTMLMessage id="ambassadors.description1" />
+        <Link to="/merchants">
+        <FormattedMessage id="ambassadors.merchants_link_description" />
+        </Link>
+        <FormattedHTMLMessage id="ambassadors.description2" />
+      </span>
+    );
+
     return (
       <div>
         <AppHeader />
@@ -367,14 +377,6 @@ class AmbassadorsPage extends Component {
               <img src={LoadingGif} alt="Loading" style={loadingStyle} />
         ): (
           <div>
-            <p style={{ textAlign: 'left', marginRight: 20 }}>
-              <FormattedHTMLMessage id="ambassadors.description1" />
-              <Link to="/merchants">
-                <FormattedMessage id="ambassadors.merchants_link_description" />
-              </Link>
-              <FormattedHTMLMessage id="ambassadors.description2" />
-            </p>
-
             <Modal
               isOpen={this.state.mapsModalIsOpen}
               onRequestClose={() => this.closeMapsModal()}
@@ -396,6 +398,7 @@ class AmbassadorsPage extends Component {
               <div>
                 <br />
                 <EnhancedTable
+                  description={textComponent}
                   columnData={columnData}
                   data={data}
                   orderBy="Location"