Improvements to license page

web/react/components/admin_console/license_settings.jsx

@@ -174,15 +174,17 @@ class LicenseSettings extends React.Component {
 
             licenseKey = (
                 <div className='col-sm-8'>
-                    <input
-                        className='pull-left'
-                        ref='fileInput'
-                        type='file'
-                        accept='.mattermost-license'
-                        onChange={this.handleChange}
-                    />
+                    <div className='file__upload'>
+                        <button className='btn btn-primary'>{'Choose File'}</button>
+                        <input
+                            ref='fileInput'
+                            type='file'
+                            accept='.mattermost-license'
+                            onChange={this.handleChange}
+                        />
+                    </div>
                     <button
-                        className={btnClass + ' pull-left'}
+                        className={btnClass}
                         disabled={!this.state.fileSelected}
                         onClick={this.handleSubmit}
                         id='upload-button'
@@ -193,11 +195,12 @@ class LicenseSettings extends React.Component {
                             defaultMessage='Upload'
                         />
                     </button>
-                    <br/>
-                    <br/>
+                    <div className='help-text no-margin'>
+                        {'No file uploaded'}
+                    </div>
                     <br/>
                     {serverError}
-                    <p className='help-text'>
+                    <p className='help-text no-margin'>
                         <FormattedHTMLMessage
                             id='admin.license.uploadDesc'
                             defaultMessage='Upload a license key for Mattermost Enterprise Edition to upgrade this server. <a href="http://mattermost.com" target="_blank">Visit us online</a> to learn more about the benefits of Enterprise Edition or to purchase a key.'

web/sass-files/sass/partials/_admin-console.scss

@@ -145,12 +145,27 @@
             .form-group {
                 margin-bottom: 25px;
             }
-            .help-text {
-                ul, ol {
-                    padding-left: 23px;
+            .file__upload {
+                position: relative;
+                margin: 0 10px 10px 0;
+                display: inline-block;
+                input {
+                    position: absolute;
+                    @include opacity(0);
+                    width: 100%;
+                    height: 100%;
+                    z-index: 5;
+                    top: 0;
+                    left: 0;
                 }
             }
             .help-text {
+                &.no-margin {
+                    margin: 0;
+                }
+                ul, ol {
+                    padding-left: 23px;
+                }
                 margin: 10px 0 0 15px;
                 color: #777;
                 .help-link {