From e18ba3198891d8e2299259575a05c08c79536974 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 11 Oct 2017 20:52:34 -0600
Subject: [PATCH] file selector cleanup - fix #656

add readonly style

minor css fixes
---
 ui/js/component/publishForm/view.jsx  |  1 -
 ui/scss/component/_file-selector.scss |  9 +++++++++
 ui/scss/component/_form-field.scss    | 18 +++++++++---------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx
index 16323f28a..3a2416644 100644
--- a/ui/js/component/publishForm/view.jsx
+++ b/ui/js/component/publishForm/view.jsx
@@ -542,7 +542,6 @@ class PublishForm extends React.PureComponent {
             <div className="card__content">
               <FormRow
                 name="file"
-                label="File"
                 ref="file"
                 type="file"
                 onChange={event => {
diff --git a/ui/scss/component/_file-selector.scss b/ui/scss/component/_file-selector.scss
index 31dc20d81..8172da203 100644
--- a/ui/scss/component/_file-selector.scss
+++ b/ui/scss/component/_file-selector.scss
@@ -1,3 +1,8 @@
+.form-field--file,
+.form-field--directory {
+  width: 100%;
+}
+
 .file-selector {
   display: flex;
 }
@@ -11,4 +16,8 @@
 
 .file-selector__path {
   font-size: 14px;
+  flex-grow: 2;
+  .input-copyable {
+    width: 100%;
+  }
 }
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 8fc120787..0021efe86 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -27,19 +27,22 @@
 
 input[type="text"].input-copyable {
   background: var(--input-bg);
-  border-bottom: var(--input-border-size) solid var(--input-border-color);
   color: var(--input-color);
   line-height: 1;
   padding-top: $spacing-vertical * 1/3;
   padding-bottom: $spacing-vertical * 1/3;
-  width: var(--input-width);
   padding-left: 5px;
   padding-right: 5px;
   width: 100%;
-  &:focus {
-    border-color: var(--color-primary);
-    background: none !important;
-  }
+}
+
+input[readonly] {
+    border-bottom: 1px dashed var(--input-border-color) !important;
+}
+
+input[readonly]:focus {
+    background: var(--input-bg) !important;
+    border-bottom: 1px dashed var(--input-border-color !important);
 }
 
 .form-field {
@@ -81,9 +84,6 @@ input[type="text"].input-copyable {
     -webkit-appearance: none;
     background: var(--input-bg);
     color: var(--input-color);
-    &[readonly] {
-      background-color: var(--input-bg);
-    }
   }
 
   input[type="text"],