Large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*

app/javascript/gabsocial/pages/search_page.js

@@ -1,43 +1,32 @@
+import { Fragment } from 'react';
 import Header from '../features/search/components/header';
-import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
-// import TrendsPanel from '../features/ui/components/trends_panel';
-import LinkFooter from '../features/ui/components/link_footer';
-import SignUpPanel from '../features/ui/components/sign_up_panel';
+import LinkFooter from '../components/link_footer';
+import { WhoToFollowPanel, SignUpPanel } from '../components/panel';
+import ColumnsArea from '../components/columns_area';
 
-const SearchPage = ({children}) => (
-  <div className='page'>
-    <div className='page__top'>
-      <Header />
-    </div>
-    <div className='page__columns'>
-      <div className='columns-area__panels'>
+export default class SearchPage extends PureComponent {
 
-        <div className='columns-area__panels__pane columns-area__panels__pane--left'>
-          <div className='columns-area__panels__pane__inner'>
-            {/* <TrendsPanel /> */}
-            <LinkFooter />
-          </div>
-        </div>
+  static propTypes = {
+    children: PropTypes.node,
+  };
 
-        <div className='columns-area__panels__main'>
-          <div className='columns-area columns-area--mobile'>
-            {children}
-          </div>
-        </div>
+  render() {
+    return (
+      <ColumnsArea
+        layout={{
+          top: <Header/>,
+          right: (
+            <Fragment>
+              <SignUpPanel />
+              <WhoToFollowPanel />
+            </Fragment>
+          ),
+          left: <LinkFooter/>,
+        }}
+      >
+        {this.props.children}
+      </ColumnsArea>
+    )
+  }
 
-        <div className='columns-area__panels__pane columns-area__panels__pane--right'>
-          <div className='columns-area__panels__pane__inner'>
-            <SignUpPanel />
-            <WhoToFollowPanel />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-SearchPage.propTypes = {
-  children: PropTypes.node,
-};
-
-export default SearchPage;
+};