decidim-proposals 0.27.7 → 0.28.0.rc4

data/app/views/decidim/proposals/proposals/_edit_form_fields.html.erb

@@ -1,92 +1,53 @@
-<%= form_required_explanation %>
+<%= form.text_field :title, class: "js-hashtags", value: form_presenter.title %>
 
-<div class="field hashtags__container">
-  <%= form.text_field :title, class: "js-hashtags", value: form_presenter.title %>
-</div>
-
-<div class="field hashtags__container">
-  <%= text_editor_for_proposal_body(form) %>
-</div>
+<%= text_editor_for_proposal_body(form) %>
 
 <% if @form.component_automatic_hashtags.any? %>
-  <div class="field">
-    <%= form.label :automatic_hashtags %>
-    <div class="checkboxes hashtags">
-      <% @form.component_automatic_hashtags.each do |hashtag| %>
-        <label>
-          <%= check_box_tag "", "", { checked: true }, { disabled: true } %>#<%= hashtag %>
-        </label>
-      <% end %>
-    </div>
-  </div>
+  <%= field_set_tag form.label(:automatic_hashtags, nil, for: nil) do %>
+    <% @form.component_automatic_hashtags.each do |hashtag| %>
+      <%= form.check_box "", checked: true, disabled: true, label: "##{hashtag}", label_options: { class: "form__wrapper-checkbox-label" } %>
+    <% end %>
+  <% end %>
 <% end %>
 
 <% if @form.component_suggested_hashtags.any? %>
-  <div class="field">
-    <%= form.label :suggested_hashtags, nil, for: nil %>
-    <div class="checkboxes hashtags">
-      <%= form.collection_check_boxes :suggested_hashtags, @form.component_suggested_hashtags.map { |hashtag| [hashtag.downcase, "##{hashtag}"] }, :first, :last do |option|
-        option.label { option.check_box(checked: @form.suggested_hashtag_checked?(option.value)) + option.text }
-      end %>
-    </div>
-  </div>
+  <%= field_set_tag form.label(:suggested_hashtags, nil, for: nil) do %>
+    <%= form.collection_check_boxes :suggested_hashtags, @form.component_suggested_hashtags.map { |hashtag| [hashtag.downcase, "##{hashtag}"] }, :first, :last, { legend_title: "hey ho" } do |option|
+          option.label(class: "form__wrapper-checkbox-label") { option.check_box(checked: @form.suggested_hashtag_checked?(option.value)) + option.text }
+        end %>
+  <% end %>
 <% end %>
 
 <% if @form.geocoding_enabled? %>
-  <div class="field">
-    <%= form.check_box :has_address, checked: form_has_address? %>
-  </div>
+  <%= form.geocoding_field :address, placeholder: t("decidim.proposals.proposals.placeholder.address") %>
 
-  <div class="field" id="address_input">
-    <%= form.geocoding_field :address, placeholder: t("decidim.proposals.proposals.placeholder.address") %>
-    <div class="map" id="address_map">
-      <%= render partial: "dynamic_map_instructions" %>
-      <%= dynamic_map_for proposal_preview_data_for_map(@proposal) %>
-    </div>
+  <div id="address_map" class="proposal__container">
+    <p class="help-text">
+      <%= t("instructions", scope: "decidim.proposals.proposals.dynamic_map_instructions") %> <%= t("description", scope: "decidim.proposals.proposals.dynamic_map_instructions") %>
+    </p>
+    <%= dynamic_map_for proposal_preview_data_for_map(@proposal) %>
   </div>
 <% end %>
 
 <% if @form.categories&.any? %>
-  <div class="field">
-    <%= form.categories_select :category_id, @form.categories, include_blank: t("decidim.proposals.proposals.edit.select_a_category") %>
-  </div>
+  <%= form.categories_select :category_id, @form.categories, include_blank: t("decidim.proposals.proposals.edit.select_a_category") %>
 <% end %>
 
 <% if current_component.has_subscopes? %>
-  <div class="field">
-    <%= scopes_picker_field form, :scope_id, root: current_component.scope %>
-  </div>
-<% end %>
-
-<% if current_organization.user_groups_enabled? && Decidim::UserGroups::ManageableUserGroups.for(current_user).verified.any? %>
-  <div class="field">
-    <%= user_group_select_field form, :user_group_id %>
-  </div>
+  <%= scopes_select_field form, :scope_id, root: current_component.scope %>
 <% end %>
 
 <% if component_settings.attachments_allowed? && @proposal %>
-  <fieldset class="gallery__container photos_container">
-    <legend><%= t("gallery_legend", scope: "decidim.proposals.proposals.edit") %></legend>
-    <div class="row column">
-      <%= form.attachment :photos,
-        multiple: false,
-        label: t("decidim.proposals.proposals.edit.add_image"),
-        button_label: t("decidim.proposals.proposals.edit.add_image"),
-        button_edit_label: t("decidim.proposals.proposals.edit.edit_image"),
-        help_i18n_scope: "decidim.forms.file_help.image",
-        extension_allowlist: Decidim::OrganizationSettings.for(current_organization).upload_allowed_file_extensions_image %>
-    </div>
-  </fieldset>
+  <%= form.attachment :documents,
+                      multiple: true,
+                      label: t("decidim.proposals.proposals.edit.add_documents"),
+                      button_label: t("decidim.proposals.proposals.edit.add_documents"),
+                      button_edit_label: t("decidim.proposals.proposals.edit.edit_documents"),
+                      button_class: "button button__lg button__transparent-secondary w-full",
+                      help_i18n_scope: "decidim.forms.file_help.file",
+                      help_text: t("attachment_legend", scope: "decidim.proposals.proposals.edit") %>
+<% end %>
 
-  <fieldset class="attachments_container gallery__container documents_container">
-    <legend><%= t("attachment_legend", scope: "decidim.proposals.proposals.edit") %></legend>
-    <div class="row column">
-      <%= form.attachment :documents,
-        multiple: true,
-        label: t("decidim.proposals.proposals.edit.add_documents"),
-        button_label: t("decidim.proposals.proposals.edit.add_documents"),
-        button_edit_label: t("decidim.proposals.proposals.edit.edit_documents"),
-        help_i18n_scope: "decidim.forms.file_help.file" %>
-    </div>
-  </fieldset>
+<% if current_organization.user_groups_enabled? && Decidim::UserGroups::ManageableUserGroups.for(current_user).verified.any? %>
+  <%= user_group_select_field form, :user_group_id %>
 <% end %>

data/app/views/decidim/proposals/proposals/_linked_proposals.html.erb

@@ -1,35 +1,3 @@
-<div class="card card--action card--list">
-  <% resources.each do |proposal| %>
-    <div class="card--list__item">
-      <div class="card--list__text">
-        <%= link_to resource_locator(proposal).path do %>
-          <%= icon "proposals", class: "card--list__icon", remove_icon_class: true %>
-        <% end %>
-        <div>
-          <%= link_to resource_locator(proposal).path, class: "card__link" do %>
-            <h5 class="card--list__heading"><%== decidim_html_escape(present(proposal).title) %></h5>
-          <% end %>
-          <% present(proposal) do |proposal| %>
-            <div class="author">
-              <span class="author__avatar">
-                <%= image_tag proposal.author.avatar_url %>
-              </span>
-              <span class="author__name">
-                <strong><%= proposal.author.name %></strong>
-                <%= proposal.author.nickname %>
-              </span>
-            </div>
-          <% end %>
-        </div>
-      </div>
-      <% if !current_settings.try(:votes_hidden?) && !proposal.component.current_settings.votes_hidden? &&
-      proposal.component.current_settings.votes_enabled? %>
-        <div class="card--list__data">
-          <span class="card--list__data__number">
-            <%= proposal.votes.size %>
-          </span> <%= t(".proposal_votes", count: proposal.votes.size) %>
-        </div>
-      <% end %>
-    </div>
-  <% end %>
-</div>
+<% resources.each do |proposal| %>
+  <%= cell "decidim/proposals/proposal_l", proposal, url_extra_params: { included_in: resource.to_gid } %>
+<% end %>

data/app/views/decidim/proposals/proposals/_proposal_aside.html.erb

@@ -0,0 +1,40 @@
+<% if current_settings.votes_enabled? && (show_endorsements_card? || current_user) %>
+<section class="layout-aside__section">
+  <div class="proposal__aside-vote">
+    <%= render partial: "vote_button", locals: { proposal: @proposal, from_proposals_list: false } unless @proposal.withdrawn? %>
+    <%= render partial: "votes_count", locals: { proposal: @proposal, from_proposals_list: false } %>
+  </div>
+</section>
+<% end %>
+
+<% if (@proposal.amendable? && allowed_to?(:edit, :proposal, proposal: @proposal)) || (amendments_enabled? && @proposal.amendable? && current_component.current_settings.amendment_creation_enabled && can_participate_in_private_space?) || amendments_enabled? && can_react_to_emendation?(@proposal) || @proposal.withdrawable_by?(current_user) %>
+<section class="layout-aside__section layout-aside__buttons">
+  <% if @proposal.amendable? && allowed_to?(:edit, :proposal, proposal: @proposal) %>
+    <%= link_to t("edit_proposal", scope: "decidim.proposals.proposals.show"), edit_proposal_path(@proposal), class: "button button__sm button__transparent-secondary w-full" %>
+  <% else %>
+    <%= amend_button_for @proposal %>
+  <% end %>
+
+  <% if amendments_enabled? && can_react_to_emendation?(@proposal) %>
+    <%= emendation_actions_for @proposal %>
+  <% end %>
+
+  <% if @proposal.withdrawable_by?(current_user) %>
+    <%= action_authorized_link_to :withdraw, withdraw_proposal_path(@proposal), method: :put, class: "button button__sm button__transparent-secondary w-full", title: t("withdraw_btn_hint", scope: "decidim.proposals.proposals.show" ), data: { confirm: t("withdraw_confirmation_html", scope: "decidim.proposals.proposals.show" ) } do %>
+      <span><%= t("withdraw_proposal", scope: "decidim.proposals.proposals.show") %></span>
+      <%= icon "pencil-line" %>
+    <% end %>
+  <% end %>
+</section>
+<% end %>
+
+<section class="layout-aside__section">
+  <%= cell "decidim/proposals/proposal_link_to_collaborative_draft", @proposal %>
+  <%= cell "decidim/proposals/proposal_link_to_rejected_emendation", @proposal %>
+</section>
+
+<section class="layout-aside__section actions__secondary">
+  <%= follow_button_for(@proposal) %>
+  <%= cell "decidim/share_button", nil %>
+  <%= cell "decidim/report_button", @proposal %>
+</section>

data/app/views/decidim/proposals/proposals/_proposals.html.erb

@@ -1,46 +1,25 @@
 <% if params.dig("filter", "with_availability").present? && params["filter"]["with_availability"] == "withdrawn" %>
-  <div class="callout warning">
-    <%= t("decidim.proposals.proposals.index.text_banner",
-          go_back_link: link_to(t("decidim.proposals.proposals.index.click_here"), proposals_path("filter[with_availability]" => nil)),
-          ).html_safe %>
-  </div>
+  <%= cell("decidim/announcement", t("decidim.proposals.proposals.index.text_banner",
+                                     go_back_link: link_to(t("decidim.proposals.proposals.index.click_here"), proposals_path("filter[with_availability]" => nil))
+  ).html_safe, callout_class: "warning [&>a]:text-secondary") %>
 <% end %>
 
-<div class="collection-sort-controls row small-up-1 medium-up-3 card-grid">
-  <div class="column">
-    <%= order_selector available_orders, i18n_scope: "decidim.proposals.proposals.orders" %>
-  </div>
+<% if @proposals.empty? %>
+  <%= cell("decidim/announcement", params[:filter].present? ? t(".empty_filters") : t(".empty")) %>
+<% else %>
+  <h2 class="h5 md:h3 decorator"><%= t("count", scope: "decidim.proposals.proposals.index", count: @proposals.total_count) %></h2>
 
-  <div class="column">
-    <%= render partial: "decidim/shared/results_per_page" %>
-  </div>
-</div>
+  <%= order_selector available_orders, i18n_scope: "decidim.proposals.proposals.orders" %>
 
-<div class="row small-up-1 medium-up-2 card-grid">
-  <%= render @proposals %>
-</div>
-
-<div class="row">
-  <div class="columns mediumlarge-8 large-9">
-    <% if @proposals.empty? %>
-      <div class="callout secondary">
-        <% if params[:filter].present? %>
-          <p><%= t(".empty_filters") %></p>
-        <% else %>
-          <p><%= t(".empty") %></p>
-        <% end %>
-      </div>
-    <% end %>
+  <div class="card__list-list">
+    <%= render @proposals %>
   </div>
-</div>
-<%= decidim_paginate @proposals %>
 
-<div class="row">
-  <div class="text-right">
-    <% if params.dig("filter", "with_availability").present? && params["filter"]["with_availability"] == "withdrawn" %>
-      <%= link_to t("decidim.proposals.proposals.index.see_all"), proposals_path("filter[with_availability]" => nil) %>
-    <% else %>
-      <%= link_to t("decidim.proposals.proposals.index.see_all_withdrawn"), proposals_path(filter: { with_availability: "withdrawn", with_any_state: [] }) %>
-    <% end %>
-  </div>
-</div>
+  <%= decidim_paginate @proposals %>
+<% end %>
+
+<% if params.dig("filter", "with_availability").present? && params["filter"]["with_availability"] == "withdrawn" %>
+  <%= link_to t("decidim.proposals.proposals.index.see_all"), proposals_path("filter[with_availability]" => nil), class: "button button__sm button__text-secondary" %>
+<% else %>
+  <%= link_to t("decidim.proposals.proposals.index.see_all_withdrawn"), proposals_path(filter: { with_availability: "withdrawn", with_any_state: [] }), class: "button button__sm button__text-secondary" %>
+<% end %>

data/app/views/decidim/proposals/proposals/_proposals_picker.html.erb

@@ -0,0 +1,5 @@
+<%# NOTE: The pack_tag do not work as expected, when they are INSIDE the cell, therefore, we create a partial to do so %>
+<%= append_stylesheet_pack_tag "decidim_proposals", media: "all" %>
+<%= append_javascript_pack_tag "decidim_proposals" %>
+
+<%= cell "decidim/proposals/proposals_picker", current_component, form:, field: %>

data/app/views/decidim/proposals/proposals/_remaining_votes_count.html.erb

@@ -1,3 +1,3 @@
-<span id="remaining-votes-count" class="extra__suport-number">
-  <%= remaining_votes_count_for(current_user) %>
-</span>
+<div id="remaining-votes-count">
+  <%= t("votes", scope: "decidim.proposals.proposals.voting_rules.vote_limit", number: remaining_votes_count_for(current_user)) %>
+</div>

data/app/views/decidim/proposals/proposals/_vote_button.html.erb

@@ -1,24 +1,24 @@
-<% if proposal.rejected? || proposal.withdrawn? %>
-  <div></div>
-<% else %>
+<% button_classes = "button button__lg button__secondary w-full" %>
+
+<% unless proposal.rejected? || proposal.withdrawn? %>
   <% if component_settings.participatory_texts_enabled? && from_proposals_list %>
-    <%= render partial: "decidim/proposals/proposals/participatory_texts/proposal_vote_button", locals: { proposal: proposal, from_proposals_list: true } %>
+    <%= render partial: "decidim/proposals/proposals/participatory_texts/proposal_vote_button", locals: { proposal:, from_proposals_list: true } %>
   <% else %>
-    <div id="proposal-<%= proposal.id %>-vote-button" class="button--vote-button">
+    <div id="proposal-<%= proposal.id %>-vote-button">
       <% if !current_user %>
         <% if current_settings.votes_blocked? %>
-          <%= action_authorized_button_to :vote, t("decidim.proposals.proposals.vote_button.votes_blocked"), proposal_proposal_vote_path(proposal_id: proposal, from_proposals_list: from_proposals_list), resource: proposal, class: "button #{vote_button_classes(from_proposals_list)} disabled", disabled: true %>
+          <%= action_authorized_button_to :vote, t("decidim.proposals.proposals.vote_button.votes_blocked"), proposal_proposal_vote_path(proposal_id: proposal, from_proposals_list:), resource: proposal, class: button_classes, disabled: true %>
         <% else %>
-          <%= action_authorized_button_to :vote, proposal_proposal_vote_path(proposal_id: proposal, from_proposals_list: from_proposals_list), resource: proposal, class: "button #{vote_button_classes(from_proposals_list)}", data: { disable: true, "redirect-url": proposal_path(proposal) } do %>
+          <%= action_authorized_button_to :vote, proposal_proposal_vote_path(proposal_id: proposal, from_proposals_list:), resource: proposal, class: button_classes, data: { disable: true, "redirect-url": proposal_path(proposal) } do %>
             <%= t("decidim.proposals.proposals.vote_button.vote") %>
-            <span class="show-for-sr"><%= decidim_html_escape(present(proposal).title) %></span>
+            <span class="sr-only"><%= decidim_html_escape(present(proposal).title) %></span>
           <% end %>
         <% end %>
       <% else %>
         <% if @voted_proposals ? @voted_proposals.include?(proposal.id) : proposal.voted_by?(current_user) %>
           <%= action_authorized_button_to(
             :vote,
-            proposal_proposal_vote_path(proposal_id: proposal, from_proposals_list: from_proposals_list),
+            proposal_proposal_vote_path(proposal_id: proposal, from_proposals_list:),
             resource: proposal,
             method: :delete,
             remote: true,
@@ -28,25 +28,24 @@
               replace: t("decidim.proposals.proposals.vote_button.already_voted_hover"),
               "redirect-url": proposal_path(proposal)
             },
-            class: "button #{vote_button_classes(from_proposals_list)} active light",
+            class: "#{button_classes} is-hover",
             id: "vote_button-#{proposal.id}"
           ) do %>
-            <%= icon("check", class: "icon--small") %>
             <%= t("decidim.proposals.proposals.vote_button.already_voted") %>
-            <span class="show-for-sr"><%= decidim_html_escape(present(proposal).title) %></span>
+            <span class="sr-only"><%= decidim_html_escape(present(proposal).title) %></span>
           <% end %>
         <% else %>
           <% if proposal.maximum_votes_reached? && !proposal.can_accumulate_supports_beyond_threshold && current_component.participatory_space.can_participate?(current_user) %>
-            <%= content_tag :button, t("decidim.proposals.proposals.vote_button.maximum_votes_reached"), class: "button #{vote_button_classes(from_proposals_list)} disabled", disabled: true %>
+            <%= content_tag :button, t("decidim.proposals.proposals.vote_button.maximum_votes_reached"), class: button_classes, disabled: true %>
           <% else %>
             <% if vote_limit_enabled? && remaining_votes_count_for(current_user) == 0 %>
-              <%= content_tag :button, t("decidim.proposals.proposals.vote_button.no_votes_remaining"), class: "button #{vote_button_classes(from_proposals_list)}", disabled: true %>
+              <%= content_tag :button, t("decidim.proposals.proposals.vote_button.no_votes_remaining"), class: button_classes, disabled: true %>
             <% elsif current_settings.votes_blocked? || !current_component.participatory_space.can_participate?(current_user) %>
-              <%= content_tag :button, t("decidim.proposals.proposals.vote_button.votes_blocked"), class: "button #{vote_button_classes(from_proposals_list)} disabled", disabled: true %>
+              <%= content_tag :button, t("decidim.proposals.proposals.vote_button.votes_blocked"), class: button_classes, disabled: true %>
             <% else %>
-              <%= action_authorized_button_to :vote, proposal_proposal_vote_path(proposal_id: proposal, from_proposals_list: from_proposals_list), resource: proposal, remote: true, data: { disable: true, "redirect-url": proposal_path(proposal) }, class: "button #{vote_button_classes(from_proposals_list)}" do %>
+              <%= action_authorized_button_to :vote, proposal_proposal_vote_path(proposal_id: proposal, from_proposals_list:), resource: proposal, remote: true, data: { disable: true, "redirect-url": proposal_path(proposal) }, class: button_classes do %>
                 <%= t("decidim.proposals.proposals.vote_button.vote") %>
-                <span class="show-for-sr"><%= decidim_html_escape(present(proposal).title) %></span>
+                <span class="sr-only"><%= decidim_html_escape(present(proposal).title) %></span>
               <% end %>
             <% end %>
           <% end %>

data/app/views/decidim/proposals/proposals/_votes_count.html.erb

@@ -1,18 +1,15 @@
 <% if !current_settings.votes_hidden? && current_component.participatory_space.can_participate?(current_user) %>
   <% if component_settings.participatory_texts_enabled? && from_proposals_list %>
-    <%= render partial: "decidim/proposals/proposals/participatory_texts/proposal_votes_count", locals: { proposal: proposal, from_proposals_list: true } %>
+    <%= render partial: "decidim/proposals/proposals/participatory_texts/proposal_votes_count", locals: { proposal:, from_proposals_list: true } %>
   <% else %>
     <% progress ||= proposal.proposal_votes_count || 0 %>
     <% total ||= proposal.maximum_votes || 0 %>
-    <% subtitle_text = progress >= total ? t("decidim.proposals.proposals.votes_count.most_popular_proposal") : t("decidim.proposals.proposals.votes_count.need_more_votes") %>
     <%= cell(
       "decidim/progress_bar",
       progress,
-      total: total,
+      total:,
       units_name: "decidim.proposals.proposals.votes_count.count",
-      element_id: "proposal-#{proposal.id}-votes-count",
-      subtitle_text: subtitle_text,
-      small: from_proposals_list
+      element_id: "proposal-#{proposal.id}-votes-count"
     ) %>
   <% end %>
 <% end %>

data/app/views/decidim/proposals/proposals/_voting_rules.html.erb

@@ -1,50 +1,37 @@
 <% if show_voting_rules? %>
-  <div class="row column voting-rules">
-    <div class="callout secondary">
-      <div class="row">
-        <div class="columns medium-8 large-9">
-          <h3 class="heading3"><%= t(".title") %></h3>
-          <ul>
-            <% if vote_limit_enabled? %>
-              <li><%= t(".vote_limit.description", limit: component_settings.vote_limit) %></li>
-            <% end %>
+  <% announcement_body = capture do %>
+    <div class="editor-content">
+      <ul>
+        <% if vote_limit_enabled? %>
+          <li><%= t(".vote_limit.description", limit: component_settings.vote_limit) %></li>
+        <% end %>
 
-            <% if proposal_limit_enabled? %>
-              <li><%= t(".proposal_limit.description", limit: proposal_limit) %></li>
-            <% end %>
+        <% if proposal_limit_enabled? %>
+          <li><%= t(".proposal_limit.description", limit: proposal_limit) %></li>
+        <% end %>
 
-            <% if threshold_per_proposal_enabled? %>
-              <li><%= t(".threshold_per_proposal.description", limit: threshold_per_proposal) %></li>
-            <% end %>
+        <% if threshold_per_proposal_enabled? %>
+          <li><%= t(".threshold_per_proposal.description", limit: threshold_per_proposal) %></li>
+        <% end %>
 
-            <% if can_accumulate_supports_beyond_threshold? %>
-              <li><%= t(".can_accumulate_supports_beyond_threshold.description", limit: threshold_per_proposal) %></li>
-            <% end %>
+        <% if can_accumulate_supports_beyond_threshold? %>
+          <li><%= t(".can_accumulate_supports_beyond_threshold.description", limit: threshold_per_proposal) %></li>
+        <% end %>
 
-            <% if minimum_votes_per_user_enabled? %>
-              <li>
-                <%= t(".minimum_votes_per_user.description", votes: minimum_votes_per_user) %>
-                <% if votes_given >= minimum_votes_per_user %>
-                  <%= t(".minimum_votes_per_user.given_enough_votes") %>
-                <% else %>
-                  <%= t(".minimum_votes_per_user.supports_remaining", remaining_votes: minimum_votes_per_user - votes_given) %>
-                <% end %>
-              </li>
+        <% if minimum_votes_per_user_enabled? %>
+          <li>
+            <%= t(".minimum_votes_per_user.description", votes: minimum_votes_per_user) %>
+            <% if votes_given >= minimum_votes_per_user %>
+              <%= t(".minimum_votes_per_user.given_enough_votes") %>
+            <% else %>
+              <%= t(".minimum_votes_per_user.supports_remaining", remaining_votes: minimum_votes_per_user - votes_given) %>
             <% end %>
-          </ul>
-        </div>
-        <% if current_user_can_vote? %>
-          <div class="columns medium-4 large-3">
-            <div class="card card--nomargin text-center remaining-votes-counter">
-              <div class="card__content">
-                <span class="definition-data__title"><%= t(".vote_limit.left", limit: component_settings.vote_limit) %></span>
-                <%= render partial: "decidim/proposals/proposals/remaining_votes_count" %>
-                <span class="extra__suport-text"><%= t(".vote_limit.votes") %></span>
-              </div>
-            </div>
-          </div>
+          </li>
         <% end %>
-      </div>
+      </ul>
+      <%= render partial: "decidim/proposals/proposals/remaining_votes_count" if current_user_can_vote? %>
     </div>
-  </div>
+  <% end %>
+
+  <%= cell("decidim/announcement", { title: t(".title"), body: announcement_body }, id: "voting-rules") %>
 <% end %>

data/app/views/decidim/proposals/proposals/_wizard_header.html.erb

@@ -1,8 +1,17 @@
+<div class="flex justify-center">
+  <h1 class="title-decorator my-12">
+    <%= proposal_wizard_step_title action_name %>
+    <%= "(#{@similar_proposals.count})" if @similar_proposals.present? %>
+  </h1>
+</div>
+
+<%= wizard_steps(@step) %>
+
 <% if @step == :step_4 %>
     <% body_messages = [t("decidim.proposals.proposals.preview.announcement_body")]
-    if component_settings.proposal_edit_time == "limited"
-      body_messages << t("decidim.proposals.proposals.preview.proposal_edit_before_minutes", count: component_settings.proposal_edit_before_minutes)
-    end %>
+       if component_settings.proposal_edit_time == "limited"
+         body_messages << t("decidim.proposals.proposals.preview.proposal_edit_before_minutes", count: component_settings.proposal_edit_before_minutes)
+       end %>
 
   <%= cell(
     "decidim/announcement",
@@ -17,26 +26,11 @@
 <% end %>
 
 <% if proposal_wizard_step_help_text?(@step) %>
-  <div class="proposal_wizard_help_text">
-    <% callout_step_help_text_class ||= nil %>
-    <%= cell(
-      "decidim/announcement",
-      component_settings.try("proposal_wizard_#{@step}_help_text"),
-      callout_class: callout_step_help_text_class
-    ) %>
-  </div>
+  <% callout_step_help_text_class ||= nil %>
+  <%= cell(
+    "decidim/announcement",
+    component_settings.try("proposal_wizard_#{@step}_help_text"),
+    callout_class: callout_step_help_text_class,
+    id: "proposal_wizard_help_text"
+  ) %>
 <% end %>
-
-<h2 class="section-heading">
-  <%= proposal_wizard_step_title action_name %>
-  <%= "(#{@similar_proposals.count})" if @similar_proposals.present? %>
-</h2>
-
-<div class="hide-for-large m-bottom">
-  <div><%= proposal_wizard_steps_title %></div>
-  <div><%= proposal_wizard_current_step_of(@step) %></div>
-
-  <div id="steps" class="wizard__steps steps-toggle is-hidden" data-toggler=".is-hidden">
-    <%= proposal_wizard_stepper(@step) %>
-  </div>
-</div>

data/app/views/decidim/proposals/proposals/compare.html.erb

@@ -1,23 +1,24 @@
 <% add_decidim_page_title(proposal_wizard_step_title(action_name)) %>
 
-<div class="row">
-  <%= render partial: "wizard_aside" %>
+<% append_stylesheet_pack_tag "decidim_proposals", media: "all" %>
+<% append_javascript_pack_tag "decidim_proposals" %>
 
-  <div class="columns large-6">
-    <%= render partial: "wizard_header", locals: { callout_step_help_text_class: "warning" } %>
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
 
-    <% if @similar_proposals.presence %>
-      <div class="row small-up-1 card-grid">
-        <% @similar_proposals.each do |proposal| %>
-          <%= render partial: "proposal_similar", locals: { proposal: proposal } %>
-        <% end %>
-      </div>
-    <% end %>
+  <%= render partial: "wizard_header", locals: { callout_step_help_text_class: "warning" } %>
 
-    <div class="row column text-center">
-      <%= link_to t(".continue"), complete_proposal_path(@proposal), class: "button small" %>
+  <% if @similar_proposals.present? %>
+    <div class="proposal__container my-10">
+      <% @similar_proposals.each do |proposal| %>
+        <%= card_for @proposal %>
+      <% end %>
     </div>
-  </div>
+  <% end %>
 
-  <div class="columns large-3"></div>
-</div>
+  <div class="form__wrapper-block flex-col-reverse md:flex-row justify-between">
+    <%= link_to complete_proposal_path(@proposal), class: "button button__sm md:button__lg button__secondary ml-auto" do %>
+      <span><%= t("continue", scope: "decidim.proposals.proposals.compare") %></span>
+      <%= icon "arrow-right-line" %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/decidim/proposals/proposals/complete.html.erb

@@ -1,26 +1,31 @@
 <% add_decidim_page_title(proposal_wizard_step_title(action_name)) %>
 
-<div class="row">
-  <%= render partial: "wizard_aside" %>
-
-  <div class="columns large-6">
-    <%= render partial: "wizard_header" %>
-
-    <div class="card">
-      <div class="card__content">
-        <%= decidim_form_for(@form, url: update_draft_proposal_path(@proposal), method: :patch) do |form| %>
-          <%= render partial: "edit_form_fields", locals: { form: form } %>
-
-          <div class="actions">
-            <%= form.submit t(".send"), class: "button expanded mt-s mb-none", data: { disable: true } %>
-          </div>
-        <% end %>
-      </div>
+<%= append_stylesheet_pack_tag "decidim_proposals", media: "all" %>
+<%= append_javascript_pack_tag "decidim_proposals" %>
+
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
+
+  <%= render partial: "wizard_header" %>
+
+  <%= decidim_form_for(@form, url: update_draft_proposal_path(@proposal), method: :patch) do |form| %>
+
+    <%= form_required_explanation %>
+
+    <div class="form__wrapper">
+      <%= render partial: "edit_form_fields", locals: { form: } %>
+    </div>
+
+    <div class="form__wrapper-block flex-col-reverse md:flex-row justify-between">
+      <%= link_to proposal_wizard_aside_link_to_back(@step), class: "button button__sm md:button__lg button__text-secondary" do %>
+        <%= icon "arrow-left-line" %>
+        <%= wizard_aside_back_text(@step) %>
+      <% end %>
+
+      <button type="submit" class="button button__sm md:button__lg button__secondary">
+        <span><%= t("send", scope: "decidim.proposals.proposals.complete") %></span>
+        <%= icon "arrow-right-line" %>
+      </button>
     </div>
-  </div>
-  <div class="columns large-3"></div>
-</div>
+  <% end %>
 
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_proposals" %>
 <% end %>