Fixed subject line and css

cmd/subscribers.go

@@ -895,8 +895,21 @@ func makeOptinNotifyHook(unsubHeader bool, u *UrlConfig, q *models.Queries, i *i
 			hdr.Set("List-Unsubscribe", `<`+unsubURL+`>`)
 		}
 
+		// Build the subject with public list names. Private list names are
+		// not leaked in the subject, mirroring the e-mail body.
+		var pubNames []string
+		for _, l := range out.Lists {
+			if l.Type == models.ListTypePublic {
+				pubNames = append(pubNames, l.Name)
+			}
+		}
+		subject := i.T("subscribers.optinSubject")
+		if len(pubNames) > 0 {
+			subject = i.Ts("subscribers.optinSubjectList", "name", strings.Join(pubNames, ", "))
+		}
+
 		// Send the e-mail.
-		if err := notifs.Notify([]string{sub.Email}, i.T("subscribers.optinSubject"), notifs.TplSubscriberOptin, out, hdr); err != nil {
+		if err := notifs.Notify([]string{sub.Email}, subject, notifs.TplSubscriberOptin, out, hdr); err != nil {
 			lo.Printf("error sending opt-in e-mail for subscriber %d (%s): %s", sub.ID, sub.UUID, err)
 			return 0, err
 		}

i18n/en.json

@@ -617,6 +617,7 @@
     "subscribers.newSubscriber": "New subscriber",
     "subscribers.numSelected": "{num} subscriber(s) selected",
     "subscribers.optinSubject": "Confirm subscription",
+    "subscribers.optinSubjectList": "Confirm subscription to {name}",
     "subscribers.preconfirm": "Preconfirm subscriptions",
     "subscribers.preconfirmHelp": "Don't send opt-in e-mails and mark all list subscriptions as 'subscribed'.",
     "subscribers.query": "Query",

static/email-templates/base.html

@@ -8,63 +8,87 @@
 
         <style>
             body {
-                background-color: #F0F1F3;
+                background-color: #f5f1e8;
-                font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
+                font-family: Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;
-                font-size: 15px;
+                font-size: 17px;
-                line-height: 26px;
+                line-height: 1.65;
                 margin: 0;
-                color: #444;
+                color: #1c1a16;
             }
 
             .wrap {
-                background-color: #fff;
+                background-color: #fbf8f1;
                 padding: 30px;
                 max-width: 525px;
                 margin: 0 auto;
-                border-radius: 5px;
+                border: 2px solid #1c1a16;
+                border-radius: 0;
             }
 
             .header {
-                border-bottom: 1px solid #eee;
+                border-bottom: 3px double #1c1a16;
                 padding-bottom: 15px;
                 margin-bottom: 15px;
             }
 
+            h1, h2, h3 {
+                font-family: Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;
+                color: #1c1a16;
+                line-height: 1.2;
+            }
+
+            ul li {
+                font-weight: bold;
+                color: #1c1a16;
+            }
+
             .footer {
                 text-align: center;
+                font-family: 'Cascadia Mono', Consolas, Menlo, 'Courier New', monospace;
                 font-size: 12px;
-                color: #888;
+                letter-spacing: 0.08em;
+                text-transform: uppercase;
+                color: #837d72;
+                border-top: 3px double #1c1a16;
+                margin-top: 24px;
+                padding-top: 14px;
             }
                 .footer a {
-                    color: #888;
+                    color: #4a463f;
                 }
 
             .gutter {
                 padding: 30px;
             }
             .button {
-                background: #1b3a5b;
+                background: #b23a2c;
-                color: #fff !important;
+                color: #fdfaf3 !important;
                 display: inline-block;
-                border-radius: 3px;
+                border: 2px solid #b23a2c;
-                padding: 10px 30px;
+                border-radius: 0;
+                padding: 12px 30px;
                 text-align: center;
                 text-decoration: none;
+                font-family: 'Cascadia Mono', Consolas, Menlo, 'Courier New', monospace;
+                font-size: 14px;
                 font-weight: bold;
+                letter-spacing: 0.08em;
+                text-transform: uppercase;
             }
             .button:hover {
-                background: #222;
+                background: #8e2c21;
-                color: #fff;
+                border-color: #8e2c21;
+                color: #fdfaf3;
             }
             img {
                 max-width: 100%;
             }
 
             a {
-                color: #1b3a5b;
+                color: #8e2c21;
             }
                 a:hover {
-                    color: #111;
+                    color: #b23a2c;
                 }
             @media screen and (max-width: 600px) {
                 .wrap {
@@ -76,7 +100,7 @@
             }
         </style>
     </head>
-<body style="background-color: #F0F1F3;">
+<body style="background-color: #f5f1e8;">
     <div class="gutter">&nbsp;</div>
     <div class="wrap">
         <div class="header">
@@ -88,7 +112,7 @@
 
 {{ define "footer" }}
     </div>
-    
+
     <div class="footer">
         <p>{{ L.T "public.poweredBy" }} EagleCast</p>
     </div>