From 6d7ba7af62b58be23f8a627fdb848c0cc89f269d Mon Sep 17 00:00:00 2001
From: Michael An <37589122+Michael18811380328@users.noreply.github.com>
Date: Fri, 25 Jan 2019 15:48:30 +0800
Subject: [PATCH] [fix] readme-style (#2885)

---
 .../src/components/dialog/readme-dialog.js    |  2 +-
 frontend/src/components/repo-info-bar.js      | 26 +++++++++----------
 frontend/src/css/repo-info-bar.css            | 15 +++--------
 3 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/dialog/readme-dialog.js b/frontend/src/components/dialog/readme-dialog.js
index 14a4daaf84..373d550c55 100644
--- a/frontend/src/components/dialog/readme-dialog.js
+++ b/frontend/src/components/dialog/readme-dialog.js
@@ -37,7 +37,7 @@ class ReadmeDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} className="readme-dialog" size="lg">
+      <Modal isOpen={true} toggle={this.props.toggleCancel} className="readme-dialog" size="lg">
         <ModalHeader>{gettext(this.props.fileName)}
           <a className="readme-dialog-edit" href={this.props.href} target='_blank'><i className="fa fa-pencil"></i></a>
         </ModalHeader>
diff --git a/frontend/src/components/repo-info-bar.js b/frontend/src/components/repo-info-bar.js
index b078c61e31..51bf94f09a 100644
--- a/frontend/src/components/repo-info-bar.js
+++ b/frontend/src/components/repo-info-bar.js
@@ -84,22 +84,22 @@ class RepoInfoBar extends React.Component {
             })}
           </ul>
         )}
-        <div className="readme-files">
-          {(readmeMarkdown !== null && readmeMarkdown.size > 1) && 
-            <span className="readme-file" onClick={this.toggleReadme}>
-              <i className="readme-flag fa fa-flag"></i>
-              <span className="readme-name">{readmeMarkdown.name}</span>
+        <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="used-tag-name">{readmeMarkdown.name}</span>
             </span>
           }
-          {(readmeMarkdown !== null && readmeMarkdown.size < 2) && 
-            <span className="readme-file">
-              <i className="readme-flag fa fa-flag"></i>
-              <a className="readme-name" href={href} target='_blank'>{readmeMarkdown.name}</a>
+          {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) < 2) && 
+            <span className="file-info">
+              <i className="file-flag fa fa-flag"></i>
+              <a className="used-tag-name" href={href} target='_blank'>{readmeMarkdown.name}</a>
             </span>
           }
           {this.props.draftCounts > 0 &&
-            <span className="readme-file">
-              <i className="readme-flag fa fa-pen"></i>
+            <span className="file-info">
+              <i className="file-flag fa fa-pen"></i>
               <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'}
@@ -107,8 +107,8 @@ class RepoInfoBar extends React.Component {
             </span>
           }
           {this.props.reviewCounts > 0 &&
-            <span className="readme-file">
-              <i className="readme-flag fa fa-clipboard"></i>
+            <span className="file-info">
+              <i className="file-flag fa fa-clipboard"></i>
               <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'}
diff --git a/frontend/src/css/repo-info-bar.css b/frontend/src/css/repo-info-bar.css
index 2fb4b0349b..adcea3f966 100644
--- a/frontend/src/css/repo-info-bar.css
+++ b/frontend/src/css/repo-info-bar.css
@@ -36,30 +36,21 @@
   text-decoration: underline;
 }
 
-.readme-files {
-  margin-top: 4px;
-}
-
-.readme-file {
+.file-info {
   margin: 0 15px;
   display: inline-block;
   cursor: pointer;
 }
 
-.readme-file a {
+.file-info a {
   color: #333;
 }
 
-.readme-flag {
+.file-flag {
   font-size: 12px;
   color: #f19645;
 }
 
-.readme-name {
-  margin: 0 0.25rem;
-  font-size: 14px;
-}
-
 .readme-dialog-edit {
   position: absolute;
   right: 16px;