Ui bug repair (#2735)

frontend/src/components/common/account.js

@@ -129,7 +129,7 @@ class Account extends Component {
             </div>
             <div id="space-traffic">
               <div className="item">
-                <p>{gettext('Used')}: {this.state.quotaUsage} / {this.state.quotaTotal}</p>
+                <p>{gettext('Used:')}{' '}{this.state.quotaUsage} / {this.state.quotaTotal}</p>
                 <div id="quota-bar"><span id="quota-usage" className="usage" style={{width: this.state.usageRate}}></span></div>
               </div>
             </div>

frontend/src/components/dialog/list-taggedfiles-dialog.js

@@ -50,8 +50,8 @@ class ListTaggedFilesDialog extends React.Component {
           {gettext('Tagged Files')}
         </ModalHeader>
         <ModalBody className="dialog-list-container">
-          <table>
+          <table className="table-thead-hidden">
-            <thead className="table-thead-hidden">
+            <thead>
               <tr>
                 <th width='50%' className="ellipsis">{gettext('Name')}</th>
                 <th width='25%'>{gettext('Size')}</th>

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -51,8 +51,8 @@ class SharedRepoListView extends React.Component {
   renderPCUI = () => {
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
     return (
-      <table>
+      <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
-        <thead className={isShowTableThread ? '' : 'table-thead-hidden'}>
+        <thead>
           <tr>
             <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
             <th width="40%">{gettext("Name")}
@@ -76,8 +76,8 @@ class SharedRepoListView extends React.Component {
   renderMobileUI = () => {
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
     return (
-      <table>
+      <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
-        <thead className={isShowTableThread ? '' : 'vh'}>
+        <thead>
           <tr>
             <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
             <th width="68%">

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

@@ -24,7 +24,7 @@ class GroupsToolbar extends React.Component {
         <div className="cur-view-toolbar border-left-show">
           <div className="operation">
             <Button color="btn btn-secondary operation-item" onClick={this.props.toggleAddGroupModal}>
-              <i className="fas fa-plus-square action-icon"></i>{gettext("New Group")}
+              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext("New Group")}
             </Button>
           </div>
           <span title="Side Nav Menu" onClick={onShowSidePanel}

frontend/src/components/toolbar/repo-view-toobar.js

@@ -42,8 +42,7 @@ class RepoViewToolbar extends React.Component {
           <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
           <div className="operation">
             <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
-              <i className="fas fa-plus-square action-icon"></i>
+              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
-              {gettext('New Library')}
             </button>
             {this.props.libraryType !== 'group' && (
               <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>

frontend/src/pages/groups/group-view.js

@@ -308,8 +308,7 @@ class GroupView extends React.Component {
             <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
             <div className="operation">
               <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateRepoToggle}>
-                <i className="fas fa-plus-square action-icon"></i>
+                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
-                {gettext('New Library')}
               </button>
             </div>
           </div>

frontend/src/pages/shared-with-all/public-shared-view.js

@@ -160,8 +160,7 @@ class PublicSharedView extends React.Component {
             <div className="operation">
               <Dropdown isOpen={this.state.isCreateMenuShow} toggle={this.onAddRepoToggle}>
                 <DropdownToggle className='btn btn-secondary operation-item'>
-                  <i className="fas fa-plus-square action-icon"></i>
+                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
-                  {gettext('Add Library')}
                 </DropdownToggle>
                 <DropdownMenu>
                   <DropdownItem onClick={this.onSelectRepoToggle}>{gettext('Share existing libraries')}</DropdownItem>

frontend/src/pages/wikis/wikis.js

@@ -123,16 +123,9 @@ class Wikis extends Component {
           <div className="cur-view-toolbar border-left-show">
             <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
             <div className="operation">
-                <Dropdown tag="div" className="btn btn-secondary operation-item" isOpen={this.state.isShowAddWikiMenu} toggle={this.onMenuToggle}>
+                <Dropdown tag="div" isOpen={this.state.isShowAddWikiMenu} toggle={this.onMenuToggle}>
-                  <DropdownToggle 
+                  <DropdownToggle className="btn btn-secondary operation-item">
-                    tag="i" 
+                    <i className="fa fa-plus-square text-secondary mr-1"></i>{gettext('Add Wiki')}
-                    className="fa fa-plus-square action-icon" 
-                    title={gettext('More Operations')}
-                    data-toggle="dropdown" 
-                    aria-expanded={this.state.isShowAddWikiMenu}
-                    onClick={this.clickMenuToggle}
-                  >
-                    {' '}<span className="btn-secondary">{gettext('Add Wiki')}</span>
                   </DropdownToggle>
                   <DropdownMenu>
                     <DropdownItem onClick={this.onCreateToggle}>{gettext('New Wiki')}</DropdownItem>

media/css/seahub_react.css

@@ -321,7 +321,6 @@ ul,ol,li {
 
 .action-icon,
 .attr-action-icon {
-    margin-right: 0.25rem;
     color:#888;
 }
 
@@ -822,11 +821,11 @@ table {
 
 table tr {
     height: 2.1875rem;
-    border-bottom: 1px solid #eee;
 }
 
 table th, table td {
     padding: 0.3125rem 0.1875rem;
+    border-bottom: 1px solid #eee;
 }
 
 table th {