[settings] redesigned the 'heading' bar; fixup for the side nav; impr… (#6250)

* [settings] redesigned the 'heading' bar; fixup for the side nav; improved UI for content headings

* [settings] resigned it (the top bar, the side panel; the code frame)

frontend/src/components/toolbar/common-toolbar.js

@@ -13,10 +13,11 @@ const propTypes = {
   path: PropTypes.string,
   repoName: PropTypes.string,
   isLibView: PropTypes.bool,
-  onSearchedClick: PropTypes.func.isRequired,
+  onSearchedClick: PropTypes.func,
   searchPlaceholder: PropTypes.string,
   currentRepoInfo: PropTypes.object,
   isViewFile: PropTypes.bool,
+  showSearch: PropTypes.bool
 };
 
 class CommonToolbar extends React.Component {
@@ -62,9 +63,10 @@ class CommonToolbar extends React.Component {
   };
 
   render() {
+    const { showSearch = true } = this.props;
     return (
       <div className="common-toolbar">
-        {this.renderSearch()}
+        {showSearch && this.renderSearch()}
         <Notification />
         <Account />
         {showLogoutIcon && (<Logout />)}

frontend/src/components/toolbar/top-toolbar.js

@@ -3,24 +3,29 @@ import PropTypes from 'prop-types';
 import CommonToolbar from './common-toolbar';
 
 const propTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
+  onShowSidePanel: PropTypes.func,
+  onSearchedClick: PropTypes.func,
   searchPlaceholder: PropTypes.string,
-  children: PropTypes.object
+  children: PropTypes.object,
+  showSearch: PropTypes.bool
 };
 
 class TopToolbar extends React.Component {
 
   render() {
-    const { onShowSidePanel, onSearchedClick } = this.props;
+    const { onShowSidePanel, onSearchedClick, children, showSearch } = this.props;
     return (
-      <div className="main-panel-north border-left-show">
+      <div className={`main-panel-north ${children ? 'border-left-show' : ''}`}>
         <div className="cur-view-toolbar">
           <span title="Side Nav Menu" onClick={onShowSidePanel} className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
           </span>
           {this.props.children}
         </div>
-        <CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick} />
+        <CommonToolbar
+          showSearch={showSearch}
+          searchPlaceholder={this.props.searchPlaceholder}
+          onSearchedClick={onSearchedClick}
+        />
       </div>
     );
   }