alan/rr-118-make-it-easy-to-update-email-template-style (#105)

danielpaul · Mar 11, 2024 · 8c50d49 · 8c50d49
2 parents da65f44 + 0b7d76b
commit 8c50d49
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 21 deletions.
diff --git a/app/views/layouts/mailer.html.erb b/app/views/layouts/mailer.html.erb
@@ -8,7 +8,7 @@
     <meta name="color-scheme" content="light dark" />
     <meta name="supported-color-schemes" content="light dark" />
     <title></title>
-   
+
     <style type="text/css" rel="stylesheet" media="all">
     /* Base ------------------------------ */
 
@@ -22,11 +22,11 @@
     }
 
     a {
-      color: #0077ed;
+      color: <%= EMAIL_PRIMARY_BUTTON_COLOR %>;
 
       text-decoration: underline;
       text-decoration-skip-ink: auto;
-      text-decoration-color: #0077ed;
+      text-decoration-color: <%= EMAIL_PRIMARY_BUTTON_COLOR %>;
     }
 
     a img {
@@ -117,13 +117,13 @@
     /* Buttons ------------------------------ */
 
     .button {
-      background-color: #0077ed;
-      border-top: 10px solid #0077ed;
-      border-right: 18px solid #0077ed;
-      border-bottom: 10px solid #0077ed;
-      border-left: 18px solid #0077ed;
+      background-color: <%= EMAIL_PRIMARY_BUTTON_COLOR %>;
+      border-top: 10px solid <%= EMAIL_PRIMARY_BUTTON_COLOR %>;
+      border-right: 18px solid <%= EMAIL_PRIMARY_BUTTON_COLOR %>;
+      border-bottom: 10px solid <%= EMAIL_PRIMARY_BUTTON_COLOR %>;
+      border-left: 18px solid <%= EMAIL_PRIMARY_BUTTON_COLOR %>;
       display: inline-block;
-      color: #FFF;
+      color: <%= EMAIL_PRIMARY_BUTTON_TEXT_COLOR =%>;
       text-decoration: none;
       border-radius: 6px;
       -webkit-text-size-adjust: none;
@@ -293,12 +293,12 @@
     }
 
     body {
-      background-color: #f5f5f7;
-      color: #51545E;
+      background-color: <%= EMAIL_LIGHT_BACKGROUND_COLOR %>;
+      color: <%= EMAIL_LIGHT_TEXT_COLOR %>;
     }
 
     p {
-      color: #51545E;
+      color: <%= EMAIL_LIGHT_TEXT_COLOR %>;
     }
 
     .email-wrapper {
@@ -308,7 +308,7 @@
       -premailer-width: 100%;
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
-      background-color: #f5f5f7;
+      background-color: <%= EMAIL_LIGHT_BACKGROUND_COLOR %>;
     }
 
     .email-content {
@@ -359,7 +359,7 @@
       -premailer-width: 570px;
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
-      background-color: #FFFFFF;
+      background-color: <%= EMAIL_LIGHT_CARD_BACKGROUND_COLOR %>;
       border-width: 0px;
       border-radius: .5rem;
       box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(212, 212, 212, 0.5) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
@@ -419,13 +419,13 @@
       .email-masthead,
       .email-footer
       {
-        background-color: #000000 !important;
-        color: #FFF !important;
+        background-color: <%= EMAIL_DARK_BACKGROUND_COLOR %> !important;
+        color: <%= EMAIL_DARK_TEXT_COLOR %> !important;
       }
       .email-body_inner
       {
         box-shadow: none !important;
-        background-color: #1c1c1e !important;
+        background-color: <%= EMAIL_DARK_CARD_BACKGROUND_COLOR %> !important;
 
         border-width: 1px !important;
         border-style: solid !important;

diff --git a/config/initializers/0_constants.rb b/config/initializers/0_constants.rb
@@ -10,6 +10,18 @@
 DEFAULT_FROM_EMAIL_ONLY = "team@#{HOST}".freeze
 DEFAULT_FROM_EMAIL = "#{APP_NAME} <#{DEFAULT_FROM_EMAIL_ONLY}>".freeze
 
+# Email Colors
+EMAIL_LIGHT_BACKGROUND_COLOR = "#f5f5f7".freeze
+EMAIL_LIGHT_CARD_BACKGROUND_COLOR = "#FFFFFF".freeze
+EMAIL_LIGHT_TEXT_COLOR = "#51545E".freeze
+
+EMAIL_DARK_BACKGROUND_COLOR = "#000000".freeze
+EMAIL_DARK_CARD_BACKGROUND_COLOR = "#1c1c1e".freeze
+EMAIL_DARK_TEXT_COLOR = "#FFF".freeze
+
+EMAIL_PRIMARY_BUTTON_COLOR = "#0077ed".freeze
+EMAIL_PRIMARY_BUTTON_TEXT_COLOR = "#FFF".freeze
+
 ENABLE_SENTRY = Rails.env.production? || Rails.env.staging?
 SENTRY_DSN_RAILS = "XXX".freeze
 SENTRY_DSN_JS = "XXX".freeze
@@ -23,8 +35,8 @@
 
 if Rails.env.production?
   SITEMAP_HOST = "https://" +
-                 Rails.application.credentials.dig(Rails.env.to_sym, :aws, :bucket) +
-                 ".s3." +
-                 Rails.application.credentials.dig(Rails.env.to_sym, :aws, :region) +
-                 ".amazonaws.com"
+    Rails.application.credentials.dig(Rails.env.to_sym, :aws, :bucket) +
+    ".s3." +
+    Rails.application.credentials.dig(Rails.env.to_sym, :aws, :region) +
+    ".amazonaws.com"
 end