decidim-elections 0.27.7 → 0.28.0.rc4

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

@@ -1,64 +1,70 @@
-<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" %>
+
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
+
+  <div class="text-center py-10">
+    <h1 class="title-decorator inline-block text-left">
+      <%= t("heading", scope: "decidim.votings.polling_officer_zone.closures.new") %>
+    </h1>
+  </div>
 
-<%= content_tag :h2, t(".heading") %>
+  <div class="space-y-4 mb-8">
+    <p>
+      <%= content_tag :strong, t("polling_station", scope: "decidim.votings.polling_officer_zone.closures.new") %>
+      <br>
+      <span class="text-gray-2"><%= present(polling_officer.polling_station).title %></span>
+      <br>
+      <span class="text-gray-2"><%= present(polling_officer.polling_station).address %></span>
+    </p>
 
-<p>
-  <%= content_tag :strong, t(".polling_station") %>
-  <br>
-  <%= present(polling_officer.polling_station).title %>
-  <br>
-  <%= present(polling_officer.polling_station).address %>
-</p>
-<p>
-  <%= content_tag :strong, t(".election") %> <%= present(election).title %>
-</p>
+    <p>
+      <%= content_tag :strong, t("election", scope: "decidim.votings.polling_officer_zone.closures.new") %>
+      <span class="text-gray-2"><%= present(election).title %></span>
+    </p>
 
-<div class="row section">
-  <div class="columns">
-    <div class="row mt-sm">
-      <div class="columns large-7">
-        <p>
-          <%= content_tag :strong, t(".info_text") %>
-        </p>
+    <p class="text-gray-2">
+      <%= t("info_text", scope: "decidim.votings.polling_officer_zone.closures.new") %>
+    </p>
+  </div>
 
-        <div class="card--secondary">
-          <div class="card__content">
-            <%= decidim_form_for(@form, url: polling_officer_election_closure_path(polling_officer, election),
-                                  html: { class: "form new_closure" }) do |form| %>
+  <%= decidim_form_for(@form, url: polling_officer_election_closure_path(polling_officer, election),
+                              html: { class: "form new_closure" }) do |form| %>
 
-              <%= form.hidden_field :election_id %>
-              <%= form.hidden_field :polling_station_id %>
-              <%= form.hidden_field :election_votes_count %>
+    <%= form_required_explanation %>
 
-              <%= content_tag :div,
-                              form.number_field(
-                                :total_ballots_count,
-                                label: t(".total_ballots_count"),
-                                min: 0
-                              ) %>
+    <%= form.hidden_field :election_id %>
+    <%= form.hidden_field :polling_station_id %>
+    <%= form.hidden_field :election_votes_count %>
 
-              <%= form.submit t(".submit"),
-                              id: "submit-verify-votes",
-                              class: "button button--sc expanded mt-sm mb-none" %>
+    <div class="form__wrapper">
+      <%= form.number_field(
+                        :total_ballots_count,
+                        label: t("total_ballots_count", scope: "decidim.votings.polling_officer_zone.closures.new"),
+                        min: 0
+                      ) %>
+    </div>
 
-              <%= render "modal_ballots_count_error", form: form %>
+    <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 %>
 
-              <button id="btn-modal-closure-count-error" class="button button--sc expanded mt-sm mb-none hide" data-open="modal-closure-count-error" aria-controls="modal-closure-count-error" aria-haspopup="dialog" tabindex="0">
-                <%= t(".submit") %>
-              </button>
-            <% end %>
-          </div>
-        </div>
+      <div id="btn-modal-closure-count-error" hidden>
+        <button class="button button__sm md:button__lg button__secondary" data-dialog-open="modal-closure-count-error">
+          <%= t("submit", scope: "decidim.votings.polling_officer_zone.closures.new") %>
+        </button>
+      </div>
+
+      <div id="submit-verify-votes">
+        <%= form.submit t("submit", scope: "decidim.votings.polling_officer_zone.closures.new"),
+                        disabled: true,
+                        class: "button button__sm md:button__lg button__secondary" %>
       </div>
     </div>
-  </div>
-</div>
 
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_votings_voting_polling_officer_zone_new_closure" %>
+    <%= render "modal_ballots_count_error", form: %>
+  <% end %>
+
 <% end %>

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

@@ -1,35 +1,45 @@
-<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>
-
-<%= content_tag :h2, if closure.certificate_phase?
-               t("heading", scope: "decidim.votings.polling_officer_zone.closures.certify")
-             elsif closure.signature_phase?
-               t("heading", scope: "decidim.votings.polling_officer_zone.closures.sign")
-             else
-               t("heading", scope: "decidim.votings.polling_officer_zone.closures.show")
-             end %>
-
-<%= content_tag :p,
-                if closure.certificate_phase?
-                  t("info_text", scope: "decidim.votings.polling_officer_zone.closures.certify")
-                elsif closure.signature_phase?
-                  t("info_text", scope: "decidim.votings.polling_officer_zone.closures.sign")
-                else
-                  t("info_text", scope: "decidim.votings.polling_officer_zone.closures.show")
-                end %>
-
-<div class="row mt-sm">
-  <div class="columns">
-    <%= cell("decidim/votings/polling_station_closure_recount", closure) %>
-
-    <%= cell("decidim/votings/polling_station_closure_certificate", closure) %>
-
-    <%= render "certify_form" if closure.certificate_phase? %>
-
-    <%= render "sign_form" if closure.signature_phase? && !closure.signed? %>
+<%= append_javascript_pack_tag "decidim_votings" %>
+<%= append_stylesheet_pack_tag "decidim_votings" %>
+
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
+
+  <div class="text-center py-10">
+    <h1 class="title-decorator inline-block text-left">
+      <%= if closure.certificate_phase?
+            t("heading", scope: "decidim.votings.polling_officer_zone.closures.certify")
+          elsif closure.signature_phase?
+            t("heading", scope: "decidim.votings.polling_officer_zone.closures.sign")
+          else
+            t("heading", scope: "decidim.votings.polling_officer_zone.closures.show")
+          end %>
+    </h1>
   </div>
-</div>
+
+  <p class="text-gray-2">
+    <%= if closure.certificate_phase?
+          t("info_text", scope: "decidim.votings.polling_officer_zone.closures.certify")
+        elsif closure.signature_phase?
+          t("info_text", scope: "decidim.votings.polling_officer_zone.closures.sign")
+        else
+          t("info_text", scope: "decidim.votings.polling_officer_zone.closures.show")
+        end %>
+  </p>
+
+  <%= cell("decidim/votings/polling_station_closure_recount", closure) %>
+
+  <%= cell("decidim/votings/polling_station_closure_certificate", closure) %>
+
+  <%= render "certify_form" if closure.certificate_phase? %>
+
+  <%= render "sign_form" if closure.signature_phase? && !closure.signed? %>
+
+  <% unless closure.certificate_phase? || (closure.signature_phase? && !closure.signed?) %>
+    <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>
+  <% end %>
+
+<% end %>

data/app/views/decidim/votings/polling_officer_zone/in_person_votes/_complete_voting.html.erb

@@ -1,65 +1,48 @@
-<div class="row section">
-  <div class="columns">
-    <% if vote_check.allowed? %>
-      <div class="callout success mt-s">
-        <% if voted_online? %>
-          <h5><%= t(".census_verified_with_online_vote") %></h5>
-        <% else %>
-          <h5><%= t(".census_verified") %></h5>
-        <% end %>
-      </div>
-      <div class="row mt-sm">
-        <div class="columns large-7">
-          <% if voted_online? %>
-            <p><strong><%= t(".questions_title_voted") %></strong></p>
-          <% else %>
-            <p><strong><%= t(".questions_title") %></strong></p>
-          <% end %>
-          <ul class="accordion js-sortable evote__preview"
-            data-accordion
-            data-multi-expand="true"
-            data-allow-all-closed="true">
-            <% questions.each do |question| %>
-              <li class="accordion-item evote__preview-question" data-accordion-item>
-                <a href="#" class="accordion-title flex--sbc"><%= translated_attribute(question.title) %></a>
-                <div class="accordion-content" data-tab-content>
-                  <strong><%= t(".available_answers") %></strong>
-                  <ul>
-                    <% question.answers.each do |answer| %>
-                      <li><%= translated_attribute(answer.title) %></li>
-                    <% end %>
-                  </ul>
-                </div>
-              </li>
+<% if vote_check.allowed? %>
+  <%= cell("decidim/announcement", voted_online? ? t(".census_verified_with_online_vote") : t(".census_verified"), callout_class: "success") %>
+
+  <p class="text-gray-2 mb-4"><%= voted_online? ? t(".questions_title_voted") : t(".questions_title") %></p>
+
+  <div id="voting-accordion" data-component="accordion" data-multiselectable="false" data-collapsible="false">
+    <% questions.each_with_index do |question, ix| %>
+      <div class="voting__polling-station__accordion">
+        <button id="trigger-voting-<%= ix %>" class="voting__polling-station__accordion-trigger" data-controls="panel-voting-<%= ix %>">
+          <span><%= translated_attribute(question.title) %></span>
+          <%= icon "arrow-down-s-line", class: "voting__polling-station__accordion-arrow" %>
+          <%= icon "arrow-up-s-line", class: "voting__polling-station__accordion-arrow" %>
+        </button>
+
+        <div id="panel-voting-<%= ix %>" class="voting__polling-station__accordion-panel" aria-hidden="true">
+          <strong><%= t(".available_answers") %></strong>
+          <ul>
+            <% question.answers.each do |answer| %>
+              <li><%= translated_attribute(answer.title) %></li>
             <% end %>
           </ul>
-          <div class="card__content">
-            <%= decidim_form_for(in_person_vote_form, url: polling_officer_election_in_person_votes_path(polling_officer, election)) do |f| %>
-              <%= f.hidden_field :voter_token %>
-              <%= f.hidden_field :voter_id %>
-              <%= f.check_box :voted, label: t(".voted"), id: "person_voted_checkbox", label_options: { for: nil } %>
-              <%= f.submit t(".complete_voting"), class: "button button--sc expanded mt-sm mb-none disabled", id: "submit_complete_voting" %>
-            <% end %>
-          </div>
-        </div>
-      </div>
-    <% else %>
-      <div class="callout alert mt-s">
-        <h5><%= vote_check.error_message %></h5>
-      </div>
-      <div class="row mt-sm">
-        <div class="columns large-7">
-          <div class="card__content">
-            <a href="<%= exit_path %>" class="button button--sc expanded mt-sm mb-none">
-              <%= t(".identify_another") %>
-            </a>
-          </div>
         </div>
       </div>
     <% end %>
   </div>
-</div>
 
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_votings_voting_polling_officer_zone_in_person_vote" %>
+  <%= decidim_form_for(in_person_vote_form, url: polling_officer_election_in_person_votes_path(polling_officer, election)) do |f| %>
+    <%= f.hidden_field :voter_token %>
+    <%= f.hidden_field :voter_id %>
+
+    <div class="form__wrapper">
+      <%= f.check_box :voted, label: t(".voted"), id: "person_voted_checkbox", label_options: { for: "person_voted_checkbox", class: "form__wrapper-checkbox-label" } %>
+    </div>
+
+    <div class="form__wrapper-block">
+      <%= f.submit t(".complete_voting"), class: "button button__sm md:button__lg button__secondary", id: "submit_complete_voting" %>
+    </div>
+  <% end %>
+
+<% else %>
+  <%= cell("decidim/announcement", vote_check.error_message, callout_class: "alert") %>
+
+  <div class="form__wrapper-block">
+    <%= link_to exit_path, class: "button button__sm md:button__lg button__secondary" do %>
+      <span><%= t(".identify_another") %></span>
+    <% end %>
+  </div>
 <% end %>

data/app/views/decidim/votings/polling_officer_zone/in_person_votes/_in_person_form.html.erb

@@ -1,50 +1,37 @@
-<div class="row section">
-  <div class="columns">
-    <% if request.post? && in_person_form.valid? %>
-      <div class="callout alert mt-s">
-        <h5><%= t(".census_not_present") %></h5>
-        <p><%= t(".census_not_present_description") %></p>
-      </div>
-    <% end %>
-    <div class="row mt-sm">
-      <div class="columns large-7">
-        <p><strong><%= t(".title") %></strong></p>
-        <div class="card--secondary">
-          <div class="card__content">
-            <%= decidim_form_for(in_person_form, url: polling_officer_election_in_person_votes_path(polling_officer, election), html: { class: "form", autocomplete: "off" }) do |f| %>
-              <div>
-                <%= f.label :document_type do %>
-                  <%= f.select :document_type,
-                  in_person_form.options_for_document_type_select,
-                  { include_blank: t(".select") },
-                  { multiple: false } %>
-                <% end %>
-              </div>
-              <div>
-                <%= f.text_field :document_number, label: t(".document_number"), placeholder: t(".document_number_placeholder") %>
-              </div>
-              <fieldset>
-                <legend><%= t(".date_of_birth") %></legend>
-                <div class="row">
-                  <%= f.label :day, t(".day"), class: "columns small-4" do %>
-                    <%= f.text_field :day, placeholder: t(".day_placeholder"), "data-autojump" => true, "data-max-length" => 2,
-                                    "data-jump-next" => "#in_person_month" %>
-                  <% end %>
-                  <%= f.label :month, t(".month"), class: "columns small-4" do %>
-                    <%= f.text_field :month, placeholder: t(".month_placeholder"), "data-autojump" => true, "data-max-length" => 2,
-                                    "data-jump-prev" => "#in_person_day", "data-jump-next" => "#in_person_year" %>
-                  <% end %>
-                  <%= f.label :year, t(".year"), class: "columns small-4" do %>
-                    <%= f.text_field :year, placeholder: t(".year_placeholder"), "data-autojump" => true, "data-max-length" => 4,
-                                    "data-jump-prev" => "#in_person_month" %>
-                  <% end %>
-                </div>
-              </fieldset>
-              <%= f.submit t(".validate_document"), class: "button button--sc expanded mt-sm mb-none" %>
-            <% end %>
-          </div>
-        </div>
+<% if request.post? && in_person_form.valid? %>
+  <%= cell("decidim/announcement", { title: t(".census_not_present"), body: t(".census_not_present_description") }, callout_class: "alert") %>
+<% end %>
+
+<p class="text-gray-2 mb-4"><%= t(".title") %></p>
+
+<%= decidim_form_for(in_person_form, url: polling_officer_election_in_person_votes_path(polling_officer, election), html: { class: "form", autocomplete: "off" }) do |f| %>
+  <%= form_required_explanation %>
+
+  <div class="form__wrapper">
+    <%= f.select :document_type,
+                 in_person_form.options_for_document_type_select,
+                 { include_blank: t(".select") },
+                 { multiple: false } %>
+
+    <%= f.text_field :document_number, label: t(".document_number"), placeholder: t(".document_number_placeholder") %>
+
+    <div class="space-y-2">
+      <%= f.label t(".date_of_birth") %>
+
+      <div class="flex gap-2">
+        <%= f.text_field :day, placeholder: t(".day_placeholder"), label: t(".day"), "data-autojump" => true, "data-max-length" => 2, "data-jump-next" => "#in_person_month" %>
+        <%= f.text_field :month, placeholder: t(".month_placeholder"), label: t(".month"), "data-autojump" => true, "data-max-length" => 2, "data-jump-prev" => "#in_person_day", "data-jump-next" => "#in_person_year" %>
+        <%= f.text_field :year, placeholder: t(".year_placeholder"), label: t(".year"), "data-autojump" => true, "data-max-length" => 4, "data-jump-prev" => "#in_person_month" %>
       </div>
     </div>
   </div>
-</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" %>
+      <span><%= t("back", scope: "decidim.votings.polling_officer_zone.in_person_votes.new") %></span>
+    <% end %>
+
+    <%= f.submit t(".validate_document"), class: "button button__sm md:button__lg button__secondary" %>
+  </div>
+<% end %>

data/app/views/decidim/votings/polling_officer_zone/in_person_votes/_verify_document.html.erb

@@ -1,23 +1,20 @@
-<div class="row section">
-  <div class="columns">
-    <div class="callout success mt-s">
-      <h5><%= t(".census_present") %></h5>
-    </div>
-    <div class="row mt-sm">
-      <div class="columns large-7">
-        <p><strong><%= t(".title") %></strong></p>
-        <div class="card--secondary">
-          <div class="card__content">
-            <p>
-              <strong><%= t(".name") %></strong>
-              <br><%= voter_name %>
-            </p>
-            <button type="button" class="button button--sc expanded mt-sm mb-none js-verify-document">
-              <%= t(".verify_document") %>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+<%= cell("decidim/announcement", t(".census_present"), callout_class: "success") %>
+
+<div class="form__wrapper">
+  <p class="text-gray-2"><%= t(".title") %></p>
+
+  <p>
+    <%= t(".name") %>: <%= voter_name %>
+  </p>
+</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" %>
+    <span><%= t("back", scope: "decidim.votings.polling_officer_zone.in_person_votes.new") %></span>
+  <% end %>
+
+  <button id="js-verify-document" class="button button__sm md:button__lg button__secondary">
+    <%= t(".verify_document") %>
+  </button>
 </div>

data/app/views/decidim/votings/polling_officer_zone/in_person_votes/new.html.erb

@@ -1,25 +1,25 @@
-<div class="polling_officer_zone">
-  <div>
-    <%= link_to polling_officers_path do %>
-      <%= icon "caret-left", class: "icon--small", role: "img" %> <%= t(".back") %>
-    <% end %>
+<%= append_javascript_pack_tag "decidim_votings" %>
+<%= append_stylesheet_pack_tag "decidim_votings" %>
+
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
+
+  <div class="text-center py-10">
+    <h1 class="title-decorator inline-block text-left">
+      <%= t("title", scope: "decidim.votings.polling_officer_zone.in_person_votes.new") %>
+    </h1>
   </div>
-  <h2><%= t(".title") %></h2>
 
   <% if has_voter? %>
     <div id="verify-document">
       <%= render partial: "verify_document" %>
     </div>
-    <div id="complete-voting" class="hide">
+    <div id="complete-voting" hidden>
       <%= render partial: "complete_voting" %>
     </div>
   <% else %>
     <%= render partial: "in_person_form" %>
   <% end %>
-</div>
-
-<%= render "decidim/elections/shared/broken_promises_modal" %>
 
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_votings_in_person_vote" %>
 <% end %>
+
+<%= render "decidim/elections/shared/broken_promises_modal" %>

data/app/views/decidim/votings/polling_officer_zone/in_person_votes/show.html.erb

@@ -1,29 +1,30 @@
-<div class="polling_officer_zone">
-  <div>
-    <%= link_to polling_officers_path do %>
-      <%= icon "caret-left", class: "icon--small", role: "img" %> <%= t(".back") %>
-    <% end %>
+<%= append_javascript_pack_tag "decidim_votings" %>
+<%= append_stylesheet_pack_tag "decidim_votings" %>
+
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
+  <div class="text-center py-10">
+    <h1 class="title-decorator inline-block text-left">
+      <%= t("title", scope: "decidim.votings.polling_officer_zone.in_person_votes.show") %>
+    </h1>
   </div>
-  <h2><%= t(".title") %></h2>
 
-  <div class="in-person-vote-wrapper"
+  <div id="in-person-vote-wrapper"
     data-api-endpoint-url="<%= bulletin_board_server %>"
     data-message-id="<%= in_person_vote.message_id %>">
-      <div class="evote__confirming" aria-hidden="true">
-      <div class="evote__dot"></div>
-      <div class="evote__dot"></div>
-      <div class="evote__dot"></div>
-      <div class="evote__dot"></div>
-      <div class="evote__dot"></div>
-      <div class="evote__dot"></div>
-      <div class="evote__dot"></div>
-    </div>
   </div>
-  <%= form_tag polling_officer_election_in_person_vote_path(polling_officer, election, in_person_vote), method: :patch, class: "update_vote_status" %>
-</div>
 
-<%= render "decidim/elections/shared/broken_promises_modal" %>
+  <div class="flex flex-col items-center gap-14 py-14">
+    <%= icon "fingerprint-line", class: "w-40 h-40 text-tertiary animate-pulse fill-current" %>
+  </div>
 
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_votings_in_person_vote" %>
+  <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" %>
+      <span><%= t("back", scope: "decidim.votings.polling_officer_zone.in_person_votes.show") %></span>
+    <% end %>
+
+    <%= form_tag polling_officer_election_in_person_vote_path(polling_officer, election, in_person_vote), method: :patch, class: "update_vote_status" %>
+  </div>
 <% end %>
+
+<%= render "decidim/elections/shared/broken_promises_modal" %>

data/app/views/decidim/votings/polling_officer_zone/polling_officers/_polling_station.html.erb

@@ -1,60 +1,53 @@
-<div class="card card--secondary card__polling_station">
-  <div class="card__content">
-    <div class="card__header">
-      <h5 class="card__title">
-        <%= link_to resource_locator(election).path do %>
-          <%= content_tag :span,
-                          present(election).title,
-                          title: t("polling_station.election", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
-          <%= content_tag :small,
-                          present(polling_officer.voting).title,
-                          title: t("polling_station.voting", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
-        <% end %>
-      </h5>
-    </div>
+<div class="voting__polling-station" data-polling-station>
+  <%= link_to resource_locator(election).path do %>
+    <%= content_tag :h3,
+                    present(election).title,
+                    class: "h5 text-secondary hover:underline",
+                    title: t("polling_station.election", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
+    <%= content_tag :span,
+                    present(polling_officer.voting).title,
+                    class: "text-sm text-gray-2",
+                    title: t("polling_station.voting", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
+    <%= content_tag :span,
+                    t(polling_officer.role, scope: "decidim.votings.polling_officers.roles"),
+                    title: t("polling_station.role", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
+                    class: "ml-auto label#{" success" if polling_officer.role == :president}" %>
+  <% end %>
 
+  <% if polling_officer.polling_station %>
     <div>
       <%= content_tag :span,
-                      t(polling_officer.role, scope: "decidim.votings.polling_officers.roles"),
-                      title: t("polling_station.role", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
-                      class: "label label--small #{polling_officer.role == :president ? "label--highlight" : "label--basic"}" %>
-    </div>
-
-    <p>
-      <%= content_tag :strong,
                       present(polling_officer.polling_station).title,
+                      class: "font-semibold",
                       title: t("polling_station.name", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
 
-      <br>
-
       <%= content_tag :span,
                       present(polling_officer.polling_station).address,
+                      class: "text-sm text-gray-2",
                       title: t("polling_station.address", scope: "decidim.votings.polling_officer_zone.polling_officers.index") %>
-    </p>
+    </div>
 
     <div>
-      <% if polling_officer.polling_station %>
-        <%= link_to t("polling_station.identify_person", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
+      <%= link_to t("polling_station.identify_person", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
                   new_polling_officer_election_in_person_vote_path(polling_officer, election),
-                  class: "button small" %>
+                  class: "button button__sm button__transparent-secondary" %>
 
-        <% closure = polling_officer.polling_station.closures.find_by(election: election) %>
-        <% if closure %>
-          <% if closure.results_phase? %>
-            <%= link_to t("polling_station.count_votes", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
+      <% closure = polling_officer.polling_station.closures.find_by(election:) %>
+      <% if closure %>
+        <% if closure.results_phase? %>
+          <%= link_to t("polling_station.count_votes", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
                       edit_polling_officer_election_closure_path(polling_officer, election),
-                      class: "button small" %>
-          <% else %>
-            <%= link_to t("polling_station.show_closure", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
-                      polling_officer_election_closure_path(polling_officer, election),
-                      class: "button small secondary" %>
-          <% end %>
+                      class: "button button__sm button__transparent-secondary" %>
         <% else %>
-          <%= link_to t("polling_station.count_votes", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
-                    new_polling_officer_election_closure_path(polling_officer, election),
-                    class: "button small secondary" %>
+          <%= link_to t("polling_station.show_closure", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
+                      polling_officer_election_closure_path(polling_officer, election),
+                      class: "button button__sm button__secondary" %>
         <% end %>
+      <% else %>
+        <%= link_to t("polling_station.count_votes", scope: "decidim.votings.polling_officer_zone.polling_officers.index"),
+                    new_polling_officer_election_closure_path(polling_officer, election),
+                    class: "button button__sm button__secondary" %>
       <% end %>
     </div>
-  </div>
+  <% end %>
 </div>