Refined mailgun settings in Labs

TryGhost · Nov 15, 2019 · a50cc0d · a50cc0d
1 parent d825063
commit a50cc0d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/app/styles/layouts/labs.css b/app/styles/layouts/labs.css
@@ -110,4 +110,15 @@
 .gh-labs-disabled .for-radio label,
 .gh-labs-disabled .for-radio .input-toggle-component {
     cursor: default;
+}
+
+.gh-labs-mailgun-region {
+    width: 140px !important;
+    margin-right: 12px;
+}
+
+.gh-labs-mailgun-region .ember-power-select-trigger svg {
+    margin-left: 23px;
+    width: 10px;
+    height: 6px;
 }
diff --git a/app/templates/components/gh-members-lab-setting.hbs b/app/templates/components/gh-members-lab-setting.hbs
@@ -187,34 +187,35 @@
             {{/gh-form-group}}
 
             {{#unless hasBulkEmailConfig}}
-                {{#gh-form-group}}
+                <div class="flex items-center">
+                    {{#gh-form-group class="gh-labs-mailgun-region"}}
                     <label class="fw6 f8">Mailgun region</label>
                     <div class="mt1">
                         {{#power-select
-                            options=this.mailgunRegions
-                            selected=this.mailgunRegion
-                            onchange=(action "setBulkEmailRegion")
-                            searchEnabled=false
-                            as |region|
-                        }}
-                            {{region.flag}} {{region.name}}
+                                                options=this.mailgunRegions
+                                                selected=this.mailgunRegion
+                                                onchange=(action "setBulkEmailRegion")
+                                                searchEnabled=false
+                                                as |region|
+                                            }}
+                        {{region.flag}} {{region.name}}
                         {{/power-select}}
                     </div>
-                    <a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="mt1 fw4 f8">
-                        Find your Mailgun region next to your domain here &raquo;
-                    </a>
-                {{/gh-form-group}}
-                {{#gh-form-group}}
+                    {{/gh-form-group}}
+                    {{#gh-form-group}}
                     <label class="fw6 f8">Mailgun domain</label>
                     {{gh-text-input
-                        value=(readonly bulkEmailSettings.domain)
-                        input=(action "setBulkEmailSettings" "domain")
-                        class="mt1"
-                    }}
+                                            value=(readonly bulkEmailSettings.domain)
+                                            input=(action "setBulkEmailSettings" "domain")
+                                            class="mt1"
+                                        }}
+                    {{/gh-form-group}}
+                </div>
+                <div class="nt5 mb5">
                     <a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="mt1 fw4 f8">
-                        Find your Mailgun domain here &raquo;
+                        Find your Mailgun region and domain here &raquo;
                     </a>
-                {{/gh-form-group}}
+                </div>
                 {{#gh-form-group}}
                     <label class="fw6 f8">Mailgun API key</label>
                     {{gh-text-input