Refined email error modal

app/styles/components/modals.css

@@ -123,7 +123,7 @@
     font-size: 2.2rem;
     line-height: 1.15em;
     font-weight: 600;
-    letter-spacing: 0.4px;
+    letter-spacing: 0.2px;
 }
 
 .modal-body {

app/styles/layouts/main.css

@@ -663,7 +663,7 @@
     font-size: 2.8rem;
     line-height: 1.2em;
     font-weight: 600;
-    letter-spacing: 0.4px;
+    letter-spacing: 0.2px;
     /* match button height to avoid jump on navigation between screens*/
     min-height: 35px;
 }
@@ -725,7 +725,7 @@
     font-size: 2.8rem;
     line-height: 1.2em;
     font-weight: 600;
-    letter-spacing: 0.4px;
+    letter-spacing: 0.2px;
     min-height: 35px;
 }
 

app/styles/patterns/boxes.css

@@ -18,7 +18,7 @@
 .gh-box svg:first-of-type {
     position: absolute;
     top: 13px;
-    left: 15px;
+    left: 12px;
     height: 2.1rem;
     width: auto;
 }
@@ -27,7 +27,7 @@
     border-left-color: var(--blue);
 }
 
-.gh-box-info svg {
+.gh-box-info svg:first-of-type {
     fill: var(--blue);
 }
 
@@ -35,10 +35,24 @@
     border-left-color: var(--yellow);
 }
 
-.gh-box-warning svg {
+.gh-box-warning svg:first-of-type {
     fill: var(--yellow);
 }
 
 .gh-box-warning a {
     color: var(--yellow);
+}
+
+.gh-box-error {
+    border-left-color: var(--red);
+    color: var(--middarkgrey);
+}
+
+.gh-box-error svg:first-of-type {
+    fill: var(--red);
+    height: 1.8rem;
+}
+
+.gh-box-error a {
+    color: var(--red);
 }

app/templates/components/modal-confirm-email-send.hbs

@@ -33,8 +33,11 @@
 
     <div class="modal-body">
         <p>Your post has been published but the email failed to send.</p>
-        <p class="error">Error: {{this.errorMessage}}</p>
-        <p>Check your <LinkTo @route="settings.labs">mailgun settings</LinkTo> if it persists.</p>
+        <p class="error gh-box gh-box-error">
+            {{svg-jar "warning"}}
+            Error: {{this.errorMessage}}
+        </p>
+        <p>Please check your Mailgun configuration under <LinkTo @route="settings.labs">Labs → Members</LinkTo> if the error persists.</p>
     </div>
 
     <div class="modal-footer">

public/assets/icons/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>warning</title><path d="M12 20.251c-.62 0-1.125-.505-1.125-1.125s.505-1.125 1.125-1.125 1.125.505 1.125 1.125-.505 1.125-1.125 1.125zM12 16.501c-.414 0-.75-.336-.75-.75v-7.5c0-.414.336-.75.75-.75.413 0 .75.336.75.75v7.5c0 .413-.337.75-.75.75z"/><path d="M2.272 24.001c-.347 0-.693-.081-1.003-.233-.543-.267-.951-.731-1.147-1.305s-.157-1.191.111-1.734L9.705 1.43c.248-.505.663-.919 1.167-1.167.354-.174.732-.262 1.124-.262.984 0 1.865.547 2.298 1.429l9.473 19.298c.152.31.233.656.233 1.003 0 .607-.237 1.178-.667 1.606-.428.428-.998.664-1.604.664H2.272zm9.725-22.5c-.161 0-.318.036-.463.108-.208.102-.38.274-.482.482L1.579 21.39c-.188.382-.03.845.352 1.032.105.052.222.079.339.079h19.458c.207 0 .4-.08.546-.225.146-.146.226-.339.227-.545 0-.118-.027-.235-.079-.34l-9.475-19.3c-.176-.358-.548-.59-.95-.59z"/></svg>