[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/side-panel.js

@@ -4,22 +4,26 @@ import Logo from './logo';
 import MainSideNav from './main-side-nav';
 
 const propTypes = {
-  isSidePanelClosed: PropTypes.bool.isRequired,
-  currentTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  onCloseSidePanel: PropTypes.func.isRequired,
-  tabItemClick: PropTypes.func.isRequired,
+  isSidePanelClosed: PropTypes.bool,
+  currentTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onCloseSidePanel: PropTypes.func,
+  tabItemClick: PropTypes.func,
+  children: PropTypes.object
 };
 
 class SidePanel extends React.Component {
 
   render() {
+    const { children } = this.props;
     return (
       <div className={`side-panel ${this.props.isSidePanelClosed ? '' : 'left-zero'}`}>
         <div className="side-panel-north">
           <Logo onCloseSidePanel={this.props.onCloseSidePanel}/>
         </div>
         <div className="side-panel-center">
-          <MainSideNav tabItemClick={this.props.tabItemClick} currentTab={this.props.currentTab} />
+          {children ? children :
+            <MainSideNav tabItemClick={this.props.tabItemClick} currentTab={this.props.currentTab} />
+          }
         </div>
       </div>
     );

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>
     );
   }

frontend/src/components/user-settings/linked-devices.js

@@ -225,7 +225,7 @@ class LinkedDevices extends Component {
     return (
       <div className="setting-item" id="linked-devices">
         <h3 className="setting-item-heading">{gettext('Linked Devices')}</h3>
-        <div className="cur-view-content">
+        <div>
           <Content
             loading={loading}
             errorMsg={errorMsg}

frontend/src/components/user-settings/side-nav.js

@@ -4,12 +4,16 @@ import PropTypes from 'prop-types';
 class SideNav extends React.Component {
   render() {
     return (
-      <ul className="nav flex-column user-setting-nav">
-        {this.props.data.map((item, index) => {
-          return item.show ?
-            <li key={index} className={`nav-item${this.props.curItemID == item.href.substr(1) ? ' active' : ''}`}><a className="nav-link" href={item.href}>{item.text}</a></li> : null;
-        })}
-      </ul>
+      <div className="side-nav">
+        <div className="side-nav-con">
+          <ul className="nav nav-pills flex-column">
+            {this.props.data.map((item, index) => {
+              return item.show ?
+                <li key={index} className={`nav-item${this.props.curItemID == item.href.substr(1) ? ' active' : ''}`}><a className={`nav-link${this.props.curItemID == item.href.substr(1) ? ' active' : ''}`} href={item.href}>{item.text}</a></li> : null;
+            })}
+          </ul>
+        </div>
+      </div>
     );
   }
 }