Updates to polish some of the config items

web/init/src/components/config_render/ConfigCheckbox.jsx

@@ -24,7 +24,7 @@ export default class ConfigCheckbox extends React.Component {
     return (
       <div className={`field field-checkbox-wrapper u-marginTop--15 flex ${hidden ? "hidden" : ""}`}>
         <span className="u-marginTop--10 config-errblock" id={`${this.props.name}-errblock`}></span>
-        <div className="flex-auto flex u-marginRight--20">
+        <div className="flex1 flex u-marginRight--20">
           <input
             ref={(checkbox) => this.checkbox = checkbox}
             type="checkbox"

web/init/src/components/config_render/ConfigRadio.jsx

@@ -19,7 +19,7 @@ export default class ConfigRadio extends React.Component {
     const checked = val === this.props.name;
 
     return (
-      <div className="flex-auto flex alignItems--center u-marginRight--20">
+      <div className="flex-auto flex alignItems--center u-marginRight--20 u-marginTop--10">
         <input
           type="radio"
           name={this.props.group}

web/init/src/components/config_render/ConfigSelectOne.jsx

@@ -57,7 +57,7 @@ export default class ConfigSelectOne extends React.Component {
             </Markdown>
           </p>
         : null}
-        <div className="field-input-wrapper u-marginTop--15 flex flexWrap--wrap">
+        <div className="field-input-wrapper u-marginTop--5 flex flexWrap--wrap">
           {options}
         </div>
       </div>

web/init/src/components/config_render/FileInput.jsx

@@ -79,15 +79,12 @@ export default class FileInput extends React.Component {
               />
               <label htmlFor={`${this.props.name} selector`} className="u-position--relative">
                 <span className={`icon clickable ${this.state.fileAdded || this.props.value ? "u-smallCheckGreen" : "u-ovalIcon"} u-marginRight--normal u-top--3`}></span>
-                {this.state.fileAdded || this.props.value ? `${this.props.title} file selected` : `Browse files for ${this.props.title}`}
+                {this.state.fileAdded || this.props.value ? this.props.multiple ? this.state.fileNames.join(",") : this.state.fileName : `Browse files for ${this.props.title}`}
+                {this.state.fileAdded || this.props.value ? 
+                  <p className="u-color--astral u-textDecoration--underlineOnHover u-fontSize--small u-marginLeft--30 u-marginTop--5">Select a different file</p>
+                : null }
               </label>
             </div>
-            {this.state.fileAdded || this.props.value ?
-              <div className="u-color--tuna u-marginLeft--normal"> File uploaded:
-              <p className="Form-label-subtext"> {this.props.multiple ? this.state.fileNames.join(",") : this.state.fileName} </p>
-                <p className="Form-label-subtext"> {this.props.getFilenamesText} </p>
-              </div>
-              : null}
           </div>
         </div>
         <small className="text-danger"> {this.state.errText}</small>

web/init/src/scss/utilities/forms.scss

@@ -84,7 +84,6 @@ input[type="file"] {
   display: inline-block;
   padding: 15px 17px;
   cursor: pointer;
-  width: 249px;
   border-radius: 4px;
 }
 
@@ -93,7 +92,6 @@ input[type="file"] {
   display: inline-block;
   padding: 15px 17px;
   cursor: pointer;
-  width: 249px;
   border-radius: 4px;
   color: #323232;
 }