decidim-elections 0.27.5 → 0.28.0.rc4

data/app/views/decidim/votings/census/admin/census/_export_codes.html.erb

@@ -2,7 +2,7 @@
   <%= cell("decidim/announcement", t("export_access_codes.callout", scope: "decidim.votings.census.admin.census", email: user_email), callout_class: "warning" ) %>
 
   <%= link_to t("export_access_codes.button", scope: "decidim.votings.census.admin.census"),
-                    export_access_codes_path,
-                    class: "button",
-                    data: { confirm: t("export_access_codes.confirm", scope: "decidim.votings.census.admin.census", email: user_email) } %>
+              export_access_codes_path,
+              class: "button button__sm button__secondary",
+              data: { confirm: t("export_access_codes.confirm", scope: "decidim.votings.census.admin.census", email: user_email) } %>
 </div>

data/app/views/decidim/votings/census/admin/census/_generate_codes.html.erb

@@ -15,21 +15,21 @@
 <% end %>
 
 <div class="card-section">
-  <%= cell("decidim/announcement", info_message, callout_class: callout_class ) %>
+  <%= cell("decidim/announcement", info_message, callout_class: ) %>
 
   <% if current_census.data.size.zero? %>
     <%= cell("decidim/announcement", t("generate_access_codes.start_over", scope: "decidim.votings.census.admin.census"), callout_class: "warning" ) %>
       <%= link_to t("delete.button", scope: "decidim.votings.census.admin.census"),
-                admin_voting_census_path,
-                class: "button alert destroy",
-                method: :delete,
-                data: { confirm: t("delete.confirm", scope: "decidim.votings.census.admin.census") } %>
+                  admin_voting_census_path,
+                  class: "button button__sm button__secondary alert destroy",
+                  method: :delete,
+                  data: { confirm: t("delete.confirm", scope: "decidim.votings.census.admin.census") } %>
 
   <% else %>
     <%= cell("decidim/announcement", t("generate_access_codes.callout", scope: "decidim.votings.census.admin.census"), callout_class: "warning" ) %>
     <%= link_to t("generate_access_codes.button", scope: "decidim.votings.census.admin.census"),
-                    generate_access_codes_path,
-                    class: "button",
-                    data: { confirm: t("generate_access_codes.confirm", scope: "decidim.votings.census.admin.census") } %>
+                generate_access_codes_path,
+                class: "button button__sm button__secondary",
+                data: { confirm: t("generate_access_codes.confirm", scope: "decidim.votings.census.admin.census") } %>
   <% end %>
 </div>

data/app/views/decidim/votings/census/admin/census/_new_census.html.erb

@@ -1,4 +1,4 @@
-<div class="card-section">
+<div class="card-section p-4">
   <%= cell("decidim/announcement", t("info_message", scope: "decidim.votings.census.admin.census.new"), callout_class: "warning") %>
   <%= cell("decidim/announcement", ballot_style_callout_text, callout_class: ballot_style_callout_level) %>
 
@@ -6,16 +6,17 @@
     <div class="card-section">
       <h4><%= t("title", scope: "decidim.votings.census.admin.census.new") %></h4>
 
-      <%= render "upload_info", ballot_style_code_header: ballot_style_code_header %>
+      <%= render "upload_info", ballot_style_code_header: %>
 
       <%= decidim_form_for(@form, url: admin_voting_census_path,
-                            method: :post,
-                            html: { class: "form new_census" }) do |form| %>
+                                  method: :post,
+                                  html: { class: "form form-defaults new_census" }) do |form| %>
         <div class="field">
-          <%= form.upload :file, required: true, help_i18n_scope: "decidim.votings.census.admin.census.new.file_help" %>
+          <%= form.upload :file, help_i18n_scope: "decidim.votings.census.admin.census.new.file_help", button_class: "button button__sm button__transparent-secondary" %>
+        </div>
+        <div class="form__wrapper-block flex-col-reverse md:flex-row justify-between">
+          <%= submit_tag t("submit", scope: "decidim.votings.census.admin.census.new"), class: "button button__sm button__secondary" %>
         </div>
-
-        <%= submit_tag t("submit", scope: "decidim.votings.census.admin.census.new"), class: "button" %>
       <% end %>
     </div>
   </div>

data/app/views/decidim/votings/census/admin/census/_upload_info.html.erb

@@ -2,16 +2,16 @@
 
 <pre class="code-block"><%= "Document ID;Document Type;Date of Birth;Full name;Full address;Postal Code;Mobile phone number;Email address;#{ballot_style_code_header}" %></pre>
 
-<%= content_tag :p, t("upload_info.csv_header_after", scope: "decidim.votings.census.admin.census", ballot_style_code_header: ballot_style_code_header) %>
+<%= content_tag :p, t("upload_info.csv_header_after", scope: "decidim.votings.census.admin.census", ballot_style_code_header:) %>
 
 <%= content_tag :p, sanitize(t("upload_info.csv_example_with_ballot_style", scope: "decidim.votings.census.admin.census")) %>
   <pre class="code-block"><%= "Document ID;Document Type;Date of Birth;Full name;Full address;Postal Code;Mobile phone number;Email address;#{ballot_style_code_header}
-12345678X;DNI;20011130;John Doe;The full address;08001;123456789;user@example.org;DISTRICT1
-87654321X;DNI;20010808;Alice Doe;The full address;08002;987654321;user2@example.org;DISTRICT2" %>
+12345678X;passport;20011130;John Doe;The full address;08001;123456789;user@example.org;DISTRICT1
+87654321X;passport;20010808;Alice Doe;The full address;08002;987654321;user2@example.org;DISTRICT2" %>
 ...</pre>
 
 <%= content_tag :p, sanitize(t("upload_info.csv_example_without_ballot_style", scope: "decidim.votings.census.admin.census")) %>
   <pre class="code-block">Document ID;Document Type;Date of Birth;Full name;Full address;Postal Code;Mobile phone number;Email address
-12345678X;DNI;20011130;John Doe;The full address;08001;123456789;user@example.org
-87654321X;DNI;20010808;Alice Doe;The full address;08002;987654321;user2@example.org
+12345678X;passport;20011130;John Doe;The full address;08001;123456789;user@example.org
+87654321X;passport;20010808;Alice Doe;The full address;08002;987654321;user2@example.org
 ...</pre>

data/app/views/decidim/votings/census/admin/census/show.html.erb

@@ -1,15 +1,15 @@
 <% add_decidim_page_title(t("show.heading", scope: "decidim.votings.census.admin.census")) %>
 <div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
+  <div class="item_show__header">
+    <h2 class="item_show__header-title">
       <%= t("show.heading", scope: "decidim.votings.census.admin.census") %>
 
       <% if current_census.data_created? %>
         <%= link_to t("delete.button", scope: "decidim.votings.census.admin.census"),
-                  admin_voting_census_path,
-                  class: "button alert hollow tiny button--title destroy",
-                  method: :delete,
-                  data: { confirm: t("delete.confirm", scope: "decidim.votings.census.admin.census") } %>
+                    admin_voting_census_path,
+                    class: "button button__sm button__secondary alert hollow tiny button--title destroy",
+                    method: :delete,
+                    data: { confirm: t("delete.confirm", scope: "decidim.votings.census.admin.census") } %>
       <% end %>
     </h2>
   </div>
@@ -20,5 +20,5 @@
 </div>
 
 <% if waiting_status? %>
-  <%= javascript_pack_tag "decidim_votings_admin_update_census_dataset_status" %>
+  <%= append_javascript_pack_tag "decidim_votings_admin" %>
 <% end %>

data/app/views/decidim/votings/polling_officer_zone/closures/_answer_results_form_fields.html.erb

@@ -5,8 +5,7 @@
     <%= answer_form.hidden_field :question_id %>
     <%= answer_form.hidden_field :id %>
     <%= answer_form.number_field(:value,
-                                   label: translated_attribute(answer.title),
-                                   min: 0,
-                                   class: "medium-3") %>
+                                 label: translated_attribute(answer.title),
+                                 min: 0) %>
   <% end %>
 <% end %>

data/app/views/decidim/votings/polling_officer_zone/closures/_ballot_results_form_fields.html.erb

@@ -1,40 +1,29 @@
-<%= content_tag :h5,
+<%= content_tag :h3,
                 t("edit.total_ballots", scope: "decidim.votings.polling_officer_zone.closures"),
-                class: "heading5" %>
+                class: "h4" %>
 
-<div class="card--secondary">
-  <div class="card__content">
-    <div class="row">
-      <%= form.fields_for "[ballot_results]", form.object.ballot_results do |ballot_form| %>
-        <%= content_tag :span,
-                        "",
-                        id: "closure_result-total-ballots",
-                        data: { total_ballots: ballot_form.object.total_ballots_count } %>
+<%= form.fields_for "[ballot_results]", form.object.ballot_results do |ballot_form| %>
+  <%= content_tag :span,
+                  "",
+                  id: "closure_result-total-ballots",
+                  hidden: true,
+                  data: { total_ballots: ballot_form.object.total_ballots_count } %>
 
-        <%= content_tag :div,
-                        ballot_form.number_field(
-                          :valid_ballots_count,
-                          label: t("edit.total_valid_ballots", scope: "decidim.votings.polling_officer_zone.closures"),
-                          min: 0
-                        ),
-                        class: "columns medium-4" %>
+  <%= ballot_form.number_field(
+                    :valid_ballots_count,
+                    label: t("edit.total_valid_ballots", scope: "decidim.votings.polling_officer_zone.closures"),
+                    min: 0
+                  ) %>
 
-        <%= content_tag :div,
-                        ballot_form.number_field(
-                          :blank_ballots_count,
-                          label: t("edit.total_blank_ballots", scope: "decidim.votings.polling_officer_zone.closures"),
-                          min: 0
-                        ),
-                        class: "columns medium-4" %>
+  <%= ballot_form.number_field(
+                    :blank_ballots_count,
+                    label: t("edit.total_blank_ballots", scope: "decidim.votings.polling_officer_zone.closures"),
+                    min: 0
+                  ) %>
 
-        <%= content_tag :div,
-                        ballot_form.number_field(
-                          :null_ballots_count,
-                          label: t("edit.total_null_ballots", scope: "decidim.votings.polling_officer_zone.closures"),
-                          min: 0
-                        ),
-                        class: "columns medium-4" %>
-      <% end %>
-    </div>
-  </div>
-</div>
+  <%= ballot_form.number_field(
+                    :null_ballots_count,
+                    label: t("edit.total_null_ballots", scope: "decidim.votings.polling_officer_zone.closures"),
+                    min: 0
+                  ) %>
+<% end %>

data/app/views/decidim/votings/polling_officer_zone/closures/_certify_form.html.erb

@@ -2,15 +2,11 @@
                      url: certify_polling_officer_election_closure_path(polling_officer, election),
                      html: { multipart: true, class: "form certify_closure" }) do |form| %>
 
-  <div class="row column gallery__container">
-    <fieldset>
-      <legend><%= t("form_legend", scope: "decidim.votings.polling_officer_zone.closures.certify") %></legend>
-      <div class="row column">
-        <%= form.attachment :photos,
-          multiple: true,
-          label: t("add_images", scope: "decidim.votings.polling_officer_zone.closures.certify") %>
-      </div>
-    </fieldset>
+  <div class="form__wrapper">
+    <%= form.attachment :photos,
+                        multiple: true,
+                        label: t("add_images", scope: "decidim.votings.polling_officer_zone.closures.certify"),
+                        button__label: t("form_legend", scope: "decidim.votings.polling_officer_zone.closures.certify") %>
   </div>
 
   <%= form.submit t("submit", scope: "decidim.votings.polling_officer_zone.closures.certify"), class: "button button--sc mt-sm mb-none" %>

data/app/views/decidim/votings/polling_officer_zone/closures/_modal_ballots_count_error.html.erb

@@ -1,61 +1,47 @@
-<div id="wrapper-modal-closure-count-error">
-  <div class="reveal" data-reveal id="modal-closure-count-error" data-append-to="div#wrapper-modal-closure-count-error" role="dialog" aria-modal="true" aria-labelledby="modal-closure-count-error-label">
-    <div class="reveal__header">
-      <%= content_tag :h3,
-                      t("title", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error"),
-                      class: "reveal__title",
-                      id: "modal-closure-count-error-label" %>
-
-      <button class="close-button" data-close aria-label="<%= t("close_modal", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>" type="button">
-        <span aria-hidden="true">×</span>
-      </button>
-    </div>
-
-    <%= content_tag :p,
-                    t("info_text", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
-
-    <div class="card card--secondary">
-      <div class="card__content">
-        <span>
+<%= decidim_modal id:"modal-closure-count-error" do %>
+  <div data-dialog-container>
+    <%= icon "error-warning-line" %>
+    <h3 class="h3" id="dialog-title-modal-closure-count-error" tabindex="-1" data-dialog-title>
+      <%= t("title", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
+    </h3>
+    <div class="form__wrapper">
+      <%= content_tag :p,
+                      t("info_text", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error"),
+                      id: "dialog-desc-modal-closure-count-error" %>
+
+      <div class="space-y-4">
+        <p>
           <%= content_tag :strong,
                           t("total_people", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
           <%= @form.election_votes_count %>
-        </span>
-        <br>
-        <span>
+        </p>
+        <p>
           <%= content_tag :strong,
                           t("total_ballots", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
           <%= content_tag :span,
                           "--",
                           id: "modal-total-ballots-value" %>
-
-        </span>
+        </p>
       </div>
-    </div>
-
-    <%= content_tag :p,
-                    t("info_explanation_text", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
-
-    <%= content_tag :div,
-                    form.text_area(
-                      :polling_officer_notes,
-                      rows: 5,
-                      label: t("message_for_monitoring_committee", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error"),
-                      placeholder: t("text_area_placeholder", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error")
-                    ) %>
 
-    <div class="row mt-sm">
-      <div class="columns medium-8 medium-offset-2">
-        <button form="new_envelopes_result_" id="btn-submit-from-modal" class="button button--sc expanded disabled">
-          <%= t("btn_validate_total", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
-        </button>
+      <%= content_tag :p,
+                      t("info_explanation_text", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
 
-        <div class="text-center">
-          <button type="button" class="link" data-close>
-            <%= t("review_recount", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
-          </button>
-        </div>
-      </div>
+      <%= form.text_area(
+                        :polling_officer_notes,
+                        rows: 5,
+                        label: t("message_for_monitoring_committee", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error"),
+                        placeholder: t("text_area_placeholder", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error")
+                      ) %>
     </div>
   </div>
-</div>
+  <div data-dialog-actions>
+    <button class="button button__sm md:button__lg button__transparent-secondary" data-dialog-close="modal-closure-count-error">
+      <%= t("review_recount", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
+    </button>
+
+    <button form="new_envelopes_result_" id="btn-submit-from-modal" class="button button__sm md:button__lg button__secondary" disabled>
+      <%= t("btn_validate_total", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
+    </button>
+  </div>
+<% end %>

data/app/views/decidim/votings/polling_officer_zone/closures/_modal_ballots_results_count_error.html.erb

@@ -1,20 +1,20 @@
-<div class="reveal" data-reveal id="modal-closure-results-count-error" role="dialog" aria-modal="true" aria-labelledby="modal-closure-results-count-error-label">
-  <div class="reveal__header">
-    <%= content_tag :h3,
-                    t("title", scope: "decidim.votings.polling_officer_zone.closures.edit.modal_ballots_results_count_error"),
-                    class: "reveal__title",
-                    id: "modal-closure-results-count-error-label" %>
+<%= decidim_modal id:"modal-closure-results-count-error" do %>
+  <div data-dialog-container>
+    <%= icon "error-warning-line" %>
+    <h3 class="h3" id="dialog-title-modal-closure-results-count-error" tabindex="-1" data-dialog-title>
+      <%= t("title", scope: "decidim.votings.polling_officer_zone.closures.new.modal_ballots_count_error") %>
+    </h3>
 
-    <button class="close-button" data-close aria-label="<%= t("close_modal", scope: "decidim.votings.polling_officer_zone.closures.edit.modal_ballots_results_count_error") %>" type="button">
-      <span aria-hidden="true">×</span>
-    </button>
+    <div>
+      <%= content_tag :p,
+                      t("info_text", scope: "decidim.votings.polling_officer_zone.closures.edit.modal_ballots_results_count_error"),
+                      id: "dialog-desc-modal-closure-results-count-error" %>
+    </div>
   </div>
-
-  <%= content_tag :p,
-                  t("info_text", scope: "decidim.votings.polling_officer_zone.closures.edit.modal_ballots_results_count_error") %>
-  <%= content_tag :button,
-                  t("close_modal", scope: "decidim.votings.polling_officer_zone.closures.edit.modal_ballots_results_count_error"),
-                  type: "button",
-                  data: { close: "" },
-                  class: "button button--sc expanded" %>
-</div>
+  <div data-dialog-actions>
+    <%= content_tag :button,
+                    t("close_modal", scope: "decidim.votings.polling_officer_zone.closures.edit.modal_ballots_results_count_error"),
+                    data: { "dialog-close": "modal-closure-results-count-error" },
+                    class: "button button__sm md:button__lg button__transparent-secondary" %>
+  </div>
+<% end %>

data/app/views/decidim/votings/polling_officer_zone/closures/_question_results_form_fields.html.erb

@@ -1,22 +1,17 @@
 <% form.object.question_results.each do |question| %>
-  <%= content_tag :h5,
-              translated_attribute(question.title),
-              class: "heading5 mt-sm" %>
+  <%= content_tag :h3,
+                  translated_attribute(question.title),
+                  class: "h4" %>
 
-  <div class="card--secondary">
-    <div class="card__content">
-      <%= render partial: "answer_results_form_fields", locals: { form: form, question: question } %>
+  <%= render partial: "answer_results_form_fields", locals: { form:, question: } %>
 
-      <% if question.nota_option? %>
-        <%= form.fields_for "[question_results][]", question do |question_form| %>
-          <%= question_form.hidden_field :id %>
+  <% if question.nota_option? %>
+    <%= form.fields_for "[question_results][]", question do |question_form| %>
+      <%= question_form.hidden_field :id %>
 
-          <%= question_form.number_field(:value,
-                                   label: t("decidim.elections.votes.new.nota_option"),
-                                   min: 0,
-                                   class: "medium-3 result_votes_count") %>
-        <% end %>
-      <% end %>
-    </div>
-  </div>
+      <%= question_form.number_field(:value,
+                                     label: t("decidim.elections.votes.new.nota_option"),
+                                     min: 0) %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/views/decidim/votings/polling_officer_zone/closures/_sign_form.html.erb

@@ -1,58 +1,43 @@
 <%= decidim_form_for(@form,
                      url: sign_polling_officer_election_closure_path(polling_officer, election),
                      html: { class: "form sign_closure" }) do |form| %>
-  <div class="row column">
-    <%= form.check_box :signed, label: t("check_box", scope: "decidim.votings.polling_officer_zone.closures.sign") %>
-  </div>
-
-  <%= form.submit "", class: "hide" %>
-
-  <%= content_tag :button,
-                  t("submit", scope: "decidim.votings.polling_officer_zone.closures.sign"),
-                  type: "button",
-                  id: "btn-modal-closure-sign",
-                  class: "button button--sc mt-sm mb-none",
-                  data: { open: "modal-closure-sign" },
-                  aria: {
-                    controls: "modal-closure-sign",
-                    haspopup: "dialog"
-                  },
-                  disabled: true,
-                  tabindex: "0" %>
 
-  <div id="wrapper-modal-closure-sign">
-    <div class="reveal" data-reveal id="modal-closure-sign" data-append-to="div#wrapper-modal-closure-sign" role="dialog" aria-modal="true" aria-labelledby="modal-closure-sign-label">
-      <div class="reveal__header">
-        <%= content_tag :h3,
-                        t("title", scope: "decidim.votings.polling_officer_zone.closures.sign"),
-                        class: "reveal__title",
-                        id: "modal-closure-sign-label" %>
-
-        <button class="close-button" data-close aria-label="<%= t("close_modal", scope: "decidim.votings.polling_officer_zone.closures.sign") %>" type="button">
-          <span aria-hidden="true">×</span>
-        </button>
-      </div>
+  <div class="form__wrapper">
+    <%= form.check_box :signed, label: t("check_box", scope: "decidim.votings.polling_officer_zone.closures.sign"), label_options: { class: "form__wrapper-checkbox-label" } %>
+  </div>
 
-      <%= content_tag :p,
-                      t("info_text", scope: "decidim.votings.polling_officer_zone.closures.sign") %>
+  <div class="form__wrapper-block flex-col-reverse md:flex-row justify-between">
+    <%= link_to polling_officers_path, class: "button button__sm md:button__lg button__text-secondary" do %>
+      <%= icon "arrow-left-line" %>
+      <%= t("back_to_polling_stations", scope: "decidim.votings.polling_officer_zone.closures") %>
+    <% end %>
+
+    <%= content_tag :button,
+                    t("submit", scope: "decidim.votings.polling_officer_zone.closures.sign"),
+                    id: "btn-modal-closure-sign",
+                    class: "button button__sm md:button__lg button__secondary",
+                    data: { "dialog-open": "modal-closure-sign" },
+                    disabled: true,
+                    tabindex: "0" %>
+  </div>
 
-      <div class="row mt-sm">
-        <div class="columns medium-8 medium-offset-2">
-          <button form="new_closure_sign_" id="btn-submit-from-modal" class="button button--sc expanded">
-            <%= t("confirm", scope: "decidim.votings.polling_officer_zone.closures.sign") %>
-          </button>
+  <%= decidim_modal id:"modal-closure-sign" do %>
+    <div data-dialog-container>
+      <%= icon "article-line" %>
+      <h3 data-dialog-title id="dialog-title-modal-closure-sign">
+        <%= t("title", scope: "decidim.votings.polling_officer_zone.closures.edit.modal_ballots_results_count_error") %>
+      </h3>
 
-          <div class="text-center">
-            <button type="button" class="link" data-close>
-              <%= t("cancel", scope: "decidim.votings.polling_officer_zone.closures.sign") %>
-            </button>
-          </div>
-        </div>
-      </div>
+      <p id="dialog-desc-modal-closure-sign"><%= t("info_text", scope: "decidim.votings.polling_officer_zone.closures.sign") %></p>
     </div>
-  </div>
-<% end %>
-
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_votings_voting_polling_officer_zone_sign_closure" %>
+    <div data-dialog-actions>
+      <button class="button button__sm md:button__lg button__transparent-secondary" data-dialog-close="modal-closure-sign">
+        <%= t("cancel", scope: "decidim.votings.polling_officer_zone.closures.sign") %>
+      </button>
+
+      <button form="new_closure_sign_" id="btn-submit-from-modal" class="button button__sm md:button__lg button__secondary">
+        <%= t("confirm", scope: "decidim.votings.polling_officer_zone.closures.sign") %>
+      </button>
+    </div>
+  <% end %>
 <% end %>

data/app/views/decidim/votings/polling_officer_zone/closures/edit.html.erb

@@ -1,50 +1,63 @@
-<div class="m-bottom">
-  <%= link_to polling_officers_path, class: "small hollow" do %>
-    <%= icon "chevron-left", class: "icon--small", role: "presentation", "aria-hidden": true %>
-    <%= t("back_to_polling_stations", scope: "decidim.votings.polling_officer_zone.closures") %>
-  <% end %>
-</div>
+<%= append_javascript_pack_tag "decidim_votings" %>
+<%= append_stylesheet_pack_tag "decidim_votings" %>
 
-<%= content_tag :h2, t(".heading") %>
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
 
-<p>
-  <%= content_tag :span,
-                  present(election).title,
-                  title: t("polling_station.election", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
+  <div class="text-center py-10">
+    <h1 class="title-decorator inline-block text-left">
+      <%= t("heading", scope: "decidim.votings.polling_officer_zone.closures.edit") %>
+    </h1>
+  </div>
 
-  <%= content_tag :small,
-                  present(election.participatory_space).title,
-                  title: t("polling_station.voting", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
-</p>
+  <div class="space-y-4 mb-8">
+    <h2 class="h3">
+      <%= content_tag :span,
+                      present(election).title,
+                      title: t("polling_station.election", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
 
-<%= content_tag :p, t(".info_text") %>
+      <%= content_tag :span,
+                      present(election.participatory_space).title,
+                      class: "text-gray",
+                      title: t("polling_station.voting", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
+    </h2>
 
-<%= decidim_form_for(@form, url: polling_officer_election_closure_path(polling_officer, election),
-                     html: { class: "form edit_closure" }) do |form| %>
+    <%= content_tag :p, t("info_text", scope: "decidim.votings.polling_officer_zone.closures.edit"), class: "text-gray-2" %>
+  </div>
 
-  <%= form.hidden_field :election_id %>
-  <%= form.hidden_field :polling_station_id %>
+  <%= decidim_form_for(@form, url: polling_officer_election_closure_path(polling_officer, election),
+                              html: { class: "form edit_closure" }) do |form| %>
 
-  <%= render partial: "ballot_results_form_fields", locals: { form: form } %>
+    <%= form_required_explanation %>
 
-  <%= render partial: "question_results_form_fields", locals: { form: form } %>
+    <%= form.hidden_field :election_id %>
+    <%= form.hidden_field :polling_station_id %>
 
-  <%= form.submit t(".save_recount"), id: "submit-ballot-recount", class: "button button--sc mt-sm" %>
+    <div class="form__wrapper">
+      <%= render partial: "ballot_results_form_fields", locals: { form: } %>
 
-  <%= content_tag :button,
-                  t(".save_recount"),
-                  type: "button",
-                  id: "btn-modal-closure-results-count-error",
-                  class: "button button--sc mt-sm hide",
-                  data: { open: "modal-closure-results-count-error" },
-                  aria: {
-                          controls:"modal-closure-results-count-error",
-                          haspopup: "dialog"
-                        } %>
-<% end %>
+      <%= render partial: "question_results_form_fields", locals: { form: } %>
+    </div>
+
+    <div class="form__wrapper-block flex-col-reverse md:flex-row justify-between">
+      <%= link_to polling_officers_path, class: "button button__sm md:button__lg button__text-secondary" do %>
+        <%= icon "arrow-left-line" %>
+        <%= t("back_to_polling_stations", scope: "decidim.votings.polling_officer_zone.closures") %>
+      <% end %>
+
+      <div id="submit-ballot-recount">
+        <%= form.submit t("save_recount", scope: "decidim.votings.polling_officer_zone.closures.edit"), class: "button button__sm md:button__lg button__secondary" %>
+      </div>
+
+      <div id="btn-modal-closure-results-count-error" hidden>
+        <%= content_tag :button,
+                        t("save_recount", scope: "decidim.votings.polling_officer_zone.closures.edit"),
+                        class: "button button__sm md:button__lg button__secondary",
+                        data: { "dialog-open": "modal-closure-results-count-error" } %>
+      </div>
+    </div>
+
+  <% end %>
 
-<%= render "modal_ballots_results_count_error" %>
+  <%= render "modal_ballots_results_count_error" %>
 
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_votings_voting_polling_officer_zone_edit_closure" %>
 <% end %>