file selector cleanup - fix #656

add readonly style

minor css fixes

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 => {

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%;
+  }
 }

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"],