improve email styling, include extra respond link

lib/email/message_builder.rb

@@ -44,18 +44,23 @@ module Email
     def html_part
       return unless html_override = @opts[:html_override]
       if @opts[:add_unsubscribe_link]
-        html_override  << "<br>".html_safe
 
         if response_instructions = @template_args[:respond_instructions]
-          html_override << PrettyText.cook(response_instructions).html_safe
+          respond_instructions = PrettyText.cook(response_instructions).html_safe
+          html_override.gsub!("%{respond_instructions}", respond_instructions)
         end
 
-        html_override << PrettyText.cook(I18n.t('unsubscribe_link', template_args)).html_safe
+        unsubscribe_link = PrettyText.cook(I18n.t('unsubscribe_link', template_args)).html_safe
+        html_override.gsub!("%{unsubscribe_link}",unsubscribe_link)
       end
 
       styled = Email::Styles.new(html_override)
       styled.format_basic
 
+      if style = @opts[:style]
+        styled.send "format_#{style}"
+      end
+
       Mail::Part.new do
         content_type 'text/html; charset=UTF-8'
         body styled.to_html

lib/email/styles.rb

@@ -14,7 +14,8 @@ module Email
       @fragment.css('img').each do |img|
 
         if img['src'] =~ /\/assets\/emoji\//
-          img['style'] = "width: 20px; height: 20px;"
+          img['width'] = 20
+          img['height'] = 20
         else
           img['style'] = "max-width: 694px;"
         end
@@ -24,52 +25,78 @@ module Email
         end
       end
 
-      @fragment.css('div.post-indent').each do |div|
-        div['style'] = 'margin-left: 15px; margin-top: 20px; max-width: 694px;'
-      end
-
+      style('div.post-indent',' margin-left: 15px; margin-top: 20px; max-width: 694px;')
     end
 
+    def format_notification
+      style('.previous-discussion', 'font-size: 17px; color: #444;')
+      style('.date', "text-align:right;color:#999999;padding-right:5px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px")
+      style('.username', "font-size:13px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;color:#3b5998;text-decoration:none;font-weight:bold")
+      style('.post-wrapper', "margin-bottom:25px;max-width:761px")
+      style('.user-avatar', 'vertical-align:top;width:55px;')
+      style('.user-avatar img', nil, width: '45', height: '45')
+      style('hr', 'background-color: #ddd; height: 1px; border: 1px;')
+      # we can do this but it does not look right
+      # style('#main', 'font-family:"Helvetica Neue", Helvetica, Arial, sans-serif')
+      style('td.body', 'padding-top:10px;', colspan: "2")
+      correct_footer_style
+      reset_tables
+    end
+
+
     def format_html
 
-      @fragment.css('h3').each do |h3|
-        h3['style'] = 'margin: 15px 0 20px 0; border-bottom: 1px solid #ddd;'
-      end
-
-      @fragment.css('hr').each do |hr|
-        hr['style'] = 'background-color: #ddd; height: 1px; border: 1px;'
-      end
-
-
-      @fragment.css('a').each do |a|
-        a['style'] = 'text-decoration: none; font-weight: bold; font-size: 15px; color: #006699;'
-      end
-
-      @fragment.css('ul').each do |ul|
-        ul['style'] = 'margin: 0 0 0 10px; padding: 0 0 0 20px;'
-      end
-
-      @fragment.css('li').each do |li|
-        li['style'] = 'padding-bottom: 10px'
-      end
+      style('h3', 'margin: 15px 0 20px 0; border-bottom: 1px solid #ddd;')
+      style('hr', 'background-color: #ddd; height: 1px; border: 1px;')
+      style('a',' text-decoration: none; font-weight: bold; font-size: 15px; color: #006699;')
+      style('ul', 'margin: 0 0 0 10px; padding: 0 0 0 20px;')
+      style('li', 'padding-bottom: 10px')
+      style('div.digest-post', 'margin-left: 15px; margin-top: 20px; max-width: 694px;')
 
       @fragment.css('pre').each do |pre|
         pre.replace(pre.text)
       end
 
-      @fragment.css('div.digest-post').each do |div|
-        div['style'] = 'margin-left: 15px; margin-top: 20px; max-width: 694px;'
-      end
 
     end
 
     def to_html
-      result = @fragment.to_html
-      result.gsub!(/\[email-indent\]/, "<div style='margin-left: 15px'>")
-      result.gsub!(/\[\/email-indent\]/, "</div>")
-      result
+      strip_classes_and_ids
+      @fragment.to_html.tap do |result|
+        result.gsub!(/\[email-indent\]/, "<div style='margin-left: 15px'>")
+        result.gsub!(/\[\/email-indent\]/, "</div>")
+      end
     end
 
+    private
 
+    def correct_footer_style
+      @fragment.css('.footer').each do |element|
+        element['style'] = "font-size:13px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;color:#444;"
+        element.css('a').each do |inner|
+          inner['style'] = "color:#444;"
+        end
+      end
+    end
+
+    def strip_classes_and_ids
+      @fragment.css('*').each do |element|
+        element.delete('class')
+        element.delete('id')
+      end
+    end
+
+    def reset_tables
+      style('table',nil, cellspacing: '0', cellpadding: '0', border: '0')
+    end
+
+    def style(selector, style, attribs = {})
+      @fragment.css(selector).each do |element|
+        element['style'] = style if style
+        attribs.each do |k,v|
+          element[k] = v
+        end
+      end
+    end
   end
-end
+end