organize sidebar contents

src/client/js/components/Sidebar.jsx

@@ -28,7 +28,7 @@ class Sidebar extends React.Component {
   };
 
   state = {
-    currentContentsId: 'custom',
+    currentContentsId: 'history',
   };
 
   componentWillMount() {

src/client/js/components/Sidebar/CustomSidebar.jsx

@@ -25,23 +25,27 @@ class CustomSidebar extends React.Component {
 
   render() {
     return (
-      <>
+      <div className="grw-sidebar-custom">
         <HeaderSection>
           { () => (
-            <div className="grw-sidebar-header-container">
-              {this.renderHeaderWordmark()}
+            <div className="grw-sidebar-header-container p-3 d-flex">
+              <h3>Custom Sidebar</h3>
+              <button type="button" className="btn btn-xs btn-outline-secondary ml-auto" onClick={this.reloadData}>
+                <i className="icon icon-reload"></i>
+              </button>
             </div>
           ) }
         </HeaderSection>
         <MenuSection>
           { () => (
-            <div className="grw-sidebar-content-container">
-              <span>(TBD) CustomSidebar Contents</span>
+            <div className="grw-sidebar-content-container p-3">
+              (TBD) Under implemented
             </div>
           ) }
         </MenuSection>
-      </>
+      </div>
     );
+
   }
 
 }

src/client/js/components/Sidebar/History.jsx

@@ -90,7 +90,7 @@ class History extends React.Component {
           { () => (
             <div className="grw-sidebar-header-container p-3 d-flex">
               <h3>{t('History')}</h3>
-              <button type="button" className="btn xs btn-secondary ml-auto" onClick={this.reloadData}>
+              <button type="button" className="btn btn-xs btn-outline-secondary ml-auto" onClick={this.reloadData}>
                 <i className="icon icon-reload"></i>
               </button>
             </div>