Ghost-Admin/app/components/modal-upload-theme.hbs

<div class="theme-validation-container">
    <header class="modal-header" data-test-modal="upload-theme">
        <h1>
            {{#if this.theme}}
                {{#if this.hasWarningsOrErrors}}
                    Upload successful with {{#if this.validationErrors}}errors{{else}}warnings{{/if}}
                {{else}}
                    Upload successful!
                {{/if}}
            {{else if (or this.validationErrors this.fatalValidationErrors)}}
                Invalid theme
            {{else}}
                Upload a theme
            {{/if}}
        </h1>
    </header>
    <a class="close" href="#" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>

    <div class="modal-body">
        {{#if this.theme}}
            {{#if this.hasWarningsOrErrors}}
                <p>
                    {{#if this.canActivateTheme}}
                        The theme <strong>"{{this.themeName}}"</strong> was uploaded successfully but we detected some {{#if this.validationErrors}}errors{{else}}warnings{{/if}}. You are still able to activate and use the theme but it is recommended to fix these {{#if this.validationErrors}}errors{{else}}warnings{{/if}} before you do so.
                    {{else}}
                        The theme <strong>"{{this.themeName}}"</strong> was uploaded successfully but we detected some
                        {{#if this.validationErrors}}errors{{else}}warnings{{/if}}.
                    {{/if}}
                </p>

                {{#if this.validationErrors}}
                    <div>
                        <h2 class="mb0 mt4 f5 fw6">Errors</h2>
                        <p class="mb2">Highly recommended to fix, functionality <strong>could</strong> be restricted</p>
                    </div>
                    <ul class="pa0">
                    {{#each this.validationErrors as |error|}}
                        <li class="theme-validation-item theme-error">
                            <GhThemeErrorLi @error={{error}} />
                        </li>
                    {{/each}}
                    </ul>
                {{/if}}

                {{#if this.validationWarnings}}
                    <div>
                        <h2 class="mb0 mt4 f5 fw6">Warnings</h2>
                    </div>
                    <ul class="pa0">
                    {{#each this.validationWarnings as |error|}}
                        <li class="theme-validation-item theme-warning">
                            <GhThemeErrorLi @error={{error}} />
                        </li>
                    {{/each}}
                    </ul>
                {{/if}}
            {{else}}
                <p>
                    "{{this.themeName}}" uploaded successfully.
                    {{#if this.canActivateTheme}}Do you want to activate it now?{{/if}}
                </p>
            {{/if}}
        {{else if this.displayOverwriteWarning}}
            <p>
                The theme folder <strong>"{{this.fileThemeName}}"</strong> already exists. Do you want to overwrite it?
            </p>
        {{else if (or this.validationErrors this.fatalValidationErrors)}}

            <p>
                This theme is invalid and cannot be activated. Fix the following errors and re-upload the theme.
            </p>

            {{#if this.fatalValidationErrors}}
                <div>
                    <h2 class="mb0 mt4 f5 fw6">Fatal Errors</h2>
                    <p class="mb2">Must-fix to activate theme</p>
                </div>

                <ul class="pa0">
                {{#each this.fatalValidationErrors as |error|}}
                    <li class="theme-validation-item theme-fatal-error">
                        <GhThemeErrorLi @error={{error}} />
                    </li>
                {{/each}}
                </ul>
            {{/if}}

            {{#if this.validationErrors}}
                <div>
                    <h2 class="mb0 mt4 f5 fw6">Errors</h2>
                    <p class="mb2">Highly recommended to fix, functionality <strong>could</strong> be restricted</p>
                </div>
                <ul class="pa0">
                {{#each this.validationErrors as |error|}}
                    <li class="theme-validation-item theme-error">
                        <GhThemeErrorLi @error={{error}} />
                    </li>
                {{/each}}
                </ul>
            {{/if}}
        {{else}}
            <GhFileUploader
                @url={{this.uploadUrl}}
                @paramName="file"
                @accept={{this.accept}}
                @labelText="Click to select or drag-and-drop your theme zip file here."
                @validate={{action "validateTheme"}}
                @uploadStarted={{action "uploadStarted"}}
                @uploadFinished={{action "uploadFinished"}}
                @uploadSuccess={{action "uploadSuccess"}}
                @uploadFailed={{action "uploadFailed"}}
                @listenTo="themeUploader" />
        {{/if}}
    </div>
</div>

<div class="modal-footer">
    <div class="flex items-center justify-between {{if (or this.displayOverwriteWarning this.canActivateTheme this.validationErrors this.fatalValidationErrors) "flex-auto"}}">
        <button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-close-button>
            <span>{{#if this.theme}}Close{{else}}Cancel{{/if}}</span>
        </button>
        <div class="flex items-center">
            {{#if this.displayOverwriteWarning}}
                <button {{action "confirmOverwrite"}} class="gh-btn gh-btn-red" data-test-overwrite-button>
                    <span>Overwrite</span>
                </button>
            {{/if}}
            {{#if this.canActivateTheme}}
                <button {{action "activate"}} class="gh-btn" data-test-activate-now-button>
                    <span>Activate{{#if this.validationErrors}} with errors{{/if}}</span>
                </button>
            {{/if}}
            {{#if (or this.validationErrors this.fatalValidationErrors)}}
                <button {{action "reset"}} class="gh-btn gh-btn-blue ml2" data-test-try-again-button>
                    <span>Retry</span>
                </button>
            {{/if}}
        </div>
    </div>
</div>