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>
-            <thead className="table-thead-hidden">
+          <table 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>
-        <thead className={isShowTableThread ? '' : 'table-thead-hidden'}>
+      <table 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>
-        <thead className={isShowTableThread ? '' : 'vh'}>
+      <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
+        <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>
-              {gettext('New Library')}
+              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
             </button>
             {this.props.libraryType !== 'group' && (
               <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>