From 59778808e32263e0f0cab8edd4f2241ba71a830b Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Mon, 2 Oct 2017 21:04:21 -0600
Subject: [PATCH] redesign for fileSelector component

---
 ui/js/component/file-selector.js      | 20 ++++++++++++++++++--
 ui/scss/component/_file-selector.scss |  8 +++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/ui/js/component/file-selector.js b/ui/js/component/file-selector.js
index b0298424f..910920419 100644
--- a/ui/js/component/file-selector.js
+++ b/ui/js/component/file-selector.js
@@ -12,6 +12,11 @@ class FileSelector extends React.PureComponent {
     type: "file",
   };
 
+  constructor(props) {
+    super(props);
+    this._inputElem = null;
+  }
+
   componentWillMount() {
     this.setState({
       path: this.props.initPath || null,
@@ -47,7 +52,7 @@ class FileSelector extends React.PureComponent {
       <div className="file-selector">
         <button
           type="button"
-          className="file-selector__choose-button"
+          className="button-block button-alt file-selector__choose-button"
           onClick={() => this.handleButtonClick()}
         >
           {this.props.type == "file"
@@ -56,7 +61,18 @@ class FileSelector extends React.PureComponent {
         </button>
         {" "}
         <span className="file-selector__path">
-          {this.state.path ? this.state.path : __("No File Chosen")}
+          <input
+            className="input-copyable"
+            type="text"
+            ref={input => {
+              this._inputElem = input;
+            }}
+            onFocus={() => {
+              this._inputElem.select();
+            }}
+            readOnly="readonly"
+            value={this.state.path || __("No File Chosen")}
+          />
         </span>
       </div>
     );
diff --git a/ui/scss/component/_file-selector.scss b/ui/scss/component/_file-selector.scss
index 2cb9fd322..561af9a91 100644
--- a/ui/scss/component/_file-selector.scss
+++ b/ui/scss/component/_file-selector.scss
@@ -1,5 +1,11 @@
+.file-selector {
+  display: flex;
+}
+
 .file-selector__choose-button {
-  font-size: 13px;
+  font-family: inherit;
+  margin-right: 16px;
+  padding: 0 16px;
 }
 
 .file-selector__path {