Add css selectors to emails to improve design customization (#7493)

decidim-conferences/app/views/decidim/conferences/admin/invite_join_conference_mailer/invite.html.erb

@@ -1,12 +1,12 @@
-<p><%= t("devise.mailer.invitation_instructions.hello", email: @user.name) %></p>
+<p class="email-greeting"><%= t("devise.mailer.invitation_instructions.hello", email: @user.name) %></p>
 
-<p>
+<p class="email-instructions">
   <%= t ".invited_you_to_join_a_conference", invited_by: @invited_by.name, application: @user.organization.name %>
 </p>
 
-<p>
+<p class="email-button email-button__cta cta-decline">
   <%= link_to t(".decline", conference_title: translated_attribute(@conference.title)),routes.decline_invitation_conference_registration_type_conference_registration_path(conference_slug: @conference.slug, registration_type_id: @registration_type.id) %>
 </p>
-<p>
+<p class="email-button email-button__cta cta-accept">
   <%= link_to t(".registration", conference_title: translated_attribute(@conference.title)),routes.conference_registration_type_conference_registration_url(conference_slug: @conference.slug, registration_type_id: @registration_type.id) %>
 </p>

decidim-conferences/app/views/decidim/conferences/conference_registration_mailer/confirmation.html.erb

@@ -1,11 +1,11 @@
-<p><%= t(".confirmed_html", title: translated_attribute(@conference.title), url: @locator.url) %></p>
+<p class="email-greeting"><%= t(".confirmed_html", title: translated_attribute(@conference.title), url: @locator.url) %></p>
 
-<p><%= t(".details_1", registration_type: translated_attribute(@registration_type.title), price: number_to_currency((@registration_type.price || 0), locale: I18n.locale, unit: Decidim.currency_unit)) %></p>
+<p class="email-instructions"><%= t(".details_1", registration_type: translated_attribute(@registration_type.title), price: number_to_currency((@registration_type.price || 0), locale: I18n.locale, unit: Decidim.currency_unit)) %></p>
 
 <ul>
   <% @registration_type.conference_meetings.order(:start_time).each do |conference_meeting| %>
     <li><%= present(conference_meeting).title %> </li>
   <% end %>
 </ul>
 
-<p><%= t(".details_2") %></p>
+<p class="email-instructions"><%= t(".details_2") %></p>

decidim-conferences/app/views/decidim/conferences/conference_registration_mailer/pending_validation.html.erb

@@ -1,11 +1,11 @@
-<p><%= t(".pending_html", title: translated_attribute(@conference.title), url: @locator.url) %></p>
+<p class="email-greeting"><%= t(".pending_html", title: translated_attribute(@conference.title), url: @locator.url) %></p>
 
-<p><%= t(".details", registration_type: translated_attribute(@registration_type.title), price: number_to_currency((@registration_type.price || 0), locale: I18n.locale, unit: Decidim.currency_unit)) %></p>
+<p class="email-instructions"><%= t(".details", registration_type: translated_attribute(@registration_type.title), price: number_to_currency((@registration_type.price || 0), locale: I18n.locale, unit: Decidim.currency_unit)) %></p>
 
 <ul>
   <% @registration_type.conference_meetings.order(:start_time).each do |conference_meeting| %>
     <li><%= present(conference_meeting).title %> </li>
   <% end %>
 </ul>
 
-<p><%= t(".confirmation_pending") %></p>
+<p class="email-small email-closing"><%= t(".confirmation_pending") %></p>

decidim-conferences/app/views/devise/mailer/join_conference.html.erb

@@ -1,13 +1,13 @@
-<p><%= t("devise.mailer.invitation_instructions.hello", email: @resource.name) %></p>
+<p class="email-greeting"><%= t("devise.mailer.invitation_instructions.hello", email: @resource.name) %></p>
 
-<p>
+<p class="email-instructions">
   <%= t("decidim.conferences.admin.invite_join_conference_mailer.invite.invited_you_to_join_a_conference", invited_by: @resource.invited_by.name, application: @resource.organization.name) %>
 </p>
 
-<p><%= link_to t("devise.mailer.invitation_instructions.accept"), accept_invitation_url(@resource, invitation_token: @token, invite_redirect: Decidim::EngineRouter.main_proxy(@opts[:conference]).conference_conference_registration_path(conference_slug: @opts[:conference]), host: @resource.organization.host) %></p>
+<p class="email-button email-button__cta"><%= link_to t("devise.mailer.invitation_instructions.accept"), accept_invitation_url(@resource, invitation_token: @token, invite_redirect: Decidim::EngineRouter.main_proxy(@opts[:conference]).conference_conference_registration_path(conference_slug: @opts[:conference]), host: @resource.organization.host) %></p>
 
 <% if @resource.invitation_due_at %>
-  <p><%= t("devise.mailer.invitation_instructions.accept_until", due_date: l(@resource.invitation_due_at, format: :long)) %></p>
+  <p class="email-small"><%= t("devise.mailer.invitation_instructions.accept_until", due_date: l(@resource.invitation_due_at, format: :long)) %></p>
 <% end %>
 
-<p><%= t("devise.mailer.invitation_instructions.ignore").html_safe %></p>
+<p class="email-small email-closing"><%= t("devise.mailer.invitation_instructions.ignore").html_safe %></p>

decidim-conferences/spec/mailers/conference_registration_mailer_spec.rb

@@ -29,7 +29,7 @@ module Decidim::Conferences
     describe "confirmation" do
       let(:default_subject) { "Your conference's registration has been confirmed" }
 
-      let(:default_body) { "details in the attachment" }
+      let(:default_body) { "You will find the conference" }
 
       it "expect subject and body" do
         expect(mail.subject).to eq(default_subject)

decidim-core/app/views/decidim/block_user_mailer/notify.html.erb

@@ -1,7 +1,7 @@
-<p><%= t ".hello" %></p>
+<p class="email-greeting"><%= t ".hello" %></p>
 
-<p><%= t ".body_1", organization_name: h(@organization.name) %></p>
+<p class="email-instructions"><%= t ".body_1", organization_name: h(@organization.name) %></p>
 
-<p><%= t ".body_2", justification: h(@justification) %></p>
+<p class="email-instructions"><%= t ".body_2", justification: h(@justification) %></p>
 
-<p><%= t(".greetings", organization_name: h(@organization.name), organization_url: decidim.root_url(host: @organization.host)).html_safe %></p>
+<p class="email-closing"><%= t(".greetings", organization_name: h(@organization.name), organization_url: decidim.root_url(host: @organization.host)).html_safe %></p>

decidim-core/app/views/decidim/export_mailer/data_portability_export.html.erb

@@ -1,2 +1,7 @@
-<%= t(".click_button", password: @password, date: l(Decidim.data_portability_expiry_time.from_now, format: :decidim_short) ).html_safe %><br>
-<%= link_to t(".download"), download_file_data_portability_url(host: @organization.host, filename: @filename), class: "button expanded hollow button--sc" %>
+<p class="email-instructions">
+  <%= t(".click_button", password: @password, date: l(Decidim.data_portability_expiry_time.from_now, format: :decidim_short) ).html_safe %><br>
+</p>
+
+<p class="email-button email-button__cta">
+  <%= link_to t(".download"), download_file_data_portability_url(host: @organization.host, filename: @filename), class: "button expanded hollow button--sc" %>
+</p>

decidim-core/app/views/decidim/export_mailer/export.html.erb

@@ -1 +1,3 @@
-<%= t(".ready") %>
+<p class="email-instructions">
+  <%= t(".ready") %>
+</p>

decidim-core/app/views/decidim/messaging/conversation_mailer/comanagers_new_conversation.html.erb

@@ -1,17 +1,17 @@
-<p><%= t(".greeting", recipient: @recipient.name) %></p>
+<p class="email-greeting"><%= t(".greeting", recipient: @recipient.name) %></p>
 
-<p><%= t(".admin_in_group", group: @sender.name) %></p>
+<p class="email-instructions email-small"><%= t(".admin_in_group", group: @sender.name) %></p>
 
-<p><%= t(".intro", group: @sender.name, manager: @third_party.name) %></p>
+<p class="email-instructions"><%= t(".intro", group: @sender.name, manager: @third_party.name) %></p>
 
 <blockquote>
   <p>
     <em><%= @message %></em>
   </p>
 </blockquote>
 
-<p>
+<p class="email-button email-button__cta">
   <%= link_to decidim.profile_conversation_url(nickname: @sender.nickname, id: @conversation.id, host: @host), decidim.profile_conversation_url(nickname: @sender.nickname, id: @conversation.id, host: @host) %>
 </p>
 
-<p><%= t(".outro") %></p>
+<p class="email-closing"><%= t(".outro") %></p>

decidim-core/app/views/decidim/messaging/conversation_mailer/comanagers_new_message.html.erb

@@ -1,17 +1,17 @@
-<p><%= t(".greeting", recipient: @recipient.name) %></p>
+<p class="email-greeting"><%= t(".greeting", recipient: @recipient.name) %></p>
 
-<p><%= t(".admin_in_group", group: @sender.name) %></p>
+<p class="email-instructions email-small"><%= t(".admin_in_group", group: @sender.name) %></p>
 
-<p><%= t(".intro", group: @sender.name, manager: @third_party.name) %></p>
+<p class="email-instructions"><%= t(".intro", group: @sender.name, manager: @third_party.name) %></p>
 
 <blockquote>
   <p>
     <em><%= @message %></em>
   </p>
 </blockquote>
 
-<p>
+<p class="email-button email-button__cta">
   <%= link_to decidim.profile_conversation_url(nickname: @sender.nickname, id: @conversation.id, host: @host), decidim.profile_conversation_url(nickname: @sender.nickname, id: @conversation.id, host: @host) %>
 </p>
 
-<p><%= t(".outro") %></p>
+<p class="email-closing"><%= t(".outro") %></p>

decidim-core/app/views/decidim/messaging/conversation_mailer/new_conversation.html.erb

@@ -1,15 +1,15 @@
-<p><%= t(".greeting", recipient: @recipient.name) %></p>
+<p class="email-greeting"><%= t(".greeting", recipient: @recipient.name) %></p>
 
-<p><%= t(".intro", sender: @sender.name) %></p>
+<p class="email-instructions"><%= t(".intro", sender: @sender.name) %></p>
 
 <blockquote>
   <p>
     <em><%= @message %></em>
   </p>
 </blockquote>
 
-<p>
+<p class="email-button email-button__cta">
   <%= link_to decidim.conversation_url(@conversation, host: @host), decidim.conversation_url(@conversation, host: @host) %>
 </p>
 
-<p><%= t(".outro") %></p>
+<p class="email-closing"><%= t(".outro") %></p>

decidim-core/app/views/decidim/messaging/conversation_mailer/new_group_conversation.html.erb

@@ -1,17 +1,17 @@
-<p><%= t(".greeting", recipient: @recipient.name) %></p>
+<p class="email-greeting"><%= t(".greeting", recipient: @recipient.name) %></p>
 
-<p><%= t(".admin_in_group", group: @third_party.name) %></p>
+<p class="email-instructions email-small"><%= t(".admin_in_group", group: @third_party.name) %></p>
 
-<p><%= t(".intro", sender: @sender.name, group: @third_party.name) %></p>
+<p class="email-instructions"><%= t(".intro", sender: @sender.name, group: @third_party.name) %></p>
 
 <blockquote>
   <p>
     <em><%= @message %></em>
   </p>
 </blockquote>
 
-<p>
+<p class="email-button email-button__cta">
   <%= link_to decidim.profile_conversation_url(nickname: @third_party.nickname, id: @conversation.id, host: @host), decidim.profile_conversation_url(nickname: @third_party.nickname, id: @conversation.id, host: @host) %>
 </p>
 
-<p><%= t(".outro") %></p>
+<p class="email-closing"><%= t(".outro") %></p>

decidim-core/app/views/decidim/messaging/conversation_mailer/new_group_message.html.erb

@@ -1,17 +1,17 @@
-<p><%= t(".greeting", recipient: @recipient.name) %></p>
+<p class="email-greeting"><%= t(".greeting", recipient: @recipient.name) %></p>
 
-<p><%= t(".admin_in_group", group: @third_party.name) %></p>
+<p class="email-instructions email-small"><%= t(".admin_in_group", group: @third_party.name) %></p>
 
-<p><%= t(".intro", sender: @sender.name, group: @third_party.name) %></p>
+<p class="email-instructions"><%= t(".intro", sender: @sender.name, group: @third_party.name) %></p>
 
 <blockquote>
   <p>
     <em><%= @message %></em>
   </p>
 </blockquote>
 
-<p>
+<p class="email-button email-button__cta">
   <%= link_to decidim.profile_conversation_url(nickname: @third_party.nickname, id: @conversation.id, host: @host), decidim.profile_conversation_url(nickname: @third_party.nickname, id: @conversation.id, host: @host) %>
 </p>
 
-<p><%= t(".outro") %></p>
+<p class="email-closing"><%= t(".outro") %></p>

decidim-core/app/views/decidim/messaging/conversation_mailer/new_message.html.erb

@@ -1,15 +1,15 @@
-<p><%= t(".greeting", recipient: @recipient.name) %></p>
+<p class="email-greeting"><%= t(".greeting", recipient: @recipient.name) %></p>
 
-<p><%= t(".intro", sender: @sender.name) %></p>
+<p class="email-instructions"><%= t(".intro", sender: @sender.name) %></p>
 
 <blockquote>
   <p>
     <em><%= @message %></em>
   </p>
 </blockquote>
 
-<p>
+<p class="email-button email-button__cta">
   <%= link_to decidim.conversation_url(@conversation, host: @host), decidim.conversation_url(@conversation, host: @host) %>
 </p>
 
-<p><%= t(".outro") %></p>
+<p class="email-closing"><%= t(".outro") %></p>

decidim-core/app/views/decidim/newsletters_opt_in_mailer/notify.html.erb

@@ -1,23 +1,23 @@
-<p><%= t ".hello" %></p>
+<p class="email-greeting"><%= t ".hello" %></p>
 
-<p><%= t ".body_1", organization_name: h(@organization.name) %></p>
+<p class="email-instructions"><%= t ".body_1", organization_name: h(@organization.name) %></p>
 
-<p><%= t ".body_2" %></p>
+<p class="email-instructions"><%= t ".body_2" %></p>
 
 <table class="button radius" style="margin: 16px auto;">
   <tr>
     <td>
       <table>
         <tr>
           <td>
-            <%= link_to t(".button"), decidim.newsletters_opt_in_url(token: @token, host: @organization.host), method: "PUT", class: "button",  target: "_blank" %>
+            <%= link_to t(".button"), decidim.newsletters_opt_in_url(token: @token, host: @organization.host), method: "PUT", class: "button email-button email-button__cta",  target: "_blank" %>
           </td>
         </tr>
       </table>
     </td>
   </tr>
 </table>
 
-<p><%= t ".body_3" %></p>
+<p class="email-instructions"><%= t ".body_3" %></p>
 
-<p><%= t(".greetings", organization_name: h(@organization.name), organization_url: decidim.root_url(host: @organization.host)).html_safe %></p>
+<p class="email-closing"><%= t(".greetings", organization_name: h(@organization.name), organization_url: decidim.root_url(host: @organization.host)).html_safe %></p>

decidim-core/app/views/decidim/notification_mailer/event_received.html.erb

@@ -1,6 +1,6 @@
-<p><%= @event_instance.email_greeting %></p>
+<p class="email-greeting"><%= @event_instance.email_greeting %></p>
 
-<p><%= @event_instance.email_intro %></p>
+<p class="email-instructions"><%= @event_instance.email_intro %></p>
 
 <% if @event_instance.try(:safe_resource_text).present? %>
   <blockquote>
@@ -11,9 +11,9 @@
 <% end %>
 
 <% if @event_instance.resource_path.present? && @event_instance.resource_title.present? %>
-  <p>
+  <p class="email-button email-button__cta">
     <%= link_to @event_instance.resource_title, @event_instance.resource_url %>
   </p>
 <% end %>
 
-<p><%= @event_instance.email_outro %></p>
+<p class="email-closing"><%= @event_instance.email_outro %></p>

decidim-core/app/views/decidim/reported_mailer/hide.html.erb

@@ -1,9 +1,9 @@
-<p><%= t(".hello", name: @user.name) %></p>
+<p class="email-greeting"><%= t(".hello", name: @user.name) %></p>
 
-<p>
+<p class="email-instructions">
   <%= t(".report_html", { url: reported_content_url }) %>
 </p>
 
-<p>
+<p class="email-button email-button__cta">
   <%= link_to t(".manage_moderations"), manage_moderations_url %>
 </p>

decidim-core/app/views/decidim/reported_mailer/report.html.erb

@@ -1,6 +1,6 @@
-<p><%= t(".hello", name: @user.name) %></p>
+<p class="email-greeting"><%= t(".hello", name: @user.name) %></p>
 
-<p>
+<p class="email-instructions">
   <%= t(".report_html", { url: reported_content_url }) %>
 </p>
 
@@ -46,7 +46,7 @@
       <table>
         <tr>
           <td>
-            <%= link_to t(".see_report"), report_url, class: "button",  target: "_blank" %>
+            <%= link_to t(".see_report"), report_url, class: "button email-button email-button__cta",  target: "_blank" %>
           </td>
         </tr>
       </table>

decidim-core/app/views/decidim/user_report_mailer/notify.html.erb

@@ -1,7 +1,7 @@
-<p><%= t ".hello", admin: h(@admin.name) %></p>
+<p class="email-greeting"><%= t ".hello", admin: h(@admin.name) %></p>
 
-<p><%= t ".body_1", user: h(@user.name), token: h(@token.name) %></p>
+<p class="email-instructions"><%= t ".body_1", user: h(@user.name), token: h(@token.name) %></p>
 
-<p><%= t ".body_2", reason: h(@reason) %></p>
+<p class="email-instructions"><%= t ".body_2", reason: h(@reason) %></p>
 
-<p><%= t(".greetings", organization_name: h(@organization.name), organization_url: decidim.root_url(host: @organization.host)).html_safe %></p>
+<p class="email-closing"><%= t(".greetings", organization_name: h(@organization.name), organization_url: decidim.root_url(host: @organization.host)).html_safe %></p>

decidim-core/app/views/devise/mailer/confirmation_instructions.html.erb

@@ -1,4 +1,5 @@
-<p><%= t(".greeting", recipient: @resource.email) %></p>
+<p class="email-greeting"><%= t(".greeting", recipient: @resource.email) %></p>
 
-<p><%= t(".instruction") %></p>
-<p><%= link_to t(".action"), confirmation_url(@resource, confirmation_token: @token, host: @resource.organization.host) %></p>
+<p class="email-instructions"><%= t(".instruction") %></p>
+
+<p class="email-button email-button__cta"><%= link_to t(".action"), confirmation_url(@resource, confirmation_token: @token, host: @resource.organization.host) %></p>

decidim-core/app/views/devise/mailer/invitation_instructions.html.erb

@@ -1,13 +1,13 @@
-<p><%= t("devise.mailer.invitation_instructions.hello", email: @resource.name) %></p>
+<p class="email-greeting"><%= t("devise.mailer.invitation_instructions.hello", email: @resource.name) %></p>
 
-<p>
+<p class="email-instructions">
   <%= t("devise.mailer.invitation_instructions.someone_invited_you", application: @resource.organization.name) %>
 </p>
 
-<p><%= link_to t("devise.mailer.invitation_instructions.accept"), accept_invitation_url(@resource, invitation_token: @token, invite_redirect: decidim.root_path, host: @resource.organization.host) %></p>
+<p class="email-button email-button__cta"><%= link_to t("devise.mailer.invitation_instructions.accept"), accept_invitation_url(@resource, invitation_token: @token, invite_redirect: decidim.root_path, host: @resource.organization.host) %></p>
 
 <% if @resource.invitation_due_at %>
-  <p><%= t("devise.mailer.invitation_instructions.accept_until", due_date: l(@resource.invitation_due_at, format: :long)) %></p>
+  <p class="email-small"><%= t("devise.mailer.invitation_instructions.accept_until", due_date: l(@resource.invitation_due_at, format: :long)) %></p>
 <% end %>
 
-<p><%= t("devise.mailer.invitation_instructions.ignore").html_safe %></p>
+<p class="email-small email-closing"><%= t("devise.mailer.invitation_instructions.ignore").html_safe %></p>

decidim-core/app/views/devise/mailer/invite_admin.html.erb

@@ -1,17 +1,17 @@
-<p><%= t("devise.mailer.invitation_instructions.hello", email: @resource.name) %></p>
+<p class="email-greeting"><%= t("devise.mailer.invitation_instructions.hello", email: @resource.name) %></p>
 
-<p>
+<p class="email-instructions">
   <% if @resource.invited_by.present? %>
     <%= t("devise.mailer.invitation_instructions.invited_you_as_admin", invited_by: @resource.invited_by.name, application: @resource.organization.name) %>
   <% else %>
     <%= t("devise.mailer.invitation_instructions.someone_invited_you_as_admin", application: @resource.organization.name) %>
   <% end %>
 </p>
 
-<p><%= link_to t("devise.mailer.invitation_instructions.accept"), accept_invitation_url(@resource, invitation_token: @token, invite_redirect: decidim_admin.root_path, host: @resource.organization.host) %></p>
+<p class="email-button email-button__cta"><%= link_to t("devise.mailer.invitation_instructions.accept"), accept_invitation_url(@resource, invitation_token: @token, invite_redirect: decidim_admin.root_path, host: @resource.organization.host) %></p>
 
 <% if @resource.invitation_due_at %>
-  <p><%= t("devise.mailer.invitation_instructions.accept_until", due_date: l(@resource.invitation_due_at, format: :long)) %></p>
+  <p class="email-small"><%= t("devise.mailer.invitation_instructions.accept_until", due_date: l(@resource.invitation_due_at, format: :long)) %></p>
 <% end %>
 
-<p><%= t("devise.mailer.invitation_instructions.ignore").html_safe %></p>
+<p class="email-small email-closing"><%= t("devise.mailer.invitation_instructions.ignore").html_safe %></p>