move more_btn to components and use flex to center it

.gitignore

@@ -0,0 +1 @@
+.idea/

both/components/Feed/FeedList.jsx

@@ -17,16 +17,14 @@ class FeedList extends React.Component {
             />;
           })
         }
-        <button className='more-btn'
-            onClick={this.props.incrementLimit}>
-          Load More
-        </button>
+        <MoreFeedItems incrementLimit={this.props.incrementLimit}/>
       </div>
     );
   }
 }
 FeedList.propTypes = {
-  comments: React.PropTypes.array,
+  incrementLimit: React.PropTypes.func,
+  postItems: React.PropTypes.array
 };
 
 this.FeedList = FeedList;

both/components/FeedItem/_FeedItem.scss

@@ -78,13 +78,3 @@
 
 }
 
-// TODO move to correct place
-.more-btn {
-  padding: 7px 15px;
-  margin: 10px 0 20px 200px; // FIXME
-  background-color: $primary;
-  color: #ffffff;
-  border: none;
-  cursor: pointer;
-}
-

both/components/MoreFeedItems/MoreFeedItems.jsx

@@ -0,0 +1,15 @@
+this.MoreFeedItems = React.createClass({
+  propTypes: {
+    incrementLimit: React.PropTypes.func
+  },
+  render() {
+    return (
+      <div className='more-feed'>
+        <button className='more-feed__more-btn'
+                onClick={this.props.incrementLimit}>
+          Load More
+        </button>
+      </div>
+    );
+  }
+});

both/components/MoreFeedItems/_MoreFeedItems.scss

@@ -0,0 +1,17 @@
+.more-feed {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+
+  &__more-btn {
+    padding: 7px 15px;
+    min-width: 20px;
+    margin-bottom: 13px;
+    background-color: $primary;
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+  }
+}

client/styles/_components.scss

@@ -4,3 +4,4 @@
 @import '../../both/components/ParamsExample/ParamsExample';
 @import '../../both/components/CommentItem/CommentItem';
 @import '../../both/components/Header/Header';
+@import '../../both/components/MoreFeedItems/MoreFeedItems';