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

<div class="modal-content">
    <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>
        <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

        <div class="modal-body">
            {{#if this.theme}}
                {{#if this.hasWarningsOrErrors}}
                    <p>
                        The theme <strong>"{{this.themeName}}"</strong> was installed successfully but we detected some {{if this.validationErrors "errors" "warnings"}}.
                        {{#if this.canActivateTheme}}
                            You are still able to activate and use the theme but it is recommended to fix these {{if this.validationErrors "errors" "warnings"}} before you do so.
                        {{/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={{this.validateTheme}}
                    @uploadStarted={{fn (mut this.themeManagement.isUploading) true}}
                    @uploadFinished={{fn (mut this.themeManagement.isUploading) false}}
                    @uploadSuccess={{this.uploadSuccess}}
                    @uploadFailed={{this.uploadFailed}}
                    @listenTo="themeUploader" />
            {{/if}}
        </div>
    </div>

    <div class="modal-footer {{if (and this.theme this.hasWarningsOrErrors) "top-shadow"}}">
        <div class="flex items-center justify-between {{if (or this.displayOverwriteWarning this.canActivateTheme this.validationErrors this.fatalValidationErrors) "flex-auto"}}">
            <button type="button" {{on "click" @close}} 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 type="button" {{on "click" this.confirmOverwrite}} class="gh-btn gh-btn-red" data-test-overwrite-button>
                        <span>Overwrite</span>
                    </button>
                {{/if}}
                {{#if this.canActivateTheme}}
                    <button type="button" {{on "click" this.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 type="button" {{on "click" this.reset}} class="gh-btn gh-btn-black ml2" data-test-try-again-button>
                        <span>Retry</span>
                    </button>
                {{/if}}
            </div>
        </div>
    </div>
</div>