Style bug repair (#2394)

* optimized css code

* repair search module

* repair response bug

* repair notificition bug

* repair file-history bug

* repair search info bug

* optimized code

frontend/src/components/common/notification.js

@@ -45,7 +45,7 @@ class Notification extends React.Component {
         <div id="notice-popover" className={`sf-popover ${this.state.showNotice ? '': 'hide'}`}>
           <div className="outer-caret up-outer-caret"><div className="inner-caret"></div></div>
           <div className="sf-popover-hd ovhd">
-            <h3 className="sf-popover-title">{gettext('Notifications')}</h3>
+            <h3 className="sf-popover-title title">{gettext('Notifications')}</h3>
             <a href="#" onClick={this.onClick} title={gettext('Close')} aria-label={gettext('Close')} className="sf-popover-close js-close sf2-icon-x1 op-icon float-right"></a>
           </div>
           <div className="sf-popover-con">

frontend/src/components/main-panel.js

@@ -2,14 +2,7 @@ import React, { Component } from 'react';
 import CommonToolbar from './toolbar/common-toolbar';
 
 class MainPanel extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  onMenuClick = () => {
-    this.props.isOpen();
-  }
-  
   onSearchedClick = () => {
     //todos;
   }
@@ -20,9 +13,9 @@ class MainPanel extends Component {
       <div className="main-panel o-hidden">
         <div className="main-panel-north">
           <div className="cur-view-toolbar">
-            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.onMenuClick}></span>
+            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
           </div>
-          <CommonToolbar onSearchedClick={this.onSearchedClick}/>
+          <CommonToolbar onSearchedClick={this.onSearchedClick} searchPlaceholder={'Search Files'}/>
         </div>
         <div className="main-panel-center">
           {this.props.children}

frontend/src/components/search/search.js

@@ -205,7 +205,7 @@ class Search extends Component {
               onChange={this.onChangeHandler}
               autoComplete="off"
             />
-            <i className={`search-icon-right input-icon-addon fas fa-times ${this.state.isCloseShow ? "" : "hide"}`} onClick={this.onCloseHandler}></i>
+            {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
           </div>
           <div className="search-result-container">
             {this.renderSearchResult()}

frontend/src/components/side-panel.js

@@ -6,15 +6,11 @@ import SideNavFooter from './side-nav-footer';
 
 class SidePanel extends React.Component {
 
-  onCloseSidePanel = () => {
-    //todos;
-  }
-
   render() {
     return (
-      <div className="side-panel">
+      <div className={`side-panel ${this.props.isSidePanelClosed ? '' : 'left-zero'}`}>
         <div className="side-panel-north">
-          <Logo onCloseSidePanel={this.onCloseSidePanel}/>
+          <Logo onCloseSidePanel={this.props.onCloseSidePanel}/>
         </div>
         <div className="side-panel-center">
           <MainSideNav currentTab={this.props.currentTab}/>

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

@@ -6,14 +6,15 @@ import Notification from '../common/notification';
 import Account from '../common/account';
 
 const propTypes = {
-  onSearchedClick: PropTypes.func.isRequired
+  onSearchedClick: PropTypes.func.isRequired,
+  searchPlaceholder: PropTypes.string
 };
 
 class  CommonToolbar extends React.Component {
   render() {
     return (
       <div className="common-toolbar">
-        {isPro && <Search onSearchedClick={this.props.onSearchedClick} placeholder={gettext("Search files")}/>}
+        {isPro && <Search onSearchedClick={this.props.onSearchedClick} placeholder={gettext(this.props.searchPlaceholder)}/>}
         <Notification  />
         <Account />
       </div>