redesign for fileSelector component

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>
     );

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 {