"Import as JSON" dialog is not intuitive #3761 (#3763)

* "Import as JSON" dialog is not intuitive #3761

* Fixed styling in Angular form builder

- Fixed select file button;
- Fixed required asterisk color in hint text;
- Updated markup and refined CSS selector;

Co-authored-by: charlesh88 <charles.f.hacskaylo@nasa.gov>

platform/forms/res/templates/controls/file-input.html

@@ -20,11 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 
-<a class="s-button {{structure.cssClass}}"
+<button class="c-button {{structure.cssClass}}"
    ng-model="ngModel[field]"
    ng-class="{ labeled: structure.text }"
    mct-file-input>
-    <span class="title-label" ng-if="structure.text">
+    <span class="c-button__label" ng-if="structure.text">
         {{structure.text}}
     </span>
-</a>
+</button>

platform/import-export/src/actions/ImportAsJSONAction.js

@@ -177,7 +177,7 @@ define(['zepto', 'objectUtils'], function ($, objectUtils) {
                             key: 'selectFile',
                             control: 'file-input',
                             required: true,
-                            text: 'Select File'
+                            text: 'Select File...'
                         }
                     ]
                 }

src/plugins/plan/plugin.js

@@ -36,7 +36,7 @@ export default function () {
                     key: 'selectFile',
                     control: 'file-input',
                     required: true,
-                    text: 'Select File',
+                    text: 'Select File...',
                     type: 'application/json'
                 }
             ],

src/styles/_forms.scss

@@ -335,7 +335,6 @@
     }
 }
 
-
 @mixin labelValidate($sym, $c) {
     > .label {
         @include glyphAfter($sym);
@@ -372,3 +371,7 @@ body.desktop .form-row.validates > .label {
         line-height: 200%;
     }
 }
+
+.req {
+    color: $colorFormRequired;
+}