Updated theme upload modal in Casper error state

No ref

- Updated modal default state to make it look more clickable
- Updated the Casper upload error state design
- Changed the 'try again' button to directly open the finder rather than only resetting the modal

ghost/admin/app/components/gh-file-uploader.hbs

@@ -1,16 +1,18 @@
 {{#if this.file}}
     {{!-- Upload in progress! --}}
     {{#if this.failureMessage}}
-        <div class="failed">{{this.failureMessage}}</div>
-    {{/if}}
-    <div class="progress-container">
-        <div class="progress">
-            <div class="bar {{if this.failureMessage "fail"}}" style={{this.progressStyle}}></div>
+        <div class="failed">
+            {{this.failureMessage}}
+            <GhFileInput @multiple={{false}} @alt={{this.labelText}} @action={{action "retry"}} @accept={{this.accept}} class="try-again">
+                <span class="red fw5 nl1" data-test-upload-try-again-button>Try again</span>
+            </GhFileInput>
+        </div>
+    {{else}}
+        <div class="progress">
+            <div class="bar" style={{this.progressStyle}}></div>
         </div>
-    </div>
-    {{#if this.failureMessage}}
-        <button class="gh-btn gh-btn-green" data-test-upload-try-again-button type="button" {{action "reset"}}><span>Try Again</span></button>
     {{/if}}
+
 {{else}}
     <div class="upload-form">
         <GhFileInput @multiple={{false}} @alt={{this.labelText}} @action={{action "fileSelected"}} @accept={{this.accept}}>

ghost/admin/app/components/gh-file-uploader.js

@@ -145,6 +145,11 @@ export default Component.extend({
             this.set('file', null);
             this.set('uploadPercentage', 0);
             this.set('failureMessage', null);
+        },
+
+        retry() {
+            this.send('reset');
+            this.send('fileSelected', ...arguments);
         }
     },
 

ghost/admin/app/components/modals/design/upload-theme.hbs

@@ -102,7 +102,7 @@
                     @url={{this.uploadUrl}}
                     @paramName="file"
                     @accept={{this.accept}}
-                    @labelText="Click to select or drag-and-drop your theme zip file here."
+                    @labelText="Select or drop your theme zip file"
                     @validate={{this.validateTheme}}
                     @uploadStarted={{fn (mut this.themeManagement.isUploading) true}}
                     @uploadFinished={{fn (mut this.themeManagement.isUploading) false}}

ghost/admin/app/components/modals/design/upload-theme.js

@@ -92,7 +92,7 @@ export default class UploadThemeModal extends Component {
         }
 
         if (file.name.match(/^casper\.zip$/i)) {
-            return {payload: {errors: [{message: 'Sorry, the default Casper theme cannot be overwritten.<br>Please rename your zip file and try again.'}]}};
+            return {payload: {errors: [{message: 'Sorry, the default Casper theme cannot be overwritten.<br>Please rename your zip file to continue.'}]}};
         }
 
         if (!this._allowOverwrite && this.currentThemeNames.includes(themeName)) {

ghost/admin/app/styles/components/uploader.css

@@ -7,7 +7,7 @@
     flex-direction: column;
     align-items: center;
     width: 100%;
-    min-height: 130px;
+    min-height: 140px;
     overflow: hidden;
     margin: 1.6em 0;
     color: var(--middarkgrey);
@@ -127,10 +127,8 @@
     background: var(--red);
 }
 
-/* Try Again button */
-.gh-image-uploader .gh-btn-green:last-child {
-    margin-top: 1em;
-    margin-bottom: 3em;
+.gh-image-uploader .bar.hidden {
+    display: none;
 }
 
 

ghost/admin/app/styles/layouts/settings.css

@@ -1245,6 +1245,20 @@ body:not([data-user-is-dragging]) .gh-newsletter-card-draggable:hover .grab-news
     }
 }
 
+.theme-validation-container .gh-image-uploader {
+    justify-content: center;
+}
+
+.theme-validation-container .gh-image-uploader .description {
+    color: var(--green-d1);
+    font-weight: 500;
+}
+
+.theme-validation-container .gh-image-uploader .x-file-input.try-again,
+.theme-validation-container .gh-image-uploader .x-file-input.try-again label {
+    display: inline;
+}
+
 .theme-validation-item {
     margin: 12px 0 0;
     padding: 12px 16px;

ghost/admin/tests/integration/components/gh-file-uploader-test.js

@@ -172,8 +172,8 @@ describe('Integration: Component: gh-file-uploader', function () {
 
         expect(findAll('.failed').length, 'error message is displayed').to.equal(1);
         expect(find('.failed').textContent).to.match(/The file type you uploaded is not supported/);
-        expect(findAll('.gh-btn-green').length, 'reset button is displayed').to.equal(1);
-        expect(find('.gh-btn-green').textContent).to.equal('Try Again');
+        expect(findAll('[data-test-upload-try-again-button]').length, 'reset button is displayed').to.equal(1);
+        expect(find('[data-test-upload-try-again-button]').textContent).to.equal('Try again');
     });
 
     it('displays file too large for server error', async function () {
@@ -245,7 +245,7 @@ describe('Integration: Component: gh-file-uploader', function () {
         stubFailedUpload(server, 400, 'UnknownError');
         await render(hbs`{{gh-file-uploader url=uploadUrl}}`);
         await fileUpload('input[type="file"]', ['test'], {name: 'test.csv'});
-        await click('.gh-btn-green');
+        await click('[data-test-upload-try-again-button]');
 
         expect(findAll('input[type="file"]').length).to.equal(1);
     });