decidim-verifications 0.27.10 → 0.28.0.rc4

data/app/jobs/decidim/verifications/csv_census/remove_duplicates_job.rb

@@ -9,7 +9,7 @@ module Decidim
         def perform(organization)
           duplicated_census(organization).pluck(:email).each do |email|
             CsvDatum.inside(organization)
-                    .where(email: email)
+                    .where(email:)
                     .order(id: :desc)
                     .all(1..-1)
                     .each(&:delete)

data/app/models/decidim/verifications/csv_census/data.rb

@@ -21,7 +21,7 @@ module Decidim
           @values = []
           @errors = []
 
-          CSV.foreach(@file) do |row|
+          CSV.foreach(@file, encoding: "BOM|UTF-8") do |row|
             process_row(row)
           end
         end

data/app/models/decidim/verifications/csv_datum.rb

@@ -9,18 +9,18 @@ module Decidim
       validates :email, format: { with: ::Devise.email_regexp }
 
       def self.inside(organization)
-        where(organization: organization)
+        where(organization:)
       end
 
       def self.search_user_email(organization, email)
         inside(organization)
-          .where(email: email)
+          .where(email:)
           .order(created_at: :desc, id: :desc)
           .first
       end
 
       def self.insert_all(organization, values)
-        values.each { |value| create(email: value, organization: organization) }
+        values.each { |value| create(email: value, organization:) }
       end
 
       def self.clear(organization)

data/app/packs/entrypoints/decidim_verifications.js

@@ -0,0 +1,2 @@
+// CSS
+import "stylesheets/verifications.scss"

data/app/packs/stylesheets/verifications.scss

@@ -0,0 +1,58 @@
+.verification {
+  @apply flex items-center justify-between gap-4 border-[3px] border-background rounded px-4 py-2 cursor-pointer;
+
+  &__no_clickable {
+    @apply cursor-default;
+  }
+
+  &__container {
+    @apply space-y-8;
+
+    &-title {
+      @apply uppercase font-semibold text-gray-2 mb-8 mt-16 first:mt-0;
+    }
+  }
+
+  &__icon {
+    @apply flex-none w-8 h-8 text-gray fill-current;
+
+    &.is-granted {
+      @apply text-success;
+    }
+  }
+
+  &__text {
+    @apply grow space-y-2.5;
+
+    span {
+      @apply inline-block text-sm text-gray-2;
+    }
+  }
+
+  &__upload-button {
+    @apply w-full block mt-4;
+  }
+
+  &:not(.verification__no_clickable):hover {
+    @apply border-tertiary;
+  }
+
+  &:not(.verification__no_clickable):hover &__text > :first-child {
+    @apply underline;
+  }
+}
+
+.verification-modal {
+  &__text {
+    @apply text-lg text-gray-2 mt-8 mb-12 space-y-8;
+
+    ul,
+    ol {
+      @apply list-disc pl-4;
+    }
+  }
+
+  &__name {
+    @apply text-xl font-semibold block mb-2;
+  }
+}

data/app/presenters/decidim/verifications/postal_letter/authorization_presenter.rb

@@ -19,7 +19,7 @@ module Decidim
         end
 
         #
-        # The verification code to be sent. It's kept in a different metadata
+        # The verification code to be sent. It is kept in a different metadata
         # key according to whether it has already been sent or not
         #
         def verification_code

data/app/queries/decidim/verifications/authorizations.rb

@@ -23,8 +23,8 @@ module Decidim
       def query
         scope = Decidim::Authorization.left_outer_joins(:organization).where(decidim_organizations: { id: organization.id })
 
-        scope = scope.where(name: name) unless name.nil?
-        scope = scope.where(user: user) unless user.nil?
+        scope = scope.where(name:) unless name.nil?
+        scope = scope.where(user:) unless user.nil?
 
         case granted
         when true

data/app/services/decidim/authorization_handler.rb

@@ -12,11 +12,11 @@ module Decidim
   #
   # It also sets two default attributes, `user` and `handler_name`.
   class AuthorizationHandler < Form
-    # The user that is trying to authorize, it's initialized with the
+    # The user that is trying to authorize, it is initialized with the
     # `current_user` from the controller.
     attribute :user, Decidim::User
 
-    # The String name of the handler, should not be modified since it's used to
+    # The String name of the handler, should not be modified since it is used to
     # infer the class name of the authorization handler.
     attribute :handler_name, String
 
@@ -29,6 +29,39 @@ module Decidim
       nil
     end
 
+    # Defines whether the authorization is unique or if there is a duplicate for
+    # this particular authorization that matches the same unique_id.
+    #
+    # @return [Boolean] A boolean indicating if the authorization has a
+    #   duplicate.
+    def unique?
+      unique_id.nil? || duplicate.blank?
+    end
+
+    # Defines whether the duplicate authorizations can be transferred to a new
+    # user.
+    #
+    # @return [Boolean] A boolean indicating whether the authorization can be
+    #   transferred.
+    def transferrable?
+      duplicate.present? && duplicate.user.deleted?
+    end
+
+    # Fetches the duplicate record of the same authorization currently belonging
+    # to other user than the user being authorized.
+    #
+    # @return [Decidim::Authorization, nil] The duplicate authorization record
+    #   based on the unique ID or nil if there is no duplicate.
+    def duplicate
+      return unless user
+
+      Authorization.find_by(
+        user: User.where.not(id: user.id).where(organization: user.organization),
+        name: handler_name,
+        unique_id:
+      )
+    end
+
     # The attributes of the handler that should be exposed as form input when
     # rendering the handler in a form.
     #
@@ -51,8 +84,15 @@ module Decidim
       "#{handler_name.sub!(/_handler$/, "")}/form"
     end
 
+    def authorization_attributes
+      {
+        unique_id:,
+        metadata:
+      }
+    end
+
     # Any data that the developer would like to inject to the `metadata` field
-    # of an authorization when it's created. Can be useful if some of the
+    # of an authorization when it is created. Can be useful if some of the
     # params the user sent with the authorization form want to be persisted for
     # future use.
     #
@@ -67,7 +107,7 @@ module Decidim
 
     #
     # Any data to be injected in the `verification_metadata` field of an
-    # authorization when it's created. This data will be used for multi-step
+    # authorization when it is created. This data will be used for multi-step
     # verificaton workflows in order to confirm the authorization.
     #
     # Returns a Hash.
@@ -117,16 +157,8 @@ module Decidim
 
     private
 
-    def duplicates
-      Authorization.where(
-        user: User.where.not(id: user.id).where(organization: user.organization),
-        name: handler_name,
-        unique_id: unique_id
-      )
-    end
-
     def uniqueness
-      return true if unique_id.nil? || duplicates.none?
+      return true if unique?
 
       errors.add(:base, I18n.t("decidim.authorization_handlers.errors.duplicate_authorization"))
 

data/app/views/decidim/verifications/authorizations/_item.html.erb

@@ -0,0 +1,31 @@
+<% verification = capture do %>
+  <%= icon auth_icon || "login-circle-line", class: "verification__icon#{" is-granted" if local_assigns[:is_granted].present?}" %>
+  <div class="verification__text">
+    <h2 class="h5 text-secondary">
+      <%= title %>
+    </h2>
+    <span>
+      <%= explanation %>
+    </span>
+  </div>
+  <% if local_assigns[:is_granted].present? && remote_url.present? %>
+    <%= icon "refresh-line", class: "w-6 h-6 flex-none text-secondary fill-current" %>
+  <% elsif local_assigns[:url].present? %>
+    <%= icon "arrow-right-s-line", class: "w-6 h-6 flex-none text-secondary fill-current" %>
+  <% end %>
+<% end %>
+
+<% if local_assigns[:url].present? %>
+  <a href="<%= url %>" class="verification" title="<%= button_text %>" data-verification>
+    <%= verification %>
+  </a>
+<% elsif remote_url.present? %>
+  <div class="verification" data-verification data-dialog-open="renew-modal" data-dialog-remote-url="<%= remote_url %>">
+    <%= verification %>
+  </div>
+  <%= decidim_modal id: "renew-modal", class:"verification-modal", remote: true %>
+<% else %>
+  <div class="verification verification__no_clickable">
+    <%= verification %>
+  </div>
+<% end %>

data/app/views/decidim/verifications/authorizations/first_login.html.erb

@@ -1,22 +1,21 @@
-<div class="wrapper">
-  <div class="row collapse">
-    <div class="row collapse">
-      <div class="columns large-8 large-centered text-center">
-        <h1 class="heading1 page-title"><%= t(".title") %></h1>
-        <p class="heading5"><%= t(".verify_with_these_options") %></p>
-      </div>
-    </div>
-    <div class="row">
-      <div class="columns medium-7 large-5 medium-centered">
-        <div class="card">
-          <div class="card__content">
-            <% unauthorized_methods.each do |unauthorized_method| %>
-              <%= link_to t(".actions.#{unauthorized_method.key}"), unauthorized_method.root_path, class: "button expanded" %>
-            <% end %>
-            <p class="text-center skip"><%= t("decidim.verifications.authorizations.skip_verification", link: link_to(t("decidim.verifications.authorizations.start_exploring"), cta_button_path).html_safe).html_safe %>.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+<div class="text-center py-10">
+  <h1 class="title-decorator inline-block text-left mb-12">
+    <%= t("decidim.verifications.authorizations.first_login.title") %>
+  </h1>
+  <p class="text-lg text-gray-2 text-left">
+    <%= t("decidim.verifications.authorizations.first_login.verify_with_these_options") %>
+  </p>
+</div>
+
+<div class="space-y-4">
+  <ul class="space-y-4">
+    <% unauthorized_methods.each do |unauthorized_method| %>
+      <li>
+        <%= link_to t("decidim.verifications.authorizations.first_login.actions.#{unauthorized_method.key}"),
+                    unauthorized_method.root_path,
+                    class: "button button__sm button__transparent-secondary" %>
+      </li>
+    <% end %>
+  </ul>
+  <p class="prose prose-a:text-secondary"><%= t("decidim.verifications.authorizations.skip_verification", link: link_to(t("decidim.verifications.authorizations.start_exploring"), cta_button_path).html_safe).html_safe %>.</p>
 </div>

data/app/views/decidim/verifications/authorizations/index.html.erb

@@ -1,83 +1,38 @@
 <% add_decidim_page_title(t("authorizations", scope: "layouts.decidim.user_profile")) %>
 <% content_for(:subtitle) { t("authorizations", scope: "layouts.decidim.user_profile") } %>
-<% url_params = (redirect_url.present? ? { redirect_url: redirect_url } : {}) %>
+<% url_params = (redirect_url.present? ? { redirect_url: } : {}) %>
 
-<div class="row column authorizations-list">
-  <section class="section">
-    <% if @granted_authorizations.any? %>
-      <div class="card card--list">
-        <% @granted_authorizations.each do |authorization| %>
-          <% if authorization.renewable? %>
-            <%= link_to "#", title: t(".show_renew_info"), data: { open: "renew-modal", "open-url": renew_modal_authorizations_path(handler: authorization.name) }, class: "card--list__item authorization-renewable" do %>
-               <%= render partial: "granted_authorization", locals: { authorization: authorization } %>
-            <% end %>
-          <% elsif authorization.expired? %>
-            <%= link_to authorization_method(authorization).root_path(**url_params), title: t(".expired_verification"), class: "card--list__item" do %>
-              <% render partial: "granted_authorization", locals: { authorization: authorization } %>
-            <% end %>
-          <% else %>
-            <div class="card--list__item">
-              <%= render partial: "granted_authorization", locals: { authorization: authorization } %>
-            </div>
-          <% end %>
-        <% end %>
-      </div>
+<%= append_javascript_pack_tag "decidim_verifications" %>
+<%= append_stylesheet_pack_tag "decidim_verifications" %>
 
-      <div id="renew-modal" data-reveal class="reveal" aria-labelledby="<%= t("renew_modal.title", scope: "decidim.verifications.authorizations") %>" aria-hidden="true" role="dialog"></div>
-    <% end %>
+<%= render layout: "layouts/decidim/shared/layout_user_profile" do %>
+  <section class="authorizations-list">
+    <%
+        subsections = []
 
-    <% if @pending_authorizations.any? %>
-      <div class="card card--list">
-        <% @pending_authorizations.each do |authorization| %>
-          <%= link_to authorization_method(authorization).resume_authorization_path(**url_params) do %>
-            <div class="card--list__item">
-              <div class="card--list__text">
-                <%= icon "reload", class: "card--list__icon", aria_label: t(".pending_verification"), role: "img" %>
-                <div>
-                  <h5 class="card--list__heading">
-                    <%= t("#{authorization.name}.name", scope: "decidim.authorization_handlers") %>
-                  </h5>
-                  <span class="text-small">
-                    <%= t("started_at", scope: "decidim.authorization_handlers", timestamp: l(authorization.updated_at, format: :long)) %>
-                  </span>
-                </div>
-              </div>
-              <div class="card--list__data" aria-hidden="true">
-                <span class="card--list__data__icon">
-                  <%= icon "chevron-right", role: "img", "aria-hidden": true %>
-                </span>
-              </div>
-            </div>
-          <% end %>
-        <% end %>
-      </div>
-    <% end %>
+        subsections << {
+          title: t("authorizations.index.granted_verification", scope: "decidim.verifications"),
+          items: @granted_authorizations.map { |authorization| granted_authorization_display_data(authorization, redirect_url) }
+        } if @granted_authorizations.any?
+
+        subsections << {
+          title: t("authorizations.index.pending_verification", scope: "decidim.verifications"),
+          items: @pending_authorizations.map { |authorization| pending_authorization_display_data(authorization, redirect_url) }
+        } if @pending_authorizations.any?
+
+        subsections << {
+          title: t("authorizations.index.unauthorized_methods", scope: "decidim.verifications"),
+          items: unauthorized_methods.map { |method| unauthorized_method_display_data(method, redirect_url) }
+        } if unauthorized_methods.any?
+    %>
 
-    <% if unauthorized_methods.any? %>
-      <div class="card card--list">
-        <% unauthorized_methods.each do |unauthorized_method| %>
-          <%= link_to unauthorized_method.root_path(**url_params) do %>
-            <div class="card--list__item">
-              <div class="card--list__text">
-                <%= icon "lock-unlocked", class: "card--list__icon", aria_label: t(".unauthorized_verification"), role: "img" %>
-                <div>
-                  <h5 class="card--list__heading">
-                    <%= t("#{unauthorized_method.key}.name", scope: "decidim.authorization_handlers") %>
-                  </h5>
-                  <span class="text-small">
-                    <%= t("#{unauthorized_method.key}.explanation", scope: "decidim.authorization_handlers") %>
-                  </span>
-                </div>
-              </div>
-              <div class="card--list__data" aria-hidden="true">
-                <span class="card--list__data__icon">
-                  <%= icon "chevron-right", role: "img", "aria-hidden": true %>
-                </span>
-              </div>
-            </div>
-          <% end %>
+    <% subsections.each do |subsection| %>
+      <div class="verification__container-title"><%= subsection[:title] %></div>
+      <div class="verification__container">
+        <% subsection[:items].each do |locals| %>
+          <%= render partial: "item", locals: %>
         <% end %>
       </div>
     <% end %>
   </section>
-</div>
+<% end %>

data/app/views/decidim/verifications/authorizations/new.html.erb

@@ -1,32 +1,30 @@
-<div class="wrapper">
-  <div class="row collapse">
-    <div class="row collapse">
-      <div class="columns large-8 large-centered text-center page-title">
-        <h1><%= t(".authorize_with", authorizer: t("#{handler.handler_name}.name", scope: "decidim.authorization_handlers")) %></h1>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="columns large-6 medium-centered">
-        <div class="card">
-          <div class="card__content">
-            <%= authorization_form_for(handler, url: authorizations_path(redirect_url: redirect_url)) do |form| %>
-              <% if lookup_context.exists?(handler.to_partial_path, [], true) %>
-                <%= render partial: handler.to_partial_path, locals: { handler: handler, form: form } %>
-              <% else %>
-                <%= form.all_fields %>
-              <% end %>
+<div class="text-center py-10">
+  <h1 class="title-decorator inline-block text-left">
+    <%= t("decidim.verifications.authorizations.new.authorize_with", authorizer: t("#{handler.handler_name}.name", scope: "decidim.authorization_handlers")) %>
+  </h1>
+</div>
 
-              <div class="actions">
-                <%= form.submit t(".authorize"), class: "button expanded" %>
-              </div>
-            <% end %>
-            <p class="text-center skip">
-              <%= t("decidim.verifications.authorizations.skip_verification", link: link_to(t("decidim.verifications.authorizations.start_exploring"), cta_button_path).html_safe).html_safe %>.
-            </p>
-          </div>
-        </div>
-      </div>
+<%= authorization_form_for(handler, url: authorizations_path(redirect_url:)) do |form| %>
+  <% if lookup_context.exists?(handler.to_partial_path, [], true) %>
+        <%= render partial: handler.to_partial_path, locals: { handler:, form: } %>
+  <% else %>
+    <div class="form__wrapper">
+      <%= form.all_fields %>
     </div>
+  <% end %>
+
+  <div class="form__wrapper-block flex-col-reverse md:flex-row justify-between">
+    <%= link_to authorizations_path, class: "button button__sm md:button__lg button__text-secondary" do %>
+      <%= icon "arrow-left-line", class: "fill-current" %>
+      <span><%= t("decidim.wizard_step_form.wizard_aside.back") %></span>
+    <% end %>
+    <button type="submit" class="button button__sm md:button__lg button__secondary">
+      <span><%= t("decidim.verifications.authorizations.new.authorize") %></span>
+      <%= icon "arrow-right-line", class: "fill-current" %>
+    </button>
   </div>
-</div>
+
+  <p class="prose prose-a:text-secondary">
+    <%= t("decidim.verifications.authorizations.skip_verification", link: link_to(t("decidim.verifications.authorizations.start_exploring"), cta_button_path).html_safe).html_safe %>.
+  </p>
+<% end %>

data/app/views/decidim/verifications/authorizations/renew_modal.html.erb

@@ -1,38 +1,31 @@
-<div class="reveal__header">
-  <h3 class="reveal__title">
+<div data-dialog-container>
+  <%= icon "refresh-line" %>
+  <h3 class="h3" id="dialog-title-renew-modal" tabindex="-1" data-dialog-title>
     <%= t("renew_modal.title", scope: "decidim.verifications.authorizations") %>
   </h3>
+  <div>
+    <div id="dialog-desc-renew-modal" class="verification-modal__text">
+      <p>
+        <span class="verification-modal__name"><%= t("#{authorization.name}.name", scope: "decidim.authorization_handlers") %></span>
+        <span><%= t("#{authorization.name}.explanation", scope: "decidim.authorization_handlers") %></span>
+      </p>
 
-  <button class="close-button" data-close aria-label="<%= t("renew_modal.close", scope: "decidim.verifications.authorizations") %>"
-    type="button">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-
-<div class="row">
-  <p>
-    <strong>
-      <%= t("#{authorization.name}.name", scope: "decidim.authorization_handlers") %>
-    </strong>
-    <br>
-    <span class="text-muted">
-      <%= t("#{authorization.name}.explanation", scope: "decidim.authorization_handlers") %>
-    </span>
-  </p>
-
-  <%= cell(authorization.metadata_cell, authorization) %>
+      <%= cell(authorization.metadata_cell, authorization) %>
 
-  <p>
-    <%= t("renew_modal.info_renew", scope: "decidim.verifications.authorizations") %>
-  </p>
+      <p>
+        <%= t("renew_modal.info_renew", scope: "decidim.verifications.authorizations") %>
+      </p>
+    </div>
+  </div>
 </div>
 
-<div class="row">
-  <div class="column flex-center">
-    <button class="clear button secondary expanded" data-close type="button">
-      <%= t("renew_modal.cancel", scope: "decidim.verifications.authorizations") %>
-    </button>
+<div data-dialog-actions>
+  <button class="button button__sm md:button__lg button__transparent-secondary" data-dialog-close="renew-modal">
+    <%= t("renew_modal.cancel", scope: "decidim.verifications.authorizations") %>
+  </button>
 
-    <%= link_to t("renew_modal.continue", scope: "decidim.verifications.authorizations"), authorization_method(authorization).renew_path, class: "button expanded" %>
-  </div>
+  <%= link_to authorization_method(authorization).renew_path, class: "button button__sm md:button__lg button__secondary" do %>
+    <span><%= t("renew_modal.continue", scope: "decidim.verifications.authorizations") %></span>
+    <%= icon "arrow-right-line", class: "fill-current" %>
+  <% end %>
 </div>

data/app/views/decidim/verifications/csv_census/admin/census/index.html.erb

@@ -1,44 +1,59 @@
 <% add_decidim_page_title(t("admin.index.title", scope: "decidim.verifications.csv_census")) %>
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
-      <%= t("admin.index.title", scope: "decidim.verifications.csv_census") %>
-    </h2>
-  </div>
-  <div class="card-section">
-    <% if @status.count > 0 %>
-      <p><%= t("decidim.verifications.csv_census.admin.index.data", count: @status.count,
-        due_date: l(@status.last_import_at, format: :long)) %>
-      </p>
-      <%= link_to t("decidim.verifications.csv_census.admin.destroy.title"),
-        destroy_all_census_path,
-        method: :delete,
-        class: "button alert",
-        data: { confirm: t("decidim.verifications.csv_census.admin.destroy.confirm") } %>
-      <% else %>
-        <p><%= t("admin.index.empty", scope: "decidim.verifications.csv_census") %></p>
-    <% end %>
-  </div>
+
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= t("admin.index.title", scope: "decidim.verifications.csv_census") %>
+  </h2>
 </div>
 
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
-      <%= t("admin.new.title", scope: "decidim.verifications.csv_census") %>
-    </h2>
-  </div>
-  <div class="card-section">
-    <p><%= t("decidim.verifications.csv_census.admin.new.info") %></p>
-    <pre class="code-block">
-    user@example.org
-    user2@example.org
-    ...
-    ...
-    </pre>
-    <%= decidim_form_for @form, url: census_path, multipart: true do |form| %>
-      <%= label_tag :file, t("admin.new.file", scope: "decidim.verifications.csv_census") %>
-      <%= form.file_field :file %>
-      <%= submit_tag t("admin.new.submit", scope: "decidim.verifications.csv_census"), class: "button" %>
-    <% end %>
+<div class="item__edit item__edit-1col">
+  <div class="item__edit-form">
+    <div class="form__wrapper">
+      <div class="card">
+        <div class="card-divider"></div>
+        <div class="card-section">
+
+        <% if @status.count > 0 %>
+          <div class="row column">
+            <p><%= t("decidim.verifications.csv_census.admin.index.data", count: @status.count,
+                                                                          due_date: l(@status.last_import_at, format: :long)) %>
+            </p>
+            <%= link_to t("decidim.verifications.csv_census.admin.destroy.title"),
+                        destroy_all_census_path,
+                        method: :delete,
+                        class: "button button__sm button__secondary alert",
+                        data: { confirm: t("decidim.verifications.csv_census.admin.destroy.confirm") } %>
+          </div>
+        <% else %>
+          <p class="row column"><%= t("admin.index.empty", scope: "decidim.verifications.csv_census") %></p>
+        <% end %>
+        </div>
+
+        <div class="card-divider">
+          <h2 class="card-title">
+            <%= t("admin.new.title", scope: "decidim.verifications.csv_census") %>
+          </h2>
+        </div>
+        <div class="card-section">
+          <div class="row column">
+            <p><%= t("decidim.verifications.csv_census.admin.new.info") %></p>
+            <pre class="code-block"><%= t("decidim.verifications.csv_census.admin.new.example") %></pre>
+          </div>
+
+          <div class="row column">
+            <%= decidim_form_for @form, url: census_path, multipart: true do |form| %>
+              <%= label_tag :file, t("admin.new.file", scope: "decidim.verifications.csv_census") %>
+              <%= form.file_field :file %>
+
+              <div class="item__edit-sticky">
+                <div class="item__edit-sticky-container">
+                  <%= submit_tag t("admin.new.submit", scope: "decidim.verifications.csv_census"), class: "button button__sm button__secondary" %>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

data/app/views/decidim/verifications/csv_census/admin/census/instructions.html.erb

@@ -1,6 +1,7 @@
+<% add_decidim_page_title(t("admin.instructions.title", scope: "decidim.verifications.csv_census") ) %>
 <div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
+  <div class="item_show__header">
+    <h2 class="item_show__header-title">
       <%= t("admin.instructions.title", scope: "decidim.verifications.csv_census") %>
     </h2>
   </div>