Redesign: fix size of headings in mobile (decidim#11563)

* Extract CSS classes to its own class

* Fix size of heading in mobile

* Fix CSS selector for title in spec

* Replace CSS classes with `title-decorator` class

Suggested by code review

Co-authored-by: Alexandru Emil Lupu <[email protected]>

* Replace CSS classes with title-decorator class (part II)

* Fix CSS class

Suggested by code review

---------

Co-authored-by: Fran Bolívar <[email protected]>
Co-authored-by: Alexandru Emil Lupu <[email protected]>

decidim-accountability/app/views/decidim/accountability/results/_projects_aside.html.erb

@@ -1,7 +1,7 @@
 <% if local_assigns[:main_action] %>
-  <h1 class="h3 md:h1 decorator"><%= component_name %></h1>
+  <h1 class="title-decorator"><%= component_name %></h1>
 <% else %>
-  <h2 class="h3 md:h1 decorator"><%= component_name %></h2>
+  <h2 class="title-decorator"><%= component_name %></h2>
 <% end %>
 
 <div class="accountability__status-container">

decidim-accountability/app/views/decidim/accountability/results/home.html.erb

@@ -2,7 +2,7 @@
 <%= append_stylesheet_pack_tag "decidim_accountability" %>
 
 <% content_for :aside do %>
-  <h1 class="h3 md:h1 decorator"><%= component_name %></h1>
+  <h1 class="title-decorator"><%= component_name %></h1>
 
   <% if component_settings.display_progress_enabled? %>
     <%= cell(

decidim-assemblies/app/views/decidim/assemblies/assemblies/index.html.erb

@@ -12,7 +12,7 @@ edit_link(
 <%= append_javascript_pack_tag "decidim_assemblies" %>
 
 <% content_for :aside do %>
-  <h1 class="h3 md:h1 decorator"><%= t("decidim.menu.assemblies") %></h1>
+  <h1 class="title-decorator"><%= t("decidim.menu.assemblies") %></h1>
 
   <%= render partial: "decidim/shared/filters", locals: { filter_sections:, skip_to_id: "assemblies-grid" } %>
 <% end %>

decidim-blogs/app/views/decidim/blogs/posts/index.html.erb

@@ -2,7 +2,7 @@
 <%= append_stylesheet_pack_tag "decidim_blogs" %>
 
 <% content_for :aside do %>
-  <h1 class="h3 md:h1 decorator"><%= component_name %></h1>
+  <h1 class="title-decorator"><%= component_name %></h1>
 <% end %>
 
 <%= render layout: "layouts/decidim/shared/layout_two_col" do %>

decidim-blogs/app/views/decidim/blogs/posts/show.html.erb

@@ -21,7 +21,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center", locals: { columns: 8 } do %>
 
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12"><%= translated_attribute post.title %></h1>
+    <h1 class="title-decorator my-12"><%= translated_attribute post.title %></h1>
   </div>
 
   <% if post.photo.present? %>

decidim-budgets/app/views/decidim/budgets/budgets/index.html.erb

@@ -2,7 +2,7 @@
 <%= append_stylesheet_pack_tag "decidim_budgets", media: "all" %>
 
 <% content_for :aside do %>
-  <h1 class="h3 md:h1 decorator"><%= component_name %></h1>
+  <h1 class="title-decorator"><%= component_name %></h1>
 <% end %>
 
 <%= render layout: "layouts/decidim/shared/layout_two_col" do %>

decidim-conferences/app/views/decidim/conferences/conference_program/show.html.erb

@@ -13,7 +13,7 @@ end
 
 <%# NOTE: this page does not use a regular layout %>
 <main class="container">
-  <h1 class="h3 md:h1 decorator my-12">
+  <h1 class="title-decorator my-12">
     <span class="not-sr-only"><%= t(".program") %></span>
     <span class="sr-only"><%= t(".program") %> (<%= translated_attribute current_participatory_space.title %>)</span>
   </h1>

decidim-conferences/app/views/decidim/conferences/conference_speakers/index.html.erb

@@ -13,7 +13,7 @@ edit_link(
 <main class="container">
 
   <section id="conference_speakers-grid">
-    <h1 class="h3 md:h1 decorator my-12">
+    <h1 class="title-decorator my-12">
       <span class="not-sr-only"><%= t("decidim.conferences.conference_speakers.index.speakers", count: "") %></span>
       <span class="sr-only"><%= t("decidim.conferences.conference_speakers.index.speakers", count: "") %> (<%= translated_attribute current_participatory_space.title %>)</span>
     </h1>

decidim-conferences/app/views/decidim/conferences/conferences/index.html.erb

@@ -9,7 +9,7 @@ edit_link(
 %>
 
 <% content_for :aside do %>
-  <h1 class="h3 md:h1 decorator"><%= t("decidim.conferences.index.title") %></h1>
+  <h1 class="title-decorator"><%= t("decidim.conferences.index.title") %></h1>
 <% end %>
 
 <%= render layout:"layouts/decidim/shared/layout_two_col" do %>

decidim-conferences/app/views/decidim/conferences/media/index.html.erb

@@ -11,7 +11,7 @@ edit_link(
 
 <%# NOTE: this page does not use a regular layout %>
 <main class="container">
-  <h1 class="h3 md:h1 decorator my-12">
+  <h1 class="title-decorator my-12">
     <span class="not-sr-only"><%= t("media", scope: "layouts.decidim.conferences_nav") %></span>
     <span class="sr-only"><%= t("media", scope: "layouts.decidim.conferences_nav") %> (<%= translated_attribute current_participatory_space.title %>)</span>
   </h1>

decidim-conferences/app/views/decidim/conferences/registration_types/index.html.erb

@@ -16,7 +16,7 @@ edit_link(
 <main class="container">
 
   <section class="section">
-    <h1 class="h3 md:h1 decorator my-12">
+    <h1 class="title-decorator my-12">
       <span class="not-sr-only"><%= t("registration_types.index.register", scope: "decidim.conferences") %></span>
       <span class="sr-only"><%= t("registration_types.index.register", scope: "decidim.conferences") %> (<%= translated_attribute current_participatory_space.title %>)</span>
     </h1>

decidim-core/app/cells/decidim/content_blocks/footer_sub_hero/show.erb

@@ -1,6 +1,6 @@
 <section id="footer_sub_hero" class="home__section text-center">
   <div class="flex justify-center mb-12">
-    <h2 class="h3 md:h1 decorator">
+    <h2 class="title-decorator">
       <%= t("decidim.pages.home.footer_sub_hero.footer_sub_hero_headline", organization: current_organization.name) %>
     </h2>
   </div>

decidim-core/app/packs/stylesheets/decidim/_redesigned_typography.scss

@@ -26,6 +26,10 @@
   @apply relative after:absolute after:content-[''] after:h-1 after:w-10 after:top-[calc(100%+0.25rem)] after:left-0 after:bg-tertiary after:rounded-b;
 }
 
+.title-decorator {
+  @apply h2 md:h1 decorator;
+}
+
 /* default styles for those dynamic text blocks */
 .editor-content {
   @apply prose max-w-full text-gray-2 text-lg prose-a:text-secondary break-words prose-ul:pl-4;

decidim-core/app/views/decidim/amendments/_wizard_header.html.erb

@@ -1,5 +1,5 @@
 <div class="flex justify-center">
-  <h1 class="h3 md:h1 decorator my-12">
+  <h1 class="title-decorator my-12">
     <%= wizard_header_title %>
     <%= "(#{similar_resources_count})" if local_assigns[:similar_resources_count] %>
   </h1>

decidim-core/app/views/decidim/amendments/review.html.erb

@@ -1,7 +1,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12">
+    <h1 class="title-decorator my-12">
       <%= t("heading", scope: "decidim.amendments.review") %>
     </h1>
   </div>

decidim-core/app/views/decidim/devise/confirmations/new.html.erb

@@ -3,7 +3,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12"><%= t("devise.confirmations.new.resend_confirmation_instructions") %></h1>
+    <h1 class="title-decorator my-12"><%= t("devise.confirmations.new.resend_confirmation_instructions") %></h1>
   </div>
 
   <%= decidim_form_for(resource, namespace: "confirmation", as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>

decidim-core/app/views/decidim/devise/invitations/edit.html.erb

@@ -1,7 +1,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
   <div class="text-center py-12">
-    <h1 class="h3 md:h1 decorator inline-block text-left mb-12"><%= t "devise.invitations.edit.header" %></h1>
+    <h1 class="title-decorator inline-block text-left mb-12"><%= t "devise.invitations.edit.header" %></h1>
 
     <p class="text-lg text-gray-2">
       <%= t("devise.invitations.edit.subtitle").html_safe %>

decidim-core/app/views/decidim/devise/omniauth_registrations/new.html.erb

@@ -1,6 +1,6 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12"><%= t("decidim.devise.omniauth_registrations.new.sign_up") %></h1>
+    <h1 class="title-decorator my-12"><%= t("decidim.devise.omniauth_registrations.new.sign_up") %></h1>
   </div>
 
   <div class="text-lg text-gray-2">

decidim-core/app/views/decidim/devise/passwords/edit.html.erb

@@ -1,7 +1,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12"><%= t("devise.passwords.edit.title") %></h1>
+    <h1 class="title-decorator my-12"><%= t("devise.passwords.edit.title") %></h1>
   </div>
 
   <%= decidim_form_for(resource, namespace: "password", as: resource_name, url: @send_path || password_path(resource_name), html: { method: :put, class: "register-form new_user" }) do |f| %>

decidim-core/app/views/decidim/devise/passwords/new.html.erb

@@ -3,7 +3,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12"><%= t("devise.passwords.new.forgot_your_password") %></h1>
+    <h1 class="title-decorator my-12"><%= t("devise.passwords.new.forgot_your_password") %></h1>
   </div>
 
   <%= decidim_form_for(resource, namespace: "password", as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>

decidim-core/app/views/decidim/devise/registrations/new.html.erb

@@ -6,7 +6,7 @@
 
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12"><%= t("decidim.devise.registrations.new.sign_up") %></h1>
+    <h1 class="title-decorator my-12"><%= t("decidim.devise.registrations.new.sign_up") %></h1>
   </div>
 
   <div class="login__info">

decidim-core/app/views/decidim/devise/sessions/new.html.erb

@@ -3,7 +3,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12"><%= t("devise.sessions.new.log_in") %></h1>
+    <h1 class="title-decorator my-12"><%= t("devise.sessions.new.log_in") %></h1>
   </div>
 
   <div class="login__info font-semibold">

decidim-core/app/views/decidim/devise/unlocks/new.html.erb

@@ -3,7 +3,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12"><%= t("devise.unlocks.new.resend_unlock_instructions") %></h1>
+    <h1 class="title-decorator my-12"><%= t("devise.unlocks.new.resend_unlock_instructions") %></h1>
   </div>
 
   <%= decidim_form_for(resource, namespace: "unlock", as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>

decidim-core/app/views/decidim/doorkeeper/authorizations/new.html.erb

@@ -1,6 +1,6 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12">
+    <h1 class="title-decorator my-12">
       <%= t("wants_to_use_your_account_html", scope: "decidim.doorkeeper.authorizations.new", application_name: oauth_application.name) %>
       <%= t("by_organization_link_html", scope: "decidim.doorkeeper.authorizations.new", link: link_to(oauth_application.organization_name, oauth_application.organization_url)) %>
     </h1>

decidim-core/app/views/decidim/errors/internal_server_error.html.erb

@@ -2,7 +2,7 @@
 
   <div class="place-self-center">
     <div class="flex justify-center">
-      <h1 class="h3 md:h1 decorator my-12"><%= t("title", scope: "decidim.errors.internal_server_error") %></h1>
+      <h1 class="title-decorator my-12"><%= t("title", scope: "decidim.errors.internal_server_error") %></h1>
     </div>
 
     <div class="text-center space-y-8">

decidim-core/app/views/decidim/errors/not_found.html.erb

@@ -2,7 +2,7 @@
 
   <div class="place-self-center">
     <div class="flex justify-center">
-      <h1 class="h3 md:h1 decorator my-12"><%= t("title", scope: "decidim.errors.not_found") %></h1>
+      <h1 class="title-decorator my-12"><%= t("title", scope: "decidim.errors.not_found") %></h1>
     </div>
 
     <div class="text-center space-y-8">

decidim-core/app/views/decidim/group_invites/index.html.erb

@@ -2,7 +2,7 @@
 
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
   <div class="text-center py-10">
-    <h1 class="h3 md:h1 decorator inline-block text-left mb-12">
+    <h1 class="title-decorator inline-block text-left mb-12">
       <%= t("invite_user", scope: "decidim.group_invites.index") %>
     </h1>
   </div>

decidim-core/app/views/decidim/groups/edit.html.erb

@@ -2,7 +2,7 @@
 
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
   <div class="text-center py-10">
-    <h1 class="h3 md:h1 decorator inline-block text-left mb-12">
+    <h1 class="title-decorator inline-block text-left mb-12">
       <%= t("edit_user_group", scope: "decidim.groups.edit") %>
     </h1>
   </div>

decidim-core/app/views/decidim/groups/new.html.erb

@@ -2,7 +2,7 @@
 
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
   <div class="text-center py-10">
-    <h1 class="h3 md:h1 decorator inline-block text-left mb-12">
+    <h1 class="title-decorator inline-block text-left mb-12">
       <%= t("new_user_group", scope: "decidim.groups.new") %>
     </h1>
 

decidim-core/app/views/decidim/last_activities/index.html.erb

@@ -2,7 +2,7 @@
 
 <%# NOTE: this page does not use a regular layout %>
 <main class="container">
-  <h1 class="h3 md:h1 decorator my-12"><%= t("last_activity", scope: "decidim.last_activities.index") %></h1>
+  <h1 class="title-decorator my-12"><%= t("last_activity", scope: "decidim.last_activities.index") %></h1>
 
   <div class="profile__activity pb-16">
     <%= cell "decidim/resource_types_filter", resource_types, form_path: last_activities_path, filter_param_key: :with_resource_type, filter: %>

decidim-core/app/views/decidim/links/new.html.erb

@@ -1,7 +1,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12"><%= t("decidim.links.warning.title") %></h1>
+    <h1 class="title-decorator my-12"><%= t("decidim.links.warning.title") %></h1>
   </div>
 
   <p><%= t("body_1", scope: "decidim.links.warning") %></p>

decidim-core/app/views/decidim/messaging/conversations/_show.html.erb

@@ -2,7 +2,7 @@
 
 <% content_for :aside do %>
   <div class="conversation__aside">
-    <h1 class="h3 md:h1 decorator">
+    <h1 class="title-decorator">
       <%= t("decidim.messaging.conversations.index.title") %>
     </h1>
 

decidim-core/app/views/decidim/messaging/conversations/index.html.erb

@@ -2,7 +2,7 @@
 
 <% content_for :aside do %>
   <div class="conversation__aside">
-    <h1 class="h3 md:h1 decorator">
+    <h1 class="title-decorator">
       <%= t("decidim.messaging.conversations.index.title") %>
     </h1>
     <%= render partial: "new_conversation_button" %>

decidim-core/app/views/decidim/notifications/index.html.erb

@@ -1,7 +1,7 @@
 <% add_decidim_page_title(t("notifications", scope: "layouts.decidim.user_menu")) %>
 
 <% content_for :aside do %>
-  <h1 class="h3 md:h1 decorator"><%= t("notifications", scope: "layouts.decidim.user_menu") %></h1>
+  <h1 class="title-decorator"><%= t("notifications", scope: "layouts.decidim.user_menu") %></h1>
 
   <% if current_user.notifications.exists? %>
     <%= link_to read_all_notifications_path, class: "button button__sm md:button__lg button__secondary w-full md:w-fit", method: :delete, data: { disable: true, "notification-read-all": "" }, remote: true do %>

decidim-core/app/views/decidim/pages/_tabbed.html.erb

@@ -1,7 +1,7 @@
 <%# NOTE: the structure of this file is the same as: decidim-core/app/views/layouts/decidim/shared/_layout_user_profile.html.erb %>
 <%= render layout:"layouts/decidim/shared/layout_center", locals: { columns: 10 } do %>
   <header class="text-center py-10">
-    <h1 class="h3 md:h1 decorator inline-block text-left mb-12">
+    <h1 class="title-decorator inline-block text-left mb-12">
       <%= title %>
     </h1>
     <p class="text-lg text-gray-2">

decidim-core/app/views/decidim/pages/index.html.erb

@@ -10,7 +10,7 @@ edit_link(
 <%= render layout:"layouts/decidim/shared/layout_center", locals: { columns: 8 } do %>
 
   <div class="text-center py-10">
-    <h1 class="h3 md:h1 decorator inline-block text-left mb-12">
+    <h1 class="title-decorator inline-block text-left mb-12">
       <%= t "decidim.pages.index.title" %>
     </h1>
     <p class="text-lg text-gray-2">

decidim-core/app/views/layouts/decidim/shared/_layout_user_profile.html.erb

@@ -2,7 +2,7 @@
 
 <%= render layout: "layouts/decidim/shared/layout_center", locals: { columns: 10 } do %>
   <header class="text-center py-10">
-    <h1 class="h3 md:h1 decorator inline-block text-left md:mb-12">
+    <h1 class="title-decorator inline-block text-left md:mb-12">
       <%= t("title", scope: "layouts.decidim.user_profile") %>
       <%= " - #{subtitle}" if subtitle.present? %>
     </h1>

decidim-core/spec/system/user_redirect_spec.rb

@@ -24,7 +24,7 @@
       end
 
       it "redirects the user to the page attempted to access before login" do
-        expect(page).to have_css("h1.h3", text: "Help")
+        expect(page).to have_css("h1.title-decorator", text: "Help")
       end
     end
   end

decidim-debates/app/views/decidim/debates/debates/edit.html.erb

@@ -1,6 +1,6 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
   <div class="text-center py-10">
-    <h1 class="h3 md:h1 decorator inline-block text-left">
+    <h1 class="title-decorator inline-block text-left">
       <%= t("title", scope: "decidim.debates.debates.edit") %>
     </h1>
   </div>

decidim-debates/app/views/decidim/debates/debates/index.html.erb

@@ -1,5 +1,5 @@
 <% content_for :aside do %>
-  <h1 class="h3 md:h1 decorator"><%= component_name %></h1>
+  <h1 class="title-decorator"><%= component_name %></h1>
 
   <% if current_settings.creation_enabled? && current_component.participatory_space.can_participate?(current_user) %>
     <%= action_authorized_link_to :create, new_debate_path, class: "button button__xl button__secondary w-full", data: { "redirect_url" => new_debate_path } do %>

decidim-debates/app/views/decidim/debates/debates/new.html.erb

@@ -1,6 +1,6 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
   <div class="text-center py-10">
-    <h1 class="h3 md:h1 decorator inline-block text-left">
+    <h1 class="title-decorator inline-block text-left">
       <%= t("title", scope: "decidim.debates.debates.new") %>
     </h1>
   </div>

decidim-elections/app/views/decidim/elections/elections/election_log.html.erb

@@ -4,7 +4,7 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
   <div class="text-center py-10">
-    <h1 class="h3 md:h1 decorator inline-block text-left mb-12">
+    <h1 class="title-decorator inline-block text-left mb-12">
       <%= t("decidim.elections.elections.election_log.title") %>
     </h1>
 

decidim-elections/app/views/decidim/elections/elections/index.html.erb

@@ -4,7 +4,7 @@
 <%= append_stylesheet_pack_tag "decidim_elections" %>
 
 <% content_for :aside do %>
-  <h1 class="h3 md:h1 decorator"><%= component_name %></h1>
+  <h1 class="title-decorator"><%= component_name %></h1>
 
   <%= render layout: "decidim/shared/filters", locals: { filter_sections: , search_variable: :search_text_cont, skip_to_id: "elections" } do %>
     <%= hidden_field_tag :order, order, id: nil, class: "order_filter" %>

decidim-elections/app/views/decidim/elections/votes/_show_casted.html.erb

@@ -1,5 +1,5 @@
 <div class="flex justify-center">
-  <h1 class="h3 md:h1 decorator my-12">
+  <h1 class="title-decorator my-12">
     <%= t("decidim.elections.votes.confirmed.header") %>
   </h1>
 </div>

decidim-elections/app/views/decidim/elections/votes/_show_casting.html.erb

@@ -3,7 +3,7 @@
   data-message-id="<%= vote.message_id %>">
 
   <div class="flex justify-center">
-    <h1 class="h3 md:h1 decorator my-12">
+    <h1 class="title-decorator my-12">
       <%= t("decidim.elections.votes.casting.header") %>
     </h1>
   </div>