improve ui (#2907)

frontend/src/components/repo-info-bar.js

@@ -87,19 +87,19 @@ class RepoInfoBar extends React.Component {
         <div className={(usedRepoTags.length > 0 && readmeMarkdown) ? 'file-info-list mt-1' : 'file-info-list'}>
           {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) > 1) && 
             <span className="file-info" onClick={this.toggleReadme}>
-              <i className="file-flag fa fa-flag"></i>
+              <span className="info-icon sf2-icon-readme"></span>
               <span className="used-tag-name">{readmeMarkdown.name}</span>
             </span>
           }
           {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) < 2) && 
             <span className="file-info">
-              <i className="file-flag fa fa-flag"></i>
+              <span className="info-icon sf2-icon-readme"></span>
               <a className="used-tag-name" href={href} target='_blank'>{readmeMarkdown.name}</a>
             </span>
           }
           {this.props.draftCounts > 0 &&
             <span className="file-info">
-              <i className="file-flag fa fa-pen"></i>
+              <span className="info-icon sf2-icon-drafts"></span>
               <span className="used-tag-name">{gettext('draft')}</span>
               <span className="used-tag-files" onClick={this.toggleDrafts}>
                 {this.props.draftCounts > 1 ? this.props.draftCounts + ' files' : this.props.draftCounts + ' file'}
@@ -108,7 +108,7 @@ class RepoInfoBar extends React.Component {
           }
           {this.props.reviewCounts > 0 &&
             <span className="file-info">
-              <i className="file-flag fa fa-clipboard"></i>
+              <span className="info-icon sf2-icon-review"></span>
               <span className="used-tag-name">{gettext('review')}</span>
               <span className="used-tag-files" onClick={this.toggleReviews}>
                 {this.props.reviewCounts > 1 ? this.props.reviewCounts + ' files' : this.props.reviewCounts + ' file'}

frontend/src/css/repo-info-bar.css

@@ -2,7 +2,7 @@
   padding: 10px;
   border: 1px solid #e6e6dd;
   border-radius: 5px;
-  background: #f8f8f8;
+  /* background: #f8f8f8; */
 }
 
 .used-tag-list {
@@ -27,7 +27,7 @@
 }
 
 .used-tag-files {
-  color: #666;
+  color: #888;
   font-size: 14px;
 }
 
@@ -46,9 +46,9 @@
   color: #333;
 }
 
-.file-flag {
+.info-icon {
-  font-size: 12px;
+  color: #888;
-  color: #f19645;
+  vertical-align: middle;
 }
 
 .readme-dialog-edit {

media/css/seahub_react.css

@@ -90,6 +90,8 @@
 .sf2-icon-two-columns:before { content:"\e036"; }
 .sf2-icon-tag:before {content:"\e037"}
 .sf2-icon-review:before {content:"\e038"}
+.sf2-icon-readme:before {content:"\e039"}
+.sf2-icon-drafts:before {content:"\e03a"}
 
 /* common class and element style*/
 a { color:#eb8205; }

media/css/sf_font2/seafile-font2.svg

@@ -64,4 +64,6 @@
 <glyph glyph-name="untitled-font-3-18" unicode="&#57365;" d="M489 325l-63 21c-2 7-5 14-9 21l25 51c3 3 0 7-2 10l-47 46c-2 3-7 3-9 3l-51-26c-7 2-14 7-21 9l-19 54c0 2-4 4-7 4l-63 0c-4 0-7-2-7-4l-18-56c-7-2-14-5-21-9l-51 25c-3 3-7 3-10-2l-46-47c-3 0-3-4 0-7l25-51c-4-7-7-14-9-21l-53-18c-3 0-5-5-5-7l0-66c0-4 2-7 5-7l53-18c2-7 5-14 9-21l-25-51c-3-3 0-7 2-10l47-46c2-3 7-3 9-3l51 26c7-2 14-7 21-9l19-54c0-2 4-4 7-4l65 0c5 0 7 2 7 4l19 54c6 2 13 4 20 9l52-26c2-2 7 0 9 3l47 46c2 3 2 7 2 10l-26 51c3 7 7 14 10 21l53 18c2 0 5 5 5 7l2 66c0 2 0 2-2 4z m-72-81c-3 0-5-3-5-5-2-9-7-16-12-25-2-3-2-5 0-7l24-49-38-38-49 24c-2 2-4 0-7 0-9-5-16-10-25-12-2 0-5-2-5-5l-16-51-56 0-16 51c0 3-3 5-5 5-9 2-16 7-25 12-3 2-5 2-7 0l-49-24-38 38 24 49c2 2 0 4 0 7-5 9-10 16-12 25 0 2-2 5-5 5l-51 16 0 56 51 16c3 0 5 3 5 5 2 9 7 16 12 25 2 3 2 5 0 7l-24 49 38 38 49-24c2-2 4 0 7 0 9 5 16 10 25 12 2 0 5 2 5 5l16 51 54 0 16-51c0-3 2-5 5-5 9-2 16-7 25-12 2-2 5-2 7 0l49 24 37-38-23-49c-2-2 0-4 0-7 5-9 9-16 12-25 0-2 2-5 4-5l56-16 0-54m-184 135c-86 24-163-53-142-142 10-37 42-69 79-79 87-23 163 54 142 142-9 40-39 70-79 79z m-4-202c-73-21-140 46-119 119 7 32 35 60 67 67 75 21 142-46 121-121-9-30-37-58-69-65z m0 0"/>
 <glyph glyph-name="tag111" unicode="&#57399;" d="M278 100l150 151-200 200-146 7c-1 0-1 0-1 0-6-1-11-6-10-11l6-147z m-229 346c-1 17 13 32 31 33 1 0 2 0 3 0l154-7 222-221-181-181-222 221z m123-90c-12-12-33-12-45 0-13 13-13 33 0 45 12 13 33 13 45 0 12-12 12-32 0-45z m-15 15c4 4 4 11 0 15-4 5-11 5-15 0-4-4-4-11 0-15 4-4 11-4 15 0z"/>
 <glyph glyph-name="file-review" unicode="&#57400;" d="M256 107l0-22-139 0c-17 0-32 15-32 32l0 319c0 18 15 32 32 32l278 0c17 0 32-14 32-32l0-201-22 0 0 201c0 6-4 11-10 11l-278 0c-6 0-10-5-10-11l0-319c0-6 4-10 10-10z m-107 256l0 21 214 0 0-21z m0-64l0 21 214 0 0-21z m0-64l0 21 214 0 0-21z m0-64l0 21 128 0 0-21z m235-96c37 0 70 21 86 53-16 32-49 53-86 53-37 0-70-21-86-53 16-32 49-53 86-53z m-108 57c19 43 61 71 108 71 47 0 89-28 108-71l1-4-1-4c-19-43-61-71-108-71-47 0-89 28-108 71l-1 4z m108-36c-18 0-32 14-32 32 0 18 14 32 32 32 18 0 32-14 32-32 0-18-14-32-32-32z m0 21c6 0 11 5 11 11 0 6-5 11-11 11-6 0-11-5-11-11 0-6 5-11 11-11z"/>
+<glyph glyph-name="wiki-2" unicode="&#57401;" d="M107 30c-12 0-23 10-23 28l0 380c0 25 25 44 58 44l228 0c33 0 58-21 58-44l0-380c0-21-11-28-23-28-9 0-16 5-26 12l-118 130c-3 3-7 3-10 0l-116-130c-12-9-19-12-28-12z m149 170c9 0 19-5 26-11l116-131c2-2 5-2 5-2 0 0 0 0 0 2l0 380c0 9-14 18-33 18l-228 0c-19 0-33-9-33-18l0-380c0 0 0 0 0-2 3 0 5 2 7 5l117 128c7 9 14 11 23 11z"/>
+<glyph glyph-name="edit24" unicode="&#57402;" d="M68 43c-4 0-6 0-10 4-3 2-7 8-3 19l39 92 226 226 75-75-233-228-87-36c-5-2-5-2-7-2z m45 98l-28-66 66 27 207 207-38 41z m303 192l-75 74 39 39c19 19 51 19 72-2 22-22 22-54 2-73z m-38 74l38-38 21 21c11 9 9 26-2 37-10 10-28 10-36 2z"/>
 </font></defs></svg>