Seahub UI (#5261)

* [top toolbar] fixed the position of the vertical line between 2 sides

- fixed it for all the pages
- removed the duplicated 'div.main-panel' in 'lib-content-view'

* [search] modified the UI

* [top toolbar] redesigned the notification

* [top toolbar] avatar & the triangle: modified the UI

* [left side panel] updated the UI; fixup & improvement

* [misc] modified links' color, op-icon, and etc.

* [misc] updated UI for share dialog, other dialogs, & 'more operations' dropdown

* [misc] UI: modified markdown side panels, comment panels, input/textarea placeholder

* ['user settings' page] modified UI

* [shared dir upload link page] modified the UI

* [user settings] modified the UI

* [user settings] fixup

* [seafile-ui.css] use an updated one (modified color of buttons)

frontend/src/components/main-side-nav.js

@@ -210,9 +210,9 @@ class MainSideNav extends React.Component {
             }
             <li className="nav-item flex-column" id="group-nav">
               <a className="nav-link ellipsis" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
-                <span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
                 <span className="sf2-icon-group" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Shared with groups')}</span>
+                <span className={`toggle-icon fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
               </a>
               {this.renderSharedGroups()}
             </li>
@@ -263,10 +263,8 @@ class MainSideNav extends React.Component {
               <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'drafts')}>
                 <Link className={`nav-link ellipsis ${this.getActiveClass('drafts')}`} to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
                   <span className="sf2-icon-edit" aria-hidden="true"></span>
-                  <span className="draft-info nav-text">
-                    {gettext('Drafts')}
-                    {this.props.draftCounts === 0 ? '' : <Badge color="info" pill>{this.props.draftCounts}</Badge>}
-                  </span>
+                  <span className="nav-text">{gettext('Drafts')}</span>
+                  {this.props.draftCounts > 0 && <span id="draft-num">{this.props.draftCounts}</span>}
                 </Link>
               </li>
             }
@@ -286,9 +284,9 @@ class MainSideNav extends React.Component {
             }
             <li className="nav-item flex-column" id="share-admin-nav">
               <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
-                <span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
                 <span className="sf2-icon-wrench" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Share Admin')}</span>
+                <span className={`toggle-icon fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
               </a>
               {this.renderSharedAdmin()}
             </li>