Ghost/ghost/admin/app/components/modal-branding.hbs

<div class="modal-body gh-ps-modal-body">
    <div class="gh-branding-settings-header">
        <h4>Branding</h4>
        <div class="gh-branding-settings-actions">
             <button
                class="gh-btn mr3"
                {{action "closeModal"}}
                {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
                {{on "mousedown" (optional this.noop)}}
                data-test-button="cancel-custom-view-form"
            >
                <span>Cancel</span>
            </button>

            <GhTaskButton
                @buttonText="Save and close"
                @successText="Saved"
                @task={{this.saveTask}}
                @idleClass="gh-btn-primary"
                @class="gh-btn gh-btn-icon"
                data-test-button="save-members-modal-setting"
            />
        </div>
    </div>

    <div class="gh-branding-settings">
        <section class="gh-branding-settings-options">
            <div class="gh-stack">
                <div class="gh-stack-item gh-setting-first">
                    <div class="gh-setting-content">
                        <div class="gh-setting-title">Accent color</div>
                        <div class="gh-setting-desc">Primary color used in your publication theme</div>
                        {{#each uploader.errors as |error|}}
                            <div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
                        {{/each}}
                    </div>

                    <div class="gh-setting-action" data-test-setting="accentColor">
                        <GhFormGroup
                            @errors={{this.settings.errors}}
                            @hasValidated={{this.settings.hasValidated}}
                            @property="accentColor"
                            @class="input-color-form-group"
                        >
                            <div class="input-color">
                                <input
                                    type="text"
                                    placeholder="abcdef"
                                    name="accent-color"
                                    autocorrect="off"
                                    maxlength="6"
                                    value={{this.accentColor}}
                                    class="gh-input"
                                    {{on "input" (perform this.debounceUpdateAccentColor)}}
                                    {{on "blur" (action 'updateAccentColor')}}
                                    data-test-input="accentColor"
                                />
                                <div class="color-picker-horizontal-divider"></div>
                                <div
                                    class="color-box-container"
                                    style={{this.accentColorBgStlye}}
                                >
                                    <input
                                        type="color"
                                        name="accent-color"
                                        class="color-picker"
                                        value="{{this.accentColorPickerValue}}"
                                        {{on "input" (perform this.debounceUpdateAccentColor)}}
                                    >
                                </div>
                            </div>
                        </GhFormGroup>
                    </div>

                </div>
                <div class="gh-setting gh-stack-item" data-test-setting="icon">
                    <GhUploader
                        @extensions={{this.iconExtensions}}
                        @paramsHash={{hash purpose="icon"}}
                        @onComplete={{action "imageUploaded" "icon"}}
                        as |uploader|
                    >
                    <div class="gh-setting-content">
                        <div class="gh-setting-title">Publication icon</div>
                        <div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
                        {{#each uploader.errors as |error|}}
                            <div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
                        {{/each}}
                    </div>
                    <div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
                        {{#if uploader.isUploading}}
                            {{uploader.progressBar}}
                        {{else if this.settings.icon}}
                            <div class="gh-branding-image-container transparent-bg">
                                <img class="blog-icon" src="{{this.settings.icon}}" alt="icon" data-test-icon-img>
                                <button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "icon"}} data-test-delete-image="icon">
                                    {{svg-jar "trash" class="w4 h4 fill-white"}}
                                </button>
                            </div>
                        {{else}}
                            <button type="button" class="gh-btn self-center" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon">
                                <span>Upload icon</span>
                            </button>
                        {{/if}}
                        <div style="display:none">
                            <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.iconMimeTypes}} data-test-file-input="icon" />
                        </div>
                    </div>
                    </GhUploader>
                </div>
                <div class="gh-stack-item gh-setting" data-test-setting="logo">
                    <GhUploader
                        @extensions={{this.imageExtensions}}
                        @onComplete={{action "imageUploaded" "logo"}}
                        as |uploader|
                    >
                    <div>
                        <div class="gh-setting-title">Publication logo</div>
                        <div class="gh-setting-desc">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>

                        <div class="gh-uploadbutton-container flex flex-column mt3">
                            {{#each uploader.errors as |error|}}
                                <div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
                            {{/each}}
                            {{#if uploader.isUploading}}
                                {{uploader.progressBar}}
                            {{else if this.settings.logo}}
                                <div class="gh-branding-image-container largeimg justify-center transparent-bg">
                                    <img class="blog-logo" src="{{this.settings.logo}}" alt="logo" data-test-logo-img>
                                    <button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "logo"}} data-test-delete-image="logo">
                                        {{svg-jar "trash" class="w4 h4 fill-white"}}
                                    </button>
                                </div>
                            {{else}}
                                <button type="button" class="gh-btn self-start" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="logo">
                                    <span>Upload logo</span>
                                </button>
                            {{/if}}
                            <div style="display:none">
                                <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
                            </div>
                        </div>
                    </div>
                    </GhUploader>
                </div>
                <div class="gh-stack-item gh-setting gh-setting-last" data-test-setting="coverImage">
                    <GhUploader
                        @extensions={{this.imageExtensions}}
                        @onComplete={{action "imageUploaded" "coverImage"}}
                        as |uploader|
                    >
                    <div>
                        <div class="gh-setting-title">Publication cover</div>
                        <div class="gh-setting-desc">An optional large background image for your site</div>
                        {{#each uploader.errors as |error|}}
                            <div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
                        {{/each}}

                        <div class="gh-uploadbutton-container flex flex-column mt3 items-stretch">
                            {{#if uploader.isUploading}}
                                {{uploader.progressBar}}
                            {{else if this.settings.coverImage}}
                                <div class="gh-branding-image-container largeimg">
                                    <img class="blog-cover" src="{{this.settings.coverImage}}" alt="cover photo" data-test-cover-img>
                                    <button type="button" class="gh-setting-action-largeimg-delete" {{action "removeImage" "coverImage"}} data-test-delete-image="coverImage">
                                        {{svg-jar "trash" class="w4 h4 fill-white"}}
                                    </button>
                                </div>
                            {{else}}
                                <button type="button" class="gh-btn self-start" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="coverImage">
                                    <span>Upload cover</span>
                                </button>
                            {{/if}}
                            <div style="display:none">
                                <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="coverImage" />
                            </div>
                        </div>
                    </div>
                    </GhUploader>
                </div>
            </div>
        </section>

        <section class="gh-branding-settings-right">
            <GhBrowserPreview class="gh-branding-settings-previewcontainer" @icon={{this.icon}} @title={{this.config.blogTitle}}>
                <GhSiteIframe
                    class="gh-branding-settings-preview"
                    @src={{this.themePreviewUrl}}
                    @guid={{this.previewGuid}}
                ></GhSiteIframe>
            </GhBrowserPreview>
        </section>
    </div>
</div>